jQuery之DOM操作

2024年4月3日 182次阅读 来源: 庄国琳

DOM操作

本章主要讲查找元素、遍历元素、创建元素、插入元素、删除元素、替换元素、复制元素、属性操作、样式操作、HTML操作。

查找元素

  • 定位页面元素，可以直接用jQuery的选择器
html代码:
<button id='btn'>按钮</button>

JavaScript代码:
var $btn=$('#btn');
  • 获取、设置指定元素的文本内容,类似于DOM中textContent属性
html代码:
<button id='btn'>按钮</button>

JavaScript代码:
var $btn=$('#btn');
//如果不传递任何内容则为获取
$btn.text();
//如果给text()传递内容则为设置
$btn.text('新按钮');
  • 获取、设置指定元素的属性名的属性值
html代码:
<button id='btn'>按钮</button>

JavaScript代码:
var $btn=$('#btn');
/*只传递第一个参数，则为获取该元素指定属性名的属性值，
如果传递的属性名不存在该元素上，则为undefined*/
$btn.attr('id');
/*如果传递内容则为设置，第一个参数传递要设置的属性名称，
第二个参数传递要设置的属性值，如果第一个参数传递的属性名存在，则为修改属性值，
如果第一个参数传递的属性名不存在，则为添加新的属性名*/
$btn.attr('class','c1');
  • 获取父元素

parent():只能获取父级元素，并不能获取祖先元素，就算你在括号指定获取的元素，该指定元素如果不是你的父级元素，同样无法得到，如果括号不传递任何参数，那它自动获取父级

html代码：
<div class="container">
    <ul>
        <li id="bj">北京</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</div>
JavaScript代码：
var $bj=$('#bj');
console.log($bj.parent());

parents():可以获取父级以及祖先元素，如果在括号指定元素，它会返回符合指定元素的父级元素以及祖先元素，如果括号里不传递任何参数，它会返回该元素的所有父级元素以及祖先元素

html代码：
<div class="container">
    <ul>
        <li id="bj">北京</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</div>
JavaScript代码：
var $bj=$('#bj');
console.log($bj.parents());

closest():如果括号不传递任何参数，它无法找到任何内容，括号传递指定参数，它会返回符合括号指定的内容以及距离改元素最近的父级或者祖先元素

html代码：
<div class="container">
    <ul>
        <li id="bj">北京</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</div>
JavaScript代码：
var $bj=$('#bj');
console.log($bj.closest('div'));
  • 获取子元素

children():获取该元素的所有子级元素，但是不包括后代元素

html代码：
<div class="container">
    <ul>
        <li id="bj">北京
            <ul>
                <li>东城区</li>
                <li>西城区</li>
                <li>朝阳区</li>
            </ul>
        </li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</div>

JavaScript代码：
    var $ul=$('ul:first');
    console.log($ul.children());

find():括号里传递参数，指的是获取该元素指定的元素，包括子级以及后代元素

HTML代码：
<div class="container">
    <ul>
        <li id="bj">北京
            <ul>
                <li>东城区</li>
                <li>西城区</li>
                <li>朝阳区</li>
            </ul>
        </li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</div>

JavaScript代码：
    var $ul=$('ul:first');
    console.log($ul.find('li'));
  • 获取兄弟元素

next():获取该元素的下一个相邻兄弟元素

html代码：
<div class="container">
    <ul>
        <li>南京</li>
        <li>北京</li>
        <li id="tj">天津</li>
        <li>重庆</li>
        <li>长春</li>
    </ul>
</div>

JavaScript代码：
    var $tj=$('#tj');
    console.log($tj.next());

prev():获取该元素的上一个相邻兄弟元素

html代码：
<div class="container">
    <ul>
        <li>南京</li>
        <li>北京</li>
        <li id="tj">天津</li>
        <li>重庆</li>
        <li>长春</li>
    </ul>
</div>

JavaScript代码：
    var $tj=$('#tj');
    console.log($tj.prev());

创建元素

html代码：
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>

JavaScript代码：
//创建元素
var $li=$('<li></li>');
//设置文本内容
$li.text('深圳');
//设置属性
$li.attr('id','l1');

//也可以直接用简写方式
var $li=$('<li class='l1'>深圳</li>');
//然后向页面添加元素
$('ul').append($li);
//插入指定元素的所有子元素列表的最前面
$(ul).prepend($li);
//插入指定元素的所有子元素列表的外部最前面
$('ul').before($li);
//插入指定元素的所有子元素列表的外部最后面
$('ul').after($li);

删除元素

  • remove():那个元素调用，就哪个元素被删除
html代码:
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>

JavaScript代码：
$('#bj').remove();
  • empty():元素调用此方法，可以将该元素所有的子级以及后代全部清除
html代码:
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>

JavaScript代码：
$('#city').empty();

替换元素

  • replaceWith():用被替换的元素调用此方法，参数传入替换的元素
html代码：
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>

JavaScript代码：
    $('#bj').replaceWith($('<li id="cc">深圳</li>'));
  • replaceAll():用替换元素调用此方法，括号里面传入被替换的元素
html代码：
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>

JavaScript代码：
    $('<li class="bd">保定</li>').replaceAll($('#bj'));

复制元素

  • clone()方法:参数传递的是布尔值，如果为true：不但要复制元素，属性文本，还会将该元素绑定的元素一起复制过来，可以说是复制一切；如果为false：那么只复制元素，文本，属性，但是不会复制该元素绑定的元素
html代码：
<button id="btn">按钮</button>

JavaScript代码：  

var $btn=$('#btn');
$btn.click(function(){
    console.log('this is clone');
});

var $copy=$btn.clone(true);
$('body').append($copy);

属性操作

  • removeAttr():类似于DOM中的removeAttribute(),元素调用此方法删除自身存在的属性，括号里可以接收传入指定要删除的属性名称

样式操作

  • attr():第一个参数是属性名，第二个参数是属性值，如果在括号里只传递一个参数，那将是获取属性名的值，如果两个参数都传入，那就是为这个元素添加新的属性名和属性值，如果该元素存在同样的属性名，那么将替换新的
html代码:
<button>按钮</button>

JavaScript代码:
$('button').attr('id','btn');
  • addClass():用来操作class属性的，为该元素添加新的class
html代码:
<button class='btn'>按钮</button>

JavaScript代码:
$('button').addClass('btn1');
  • removeClass():同样用来操作class属性的，删除该元素已存在的class属性，括号传入class属性的值
html代码:
<button class='btn'>按钮</button>

JavaScript代码:
$('button').removeClass('btn');
  • toggleClass():也是操作class属性的，用于两个class属性间的切换，参数传入指定的class属性的值，如果该元素存在指定的class，则删除，如果不存在则添加
  • hasClass()：同样操作class属性的，括号里同样传入指定class属性的值，用于判断该元素是否存在此class属性
html代码:
<button class='btn'>按钮</button>

JavaScript代码:
$('button').hasClass('btn');//true
  • css():操作css样式，给指定元素添加指定的样式属性值
html代码:
<button class='btn'>按钮</button>

JavaScript代码:
//可以用这种方式来添加css属性
$('button').css('width','600px');

//也可以用对象形式来批量添加css属性
$('button').css({
    width:'600px',
    height:'600px'
});
    原文作者：庄国琳
    原文地址: https://segmentfault.com/a/1190000016340631
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞