jQuery(二)dom操作

一般来说，DOM操作分为：DOM Core, HTML-DOM、CSS-DOM

 

jQuery中的dom操作。

一、查找

1.元素节点

2.属性节点   e.m. $para.attr("title")

 

二、创建

1. 元素节点     e.m.  $("<li></li>")    $("ul").append($li_1)

2.创建文本内容   e.m. $("<li>text</li>")

3.创建属性节点  e.m. $("<li title='ss'></li>")

 

三、插入节点

 

方法	描述	实例
append()	向每个匹配的元素内部追加内容	$("p").append("<b>hello</b>")
appendTo()	将所有匹配的元素追加到指定元素中	HTML: <p></p> $("<b>hello</p>").appendTo("P") 结果是<p><b>hello</b></p>
prepend()	向每个匹配的元素内部前置内容	HTML: <p>I want</p> $("p").prepend("<b>hello</b>") result:<p><b>hello</b>i want<p>
prependTo()	将所有匹配的元素前置到指定元素中
after()	在每个元素之后插入内容	$("p").after("<b>hello</b>") result: <p></p><b>hello</b>
insertAfter()	将所有匹配的元素插入到指定元素后面
before()	在每个匹配的元素之前插入元素
insertBefore()	将所有匹配的元素插入到指定的元素前面

 

四、删除元素

1.remove: 从DOM中删除所有匹配的元素

2：detach():从DOM中删除所有匹配的元素.。 但注意的是，这个方法不会把匹配的元素从jQuery对象中删除

 因而可以在将来使用这些元素。

3.empty: 并不是删除节点而是清空节点。

 

五、复制节点  clone()

 

六、替换节点 

replaceWith(): 将所有匹配的元素替换成制定的HTML或DOM元素。

replaceAll():只是颠倒了replaceWith的操作。

 

七、包裹元素

wrap()     e.m.   $("p").wrap("<b></b>")  result: <b><p><p></b>

wrapAll():将所有匹配的元素包裹起来，不同于wrap(), wrap只是单独包裹。

 e.m. wrapAll: <b><p></p><p></p></b>

           wrap():<b><p></p><b/><b><p></p></b>

 wrapInner(): 将每一个匹配的元素的子内容用其他结构化标记包裹起来。

 

 

八、属性操作

获取属性： attr()

设置属性：e.m.   attr("title","your title"),    attr("title":"your title", name:"test")

删除属性：removeAttr

 

九、样式操作

获取样式：e.m.  attr("class") 

设置样式： e.m.    attr("class","height") 

追加样式：addClass   如果有不同class设定同一个样式属性，则后者覆盖前者

移除样式：removeClass   e.m.  removeClass("high" "another")

切换样式：toggle() 交替一组动作 。这里是：toggleClass(),即存在删除，不存在添加

判断是否含有某个样式：hasClass()

 

十、设置获取HTML、文本和值

• html() 该方法获取html元素的内容，如：var var1=$("p").html();//获取P元素内的内容
• text() 获取或设置某个html元素的内容
• val() 获取元素的Value值
• children() 获取html元素的所有子节点
• next()  获取html元素后紧邻的同辈节点
• prev() 获取html元素前紧邻的同辈节点
• siblings() 获取html元素前后紧邻的同辈节点 

 

 

closest():用于取得最近的匹配的元素。首先检查当前元素是否匹配，不匹配，逐级向上匹配。找不到返回null

parent()

parents()

 

 

十一、CSS-DOM

css("属性"，“值”)  e.m.      css("color","red")

offset:获取元素在当前视窗的相对偏移量

position()：获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点相对位置

scrollTop():获取元素滚动条距顶端的距离

scrollLeft()：获取元素滚动条距左边的距离