《jquery-第03章dom操作》由会员分享，可在线阅读，更多相关《jquery-第03章dom操作（22页珍藏版）》请在金锄头文库上搜索。
1、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
2、 CSS-DOM 针对CSS的操作 主要作用是获取和设置style对象的各种属性 如：element.style.color=“red“;,2、jQuery中的DOM操作,作为JavaScript库，jQuery继承并发扬JavaScript对DOM对象的操作特性 开发人员能方便的操作DOM对象,查找节点,使用选择器查找节点 查找元素节点 var $li=$(“ul li:eq(1)“);/获取里第2个节点 var li_txt=$li.text();/获取第2个节点的文本内容 var li_html=$li.html();/获取第2个节点的html代码 查找属性节点 var $para=$(
3、“p“);/获取节点 var p_txt=$para.attr(“title“);/获取节点属性title的值,attr()方法的参数可以是一个，也可以是两个。 当参数是一个时，则返回该属性的值， 如果是两个则修改给定属性的值。,创建节点,创建元素节点 $(“html代码“) /创建以一个DOM对象并封装成为一个jQuery对象返回 动态创建的新元素不会被自动添加到文档中,需使用方法将其插入文档中：append() 创建文本节点 创建元素节点时添加文本内容 创建属性节点 创建元素节点时一起创建,var $li_1=$(“);/创建第一个节点 var $li_2=$(“);/创建第二个节点 $(
4、“ul“).append($li_1);/添加到节点中,使之能在网页中显示 $(“ul“).append($li_2);/可以链式写法$(“ul“).append($li_1).append($li_2);,var $li_1=$(“香蕉“);/“香蕉“为创建的文本节点 var $li_2=$(“雪梨“);/“雪梨“为创建的文本节点 $(“ul“).append($li_1);/添加到节点中,使之能在网页中显示 $(“ul“).append($li_2);/可以链式写法$(“ul“).append($li_1).append($li_2);,var $li_1=$(“香蕉“);/title=“
5、香蕉“为创建的属性节点 var $li_2=$(“雪梨“);/title=“雪梨“为创建的属性节点 $(“ul“).append($li_1);/添加到节点中,使之能在网页中显示 $(“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) 将
6、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(“lititle=雪梨“);/将元素中属性title等于“雪梨“的元素删除 所有相关的绑定事件,附加的数据都会被删除,删除节点(2),detach() 从DOM中删
7、除匹配的元素 删除后,该节点所包含的所有后代节点将同时被删除 返回已被删除的节点的引用 可以传递参数来选择性的删除元素 如:$(“ul li“).remove(“lititle=雪梨“);/将元素中属性title等于“雪梨“的元素删除 不会把匹配的元素从jQuery对象中删除 所有相关的绑定事件,附加的数据都不会被删除,删除节点(3),empty() 清空节点元素中的所有后代节点 如$(“ul li:eq(1)“).empty();/获取第2个元素节点后,清空此元素里的内容,注意是元素里 清空的后代节点包括文本节点,复制节点,使用clone()方法 可以传递参数true,表示同时复制元素中所绑
8、定的事件 $(“ul li“).click(function() $(this).clone(true).appendTo(“ul“); );,替换节点,jQuery提供了替换节点的方法: replaceWith() 将所有匹配的元素都替换成指定的HTML后者DOM元素 $(A).replaceWith(B) 将A替换成B,即以B替换A replaceAll() 与replaceWith()相同,但结果是颠倒的,即A替换B $(A).replaceAll(B) 将B替换成A,即以A替换B 替换后原先绑定的事件将消失 如：BA后A的事件消失,新元素B需要重新绑定事件,包裹节点,作用:将某个节点使
9、用其他标记包裹起来 在文档中插入额外的结构化标记,且不会破坏原始文档的语义 jQuery提供了包裹节点的方法： wrap() $(A).wrap(B) 用B的标签将所有A单独包裹起来,即每个A都被一个B包裹起来 wrapAll() $(A).wrap(B) 将所有A包裹在一个B标签里面 wrapInner() $(A).wrapInner(B) 将每一个A的子内容用B标签包裹起来,属性操作,使用attr()设置和获取属性值 获取属性值:传递一个参数(属性名) $(“p“).attr(“title“) 获取元素节点属性title的值 设置属性值:传递两个参数(属性名,值) $(“p“).attr
10、(“title“,“雪梨“) 设元素节点属性title的值为“雪梨“ 使用removeAttr()删除属性值 删除匹配元素节点的特定属性 $(“p“).removeAttr(“title“) 删除元素的属性title,jQuery1.6后新增了prop()和removeProp() 分别用来获取匹配元素集中第一个元素的 属性值和为匹配元素删除设置的属性,样式操作,获取样式:attr(“class“) 设置样式:attr(“class“,“样式名“) 替换掉原有的样式(如果有) 追加样式:addClass(“样式名“) 如果一个元素添加了多个样式,那么就相当于合并了它们的样式 如果有不同clas
11、s设置了同一个样式属性,则后者覆盖前者 与原有的样式共存,并遵循以上两点,样式操作(续),删除样式:removeClass() 无参数:删除所有的样式 1个参数:删除指定的样式 1个参数中使用空格分隔的多个样式：删除多个样式 切换样式:toggleClass() 如果样式存在则删除它,如果样式不存在则添加它 $(“p“).toggleClass(“test“) /重复切换样式test 判断是否含有某个样式:hasClass 如果元素中含有指定的某个样式则返回true,否则返回false,hasClass()内部实际是调用is()方法来完成 $(“p“).hasClass(“test“)等价于$
12、(“p“).is(“test“),设置和获取HTML文本和值,html() 用来读取和设置某个元素中的HTML内容 与JavaScript中的innerHTML类似 text() 用来读取和设置某个元素中的文本内容 与JavaScript中的innerText类似 val() 用来读取和设置某个元素的值 与JavaScript中的value属性类似,html()不能用于XML文档,但可以用于XHTML,Firefox浏览器不支持innerText,但支持jQuery的text()方法 text()方法对HTML文档和XML文档都有效,val()方法可以使用attr()方法类实现相同的公共 $(
13、“A“).val()=$(“A“).attr(“value“),遍历操作,children()/获取匹配元素的子元素集合 next()/nextAll()/获取匹配元素后面紧邻的/(所有)同辈元素 prev(),prevAll()/获取匹配元素前面紧邻的/(所有)同辈元素 siblings()/获取匹配元素前后所有的同辈元素 closest()/获取最先匹配的祖先元素,自己父元素空对象 parent(),parents()/获取匹配元素的父元素(祖先元素集) find()/搜索所有与指定表达式匹配的元素 filter()/筛选出与指定表达式匹配的元素,CSS-DOM操作,读取和设置style对
14、象的各种属性 jQuery中使用css()获取样式的属性 $(A).css(“B“) /获取A元素的B样式属性 $(A).css(“B“,“value“)/设置A元素的B样式属性为“value“ $(A).css(key1:value1,key2:value2.)/设置元素A的样式key1值为value1,样式key2值为value2.,$(“p“).css(“fontSize“:“30px“,“backgroundColor“:“#888888“) “30px“:如果值是数字,将会被自动转化为像素值 “fontSize“:当属性中带有“-“符号,如font-size,如果在设置属性时 不带引
15、号,则需使用驼峰式写法,如:fontSize,即上面例子等价: $(“p“).css(fontSize:“30px“,backgroundColor:#888888) 也等价: $(“p“).css(“font-Size“:“30px“,“background-Color“:“#888888“) 即:带上引号后可以写成“fontSize“,也可以写成“font-size“, 因此建议大家加上引号,养成良好习惯,CSS-DOM操作(续),常用的元素定位方法: offset() 获取元素在当前视窗的相对偏移,返回对象包含2个属性top和left,只对可见元素有效 position() 获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移 scrollTop(),scrollLeft() 获取和设置滚动条距顶端/距左侧的距离,3、案例研究,结 束,
