一、内部插入节点
1、append(content)
用法:
格式: a.append(b) 把 b 插入到 a 的末尾,称为最后一个子元素
说明:向每个匹配的元素的内部结尾处追加内容
2、appendTo(content)
用法:
格式: a.appendTo(b) 把 a 插入到 b 的末尾,称为最后一个子元素
说明:把所有匹配的元素追加到另一个指定的元素集合中
3、prepend(content)
用法:
格式:a.prepend(b) 把 b 插入到 a 所有的子元素前面,成为第一个子元素
说明:向每个匹配的元素的内部的开始处插入内容
4、prependTo(content)
用法:
格式: a.prependTo(b) 把 a 插入到 b 所有的子元素前面,成为第一个子元素
说明:将每个匹配的元素插入到指定的元素内部的开始处
二、外部插入节点
1、after(content)
用法:
格式: a.after(b) 在 a 元素的后面插入 b 元素
说明:在每个匹配的元素之后插入内容
2、before(content)
用法:
格式: a.before(b) 在 a 元素的前面插入 b 元素
说明:在每个匹配的元素之前插入内容
3、insertAfter(content)
用法:
格式: a.insertAfter(b) 把 a 元素插入到 b 元素的后面
说明:把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
4、insertBefore(content)
用法:
格式: a.insertBefore(b) 把 a 元素插入到 b 元素的前面
用法:把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
三、查找节点
1、使用 jQuery 选择器查询
用法:
格式:$(selector)
说明:得到一个包含所有匹配的dom节点对象的jQuery对象
2、查询 jQuery 对象内部数据
用法:
格式:$object.find(selector)
说明:在 jQuery 对象中根据 selector 查找其中匹配的后代节点
3、遍历 jQuery 对象包含的数据
用法:
格式:$(selector1).each(function(index,itemDom){ })
说明:遍历 jQuery 对象所包含的所有节点,每取一个 dom 节点对象都去调用设置的回调函数,并将取出的节点在数组中的下标和节点对象传入函数
Demo:
1 <script type="text/javascript">
2 $(function () {
3 $("p").each( function () {
4 // this 是 dom 对象
5 alert(this.innerText);
6 } )
7
8 $.each($("p"),function (i,el) {
9 //el 是 dom 对象
10 console.log("第" + i + "个元素的值是" + el.innerText);
11 })
12 })
13 </script>
四、创建节点
$(htmlString) 用于创建节点
说明:
(1)动态创建的新元素节点不会被自动添加到文档中,需要使用其他方法将其插入到文档中;
(2)当创建单个元素时,需注意闭合标签和使用标准的 XHTML 格式。例如创建一个 <p> 元素,可以使用$(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)
(3)创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建
五、删除节点
1、empty()
用法:
格式: $("p").empty() 把所有段落的子元素(包括文本节点)删除,即清空 p 里面的内容
说明:删除匹配的元素集合中所有的子节点,即把元素置空(不包括本身)
2、remove([expr])
用法:
格式:$("p").remove() 把 dom 中所有的段落删除
说明:从 dom 中删除所有匹配的元素及其子元素(包括本身)
注意:这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。
3、detach([expr])
用法:
格式:$("p").detach()
说明:从 dom 中删除所有匹配的元素及其子元素(包括本身)
注意:这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
六、替换节点
1、replaceWith(content | fn)
用法:
格式:$("p").replaceWith("<b>Paragraph</b>") 用<b>Paragraph</b>替换p
说明:将所有匹配的元素替换成指定的HTML或DOM元素
2、replaceAll(selector)
用法:
格式:$("<b>Paragraph</b>").replaceAll("p") 用 <b>Paragraph</b> 替换所有的 p
说明:用匹配的元素替换掉所有 selector匹配到的元素
七、复制
clone([Even,[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本
用法:
格式:$("#btn1").clone(true).appendTo("p"); 参数为true,表示复制 dom 对象,也会复制 dom 对象的事件
说明:复制dom对象,如果有参数,true代表该对象上面的事件处理函数也会被复制;false则代表只是复制该对象,并没有复制事件
八、包裹
1、wrap(html | ele | fn)
用法:
格式:$("p").wrap("<div class='wrap'></div>") 把所有的段落用一个新创建的 div 包裹起来
说明:把所有匹配的元素用其他元素的结构化标记包裹起来
2、unwrap()
用法:
格式:$("p").unwrap() 将 p 元素的父元素移除
说明:这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。
3、wrapAll(html | ele)
用法:
格式:$("p").wrapAll("<div></div>") 把所有的 p 标签都移动到第一个 p 标签处,然后用 div 包裹
语法:将所有匹配的元素用单个元素包裹起来
4、wrapInner(html | ele | fn)
用法:
格式:$("p").wrapInner("<b></b>") 把所有 p 标签内的子内容加粗
说明:将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来