DOM在整个网页开发中都是很关键的，它是可用于检索网页内任意元素或内容的索引目录。利用DOM提供的接口可以操作页面中的元素，还可以添加、删除以及修改元素的属性、样式、内容等。
1. 操作元素样式
虽然传统的CSS样式表可以实现对元素的修饰，但如果可以任意操作元素现有的样式，或者为元素添加新的样式，Web页面就会变得灵活多变。为此，jQuery提供了一些操作元素样式的方法。
1.1 操作样式属性
1.获取样式属性值
获取样式属性： 把需要获取的样式作为属性名传递到css()方法中，即样式值。
获取多个属性： $(selector).css([‘property1’, ‘property2’…])。
获取单个属性： $(selector).css(‘property’)。
原理：
- 以数组的形式传入css()方法中；
- 返回的结果是对象的属性名和属性值；
<div style="color: red;font-size:50px;font-family:'楷体';"> 越努力，越幸运 </div> <script> //获取多个属性的值 var obj = $('div').css(['color', 'font-size', 'font-family']); //在控制台查看obj console.log(obj); </script>
2.设置样式属性值
设置样式属性： 把需要设置的样式作为参数值传递到css()方法中，即样式值。
设置多个样式属性： $(selector).css({‘property1’: ‘value’, ‘property2’: ‘value’…})；
设置单个样式属性： $(selector).css(‘property’, ‘value’)；
原理：
- css()方法中传入一个对象，该对象中包含多个键值对；
- 每个键值对都是元素样式属性名以及对应的属性值；
<input id="btn" type="button" value="设置样式"> <div></div> <script> $('#btn').click(function () { $('div').css({ backgroundColor: 'pink', width: '150px', height: '150px', 'border-radius': '50%' }) }); </script>
3.通过函数设置样式属性值
函数设置样式属性： 每个样式属性对应的value值还可以替换为函数形式。
<!--语法--> <script> //设置单个属性 /*index ——— 元素的索引值从0开始 value ——— 元素样式属性的当前值 newValue ——— 函数的返回值 */ $(selector).css('property', function (index, value) { return nweValue; }); //设置多个属性 $(selector).css({ 'property1': function (index, value2) { return newValue; }, 'property2': function (index, value2) { return newValue; } }); </script> <!--示例--> <script> //将div的宽度修改为原div宽度的2倍。 $('div').css('width',function(index,value){ return parseFloat(value)*2+'px'; }); //将第4个div的宽度修改为原div宽度的2倍 $('div').css('width',function(index,value){ if(index==3){ return parseFloat(value)*2+'px'; } }) </script>
<input id="btn" type="button" value="设置样式"> <div></div> <div></div> <script> $('div').css({ backgroundColor: 'pink', width: '100px', height: '50px', 'border-radius': '50%' }); //在原有样式的基础上，为div元素新样式 $('#btn').click(function () { $('div').css({ width: function (index, value) { return parseFloat(value) * 2; }, height: function (index, value) { //为索引值为1的匹配元素设置高度 if (index === 1) { return parseFloat(value) * 2; } } }); }); </script>
1.2操作元素类
jQuery提供了专门的操作类的方法，包括添加类、移除类、切换类以及判断某个类是否存在等常用的方法。
| 方法 | 描述 |
|---|---|
| addClass() | 将指定的类添加到匹配元素中 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类 |
| toggleClass() | 对设置或移除被选元素的一个或多个类进行切换 |
| hasClass() | 确定是否有匹配的元素被分配了给定类 |
1.addClass()方法
<script> //添加单个类“c” $(selector).addClass('c'); //添加多个类c1、c2、c3 $(selector).addClass('c1 c2 c3'); </script>
addClass()方法： 在保留已有的样式上，再去添加新的一些样式。
添加多个类： 使用空格隔开，调用addClass()方法后，元素将具备这三个类定义的样式。
2.removeClass()方法
在网页开发中，有时需要移除一些元素已经存在的类，需要用removeClass()方法 。
removeClass()的参数：
- 是可选的，不传递参数时，会移除当前元素的所有类名。
- 一次移除指定的多个类时，需要使用空格隔开。
<script> //移除所有类 $(selector).remove(); //移除单个类 $(selector).remove('c1'); //移除多个类 $(selector).remove('c1 c2 c3'); </script>
<div></div> <script> var div = $('div'); //添加单个类 div.addClass('c1'); //输出结果：<div class='c1'></div> console.log(div[0].outerHTML); //添加多个类 div.addClass('c2 c3'); //输出结果：<div class='c1 c2 c3'></div> console.log(div[0].outerHTML); //移除单个类 div.remove('c1'); //输出结果：<div class='c2 c3'></div> console.log(div[0].outerHTML); //移除所有类 div.remove(); //输出结果：<div class=''></div> console.log(div[0].outerHTML); </script>
注意：
css()方法与addClass()、removeClass()方法虽然都可以改变元素的样式，但适用的场景不同。建议使用addClass()、removeClass()对类进行操作，而css()方法适合CSS样式值不固定的情况。例如，为元素随机生成背景色。
3.toggleClass()方法
toggleClass()方法： 在网页开发中，当用户在多个标签中，选择一个标签时，会增加特定的样式，否则，取消该样式。
- $(selector).toggleClass(‘c’)，参数c表示一个自定义的类。
- 指定元素中若没有c，则添加，否则执行移出操作。
- addClass()和removeClass()方法虽然可以实现，但不够简便。
- 直接对元素的类进行切换。
<div></div> <script> /*匹配到的元素对指定的类名进行切换无则加， 否则去掉。outerHTML用于获取元素内的html 内容和文本。 */ var div = $('div'); //第一次调用 div.toggleClass('c'); //输出结果：<div class='c'></div> console.log(div[0].outerHTML); //第二次调用 div.toggleClass('c'); //输出结果：<div class=''></div> console.log(div[0].outerHTML); //第三次调用 div.toggleClass('c'); //输出结果：<div class='c'></div> console.log(div[0].outerHTML); </script>
toggleClass()方法： 还支持使用第2个参数手动控制类的添加或移除。
参数： 是一个布尔值，若值为true表示添加类，值为false表示移除类。
<script> //添加类 $(selector).toggleClass('c',true); //移除类 $(selector).toggleClass('c',false); //条件返回值 $(selector).toggleClass('c',条件判断); </script>
<script> //案例演示：还可以通过条件判断的返回值情况设置 var count=0; $('div').click(function(){ $(this).toggleClass('c',++count%3 === 0); }); </script>
扩展：在操作元素类的方法中使用函数
jQuery中用于操作元素类的addClass()、removeClass()、toggleClass()方法，都支持使用函数作为参数，通过函数的返回值来操作元素的类
<script> //addClass()方法 $('div').addClass(function (index, value) { console.log('元素的索引：' + index); console.log('元素原来的class值；' + value); return 'item-' + index;//将返回值作为要添加的class }); //removeClass()方法 $('div').removeClass(function (index, value) { return 'item-' + index;//将返回值作为要移除的class }); //toggleClass()方法 $('div').toggleClass(function (index, value) { return 'item-' + index;//将返回值作为要移除的class }); </script>
<!--示例--> <style> .c1 { color: blue; } .c2 { color: red; } .c3 { color: yellow; } </style> <body> <div>How</div> <div>are</div> <div>you?</div> <script> $('div').toggleClass(function (index, value) { if (index === 0) { return 'c3'; } else if (index === 1) { return 'c2'; } else if (index === 2) { return 'c1'; } }); </script> </body>
4.hasClass()方法
在网页开发过程中，有时需要判断元素的某个类是否存在，然后执行某些操作。
语法： $(selector).hasClass(‘c’)；
分析： 必选参数c用于检测该类名是否存在，存在时返回true，否则返回false。
<style> .c { color: pink; } </style> <body> <div>test</div> <script> $('div').click(function () { if ($(this).hasClass('c')) { $(this).removeClass('c'); } else { $(this).addClass('c'); } }); </script> </body>
1.3操作元素的尺寸
元素尺寸的操作是Web开发中常用的功能之一，例如登录框的拖拽特效、图片的放大等功能。
| 方法 | 描述 |
|---|---|
| width() | 获取或设置元素的宽度 |
| height() | 获取或设置元素的宽度 |
| innerWidth() | 获取元素的宽度(包括内边距) |
| innerHeight() | 获取元素的高度(包括内边距) |
| outerWidth() | 获取元素的宽度(包括内边距和边框) |
| outerHeight() | 获取元素的高度(包括内边距和边框) |
| outerWidth(true) | 获取元素的宽度(包括内边距、边框和外边距) |
| outerHeight(true) | 获取元素的高度(包括内边距、边框和外边距) |
1.操作元素的宽度
width()方法： 包括设置元素的宽度和获取元素的宽度。
<script> $(selector).width(); //获取宽度 $(selector).width('30px'); //设置宽度 </script>
注意：
在设置宽度时，参数的引号可以省略。但是如果不添加引号，里面传递的只能是数字，不能包含单位，如果包含单位就会出现语法错误。
height()方法： 包括设置元素的高度和获取元素的高度。
<script> $(selector).height(); //获取高度 $(selector).height('30px'); //设置高度 </script>
<style> div { width: 100px; height: 100px; background: darkorange; border-radius: 25%; color: aliceblue; text-align: center; padding: 10px; line-height: 25px; } </style> <body> <input type="button" value="按钮"> <div>只要努力，人生的长度和宽度都可以改变</div> <script> //使用width()方法和height()方法在原div元素宽高的基础上增加了50像素。 $('input').click(function () { $('div').width($('div').width() + 50); $('div').height($('div').height() + 50); }); </script> </body>
2.获取元素的内部宽度和高度
jQuery中innerWidth()和innerHeight()方法也是用于获取元素的宽度和高度。
与width()方法和height()方法不同的是： 这两个方法包括元素的内边距。
需要注意：width()和height()不传递参数时，表示获取元素宽度和高度；传递参数时设置值，参数的引号可以省略，如果省略只能传递数字不能包含单位，否则会出现语法错误。
3.获取元素外部的宽度和高度
outerWidth()和outerHeight()方法也可获取元素的宽度和高度。
与width()方法和height()方法不同的是：
- 只是除了元素本身的宽高值，还包括内边距和边框值。
- 若在调用方法时传递参数true，获取到的结果中还会包含元素的外边距。
<style> body { border: 1px solid #ccc; } div { width: 100px; height: 100px; background: red; padding: 10px; border: 5px solid pink; margin: 20px; } </style> <body> <input type="button" value="获取元素的高度"> <div>人人都是主角，过着属于自己楚门的世界</div> <script> $('input').click(function () { console.log($('div').width()); console.log($('div').height()); console.log($('div').innerWidth()); console.log($('div').innerHeight()); console.log($('div').outerWidth()); console.log($('div').outerHeight()); console.log($('div').outerWidth(true)); console.log($('div').outerHeight(true)); }); </script> </body>
div元素的外边距margin： 上下左右都是20像素。
带有参数true的outerWidth()方法和outerHeight()方法：
- 与不带有参数的这两个方法取得的外部元素宽高值，相差了40像素；
- 这40像素就是div元素的外边距。
1.4.操作元素的位置
jQuery提供了专门的操作元素位置的方法，可以操作元素在页面中的位置以及相对滚动条的位置等，包括offset()、position()、scrollLeft()等方法。
| 方法 | 描述 |
|---|---|
| offset() | 获取匹配元素的第一个元素的坐标位置，或设置每个元素的坐标 |
| offsetParent() | 获取距离匹配元素最近的含有定位信息的元素 |
| position() | 获取匹配元素相对父元素的偏移 |
| scrollLeft() | 获取或设置匹配元素相对滚动条左侧的偏移 |
| scrollTop() | 获取或设置匹配元素相对滚动条顶部的偏移 |
1.offset()方法
offset()可以获取匹配元素的第一个元素的坐标位置。若元素的样式属性display设置为none，则获取到的值为0.
语法：
$(selector).offset();
获取和设置div元素的位置：
<style> div { width: 200px; height: 100px; background: blue; } </style> <body> <div></div> <script> //获取div的top和left值 console.log($('div').offset()); console.log($('div').offset().left); console.log($('div').offset().top); //设置div的left和top值 //向下移动100像素并向右移动200像素 $('div').offset({ left: 200, top: 100 }); //向右移动200像素 $('div').offset({ left: 200 }); //再次获取div的top和left值 console.log($('div').offset().left); console.log($('div').offset().top); </script> </body>
2.offsetParent()方法
offsetParent()方法回距指定元素最近的“被定位”的祖辈元素对象。“被定位”是指元素的样式属性中position属性的值为relative、absolute或fixed，不包括position属性的默认值static。
语法：
$(selector).offsetparent()；
<body> <button>设置背景颜色</button> <div style="border:1px solid black; width:70%; position:absolute; left:10px; top:50px"> <div style="border:1px solid black; margin:50px; background-color:yellow"> <p>点击按钮这一段的设置第一个定位的父元素的背景颜色。</p> </div> </div> <script> $('button').click( function () { $('p').offsetParent().css('backgroundColor', 'green') } ) </script> </body>
3.scrollLeft()和scrolTop()方法
scrollLeft()和scrolTop()方法可以获取或者设置指定元素相对滚动条左侧和顶部的偏移值。
//获取元素相对左侧的偏移值 $(selector).scrollLeft(); //获取元素相对顶部的偏移值 $(selector).scrollTop();
<style> div { background: green; border: 3px solid #999; width: 200px; height: 100px; overflow: auto; } p { background: pink; margin: 10px; width: 1000px; height: 1000px; } </style> <body> <input type="button" value="按钮"> <div> <p>行动好过语言</p> </div> <script> $('input').click(function () { $('div').scrollLeft(500); $('div').scrollTop(50); }); </script> </body>
2.操作元素属性
元素属性是指当前元素节点的属性，
常用的元素属性：
- 有id、value、type；
- 以及用于标识元素状态的checked、disabled等；
2.1 获取和设置元素的属性值
1.获取元素属性值
获取元素属性值： 即把需要获取的属性名传递到attr()方法中。
语法：
$(selector).attr('property')
语法分析：
- property可以是元素的样式属性，如style等；
- 也可以是其他属性，如value等；
- 利用attr()方法可以操作元素的任意属性；
2.设置元素属性值
设置元素属性即通过给元素设置属性名和属性值来改变元素。
设置多个属性：
$(selector).attr({‘property1’: ‘value1’, ‘property2’: ‘value2’, …… })；
设置单个属性：
$(selector).attr('property', 'value');
语法分析：
- property表示属性的名称；
- value表示属性的值；
- 具体用法和前面学习的css()方法相似；
<!--attr()方法设置和获取元素的属性的使用。--> <body> <input type="button" value="按钮一" class="btn1"> <input type="button" value="按钮二" class="btn2"> <script> $('.btn1').click(function () { console.log($('.btn2').attr('type')); $('.btn2').attr('type', 'checkbox'); }) </script> </body>
<!-- 将class值等于btn2的type属性设置为text； 将value属性的默认值设置为“我是文本框” --> <body> <input type="button" value="按钮一" class="btn1"> <input type="button" value="按钮二" class="btn2"> <script> $('.btn1').click(function () { $('.btn2').attr({ 'type': 'text', 'value': '我是文本框' }); }) </script> </body>
2.2 设置元素的状态属性
jQuery中attr()方法的参数为元素状态属性时，可以用于设置元素状态；
举例： 复选框是否选中的状态，文本框或者提交按钮的启用与禁用状态等。
| 属性 | 描述 |
|---|---|
| checked | 获取或设置表单元素的选中状态 |
| disabled | 获取或设置表单元素的禁用状态 |
| selected | 获取或设置下拉框的选中状态 |
<body> <!-- 第1个没有定义checked属性，默认未选中； 其余两个默认都是选中的状态； --> <input type="checkbox"> <input type="checkbox" checked=""> <input type="checkbox" checked="checked"> <script> //获取表单元素的选中状态 /* 第1个input控件会返回undefined， 其余两个input控件则返回checked。 */ $('input:eq(0)').attr('checked'); $('input:eq(1)').attr('checked'); $('input:eq(2)').attr('checked'); //设置表单元素的选中状态 /* 无论将checked属性设置值为checked还是true， 都可以设置元素为选中状态。 */ $('input').attr('checked', 'checked'); $('input').attr('checked', 'true'); </script> </body>
3.操作元素内容
jQuery中还提供了一些方法，可以操作元素内容。
举例： 设置或者返回元素的文本值、表单的字段值等。
3.1 获取和设置元素的HTML内容和文本
html()和text()方法都可以用来为元素设置文本内容。
区别： html()方法操作的元素内容包含标签，text()方法操作的内容不含标签。
| 方法 | 参数 | 返回值 |
|---|---|---|
| html() | 无参数 | 用于获取元素的HTML内容 |
| 字符串 | 用于设置元素的HTML内容 | |
| text() | 无参数 | 用于获取元素的文本内容 |
| 字符串 | 用于设置元素的文本内容 |
<body> <!-- 分别使用html()方法和text()方法为p元素设置文本内容。 --> <p id="p1"></p> <p id="p2"></p> <hr> <p id="p3"></p> <p id="p4"></p> <script> //没有带元素 $("#p1").html('hello world!'); $('#p2').text('hello world!'); //带元素 $("#p3").html('<h3>hello world!</h3>'); $('#p4').text('<h3>hello world!</h3>'); </script> </body>
3.2获取和设置表单的值
val()方法：
- 可以获取和设置表单元素的值；
- 相当于JavaScript中input控件对象value属性的作用；
- value表示表单元素的value属性的值，selector一般是指表单元素。
//获取表单元素的值 $(selector).val(); //设置表单元素的值 $(selector).val(value);
<body> <input type="text" class="txt"> <input type="button" value="按钮" class="btn"> <div></div> <br> <hr><br> <input type="text" class="txt1"> <input type="button" value="按钮" class="btn1"> <div></div> <script> //text()方法 $('.btn').click(function () { $('div:eq(0)').text($('.txt').val()); $('.txt').val(''); }) //html()方法 $('.btn1').click(function () { $('div:eq(1)').html($('.txt1').val()); $('.txt1').val(''); }) </script> </body>
4 操作DOM节点
如果需要更灵活的操作网页上的动态效果很多时候需要直接操作DOM节点。
比如： 如在网页中的某个位置动态添加a链接。
4.1创建节点
jQuery提供了动态创建节点的方法，创建节点后返回jQuery对象。
1. $()函数
$()函数在jQuery中有很多作用。$()实际可以成为工厂函数，通过此函数可以返回选择器对象，能够产生对象。
语法：
$(‘HTML代码’);
举例：
- 将DOM对象转换成为jQuery对象；
- 将HTML代码转换成DOM对象，并将其包装成jQuery对象；
//例如：将obj对象传入append()方法中，便可以在DOM中插入节点。 var p =$('<p>这是一个段落</p>'); $('body').append(p);
2. html()方法
html()方法可用来设置或返回所选元素的HTML内容。
html(‘HTML代码’) ： 可以在DOM中动态创建节点。
其作用： 与JavaScript中的 innerHTML属性类似。
语法：
$(selector).html('HTML代码');
//示例 $('body').html('<p>这是一个段落</p>');
<style> div { width: 200px; height: 100px; background-color: yellow; } </style> <body> <!-- 案例演示：jQuery中创建节点的两种方式$()函数和html()方法。 --> <input id="btn" type="button" value="创建节点"> <div id="dv"></div> <script> $('#btn').click(function () { $('#dv').html('<a href="#">腾讯</a><br/>'); var aObj = $('<a href="#">阿里</a><br/>'); $('#dv').append(aObj); }); </script> </body>
4. 2 插入节点
jQuery提供了一些方法用于将创建好的节点插入到DOM的不同位置。
例如： 前面用过的append()方法。
| 方法 | 描述 |
|---|---|
| append(ele) | 用于在匹配元素的最后一个子元素后插入ele，插入ele作为匹配元素的最后一个子元素 |
| prepend(ele) | 用于在匹配元素的第一个子元素前面插入ele，插入的ele作为匹配元素的第一个子元素 |
| appendTo(ele) | 将匹配元素插入到ele中，该匹配元素作为ele的最后一个子元素 |
| prependTo(ele) | 将匹配元素插入到ele中，该匹配元素作为ele的第一个子元素 |
| before(ele) | 在匹配元素前面插入ele元素 |
| insertBefore(ele) | 将匹配元素插入到ele之前 |
| after(ele) | 在匹配元素后面插入ele元素 |
| insertAfter(ele) | 将匹配元素插入到ele之后 |
<!--HTML代码--> <nav> <ul> <li>序列号1</li> <li>序列号2</li> <li>序列号3</li> </ul> </nav>
1.append()和appendTo()方法
-
append()和appendTo()方法区别在于这两个方法的调用对象不同
-
不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
//append()方法 var $p ='<p>插入的节点</p>'; //将新创建的p节点插入到nav容器的内部底部 $('nav').append($p);
//appendTo()方法 var $p ='<p>插入的节点</p>'; //将新创建的p节点插入到nav容器的内部底部 $($p).appendTo('nav');
<!--append()和appendTo()方法运行结果--> <nav> <ul> <li>序列号1</li> <li>序列号2</li> <li>序列号3</li> </ul> <p>插入的节点</p> </nav>
2.prepend()和prependTo()方法
- prepend()和prependTo()方法区别在于这两个方法的调用对象不同
//prepend()方法 var $p = '<p>插入的节点</p>'; //将新创建的p节点插入到nav容器的内部顶部 $('nav').prepend($p);
//prependTo()方法 var $p = '<p>插入的节点</p>'; //将新创建的p节点插入到nav容器的内部顶部 $($p).prependTo('nav');
<!--prepend()和prependTo()方法运行结果--> <nav> <p>插入的节点</p> <ul> <li>序列号1</li> <li>序列号2</li> <li>序列号3</li> </ul> </nav>
3.after()和insertAfter()方法
- after()和insertAfter()方法区别在于这两个方法的调用对象不同
//after()方法 var $p = '<p>插入的节点</p>'; //将新创建的p节点插入到ul元素之后 $('ul').after($p);
//insertAfter()方法 var $p = '<p>插入的节点</p>'; //将新创建的p节点插入到ul元素之后 $($p).insertAfter('ul');
<!--after()和insertAfter()方法运行结果--> <nav> <ul> <li>序列号1</li> <li>序列号2</li> <li>序列号3</li> </ul> <p>插入的节点</p> </nav>
4.before()和insertBefore()方法
- before()和insertBefore()区别在于这两个方法的调用对象不同
//before()方法 var $p = '<p>插入的节点</p>'; //将新创建的p节点插入到ul元素之前 $('ul').before($p);
//insertBefore()方法 var $p = '<p>插入的节点</p>'; //将新创建的p节点插入到ul元素之前 $($p).insertBefore('ul');
<!--before()和insertBefore()方法运行结果--> <nav> <p>插入的节点</p> <ul> <li>序列号1</li> <li>序列号2</li> <li>序列号3</li> </ul> </nav>
4.3 删除节点
在网页开发中，有时需要动态的删除某个节点。
1.remove()方法
| 方法 | 描述 |
|---|---|
| remove() | 从DOM中删除所有匹配的元素 |
| detach() | 从DOM中删除所有匹配的元素 |
| empty() | 删除匹配的元素集合中所有的子节点 |
remove()方法: 待删除元素对象调用remove()方法即可完成删除操作。
语法：
$('p').remove();
语法分析：
- $(‘p’)用于获取待删除的元素对象。
- 只会从DOM中移除匹配到的元素，但该元素还存在于jQuery对象中。
注意：
jQuery对象中不会保留元素的jQuery 数据。例如，被删除的p元素如果绑定了事件或有附加的数据等都会被移除。
2.detach()方法
detach()方法： detach()方法的使用方式与remove()基本相同。
区别：
- detach()方法不仅会保留jQuery对象中的匹配元素；
- 还会保留该元素所有绑定的事件以及附加的数据。
var obj =$(selector).detach(); //删除元素节点 $(obj).appendTo(selector); //恢复元素节点
<button id="btn1">删除段落</button> <button id="btn2">恢复段落</button> <p>今天天气不错！</p> <script> $('#btn1').click(function () { $p = $('p').detach(); }); $('#btn2').click(function () { $($p).appendTo('body') }) </script>
3.empty()方法
empty()方法： 清空元素中的所有后代节点。
与remove()和detach()方法不同： empty()方法并不是删除节点。
//清除div元素中的所有内容 $('div').empty();
<!--html页面--> <ul id="ul1"> <li><span>序列号1</span></li> <li><span>序列号2</span></li> <li><span>序列号3</span></li> </ul> <ul id="ul2"> <li><span>序列号1</span></li> <li><span>序列号2</span></li> <li><span>序列号3</span></li> </ul>
//删除序列号2列表项 $('#ul1 li:eq(1)').remove(); //删除序列号3列表项的内容 $('#ul2 li:eq(1)').empty();
4.4 复制节点
jQuery提供一个clone()方法，专门用于处理DOM节点的复制。
语法：
$(selector).clone();
语法分析：
- 参数selector可以是选择器或HTML内容；
- 调用clone()方法后会生成一个被选元素的副本；
- 该副本需要利用插入节点的方法才能显示到DOM中；
<style> div { width: 300px; height: 100px; background-color: palegoldenrod; margin-top: 20px; } </style> <body> <input type="button" value="复制节点" id="btn"> <div id="dv"> <span>星星之火可以燎原</span> </div> <div id="dv1"></div> <script> $('#btn').click(function () { //复制第一个div中的span元素生成副本 var spanObj = $('#dv>span').clone(); //设置副本的样式 spanObj.css('fontSize', '30px'); $('#dv1').append(spanObj); }) </script> </body>
4.5 替换节点
replaceWith()和replaceAll()方法： 替换元素或元素中的内容
其区别： 在于调用方法的对象以及参数设置的不同。
语法分析：
- content可以是DOM元素对象或HTML内容。
$(selector).replaceWith(content); //replaceWith()语法 $(content).replaceAll(selector); //replaceAll()语法
例如： 将p元素替换为span元素。
分析：
- replaceWith()方法的调用对象是待替换的元素对象。
- replaceAll()方法的使用正好与之相反。
$('p').replaceWith('<span>替换喽</span>');//实现方式一 $('<span>替换喽</span>').replaceAll('p');//实现方式二
<style> div { width: 200px; height: 50px; background-color: palegoldenrod; margin-top: 20px; } </style> <body> <input type="button" value="替代元素" id="btn"> <div id="dv">没有永远的朋友</div> <div id="dv1">只有永恒的利益</div> <script> $('#btn').click(function(){ $('#dv').replaceWith('<div>世界之所以美好</div>'); $('<div>主要原因是有着团结奋斗的热血青年</div>').replaceAll('#dv1'); }); </script> </body>
4.6 包裹节点
包裹节点是指在某个元素的外层添加父元素，将其“包裹”起来。
<!--HTML页面--> <ul> <li>成都</li> <li>乐山</li> <li>宜宾</li> </ul>
1.wrap()方法
wrap()方法用于为每个匹配到的元素添加父元素，将匹配元素包裹在其中。
语法：
$(selector).wrap(wrapper);
语法分析： 参数wrapper表示包裹元素的结构化标记。
$('li').wrap('<strong></strong>');
<!--wrap()方法运行结果--> <ul> <strong><li>成都</li></strong> <strong><li>乐山</li></strong> <strong><li>宜宾</li></strong> </ul>
2.wrapAll()方法
wrapAll()方法： 将所有匹配元素一起包裹起来。
语法：
$(selector).wrapAll(wrapper);
语法分析： 参数wrapper表示包裹元素的结构化标记。
$('li').wrapAll('<strong></strong>');
<!--wrapAll()方法运行结果--> <ul> <strong> <li>成都</li> <li>乐山</li> <li>宜宾</li> </strong> </ul>
3.wrapInner()方法
wrapInner()方法： 为匹配元素添加子元素并且包裹匹配元素中的所有内容。
语法：
$(selector).wrapInner(wrapper);
语法分析： 参数wrapper表示包裹元素的结构化标记。
$('li').wrapInner('<strong></strong>')
<!--wrapInner()方法运行结果--> <ul> <li><strong>成都</strong></li> <li><strong>乐山</strong></li> <li><strong>宜宾</strong></li> </ul>
4.7遍历节点
在DOM元素操作中，为ul元素下的li元素内容都为添加内容。
代码实现：
$(‘ul li’).text('测试');
代码分析：
-
我们并没有去取得所有li元素然后循环添加；
-
这种实现方式被称为“隐式迭代”。它是通过jQuery内部机制实现的；
-
一般适用于对指定的元素做相同操作的处理；
1.each()方法
在实际开发中，有些需求是“隐式迭代”所不能处理的。
例如： 为ul元素下的奇数行li元素添加内容。
解决方案： 通过jQuery提供的each()方法遍历所有元素，并进行相关的处理。
语法：
$(selector).each(function(index,element){});
语法分析：
- index表示遍历索引，索引默认从0开始；
- element表示当前元素，一般使用this关键字表示当前元素；
<body> <ul> <li>刘三</li> <li>赵四</li> <li>王小五</li> </ul> <script> //获取第2个li元素中的文本内容 $('li').each(function(index){ if(index == 1){ console.log($(this).text()); } }) </script> </body>
<style> ul li { width: 60px; height: 100px; background-color: green; list-style-type: none; float: left; margin-left: 10px; } </style> <body> <ul id="uu"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> <script> //让ul列表中的每个li元素的背景色由浅入深。 $('#uu>li').each(function (index, element) { //改变每个元素的透明度 $(element).css('opacity', (index + 1) / 10); }) </script> </body>
扩展：jQuery链式编程
利用jQuery获取DOM元素以后，可以对该元素对象进行一系列操作，并且所有操作可以通过点号“.”的形式连接在一起形成一句代码，这种类似“链条”的调用方式称之为链式编程。
- “$(‘#pic’).css(‘border’, ‘solid 1px#FF00030’)”代码执行后，会返回当前元素的jQuery对象，这个jQuery对象与$(‘#pic’)返回的结果相同，所以可以直接使用“.”调用attr()方法。
//没有使用链式 $('#pic').css("border",'1px solid red'); $('#pic').attr('alt','myPhoto'); //使用链式 $('#pic').css("border",'1px solid red').attr('alt','myPhoto');
<!--修改div元素下的第4个p元素的内容--> <body> <div> <p>0</p> <p>1</p> <p>2</p> <p>3</p> </div> <script> $('div').find('p').eq(3).html('我的索引值为3的元素') </script> </body>
注意：
jQuery之所以可以实现链式编程，就是因为每个函数或方法被调用后返回的都是jQuery对象，在jQuery对象上可以继续调用jQuery方法执行其他操作。但是链式编程的语句不宜过长，否则会造成代码难以阅读的问题。
