jQuery — 文档处理(CRUD)

一、内部插入节点

  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结构包裹起来

原文地址:https://www.cnblogs.com/niujifei/p/12395356.html