jquery 的DOM操作

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()