JQuery—第03章DOM操作.pptVIP

jQuery基础教程 第三章 jQuery中的DOM操作 DOM操作分类 jQuery中的DOM操作 查找节点 创建节点 插入、删除、复制和替换节点 包裹节点 属性操作 样式操作 设置和获取HTML文本和值 遍历节点 CSS-DOM操作 案例研究 1、DOM操作的分类 DOM Core DOM Core并不属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它 JavaScript中的getElementById()等方法都是DOM Core的组成部分 HTML-DOM 提供了一些更简明的记号来描述各种HTML元素的属性 如：document.forms element.src CSS-DOM 针对CSS的操作 主要作用是获取和设置style对象的各种属性 如：element.style.color=red; 2、jQuery中的DOM操作 作为JavaScript库，jQuery继承并发扬JavaScript对DOM对象的操作特性 开发人员能方便的操作DOM对象 查找节点 使用选择器查找节点 查找元素节点 var $li=$(ul li:eq(1));//获取ul里第2个li节点 var li_txt=$li.text();//获取第2个li节点的文本内容 var li_html=$li.html();//获取第2个li节点的html代码 查找属性节点 var $para=$(p);//获取p节点 var p_txt=$para.attr(title);//获取p节点属性title的值 attr()方法的参数可以是一个，也可以是两个。 当参数是一个时，则返回该属性的值， 如果是两个则修改给定属性的值。 创建节点 创建元素节点 $(html代码) //创建以一个DOM对象并封装成为一个jQuery对象返回 动态创建的新元素不会被自动添加到文档中,需使用方法将其插入文档中：append() 创建文本节点 创建元素节点时添加文本内容 创建属性节点 创建元素节点时一起创建 var $li_1=$(li/li);//创建第一个li节点 var $li_2=$(li/li);//创建第二个li节点 $(ul).append($li_1);//添加到ul节点中,使之能在网页中显示 $(ul).append($li_2);//可以链式写法$(ul).append($li_1).append($li_2); var $li_1=$(li香蕉/li);//香蕉为创建的文本节点 var $li_2=$(li雪梨/li);//雪梨为创建的文本节点 $(ul).append($li_1);//添加到ul节点中,使之能在网页中显示 $(ul).append($li_2);//可以链式写法$(ul).append($li_1).append($li_2); var $li_1=$(li title=香蕉香蕉/li);//title=香蕉为创建的属性节点 var $li_2=$(li title=雪梨雪梨/li);//title=雪梨为创建的属性节点 $(ul).append($li_1);//添加到ul节点中,使之能在网页中显示 $(ul).append($li_2);//可以链式写法$(ul).append($li_1).append($li_2); 插入节点 $(A).append(B) 将B追加到A的内容后 $(A).appendTo(B) 将A追加到B的内容后 $(A).prepend(B) 将B追加到A的内容前(B在A里面) $(A).prependTo(B) 将A追加到B的内容前(A在B里面) $(A).after(B) 将B插入到A后(B在A外面) $(A).insertAfter(B) 将A插入到B后(A在B外面) $(A).before(B) 将B插入到A前(B在A外面) $(A).insertBefore(B) 将A插入到B前(A在B外面) 删除节点(1) remove() 从DOM中删除匹配的元素 删除后,该节点所包含的所有后代节点将同时被删除 返回已被删除的节点的引用 可以传递参数来选择性的删除元素 如:$(ul li).remove(li[title=雪梨]);//将ul元素中属性title等于雪梨的li元素删除 所有相关的绑定事件,附加的数据都会被删除 删除节点(2) detach() 从DOM中删除匹配的元素 删除后,该节点所包含的所有后代节点将同时被删除 返回已被删除的节点的引用 可以传递参数来选择性的删除元素 如:$(ul li).remove(li[title=雪梨]);//将ul元素中属性title等于雪梨的li元素删除 不会把匹配的元素从jQuery对象中删除 所有相关的绑定事件,附加的数据都