JQuery--DOM

1、DOM节点创建

通过JavaScript可以很方便的获取DOM节点，从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构，但这样就非常不灵活了。

常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")：

$("<div>我是文本节点</div>")

$("<div id='test' class='aaron'>我是文本节点</div>")

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

<body>
    <h2>动态创建元素节点</h2>
    <button>点击通过jQuery动态创建元素节点</button>
    <script type="text/javascript">
    var $body = $('body');
    $body.on('click', function() {
        //通过jQuery生成div元素节点
        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
        $body.append(div)
    })
    </script>
</body>

2、DOM节点插入

append()，这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似；
appendTO()；
append() 前面是被插入的对象，后面是要在对象内插入的元素内容；
appendTo() 前面是要插入的元素内容，而后面是被插入的对象；
after()，插入内容作为参数；
after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入；
before()，插入内容作为参数；
before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插；
prepend()，向每个匹配元素的内部前置内容；
prependTo()，将内容插入到匹配元素内部的头部；

insertBefore()，与 before() 相反，插入内容在前面，例如：

$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))

insertAfter()，与after()相反，插入内容在前面。

3、DOM节点删除

empty()，只移除了指定元素中的所有子节点，包括元素的文本。
remove()，在empty的基础上，还会将自身溢出。
remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点：
```
$("p").filter(":contains('3')").remove()
```
detach()，数据保留的删除操作。如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理。

detach 不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。$("div").detach()这一句会移除对象，仅仅是显示效果没有了，但是内存中还是存在的，当你append之后，又重新回到了文档流中，就又显示出来了。

<body>
    <p>P元素1，默认给绑定一个点击事件</p>
    <p>P元素2，默认给绑定一个点击事件</p>
    <button id="bt1">点击删除 p 元素</button>
    <button id="bt2">点击移动 p 元素</button>
    <script type="text/javascript">
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; //去重
        //通过detach方法删除元素
        //只是页面不可见，但是这个节点还是保存在内存中
        //数据与事件都不会丢失
        p = $("p").detach()
    });

    $("#bt2").click(function() {
        //把p元素在添加到页面中
        //事件还是存在
        $("body").append(p);
    });
    </script>
</body>

4、DOM节点的复制与替换

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

例如：

HTML部分
<div></div>

JavaScript部分
$("div").on('click', function() {//执行操作})

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色。

<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>

replaceWith()，用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合，可以和其它方法链接使用。

替换前：
<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>

替换：
$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')

替换后：
<div>
    <p>第一段</p>
    <a style="color:red">替换第二段的内容</a>'
    <p>第三段</p>
</div>

replaceAll()，与replaceWith() 作用相同，只是替换的内容在前，替换的目标在后。
replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序。

wrap()，将元素用其他元素包裹起来，也就是给它增加一个父元素。该方法返回原始的元素集，以便之后使用链式方法。

包裹前：
<p>p元素</p>

包裹：
$('p').wrap('<div></div>')

包裹后：
<div>
    <p>p元素</p>
</div>

$('p').wrap(function() {
    return '<div></div>';   //与第一种类似，只是写法不一样
})

unwarp()，作用同 warp 方法相反，它将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
warpAll()，用法同 warp 相同，区别是 warp 是针对单个 DOM 元素处理的，而 warpAll 是针对多个 DOM 元素处理的。

warpInner()，将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，例如：

<div>p元素</div>
<div>p元素</div>

$('div').wrapInner('<p></p>')

或者

$('div').wrapInner(function() {
    return '<p></p>'; 
})

结果：
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

5、JQuery 遍历

children()，返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）；
children( selector )；
find()，find 和 children 方法类似，但它查找包含子节点的所有后代节点，与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。
parent()，使用同 children 方法类似，查找父级元素。
parents()，查找合集元素里面的每一个元素的所有祖辈元素（会层层往上找）。
closest()，从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素，例如：$("div").closet("li')。
next()，jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法。
prev()，快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法。
siblings()，快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法。
add()，可以往目标合集对象中添加新的元素，创建一个新的合集对象。
each()，each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数（从0开始计数）。

each是一个 for 循环的包装迭代器； each 通过回调的方式处理，并且会有2个固定的实参，索引与元素；each 回调方法中的 this 指向当前迭代的 dom 元素。

<ul>
    <li>慕课网</li>
    <li>Aaron</li>
</ul>

开始迭代li，循环2次：
$("li").each(function(index, element) {
     index 索引 0,1
     element是对应的li节点 li,li
     this 指向的是li
})

<script type="text/javascript">
    $("button:last").click(function() {
        //遍历所有的li
        //修改偶数li内的字体颜色
        $("li").each(function(index, element) {
            if (index % 2) {
                $(element).css('color','blue')
            }
        })
    })
</script>

posted @ 2017-07-05 10:05 unique1319 阅读(119) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

JQuery--DOM

公告