jQuery总结(二).Dom操作

最新推荐文章于 2024-07-17 21:53:04 发布

打小就淘气阿

最新推荐文章于 2024-07-17 21:53:04 发布

阅读量296

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/ararar_/article/details/107286817

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery总结(二)

jQuery中的Dom操作

1.创建节点

var $li=$('<li>新增的节点</li>')

2.插入节点

操作方法	功能	例子
append()	在每个匹配元素里面的末尾处插入参数内容。作为它的最后一个子元素。参数为一个或多个DOM 元素，DOM元素数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾。	$('ul').append($li)
appendTo(target)	颠倒了$(A).append(B)的效果，$(A).appendTo(B)将A追加到B中，将匹配的元素插入到目标元素的最后面。	$li.appendTo('ul')
prepend()	将参数内容插入到每个匹配元素的前面（元素内部）。也就是当前元素中的第一个子元素。	$('ul').prepend($li)
prependTo(target)	颠倒了$(A).prepend(B)的效果。	$li.prependTo('ul')
after()	在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点插在每个匹配元素的后面。	$('ul').after($li)
insertAfter(target)	在目标元素后面插入集合中每个匹配的元素(插入的元素作为目标元素的兄弟元素)。颠倒了$(A).after(B)的效果。	$li.insertAfter('ul')
before()	在匹配元素的前面插入内容（外部插入）作为其兄弟节点插在集合中每个匹配元素前面。	$('ul').before($li)
insertBefore(target)	颠倒了$(A).before(B)的效果。	$li.insertBefore('ul')

3.删除节点

操作方法	功能	例子
remove([selector])	从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。	$('div').remove()
detach( [selector ] )	.detach()方法和.remove()类似，但是.detach()保存所有jQuery数据和被移走的元素相关联事件。	$('div').detach()
empty()	无参数。从DOM中移除集合中匹配元素的所有子节点。	$('div').empty()

4.复制节点

clone(true/false)

//该方法返回的是一个节点的引用，参数默认为false，为浅复制；clone()方法中传递了一个参数true，为深复制；含义是复制元素的同时复制元素中所绑定的事件

<script>
        $(function(){
             //浅复制
            $('#btn1').click(function(){
               //获取到浅复制的节点，进行复制
                var $li=$('li:first').clone(false)
                $('ul').append($li)

            })
            // 2.深复制
            $('#btn2').click(function () {
            // 获取到要深复制的节点 进行深复制
            var $li = $('li:first').clone(true)
            // 将复制的元素添加到ul中
            $('ul').append($li)
         })
            
          // 浅复制只会复制元素 深复制含义是复制元素的同时复制元素中所绑定的事件
            $('li').click(function () {
             alert($(this).html())
            })
        })
    </script>

5.替换节点

操作方法	功能	例子
replaceWith(newContent)	用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。该方法会删除与节点相关联的所有数据和事件处理程序。参数是用来插入的内容,可能是HTML字符串，DOM元素，或者jQuery对象。	$('h1').replaceWith($h6)
replaeAll(target )	用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果。	$h6.replaceAll('h1')

6.包裹节点

操作方法	功能	例子
wrap([wrappingElement])	在每个匹配的元素外层包上一个html元素。	$('.inner').wrap($('<div class="green"></div>'))
wrapAll([wrappingElement])	将所有匹配的元素用一个元素来包裹，在所有匹配元素外面包一层HTML结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的HTML结构进行包裹。	$('.inner').wrapInner($('<div class="red"></div>'))
wrapInner([wrappingElement])	每个匹配元素里面内容(子元素)都会被这种结构包裹。	$('.inner').wrapAll($('<div class="green"></div>'))

7.节点遍历

注意:使用这些方法去解析html文档和xml文档都是可以的，因为html文档和xml文档都可以转换为dom模型。(也就是说在ajax中，如果后台传过来的是xml文档，那么我们使用jquery也可以用下面方法解析)。

操作方法	功能	例子
children([selector])	用于取得匹配元素的子元素集合（只考虑子元素而不考虑任何后代元素）。	var $result=$('.outer').children('.inner');
find(selector)	在当前元素对象中的子元素中查找，和参数所匹配的所有的后代元素
next([selector])	取得匹配的元素集合中每一个元素紧邻的后面兄弟元素。
nextAll([selector])	查找当前元素之后所有的同辈元素。
prev([selector])	取得匹配元素前面紧邻的兄弟元素
prevAll([selector])	查找当前元素之前所有的同辈元素
siblings([selector])	取得匹配元素前后所有的兄弟元素
closest( selector)	取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素
filter(selector)	把当前所选择的所有元素再进行筛选过滤
parent([selector])	取得匹配元素集合中，每个元素的父元素
parents([selector])	获得集合中每个匹配元素的祖先元素