使用JavaScriptjQuery实现页面特效第八章-理论.pptVIP

单击“替换”按钮把歌曲列表中的最后一首流行歌曲替换成“也许明天——姚贝娜”。 8.2 jQuery中的DOM操作 $(function(){ $(input[type=button]).click(function(){ var $li=$(li也许明天——姚贝娜/li); $(ul li:last).replaceWith($li); }); }); ....... ul li想起——韩雪/li li没那么简单——黄小琥/li li指望——郁可唯/li /ul 用replaceAll()方法，如何实现示例的功能？ replaceWith()是用括号中的内容替换所选择的元素，replaceAll()是把括号中所指定的元素替换掉。两者的关系类似于append()和appendTo()的关系。 8.2 jQuery中的DOM操作 复制节点 在页面中，有时候需要复制某个元素节点。在jQuery中，通常可以通过方法clone()轻松实现这一功能，该方法的语法格式为： 8.2 jQuery中的DOM操作 jQuery对象.clone(); 其功能是复制选择的html元素，该方法只是复制元素本身，被复制后的新元素不具有任何元素行为。 插入一幅图片，当单击此图片时，将其复制并在其右侧粘贴。 8.2 jQuery中的DOM操作 $(function(){ $(img).click(function(){ $(this).clone(true).appendTo(#p1); }); }); ...... img src=images/scenes.jpg / 删除节点 在操作页面时，删除多余的或是指定的页面元素是非常必要的，jQuery中提供了remove()方法来删除元素，remove()方法的语法格式如下： 8.2 jQuery中的DOM操作 remove([expr]); 其中参数expr为可选项，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表达式将获取指定的元素，并进行删除。 在页面插入无序列表和按钮，单击按钮时，将无序列表最后一项删除。 8.2 jQuery中的DOM操作 $(function(){ $(input[type=button]).click(function(){ //$(ul li).remove();//删除所有的列表项 $(ul li).remove(ul li:eq(2)); }); }); ...... ul li一个像夏天一个像秋天——范玮琪/li li想起——韩雪/li li没那么简单——黄小琥/li li指望——郁可唯/li /ul 遍历元素 在元素操作中，有时候需要对多个元素进行统一操作。在传统的JavaScript中，通过先获取数组的总长度，然后以for循环语句，循环访问每个元素，其代码相对复杂；而在jQuery中，可以直接使用each()方法实现元素的遍历。其语法格式如下： 8.2 jQuery中的DOM操作 jQuery对象.each(callback); 其中，参数callback是一个function函数，还可以给该函数传递一个index参数，此形参是遍历元素的序号（从0开始）。如果需要在函数体中，访问当前遍历到的元素，可以使用this关键字。 插入两幅图片，单击“添加边框”的按钮后，给两幅图片添加边框并设置其title属性。 8.2 jQuery中的DOM操作 $(function(){ $(input[type=button]).click(function(){ $(img).each(function(index){ //$(this).css(border,1px solid #f00); //$(this).attr(title,第+(index+1)+幅风景画); jQuery对象 this.style.border=1px solid #f00; //this:DOM对象 this.title=第+(index+1)+幅风景; }); }); }); ...... img src=images/island.jpg /nbsp;nbsp; img src=images/green.jpg / 总结 使用jQuery第一步是获取指向某元素的jQuery对象；第二步是使用jQuery对象的方法来操作该元素。 将jQuery对象转换成DOM对象，可以使用get()方法，其语法结构为get([index])。 对于一个DOM对象，只需要用$()把它包装起来，就可以获得相应的jQuery对象。 操作元素样式的方法包含