zoukankan      html  css  js  c++  java
  • 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结构包裹起来

  • 相关阅读:
    剑指OFFER之复杂链表的复制(九度OJ1524)
    剑指OFFER之二叉树中和为某一值的路径(九度OJ1368)
    剑指OFFER之从二叉搜索树的后序遍历序列(九度OJ1367)
    剑指OFFER之从上往下打印二叉树(九度OJ1523)
    剑指OFFER之栈的压入、弹出序列(九度OJ1366)
    剑指OFFER之包含min函数的栈(九度OJ1522)
    剑指OFFER之顺时针打印矩阵(九度OJ1391)
    剑指OFFER之树的子结构(九度OJ1520)
    剑指OFFER之二叉树的镜像(九度OJ1521)
    VM安装CentOs7虚拟机后无法上网之解决方法
  • 原文地址:https://www.cnblogs.com/niujifei/p/12395356.html
Copyright © 2011-2022 走看看