《JQuery实战进阶：“web技能”》课件-第三章 jQuery中的DOM操作

JQuery应用开发——jQuery中的DOM操作目录3.1操作元素样式3.2操作元素类3.3案例-高亮显示图片3.4操作元素属性3.5案例-全选不选案例3.6操作元素内容3.7创建节点3.8插入节点3.9删除节点3.10案例-表格的添加删除3.11复制、替换节点3.12案例-滚动新闻3.13包裹节点3.14遍历节点JQuery应用开发——操作元素样式DCAB操作DOM元素样式学习目标E操作DOM元素属性操作DOM元素内容操作DOM节点操作DOM元素类01获取样式属性设置样式属性目录CONTENT02通过函数设置样式属性值03获取样式属性值设置样式属性值通过函数设置样式属性值jQuery提供了专门操作元素样式属性的方法-css()。利用该方法可以很容易的获取或修改style样式里的属性。操作元素样式获取单个样式属性：

语法：$(selector).css(‘property’)；

返回结果是字符串形式的属性值如：获取段落的字体颜色$(‘p’).css(‘color’)1.获取样式属性值

01获取样式属性获取多个样式属性：语法：

$(selector).css([‘property1’,‘property2’...])；

返回的结果是对象形式的属性名和属性值如：$(‘p’).css([‘color‘,’fontSize’,border’])1.获取样式属性值

01获取样式属性小例子：操作元素样式运行效果jQuery中通过css()方法设置样式属性。设置单个样式属性：

语法：$(selector).css(‘property’,‘value’)；

如：为p元素设置红色边框

$(‘p’).css(‘border’,’solidred1px’)2.设置样式属性

02设置样式属性jQuery中通过css()方法设置样式属性。设置多个样式属性：

语法：$(selector).css({‘property1’:‘value’,‘property2’:‘value’...})；css()方法中传入一个对象，该对象中包含多个键值对；每个键值对都是元素样式属性名以及对应的属性值；如：设置p元素加粗倾斜带下滑线2.设置样式属性

02设置样式属性$(selector).css('property',function(index,value){returnnewValue;})；函数的返回值元素样式属性的当前值3.通过函数设置样式属性：每个样式属性对应的值还可以为函数形式。元素的索引值从0开始（1）设置单个属性03通过函数设置样式属性通过获取元素的value属性，可以在原有的样式基础上改变样式。举例：将div的宽度修改为原div宽度的2倍。示例$('div').css(‘width’,function(index,value){returnparseFloat(value)*2+'px';);3.通过函数设置样式属性值03通过函数设置样式属性示例$('div').css(‘width’,function(index,value){if(index===1){returnparseFloat(value)*2;});通过获取元素的index属性，根据index的值来判断改变哪一个元素的样式。举例：将第2个div的宽度修改为原div宽度的2倍。3.通过函数设置样式属性值03通过函数设置样式属性例：单击按钮，使所有div宽度变为原来的2倍，第二个div的高度变为原来的2倍通过函数设置样式的属性值

$('#bt').click(function(){ $('div').css({width:function(index,value){returnparseFloat(value)*2;},height:function(index,value){

if(index===1){returnparseFloat(value)*2;}}

}) })03通过函数设置样式属性小例子：设置字体样式02设置样式属性隐式迭代：设置样式时，会给jQuery内部的所有对象都设置相同的值；获取样式时，只会返回第一个元素对应的值。02设置样式属性注意总结获取元素样式属性01设置元素样式属性02操作元素样式属性的方法-css()对策一课后练习要求：单击圆形方形按钮可以改变图片的形状单击变大变小按钮，使图片在原来的基础上宽度，高度都增加100px；JQuery应用开发——操作元素类01添加类-addClass()移除类-removeClass()目录CONTENT02切换类-toggleClass()03判断类-hasClass()04操作元素类jQuery提供了专门的操作类的方法，包括添加类、移除类、切换类以及判断某个类是否存在等常用的方法。方法描述addClass()将指定的类添加到匹配元素中removeClass()从所有匹配的元素中删除全部或者指定的类toggleClass()对设置或移除被选元素的一个或多个类进行切换hasClass()确定是否有匹配的元素被分配了给定类01添加类$(selector).addClass('c');$(selector).addClass('c1c2c3'); 添加单个类“c”添加多个类c1，c2，c3addClass()方法：在保留已有的样式上，再去添加新的一些样式。添加多个类：使用空格隔开，调用addClass()方法后，元素将具备多个类定义的样式。1.addClass()方法02移除类2.removeClass()方法removeClass()的参数：

是可选的

参数值只有一个时，移除指定的类

参数值有多个时，需要使用空格隔开，表示一次移除指定的多个类

没有参数时，会移除当前元素的所有类。02移除类$(selector).removeClass();$(selector).removeClass('c1');$(selector).removeClass('c1c2c3'); 移除单个类移除多个类移除所有类2.removeClass()方法示例02移除类注意css()方法与addClass()、removeClass()方法虽然都可以改变元素的样式，但适用的场景不同。建议使用addClass()、removeClass()对类进行操作，而css()方法适合CSS样式值不固定的情况。2.removeClass()方法03切换类3.toggleClass()方法说明：$(selector).toggleClass(‘c’)，参数c表示一个自定义的类。指定元素中若没有c，则添加，否则执行移出操作。03切换类$(selector).toggleClass('c',true);$(selector).toggleClass('c',false);$(selector).toggleClass(‘c’,条件判断);添加类移除类条件返回值toggleClass()方法：还支持使用第2个参数手动控制类的添加或移除。参数：是一个布尔值，若值为true表示添加类，值为false表示移除类。3.toggleClass()方法03切换类varcount=0;$('div').click(function(){$(this).toggleClass('c',++count%3===0);});示例还可以通过条件判断的返回值情况设置。（单击3次div元素，为其添加一次“c”类）3.toggleClass()方法03切换类3.toggleClass()方法$('div').addClass(function(index,value){console.log('元素的索引：'+index);console.log('元素原来的class属性值：'+value);return'item-'+index; //将返回值作为要添加的class});多学一招在操作元素类的方法中使用函数通过函数的返回值来操作元素的类。04判断类4.hasClass()方法在网页开发过程中，有时需要判断元素的某个类是否存在，然后执行某些操作。语法：$(selector).hasClass('c')；分析：必选参数c用于检测该类名是否存在，存在时返回true，否则返回false。04判断类4.hasClass()方法$('div').click(function(){if($(this).hasClass('c')){$(this).removeClass('c');}else{$(this).addClass('c');}});案例演示：首先为div元素注册单击事件，当用户单击div元素时，判断div元素是否有类名“c”，如果有则移除，没有则添加。总结添加类-addClass（）01030204移除类-removeClass（）切换类-toggleClass（）判断某个类是否存在-hasClass（）操作元素的类

课后练习要求：使用jQuery操作类的方式，设置页面风格JQuery应用开发案例—高亮显示图片01任务导入提出任务目录CONTENT02分析任务03任务实施04归纳总结0501任务导入

。高亮展示图片是网站宣传中常用的一种效果，利用我们学到的知识，完成高亮显示图片效果。02提出任务本次课任务实现鼠标移入后图片高亮显示案例效果：鼠标经过03任务分析任务分析：高亮显示的本质是透明度不同，透明度最大时图片最亮。透明度小时，图片变暗。鼠标移入某图片，当前图片透明度设为1，其他图片透明度设为0.4。鼠标移出整个div容器盒子时，所有图片的透明度为0.4案例效果：鼠标经过实践：让我们动手实践一下吧04任务实施05归纳总结核心代码

var$ali=$('#wrapli');$ali.css('opacity','0.4');$ali.mouseenter(function(){$(this).css('opacity',1).siblings('li').css('opacity','0.4')})$ali.mouseleave(function(){$ali.css('opacity','0.4');})css()方法设置元素样式属性事件：mouseenter,mouseleave01方法：css（），siblings（）0205归纳总结JQuery应用开发——操作元素属性01获取元素属性设置元素属性目录CONTENT02设置元素状态属性03操作元素属性设置元素的状态属性元素属性是指当前元素节点的属性，注意：不是样式属性常用的元素属性：id、value、type

、name、src、href

；

用于标识元素状态的checked、disabled等；设置元素属性值获取元素属性值01获取元素属性

1.获取元素属性值attr()

获取元素属性值：把需要获取的属性名传递到attr()方法中。语法：$(selector).attr(‘property’)。注意使用$(‘#bt’).attr(‘style’)可以获取到行内设置的style属性02设置元素属性

2.设置元素属性值设置元素属性：通过给元素设置属性名和属性值来改变元素。设置单个属性：$(selector).attr('property','value');设置多个属性：$(selector).attr({‘property1’:‘value1’,‘property2’:‘value2’,……})；03设置元素状态属性

3.设置元素状态属性attr()方法的参数为元素状态属性时，可以设置元素状态。如：复选框是否选中，文本框或按钮的启用禁用等。操作元素状态常用的属性：checked、disable、selected03设置元素状态属性

3.设置元素状态属性获取表单元素的选中状态：第一个没有定义checked属性，默认未选中，未获取到checked属性值第二个和第三个默认都是选中状态，可以获取到的checked值默认效果03设置元素状态属性

3.设置元素状态属性设置表单元素的状态：无论属性值设为checked还是true，都可以设置元素的选中状态默认效果$(‘input’).attr(‘checked,’’checked’)$(‘input’).attr(‘checked,’true)操作元素属性案例演示：使用attr()

方法完成密码的明文和密文显示。分析：input标签的type属性值为text时，明文显示。input标签的type属性值为password时，密文显示。操作元素属性案例演示：使用attr()

方法完成密码的明文和密文显示。操作元素属性可以使用removeAttr()方法移除元素属性移除单个属性：$(selector).removeAttr('property');移除多个属性：$(selector).removeAttr('propertypropertyproperty')；值得一提：总结获取或设置元素属性：attr()01设置元素的状态属性:attr()02移除元素属性:removeAttr()03课后练习使用attr（）方法，实现点击小图，显示对应的大图JQuery应用开发案例—全选不选案例01任务导入提出任务目录CONTENT02分析任务03任务实施04归纳总结0501任务导入

同学们，学习了jQuery操作元素样式属性，操作元素属性等内容后，通过《全选不选》案例进一步巩固方法的使用！02提出任务本次课任务完成全选不选案例02提出任务-相关知识案例演示：

第1个没有定义checked属性，默认未选中；

第二个定义的checked属性值为空，第三个checked属性值为checked1.获取元素的状态属性默认效果02提出任务-相关知识获取表单元素的选中状态$('input:eq(0)').attr('checked');$('input:eq(1)').attr('checked');$('input:eq(2)').attr('checked');第1个input控件会返回undefined，其余两个input控件则返回checked。1.设置元素的状态属性效果图02提出任务-相关知识案例演示：1.设置元素的状态属性效果1效果202提出任务-相关知识2.prop()方法jQuery1.6开始新增了一个方法prop()prop()方法作用：获取或设置被选元素的属性值。当该方法用于获取属性值时，则返回第一个匹配元素的值。当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性值对。02提出任务-相关知识2.prop()方法根据官方的建议：具有true和false两个属性值的属性，如checked,selected，disabled使用prop()，其他的使用attr()03任务分析任务分析：案例效果：标题栏的复选框被选中，下方的复选框也被选中；标题栏的复选框没被选中，下放的复选框也不被选中；如果下方的所有复选框都被选中了，那么标题栏的复选框也会被选中。下方的复选框只要有一个没选中，那么标题栏的复选框也不会被选中。实践：让我们动手实践一下吧04任务实施相关知识制作要点：获取checked属性值–prop()；设置复选框组的checked属性–prop()；attr（）01prop()0205归纳总结JQuery应用开发——操作元素内容01获取和设置元素HTML内容和文本获取和设置表单的值目录CONTENT0201获取和设置元素HTML内容和文本方法参数返回值html()无参数用于获取元素的HTML内容字符串用于设置元素的HTML内容text()无参数用于获取元素的文本内容字符串用于设置元素的文本内容1.获取和设置元素HTML元素内容区别：html()方法操作的元素内容包含标签，text()方法操作的内容不含标签。1.获取和设置元素HTML元素内容和文本$('#p1').html('Helloworld!');$('#p2').text('Helloworld!');$('#p1').html('<h3>Helloworld!</h3>');$('#p2').text('<h3>Helloworld!</h3>');对比例如：分别使用html()方法和text()方法为p元素设置文本内容。01获取和设置元素HTML内容和文本02获取和设置表单的值$(selector).val();$(selector).val(value);获取表单元素的值设置表单元素的值val()方法：可以获取和设置表单元素的值；相当于JavaScript中input控件对象value属性的作用；2.获取和设置表单的值说明：

在多行文本框输入要发表的内容，单击发表按钮，将内容显示在上方的空白区域（div）。即：将多行文本框的内容作为div的内容展示案例演示：简易留言板02获取和设置表单的值案例演示：val()方法获取多行文本的内容html()方法设置div的内容案例演示总结html()获取或设置元素的html内容（含标签）01text()获取或设置元素的文本内容（不含标签）0203val()获取或设置表单的值课后练习完善简易留言板功能，在发表留言前，加入昵称JQuery应用开发——创建节点创建节点操作DOM遍历

节点包裹

节点替换

节点复制

节点删除

节点插入

节点创建

节点如果需要更灵活的操作网页上的动态效果，很多时候需要直接操作DOM节点。创建节点$()函数html()jQuery提供了动态创建节点的方法，创建节点后返回jQuery对象。创建节点的方式：创建节点$()方法在jQuery中有很多作用。参数不同，功能就不同,3种用法：1.参数是一个函数,

功能：入口函数

$(function(){……});2.参数是一个DOM对象,

功能：把DOM对象转换成jQuery对象 $(document).ready(function(){…..});3.参数是一个选择器类的字符串,功能：jQuery选择器

$(“div”)，$(“divul”)，$(".current”)1.$()方法创建节点语法：$(‘HTML代码’)；作用：使用$()将DOM对象转换成为jQuery对象；根据HTML代码创建一个DOM对象，并将其包装成jQuery对象；1.$()方法创建节点varp=$('<p>这是一个段落</p>');$('body').append(p);示例例如：将obj对象传入append()方法中，便可以在DOM中插入节点。1.$()函数创建节点2.html()方法$(‘body’).html(‘<p>这是一个段落</p>’)示例html()方法可用来设置或返回所选元素的HTML内容。html(‘HTML代码’)

：可以在DOM中动态创建节点，但会把原来内容覆盖。作用：与JavaScript中的innerHTML属性类似。语法：$(selector).html(‘HTML代码’)。创建节点案例：简易留言板使用$()方法实现简易留言板功能功能实现总结创建节点：$()函数01创建节点：html()方法02JQuery应用开发——插入节点插入节点操作DOM遍历

节点包裹

节点替换

节点复制

节点删除

节点插入

节点创建

节点插入节点方法功能示例append(ele)用于在匹配元素的最后一个子元素之后插入ele，插入的ele作为匹配元素的最后一个子元素$(“p”).append(“<b>Hello</b>”);

结果：<p><b>Hello</b></p>appendTo(ele)用于匹配元素的第一个子元素之前插入ele,插入的ele作为匹配元素的第一个子元素$(“<b>Hello</b>”).appendTo(“p”);

结果：<p><b>Hello</b></p>prepend(ele)将匹配元素插入ele中，将匹配元素作为ele的最后一个子元素<p>World</p>

$(“p”).prepend(“<b>Hello</b>”);

结果：<p><b>Hello</b>World</p>prependTo(ele)将匹配元素插入ele中，该匹配元素作为ele的第一个子元素$(“<b>Hello</b>”).prependTo(“p”);结果：<p><b>Hello</b>World</p>after(ele)在匹配的元素后插入内容$(“p”).after(“<b>Hello</b>”);结果：<p></p><b>Hello</b>insertAfter(ele)将内容插入到匹配元素后$(“<b>Hello</b>”).insertAfter(“p”);结果：<p></p><b>Hello</b>before(ele)在匹配的元素之前插入内容$(“p”).before(“<b>Hello</b>”);结果：<b>Hello</b><p></p>insertBefore(ele)将内容插入到匹配的元素之前$(“<b>Hello</b>”).insertBefore(“p”);结果：<b>Hello</b><p></p>插入节点<nav><ul><li>序列号1</li><li>序列号2</li><li>序列号3</li></ul></nav>HTML举例：利用jQuery提供的不同插入节点的方法在ul元素后面插入一个p元素。1.插入元素插入节点var$p='<p>插入的节点</p>';//将新创建的p节点插入到nav容器的内容底部$('nav').append($p);var$p='<p>插入的节点</p>';//将新创建的p节点插入到nav容器的内容底部$($p).appendTo('nav');vs<nav><ul> <li>序列号1</li><li>序列号2</li><li>序列号3</li></ul><p>插入的节点</p></nav>HTMLappend()和appendTo()方法区别在于这两个方法的调用对象不同。（1）append()和appendTo()方法插入节点var$p='<p>插入的节点</p>';//将新创建的p节点插入到nav容器的最前面$('nav').prepend($p);var$p='<p>插入的节点</p>';//将新创建的p节点插入到nav容器的最前面$($p).prependTo('nav');vs<nav><p>插入的节点</p><ul> <li>序列号1</li><li>序列号2</li><li>序列号3</li></ul></nav>HTML（2）prepend()和prependTo()方法插入节点（3）after()和insertAfter()方法var$p='<p>插入的节点</p>';//将新创建的p节点插入到ul元素之后$('ul').after($p);var$p='<p>插入的节点</p>';//将新创建的p节点插入到ul元素之后$($p).insertAfter('ul');举例：after()和insertAfter()方法区别在于这两个方法的调用对象不同。vs<nav><ul> <li>序列号1</li><li>序列号2</li><li>序列号3</li></ul><p>插入的节点</p></nav>HTML插入节点（4）before()和insertBefore()方法var$p='<p>插入的节点</p>';//将新创建的p节点插入到ul元素前$('ul').before($p);var$p='<p>插入的节点</p>';//将新创建的p节点插入到ul元素之前$($p).insertBefore('ul');vs<nav>

<p>插入的节点</p><ul> <li>序列号1</li><li>序列号2</li><li>序列号3</li></ul></nav>HTML插入节点before($p,$a)var$p='<p>插入的p元素</p>';var$a='<a>插入的a元素</a>';//将新创建的两个节点插入到ul元素之前$('ul').before($p,$a);<nav><p>插入的p元素</p><a>插入的a元素</a><ul><li>序列号1</li><li>序列号2</li><li>序列号3</li></ul></nav>HTML值得一提：在ul元素中的前面插入多个节点时，使用逗号“,”分隔。总结append（），appendTo（），prepend（），prependTo（）01after（），insertAfter（），before（），insertBefore（）02课后练习JQuery应用开发——删除节点删除节点操作DOM遍历

节点包裹

节点替换

节点复制

节点删除

节点插入

节点创建

节点删除节点方法功能示例remove()删除指定的元素，后代节点也会删除。返回值是一个指向已被删除的节点的引用$(“p”).remove()删除p元素detach()删除指定元素，但其绑定的事件、附加的数据都会保留下来$(“p”).detach()empty()清空指定元素$(“p”).empty()清空p元素删除节点待删除元素对象调用remove()方法即可完成删除操作。语法：$(‘p’).remove()；（1）remove()方法jQuery对象中不会保留元素的jQuery数据。例如，被删除的p元素如果绑定了事件或有附加的数据等都会被移除。注意删除节点varobj=$(selector).detach(); //删除元素节点$(obj).appendTo(selector); //恢复元素节点恢复删除节点detach()方法的使用方式与remove()基本相同。区别：detach()方法不仅会保留jQuery对象中的匹配元素；

还会保留该元素所有绑定的事件以及附加的数据。（2)detach()方法删除节点（3)empty()方法$('div').empty();清空div元素中的所有内容清空元素中的所有后代节点。与remove()和detach()方法不同：empty()方法并不是删除节点。删除节点默认页面案例演示：remove()，detach方法删除和恢复元素的效果。删除节点案例演示：remove()，detach方法删除和恢复元素的效果。删除节点案例演示：使用remove（）删除元素，恢复后，事件不存在使用detach（）删除元素，恢复后，元素所带的事件依然存着总结remove（）删除元素，不保留数据01detach（）删除元素，保留数据0202empty（）清空内容JQuery应用开发案例—表格的添加删除01任务导入提出任务目录CONTENT02分析任务03任务实施04归纳总结0501任务导入

网页中经常使用表格来展示数据，比如购物车清单，排行榜等。本次课，利用jQuery操作节点的方法，完成表格的添加删除功能！02提出任务本次课任务实现表格添加删除效果03任务分析任务分析：案例效果：输入姓名，年龄，单击添加按钮，将信息添加到表格中为表格增加行节点（tr）为行增加列节点（td）新增的节点td的内容是文本框的内容实践：让我们动手实践一下吧04任务实施05归纳总结该案例中用到节点相关的知识：创建节点：$()追加节点：append()/appendTo()删除节点：remove()/detach()获取文本框的内容：val()设置元素内容：html()/text()05归纳总结核心代码

节点的创建，追加，删除01操作元素的内容0205归纳总结JQuery应用开发——复制、替换节点01复制节点1.复制节点匹配元素文本和

属性该元素的子元素jQuery提供一个clone()方法，专门用于处理DOM节点的复制。复制的内容包括：01复制节点2.clone()方法语法：$(selector).clone()；语法分析：参数selector可以是选择器或HTML内容；调用clone()方法后会生成一个被选元素的副本；该副本需要利用插入节点的方法才能显示到DOM中；01复制节点div{width:300px;height:100px;background-color:#ed577f;margin-top:20px;}<inputtype="button"value="复制节点"id="btn"><divid="dv"><span>越努力越幸运</span></div><divid="dv1"></div>HTML默认结构案例演示：单击复制节点，将第一个div中的span复制，为了区别，将复制的节点字号变大后添加到第二个div中。2.clone()方法01复制节点2.clone()方法<script>$('#btn').click(function(){

//复制第一个div中的span元素生成副本

varspanObj=$('#dv>span').clone();

//设置副本的样式spanObj.css('fontSize','30px');

//插入节点$('#dv1').append(spanObj);});</script>clone()方法案例演示：调用clone()方法生成id为dv下的span元素副本及修改样式。02替换节点replaceWith()replaceAll()替换元素或元素中的内容区别：在于调用方法的对象以及参数设置的不同。$(selector).replaceWith(content);$(content).replaceAll(selector);语法02替换节点$('p').replaceWith('<span>替换喽</span>');//实现方式一$('<span>替换喽</span>').replaceAll('p');//实现方式二语法对比例如：将p元素替换为span元素。分析：replaceWith()方法的调用对象是待替换的元素对象。replaceAll()方法的使用正好与之相反。02替换节点案例：利用复制节点，实现图片轮换效果设计思路：复制第一张图片追加到最后删除第一张图片页面布局样式设置02替换节点核心代码复制第一张图片追加到最后删除第一张图片总结复制节点：clone（）01替换节点：replaceWith（）replaceAll（）02对策一课后练习练习使用clone方法制作图片轮换案例，完善图片轮换案例JQuery应用开发案例—滚动新闻01任务导入提出任务目录CONTENT02分析任务03任务实施04归纳总结0501任务导入

本次课利用复制节点制作滚动新闻效果！02提出任务本次课任务实现滚动新闻的效果案例效果：03任务分析任务分析：案例效果：HTML页面布局，使用ul,li放置新闻内容，将ul的高度设为一条新闻的高度。超出部分隐藏复制第一个li将复制的li追加到ul尾部删除第一个li使用定时器达到滚动新闻效果实践：让我们动手实践一下吧04任务实施05归纳总结核心代码(改)functionautoplay(){ var$copyli=$('#newsli:eq(0)').clone() $copyli.appendTo('ul') $('#newsli:eq(0)').remove()

}

setInterval(autoplay,1000)复制第一个li使用定时器实现滚动效果将复制的li追加到ul中删除第一个li

节点操作：clone(),appendTo(),remove()01定时器函数：setInterval()0205归纳总结JQuery应用开发——包裹节点包裹节点wrap()方法wrapInner()方法wrapAll()方法包裹节点是指在某个元素的外层添加父元素，将其“包裹”起来。包裹节点方法：包裹节点<ul><strong><li>北京</li></strong><strong><li>广州</li></strong><strong><li>深圳</li></strong></ul>效果wrap()方法用于为每个匹配到的元素添加父元素，将匹配元素包裹在其中。语法：$(selector).wrap(wrapper)；语法分析：参数wrapper表示包裹元素的结构化标记。1.wrap()方法$('li').wrap('<strong></strong>');示例包裹节点$("p").wrap(function(){

return"<divclass=‘test’></div>"