【前端系列教程之jQuery】07_jQuery 文档处理

梦里梦外; 2024-04-28 13:12 8阅读 0赞

## 一、内部插入 ##

### append(content|fn) ###

向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

**content** String, Element, jQuery 要追加到目标中的内容

**function(index, html)** Function 返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

### appendTo(content) ###

把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法。

**content** String 用于被追加的内容

### prepend(content|fn) ###

向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式。

**content** String, Element, jQuery 要插入到目标元素内部前端的内容

### prependTo(content) ###

把所有匹配的元素前置到另一个、指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。

**content** String 用于匹配元素的jQuery表达式。

## 二、外部插入 ##

### after(content|fn) ###

在每个匹配的元素之后插入内容。

**content** String, Element, jQuery 插入到每个目标后的内容

**function** Function 函数必须返回一个html字符串。

### before(content|fn) ###

在每个匹配的元素之前插入内容。

**content** String, Element, jQuery 插入到每个目标前的内容

**function** Function 函数必须返回一个html字符串。

### insertAfter(content) ###

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。

**content** String 用于匹配元素的jQuery表达式

### insertBefore(content) ###

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。

**content** String 用于匹配元素的jQuery表达式

## 三、包裹 ##

### wrap(html|ele|fn) ###

把所有匹配的元素用其他元素的结构化标记包裹起来。

这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。  
**html** String HTML标记代码字符串，用于动态生成元素并包裹目标元素

**element** Element 用于包装目标元素的DOM元素

**fn** Function 生成包裹结构的一个函数

### unwrap() ###

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。。

### wrapAll(html|ele) ###

将所有匹配的元素用单个元素包裹起来

这于 '.wrap()'<a href="http://docs.jquery.com/Manipulation/wrap" title="Manipulation/wrap"></a> 是不同的，'.wrap()'为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

**html** String HTML标记代码字符串，用于动态生成元素并包装目标元素  
**elem** Element 用于包装目标元素的DOM元素

### wrapInner(html|ele|fn) ###

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

**html** String HTML标记代码字符串，用于动态生成元素并包装目标元素  
**elem** Element 用于包装目标元素的DOM元素

**fn** Function 生成包裹结构的一个函数

## 四、替换 ##

### replaceWith(content|fn) ###

将所有匹配的元素替换成指定的HTML或DOM元素。

**content** String, Element, jQuery, Function 用于将匹配元素替换掉的内容。如果这里传递一个函数进来的话，函数返回值必须是HTML字符串。

**fn** Function 返回THML字符串，用来替换的内容。

### replaceAll(selector) ###

用匹配的元素替换掉所有 selector匹配到的元素。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。

**selector** 选择器 用于查找所要被替换的元素

## 五、删除 ##

### empty() ###

删除匹配的元素集合中所有的子节点。

### remove(\[expr\]) ###

从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

**expr** String 用于筛选元素的jQuery表达式

### detach(\[expr\]) ###

从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

**expr** String 用于筛选元素的jQuery表达式

## 六、复制 ##

### clone(\[Even\[,deepEven\]\]) ###

克隆匹配的DOM元素并且选中这些克隆的副本。

在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

**Events** Boolean 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

**Events\[,deepEvents\]** Boolean,Boolean

1:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。

2:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

## 配套代码 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #div1 {
                border: 1px solid black;
            }
        </style>
    </head>
    
    <body>
        <p>xxxxxxxx</p>
        <p>yyyyyyyy</p>
        <h3>h3 h3 h3</h3>
        <div id="div1" class="cc cdiv divX">
            <a href="">百度一下</a>
            <p>我是p标签的内容1 1 1</p>
            <p>我是p标签的内容2 2 2</p>
            <div class="divX" style="position: relative;">
                <div>
                    <p class="cp">我是p标签的内容3 3 3</p>
                </div>
            </div>
            <h3>H3标题标签</h3>
            <p>我是p标签的内容4 4 4</p>
            
        </div>
        <h3>h3 h3 h3</h3>
        <p>xxxxxxxx</p>
        <p>yyyyyyyy</p>
        <hr>
        <p>zzzzzzzz</p>
        <div>
            <p>我是p标签</p>
        </div>
    
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li class="third-item">list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul>
    
    
        <script src="js/jquery.min.js"></script>
        <script>
            $('li.third-item').nextAll().addBack().css('background-color', 'red');
    
    
    
            /* 
                查找
                    children([expr])    取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。【查询子元素】
                    find(e|o|e)         搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 【查找后代元素】
                    closest(e|o|e)1.7*  从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。
                    
                    next([expr])        取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
                    nextAll([expr])     查找当前元素之后所有的同辈元素。
                    nextUntil([e|e][,f])    查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
            */
    
            // $("#div1").children().css("background","red");  //   $("#div1 > *").css("background","red");
            // $("#div1").children("p").css("background","red"); // $("#div1 > p").css("background","red");
    
            // $("#div1").find("p").css("background","red"); // $("#div1 p").css("background","red");
    
            // console.log($(".cp").closest("p")); // 从自身开始找,一直找到符合要求的元素,因为.cp自身就是p元素,那么就是他自己
            // console.log($(".cp").closest("div")); // 从自身开始找,一直找到符合要求的元素
            // console.log($(".cp").closest(".divX")); // 从自身开始找,一直找到符合要求的元素
    
    
            // $("#div1").next().css("background","red"); // 查找#div1紧邻的兄弟元素  $("#div1 + *").css("background","red");
            // $("#div1").next("p").css("background","red"); // 查找#div1紧邻的兄弟p元素  $("#div1 + p").css("background","red");
            // $("#div1").nextAll("p").css("background","red"); // $("#div1 ~ p").css("background","yellow");
    
            // $("#div1").nextUntil("hr").css("background","red"); // 查找#div1的兄弟元素,直到hr标签为止
    
    
    
    
            /* 
                prev([expr])        取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
                prevAll([expr])     查找当前元素之前所有的同辈元素
                prevUntil([e|e][,f])    查找当前元素之前所有的同辈元素
    
                parent([expr])      取得一个包含着所有匹配元素的唯一父元素的元素集合。
                parents([expr])     取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
                parentsUntil([e|e][,f])     查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
    
                offsetParent()  返回第一个匹配元素用于定位的父节点。
                siblings([expr])    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
            */
            // console.log($(".cp").parent("div")); 查找父元素div
            // console.log($(".cp").parents()); // 查找所有的祖先元素
            // console.log($(".cp").parents(".divX")); // 查找所有的祖先div元素
            // console.log($(".cp").parentsUntil("html")); // 查找所有的祖先div元素
            // console.log($(".cp").offsetParent());
    
            $("#div1").siblings("p").css("background", "red");
        </script>
    
    
        <script>
            /* 
                过滤:这里讲的过滤和基本过滤选择器有一定的相似之处
                    eq(index|-index)    获取第N个元素
                        index       一个整数，指示元素基于0的位置,这个元素的位置是从0算起。
                        -index      一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)
                    first()         获取第一个元素
                    last()          获取最后个元素
                    hasClass(class)     检查当前的元素是否含有某个特定的类，如果有，则返回true。
                    is(expr|obj|ele|fn)     根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
                    filter(expr|obj|ele|fn)     筛选出与指定表达式匹配的元素集合。
                    not(expr|ele|fn)    删除与指定表达式匹配的元素
                    has(expr|ele)   保留包含特定后代的元素，去掉那些不含有指定后代的元素。
                    slice(start,[end]) 
            */
            // console.log($("#div1 > p:eq(1)")); // 基本过滤选择器,是写在核心函数的字符串里面
            // console.log($("#div1 > p").eq(1)); // 筛选之过滤,它是一个方法,通过jQuery对象来调用
    
    
            // $("#div1 > p").first().css("background","red");
            // $("#div1 > p").last().css("background","red");
    
            // console.log("div1是否包含cc类:",$("#div1").hasClass("cc"));
    
            // console.log("div1是否包含cc类:",$("#div1").hasClass("cc"));
    
            // 符合条件的保留
            // $("#div1 > p").filter(".cp").css("background","red");
    
            // 符合条件的移除
            // $("#div1 > p").not(".cp").css("background","red");
    
            // console.log($("#div1").is("div")); // $("#div1")是不是一个div元素
            // console.log($("#div1").is(".cc")); // $("#div1")是不是一个带class=cc的元素
    
            // $("div").has("a").css("background","red");
    
    
            // $("#div1 > p").slice(1).css("background","red");
        </script>
    </body>
    
    </html>