jQuery基础(二)—DOM篇（慕课网）

朱雀 2021-06-24 16:11 375阅读 0赞

### 第一章 课程介绍 ###

此课程主要讲的是利用jq对节点的操作，以及一些其他新的功能。

### 第二章 DOM节点的创建 ###

###### 2-1 DOM创建节点及节点属性 ######

如果我们通过AJAX获取到数据之后然后才能确定结构的话，这种情况就需要动态的处理节点了。  
创建节点元素流程比较简单，大体如下：  
  创建节点(常见的：元素、属性和文本)  
  添加节点的一些属性  
  加入到文档中

流程中涉及的一点方法：  
  创建元素：document.createElement  
  设置属性：setAttribute  
  添加文本：innerHTML  
  加入文档：appendChild

###### 2-2 jQuery节点创建与属性的处理 ######

$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

这就是jQuery创建节点的方式，让我们保留HTML的结构书写方式，非常的简单、方便和灵活  
例题：

### 第三章 DOM节点的插入 ###

###### 3-1 DOM内部插入append()与appendTo() ######

动态创建的元素是不够的，它只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。那么问题来了，怎么放到文档上？  
  这里就涉及到一个位置关系，常见的就是把这个新创建的元素，当作页面某一个元素的子元素放到其内部。针对这样的处理，jQuery就定义2个操作的方法

![2789632-a238c5683e27ac30.png][]

.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同  
  append()前面是被插入的对象，后面是要在对象内插入的元素内容  
  appendTo()前面是要插入的元素内容，而后面是被插入的对象

###### 3-2 DOM外部插入after()与before() ######

节点与节点之前有各种关系，除了父子，祖辈关系，还可以是兄弟关系。之前我们在处理节点插入的时候，接触到了内部插入的几个方法，这节我们开始讲外部插入的处理，也就是兄弟之间的关系处理，这里jQuery引入了2个方法，可以用来在匹配I的元素前后插入内容。

![2789632-aa6cc393653925f8.png][]

注意点：  
  after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入  
  before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插

###### 3-3 DOM内部插入prepend()与prependTo() ######

在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo

![2789632-79e8a57364a15a11.png][]

append就是在最后添加，prepend在最前添加

###### 3-4 DOM外部插入insertAfter()与insertBefore() ######

与内部插入处理一样，jQuery由于内容目标的位置不同，然增加了2个新的方法insertAfter与insertBefore

![2789632-ca715884437eabca.png][]

这些功能一样，语法不同的，如果以后自己写的时候再慢慢区分吧，现在先做一个大致了解……

### 第四章 DOM节点的删除 ###

###### 4-1 DOM节点删除之empty()的基本用法 ######

要移除页面上节点是开发者常见的操作，jQuery提供了几种不同的方法用来处理这个问题，这里我们开仔细了解下empty方法  
  empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。  
  这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。  
例题：

<body>
        <h2>通过empty移除元素</h2>
        <div id="test">
            <p>p元素1</p>
            <p>p元素2</p>
        </div>
        <button>点击通过jQuery的empty移除元素</button>
        <script type="text/javascript">
        $("button").on('click', function() {
            //通过empty移除了当前div元素下的所有p元素
            //但是本身id=test的div元素没有被删除
            $("#test").empty()
        })
        </script>
    </body>

移除节点及里面的内容。

###### 4-2 DOM节点删除之remove()的有参用法和无参用法 ######

remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。  
  如果不通过remove方法删除这个节点其实也很简单，但是同时需要把事件给销毁掉，这里是为了防止"内存泄漏"，所以前端开发者一定要注意，绑了多少事件，不用的时候一定要记得销毁  
例题：

<body>
        <h2>通过jQuery remove方法移除元素</h2>
        <div class="test1">
            <p>p元素1</p>
            <p>p元素2</p>
        </div>
        <div class="test2">
            <p>p元素3</p>
            <p>p元素4</p>
        </div>
        <button>通过点击jQuery的empty移除元素</button>
        <button>通过点击jQuery的empty移除指定元素</button>
        <script type="text/javascript">
        $("button:first").on('click', function() {
            //删除整个 class=test1的div节点
            $(".test1").remove()
        })
    
        $("button:last").on('click', function() {
            //找到所有p元素中，包含了3的元素
            //这个也是一个过滤器的处理
            $("p").remove(":contains('3')")
        })
        </script>
    </body>

###### 4-3 DOM节点删除之empty和remove区别 ######

要用到移除指定元素的时候，jQuery提供了empty()与remove(\[expr\])二个方法，两个都是删除元素，但是两者还是有区别  
empty方法  
  严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点  
empty不能删除自己本身这个节点  
remove方法  
  该节点与该节点所包含的所有后代节点将同时被删除  
  提供传递一个筛选的表达式，删除指定合集中的元素  
例题：

![2789632-be09964bdc7c6687.gif][]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
            <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
        <style>
        .left,
        .right {
            width: 300px;
        }
        
        .left div,
        .right div {
            width: 100px;
            height: 90px;
            padding: 5px;
            margin: 5px;
            float: left;
            border: 1px solid #ccc;
        }
        
        .left div {
            background: #bbffaa;
        }
        
        .right div {
            background: yellow;
        }
        </style>
    </head>
    
    <body>
        <h2>通过empty与remove移除元素</h2>
        <div class="left">
            <button id="bt1">点击通过jQuery的empty移除内部P元素</button>
            <button id="bt2">点击通过jQuery的remove移除整个节点</button>
        </div>
        <div class="right">
            <div id="test1">
                <p>p元素1</p>
                <p>p元素2</p>
            </div>
            <div id="test2">
                <p>p元素3</p>
                <p>p元素4</p>
            </div>
        </div>
        <script type="text/javascript">
        $("#bt1").on('click', function() {
            //删除了2个p元素，但是本着没有删除 
            $("#test1").empty()
        })
    
        $("#bt2").on('click', function() {
            //删除整个节点
            $("#test2").remove()
        })
        </script>
    </body>
    
    </html>

###### 4-4 DOM节点删除之保留数据的删除操作detach() ######

如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理  
  detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。

###### 4-5 DOM节点删除之detach()和remove()区别 ######

remove()和detach()可能就是其中的一个，可能remove()我们用得比较多，而detach()就可能会很少了

![2789632-1bcaf7d168a15b10.png][]

remove：移除节点  
  无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据  
  有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

detach：移除节点  
  移除的处理与remove一致  
  与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来  
  例如：$("p").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。  
例题：

<html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
        p{
            border: 1px solid red;
        }
        </style>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    </head>
    
    <body>
        <h3>给页面2个p元素节点绑定点击事件,点击后弹出自己本身的节点内容</h3>
        <p>元素p1，同时绑定点击事件</p>
        <p>元素p2，同时绑定点击事件</p>
        <h3>通过点击2个按钮后观察方法处理的区别</h3>
        <button>点击通过remove处理元素p1</button>
        <button>点击通过detach处理元素p2</button>
    </body>
    <script type="text/javascript">
        //给页面上2个p元素都绑定时间
        $('p').click(function(e) {
            alert(e.target.innerHTML)
        })
    
        $("button:first").click(function() {
            var p = $("p:first").remove();
            p.css('color','red').text('p1通过remove处理后,点击该元素,事件丢失')
            $("body").append(p);
        });
    
        $("button:last").click(function() {
            var p = $("p:first").detach();
            p.css('color','blue').text('p2通过detach处理后,点击该元素事件存在')
            $("body").append(p);
        });
    </script>
    </script>
    
    </html>

### 第五章 DOM节点的复制与替换 ###

###### 5-1 DOM拷贝clone() ######

.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。  
  clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了  
例题：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
        <style>
        .left,
        .right {
            width: 300px;
            height: 120px;
        }
        
        .left div,
        .right div {
            width: 100px;
            height: 90px;
            padding: 5px;
            margin: 5px;
            float: left;
            border: 1px solid #ccc;
            background: #bbffaa;
        }
        </style>
    </head>
    
    <body>
        <h2>通过clone克隆元素</h2>
        <div class="left">
            <div class="aaron1">点击,clone浅拷贝</div>
            <div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>
        </div>
        <script type="text/javascript">
            //只克隆节点
            //不克隆事件
            $(".aaron1").on('click', function() {
                $(".left").append( $(this).clone().css('color','red') )
            })
        </script>
    
        <script type="text/javascript">
            //克隆节点
            //克隆事件
            $(".aaron2").on('click', function() {
                console.log(1)
                $(".left").append( $(this).clone(true).css('color','blue') )
            })
        </script>
    </body>
    
    </html>

###### 5-2 DOM替换replaceWith()和replaceAll() ######

总结：

> .replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别  
> .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序  
> .replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用  
> .replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

例题：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
        <style>
    
        .right div {
            background: yellow;
        }
        </style>
    </head>
    
    <body>
        <h2>replaceWith()和replaceAll()</h2>
        <div class="left">
            <button class="bt1">点击,通过replaceWith替换内容</button>
            <button class="bt2">点击,通过rreplaceAll替换内容</button>
        </div>
        <div class="right">
            <div>
                <p>第一段</p>
                <p>第二段</p>
                <p>第三段</p>
            </div>
            <div>
                <p>第四段</p>
                <p>第五段</p>
                <p>第六段</p>
            </div>
        </div>
        <script type="text/javascript">
        //只克隆节点
        //不克隆事件
        $(".bt1").on('click', function() {
            //找到内容为第二段的p元素
            //通过replaceWith删除并替换这个节点
            $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
        })
        </script>
        <script type="text/javascript">
        //找到内容为第六段的p元素
        //通过replaceAll删除并替换这个节点
        $(".bt2").on('click', function() {
            $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
        })
        </script>
    </body>
    
    </html>

###### 5-3 DOM包裹wrap()方法---被包 ######

注意：  
  .wrap()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深，但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法。

###### 5-4 DOM包裹unwrap()方法（删除5-3方法的方法） ######

###### 5-5 DOM包裹wrapAll()方法-----由一个元素代替全体元素，发出请求被包 ######

###### 5-6 DOM包裹wrapInner()方法-----主动去包别人 ######

### 第六章 JQuery遍历 ###

###### 6-1 jQuery遍历之children()方法 ######

children()无参数  
  允许我们通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象  
  注意：jQuery是一个合集对象，所以通过children是匹配合集中每一给元素的第一级子元素  
.children()方法选择性地接受同一类型选择器表达式  
$("div").children(".selected")  
  同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式  
例题：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" href="imooc.css" type="text/css">
        <style>
        .left {
            width: auto;
            height: 120px;
        }
        
        .left div {
            width: 150px;
            height: 70px;
            padding: 5px;
            margin: 5px;
            float: left;
            background: #bbffaa;
            border: 1px solid #ccc;
        }
        
        a {
            display: block;
        }
        </style>
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    </head>
    
    <body>
        <h2>children方法()</h2>
        <div class="left first-div">
            <div class="div">
                <ul class="level-1">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </div>
            <div class="div">
                <ul class="level-2">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </div>
            <div class="div">
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </div>
        </div>
        <button id="bt1">点击：children无参数</button>
        <button id="bt2">点击：children传递表达式</button>
        <script type="text/javascript">
        $("#bt1").click(function() {
            $(".div").children().css("border","1px solid red");
        })
        </script>
    
        <script type="text/javascript">
        $("#bt2").click(function() {
            //找到所有class=div的元素
            //找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色
            $('.div').children(':last').css('border', '3px solid blue')
        })
        </script>
    
    </body>
    
    </html>

###### 6-2 jQuery遍历之find()方法 ######

jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）

.find()方法要注意的知识点：  
  find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。  
与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '\*'。  
find只在后代中遍历，不包括自己。  
  选择器 context 是由 .find() 方法实现的；因此，('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。

注意重点：  
  .find()和.children()方法是相似的  
  1.children只查找第一级的子节点  
  2.find查找范围包括子节点的所有后代节点  
例题：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" href="imooc.css" type="text/css">
        <style>
        .left {
            width: auto;
            height: 200px;
        }
        
        .left div {
            width: 150px;
            height: 70px;
            padding: 5px;
            margin: 5px;
            float: left;
            background: #bbffaa;
            border: 1px solid #ccc;
        }
        
        span {
            color: blue;
        }
        </style>
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    </head>
    
    <body>
        <h2>find方法()</h2>
        <div class="left first-div">
            <div class="div">
                <ul class="level-1">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </div>
            <div class="div">
                <ul class="level-2">
                    <li class="item-1">1</li>
                    <li class="item-2 test">2</li>
                    <li class="item-3">3</li>
                </ul>
            </div>
            <div class="div">
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </div>
        </div>
        <button>点击：find传递表达式</button>
        <br/>
        <br/>
        <h3>find表达式</h3>
        <div style="border:1px solid red;">
            <p>
                <span>测试1</span>
                <a>测试2</a>
            </p>
            <p>
                <span>慕课网1</span>
                <a>慕课网2</a>
            </p>
            <div>
                <span>Aaron1</span>
                <a>Aaron2</a>
            </div>
        </div>
        <br/>
        <br/>
        <button>点击：find传递$对象</button>
        <script type="text/javascript">
        $("button:first").click(function() {
            $(".left").find("li:last").css("border","1px solid red");
        })
        </script>
        <script type="text/javascript">
        $("button:last").click(function() {
            //找到所有p元素，然后筛选出子元素是span标签的节点
            //改变其字体颜色
            var $spans = $('span');
            $("p").find($spans).css('color', 'red');
        })
        </script>
    </body>
    
    </html>

###### 6-3 jQuery遍历之parent()方法 ######

因为是父元素，这个方法只会向上查找一级

###### 6-4 jQuery遍历之parents()方法 ######

其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点

###### 6-5 jQuery遍历之closest()方法 ######

.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了  
  起始位置不同：.closest开始于当前元素 .parents开始于父元素  
  遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合  
   结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

###### 6-6 jQuery遍历之next()方法 ######

jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法

###### 6-7 jQuery遍历之prev()方法 ######

jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法

###### 6-8 jQuery遍历之siblings() ######

jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法

###### 6-9 jQuery遍历之add()方法 ######

处理一：传递选择器

> $('li').add('p')

处理二：传递dom元素

> $('li').add(document.getElementsByTagName('p')\[0\])

还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了

> $('li').add('< p >新的p元素< /p >').appendTo(目标位置)

###### 6-10 jQuery遍历之each() ######

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数  
使用方式：

--------------------

![2789632-3b18269684ea9294.png][]

公众号.png

[2789632-a238c5683e27ac30.png]: /images/20210615/08c2812667f24322995ae39affdfc8c5.png
[2789632-aa6cc393653925f8.png]: /images/20210615/7d18c0ce1804465a9a13829baf003687.png
[2789632-79e8a57364a15a11.png]: /images/20210615/4a8de6d03358498091aed870c1f7e0b7.png
[2789632-ca715884437eabca.png]: /images/20210615/e51648705fe34252ae65ef4013f3f86a.png
[2789632-be09964bdc7c6687.gif]: /images/20210615/805872efbfc44450a380c00c1edb5beb.png
[2789632-1bcaf7d168a15b10.png]: /images/20210615/5061fa770b114347b374cf15084b5177.png
[2789632-3b18269684ea9294.png]: /images/20210615/7780b16b76244bc99fa9b12b284349d8.png