jQuery的DOM操作的简单介绍

最新推荐文章于 2023-08-03 15:30:00 发布

xyphf_和派孔明

最新推荐文章于 2023-08-03 15:30:00 发布

阅读量690

点赞数

分类专栏： DOM&BOM操作文章标签： jquery dom append

本文链接：https://blog.csdn.net/xyphf/article/details/51872813

版权

DOM&BOM操作专栏收录该内容

64 篇文章 0 订阅

订阅专栏

一、节点的创建

1、
$("<div></div>")
2、创造元素节点并将文本内容一并描述
$("<div>我是文本节点</div>")
3、创建属性节点
$("<div id='test' class='aaron'>我是文本节点</div>")

二、内部插入
append()和appendTo()//插入内尾部
prepend和prependTo()//插入内头部

//例1:
<body>
    <h2>通过append与appendTo添加元素</h2>
    <button id="bt1">点击通过jQuery的append添加元素</button>
    <button id="bt2">点击通过jQuery的appendTo添加元素</button>
    <div class="content"></div>
    <script type="text/javascript">
        $("#bt1").on('click', function() {
            //.append(), 选择表达式在函数的前面，
            //参数是将要插入的内容。
            $(".content").append('<div class="append">通过append方法添加的元素</div>')
        })
    </script>

    <script type="text/javascript">
        $("#bt2").on('click', function() {
            //.appendTo()刚好相反，内容在方法前面，
            //无论是一个选择器表达式 或创建作为标记上的标记
            //它都将被插入到目标容器的末尾。
            $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
        })
    </script>
</body>

//例2：
<body>
    <h2>通过prepend与prependTo添加元素</h2>
    <button id="bt1">点击通过jQuery的prepend添加元素</button>
    <button id="bt2">点击通过jQuery的prependTo添加元素</button>
    <div class="aaron1">
        <p>测试prepend</p>
    </div>
    <div class="aaron2">
        <p>测试prependTo</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //找到class="aaron1"的div节点
        //然后通过prepend在内部的首位置添加一个新的p节点
        $('.aaron1')
            .prepend('<p>prepend增加的p元素</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //找到class="aaron2"的div节点
        //然后通过prependTo内部的首位置添加一个新的p节点
        $('<p>prependTo增加的p元素</p>')
            .prependTo($('.aaron2'))
    })
    </script>
</body>

三、外部插入
1、after()与before()
2、insertAfter()与insertBefore()

before与after都是用来对相对选中元素外部增加相邻的兄弟节点

2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面

2个方法都支持多个参数传递after(div1,div2,….) 可以参考右边案例代码

//例1：
<body>
    <h2>通过before与after添加元素</h2>
    <button id="bt1">点击通过jQuery的before添加元素</button>
    <button id="bt2">点击通过jQuery的after添加元素</button>
    <div class="aaron">
        <p class="test1">测试before</p>
    </div>
    <div class="aaron">
        <p class="test2">测试after</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在匹配test1元素集合中的每个元素前面插入p元素
        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在匹配test1元素集合中的每个元素后面插入p元素
        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
    })
    </script>
</body>

//例2：
<body>
    <h2>通过insertBefore与insertAfter添加元素</h2>
    <button id="bt1">点击通过jQuery的insertBefore添加元素</button>
    <button id="bt2">点击通过jQuery的insertAfter添加元素</button>
    <div class="aaron">
        <p class="test1">测试insertBefore,不支持多参数</p>
    </div>
    <div class="aaron">
        <p class="test2">测试insertAfter,不支持多参数</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在test1元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在test2元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
    })
    </script>
</body>

四、元素删除（以及empty()、remove()、detach()区别）

empty()方法
清空元素的所有节点、但是不能删除自己本身这个节点

remove()方法
可以删除自己以及自己所包含的所有后代节点。
提供传递一个筛选的表达式、用来指定删除选中集合的元素
$(‘p’).filter(‘:contains(‘3’)’).remove();
无参数，移除自身整个节点以及该节点的内部所有节点，包含节点上的事件与数据
有参数，移除筛选出的节点，以及该节点的内部所有节点，包括节点上事件与数据

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

五、Dom拷贝 clone()
.clone()方法深度复制所有的匹配自己的元素集合包括所有的匹配元素、匹配元素的下级元素、文字节点。
注意：如果节点有事件类型之类的处理，我们需要通过clone(true)传递一个布尔值true用来指定，这样不仅克隆了单纯的节点结构，还要把附带的事件与数据一并克隆了。

//例如：
//HTML部分
<div></div>
js部分
$('div').on('click',function(){//执行操作})

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

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

//注意：clone()方法是，在将它插入文档之前，我们可以修改克隆的元素或元素内容：如
$("#div1").append( $(this).clone().css('color','red') );
元素数据(data)内对象和数组不会被复制，将继续被克隆元素和原始数据共享。深复制的所有数据需要手动复制每一个。

六、DOM节点替换 replacewith()和replaceAll()

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

七、.wrap( )：在集合中匹配的每个元素周围包裹一个HTML结构

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

八、unwrap() ：将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

$('p').unwarp();

九、给所有的子元素添加一个共同的div包裹

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

十、将元素内子元素其他元素包裹起来

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

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

十一、
children()方法快速查找子一级元素

//快速查找合集里面的第一级子元素
//children()无参数
$("div").children();
//children()有参数
$("div").children(".selected");

find()方法快速查找子孙元素

//遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。必须填参数，只在后代中遍历，不包括自己。
$("div").find("li");

parent()方法查找合集里面的每一个元素的父元素

$(ul).parent()

parents()方法一直查到查找到祖先节点

$( "html" ).parents();

closest()方法查找当前元素的父辈祖辈元素

//例如：在div元素中，往上查找所有的li元素，可以这样表达
$("div").closet("li')

next()方法快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合

$('.item-2').next(':first').css('border', '1px solid blue')

prev()方法快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合

$('.item-3').prev(':last').css('border', '1px solid blue')

siblings() 快速查找指定元集合中每一个元素紧邻的前面后面同辈元素

 $('.item-2').siblings(':last').css('border', '2px solid blue')

add()方法

//通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素用add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中

//.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。

//处理一：传递选择器
$('li').add('p')

//处理二：传递dom元素
$('li').add(document.getElementsByTagName('p')[0])

//还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了
 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

each() 循环

//jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。比如我们操作$("li").css('') 给所有的li设置style值，因为jQuery是一个合集对象，所以css方法内部就必须封装一个遍历的方法，被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色，这里方法就是each

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

//所以大体上了解3个重点：
//each是一个for循环的包装迭代器
//each通过回调的方式处理，并且会有2个固定的实参，索引与元素
//each回调方法中的this指向当前迭代的dom元素
//如：
<ul>
    <li>张三</li>
    <li>李四</li>
</ul>

$("li").each(function(index, element) {
     index 索引 0,1
     element是对应的li节点 li,li
     this 指向的是li
})


<body>
    <h2>each方法</h2>
    <div class="left first-div">
        <div class="div">
            <ul>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
            </ul>
        </div>
        <div class="div">
            <ul>
                <li>list item 4</li>
                <li>list item 5</li>
                <li>list item 6</li>
            </ul>
        </div>
    </div>

    <br/>
    <button>点击：each方法遍历元素</button>
    <button>点击：each方法回调判断</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        //遍历所有的li
        //修改每个li内的字体颜色
        $("li").each(function(index, element) {
            $(this).css('color','red')
        })

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