jquery 的DOM操作
时间:2010-08-20 来源:ActionBi
javascript的dom操作可以分为三个方面DOM core(核心) 、 HTML-DOM 和 CSS-DOM
插入节点的方法append() 向每个匹配的元素的内部追加内容 $("p").append("<b>你好</b>")
appendTo() 将所有的匹配的元素追加到指定的元素中。 $("<b>你好!!</b>").appendTo("p")
prepend() 向每个匹配的元素前置内容。$("p").prepend("<b>你好</b>")
prependTo() 将匹配元素添加到指定元素。$("<b>你好!</b>")prependTo("p")
after() insertAfter()before()insertBefore()
删除节点:jquery提供了两个删除节点的方法remove()和empty()$("ul li:eq(1)").remove();//获取到第二个li元素,将它从网页中删除。
empty()严格来说就是删除节点,而是清空节点。他能清空元素中的所有元素$("ul li:eq(1)").empty();复制节点$(this).clone(true).appendTo("body");
替换节点 replaceWith() 和 replaceAll()
replaceWith()的方法将所有匹配的元素都替换成了制订的HTML或者DOM$("p").replaceWith("<b>你最喜欢的水果是什么?</b>")
把原来p里的内容换成指定的内容
包裹节点:用一个节点把其他的标记包裹起来,jquery提供了wrap()和warpAll()和warpInner()
$("strong").warp("<b></b>");//用b标签把<strong>的元素包起来
属性操作:attr()获取和设置元素的属性 $("p").attr("title") 获取p的title属性。 $("p").attr("title", "you title") 设置title属性removeAttr() 删除元素的属性
样式操作:获取样式和设置样式
$("p").attr("class") 获取class $("p").attr("class","my class") 设置class为myclass追加样式$("p").addClass("another");添加another的class属性样式addClasss()和attr()的区别addClass是添加class样式,而attr()是在现有的基础上进行改变。
删除样式;$("p").removeClass("high") 移除所选元素的名称为high的class属性$("p").removeClass("high another") 移除所选元素的两个class样式$("p").removeClass() 移除所选元素的所有的class属性
切换样式:toggle() $("dfdf").toggle(function(){//操作样式 代码3},function(){//操作样式 代码4}交替执行代码3和代码4
设置和获取HTML 文本和值html()方法$("p").html("<strong>你喜欢的水果是什么?</strong>")text()方法相当于javascript中的innertext,支持所有的浏览器val()方法获取文本框的值
遍历节点
children()方法 获得子元素 next()方法 获取匹配元素后面紧邻的同辈元素。例如,p元素的同辈元素是ul li的无序列表获取ul的一种方法就是$("p").next()得到的值就是ul的无序列表 prev()方法是next()方法的逆方法 siblings()方法 获取匹配元素前后所有的同辈元素,不分前后 closet()取得最近的匹配元素 遍历节点的方法有很多 find() filter() nextAll() prevAll() parent() parents()