jQuery节点操作

沐沐185

已于 2022-07-12 20:39:22 修改

阅读量1.4k

点赞数 1

分类专栏： JS 文章标签： javascript

于 2022-07-12 19:28:52 首次发布

本文链接：https://blog.csdn.net/weixin_67642008/article/details/125743398

版权

JS 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

一、插入节点

1.元素内部插入子节点

2.元素外部插入同辈节点

二、删除节点

（1）remove()：删除整个节点

（2）empty()：清空节点内容

（3）detach()：删除整个节点，保留元素的绑定事件、附加的数据

 <ul>
        <li>我是中国人</li>
        <li>我是中国人</li>
        <li>我是中国人</li>
        <li>我是中国人</li>
        <li>我是中国人</li>
    </ul>
    <script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
    <script>
        /* 删除节点 */
        //1.remove():删除整个节点
        // $('ul').remove();
        //2.empty():清空节点内容,但是节点还在
        // $('ul').empty();

        //3.detach()删除整个节点，保留元素的绑定事件/附加的数据

        //ul绑定点击事件
        $('ul').click(function () {
            alert(1)
        })
        //detach()删除节点会返回节点
        var ul = $('ul').detach();
        //将返回值重新插入到body中，此时仍然是有点击事件
        $('body').append(ul);
    </script>

三、替换节点

replaceWith()方法和replaceAll()用于替换某个节点

$(A).replaceWith(B)是表示用B来替换A

$(B).replaceAll(A)是表示用B来替换A

 <ul>
        <li>我是张三</li>
        <li>我是张三</li>
        <li>我是张三</li>
        <li>我是张三</li>
        <li>我是张三</li>
    </ul>
    <script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
    <script>
        $('li').click(function () {
            //this是原生的写法，在jQuery中需要用$(this)
            // $(this).replaceWith("<li>我是飞行员</li>");
            console.log($("<li>我是驾驶员</li>").replaceAll($(this)));
        })
        var img = $('<img>');
        console.log(img);
    </script>

四、复制节点

clone(参数)用于复制某个节点

参数== true时，会将节点的事件处理一起复制。

参数== false 时，不会复制事件，只会复制节点。

五、属性操作

1.删除属性 $(selector).removeAttr(name) ;

2.获取和设置属性

获取属性： $(selector).attr([name]) ;

设置属性：

（1）设置单个属性 $(selector).attr(name：value) ;

（2）设置多个属性的值 $(selector).attr({[name1:value1]…[nameN:valueN]}) ;

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F06%2FChMkJlbKymiIG4yQAAEaUR_2JG8AALIbQEMb10AARpp541.jpg&refer=http%3A%2F%2Fdesk.fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660184008&t=9566c7c11b222567f247321dbed00846"
        alt="">
    <script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
    <script>
        /* 获取和设置元素属性 attr() */
        //给 img 设置属性；
        //1.设置单个属性
        $('img').attr('width', '300px')
        $('img').attr('border', '2px solid #FFF');
        //2.设置多个属性
        $('img').attr({
            'width': '600px',
            'height': '600px',
            title: '我是小兔子'
        })
        //3.获取属性
        $('img').click(function () {
            alert('图片的高度=' + $(this).attr('width'))
        })
        //删除元素属性
        $('img').removeAttr('height')
    </script>

注：prop 方法

用法：$(select).prop("属性") 一般用在表单元素的默认值确认；

如果属性存在，返回true,不存在返回false

而：$(select).attr("属性") 方法，属性存在返回属性值，不存在返回undefined，

适应于自定义属性的读取；

    <a data-name="abc" href="#"></a>
    <input type="checkbox" name="" id="" checked>男
    <script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
    <script>
        /* attr 只适用于元素本身上的属性，比如，img标签本身具有的wigth */
        console.log($('input').attr("checked")); //-->如果有返回checked，没有返回undefined
        //表单元素上的默认属性，用prop比较好用
        console.log($('input').prop("checked")); //存在返回true,不存在返回false
        //attr 适用于自定义属性的读取
        console.log($('a').attr("data-name")); //-->abc
    </script>

六、节点遍历

1.遍历子节点：

children()方法可以用来获取元素的所有子元素

2.遍历同辈元素

（1）next([expr]) 用于获取紧邻匹配元素之后的元素；

（2）prev([expr]) 用于获取紧邻匹配元素之前的元素；

（3）slibings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素；

<ul>
        <li>我是程序员</li>
        <ul>
            <li class="one">我是中国人</li>
            <li>我是中国人</li>
            <li>我是中国人</li>
        </ul>
        <li>我是程序员</li>
        <li>我是程序员</li>
        <li>我是程序员</li>
        <li>我是程序员</li>
    </ul>
    <script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
    <script>
        $('li').mouseover(function () {
            $(this).css("background", "pink");
            //$(this).siblings() ,可以获取除匹配元素之外的所有同辈元素
            $(this).siblings().css("background", "#fff")
        })

        //$('ul').children() 方法可以获取所有的子元素
        $('ul').children().css("font-size", "40px")
        //$('li:first').next() 可以获取匹配元素相邻之后的元素(不一定是同类元素)
        $('li:first').next().css("font-weight", "700")
        // $('li:eq(2)').prev() 获取之前的元素
        $('li:eq(2)').prev().css("border", "2px solid red")

    </script>

3.遍历前辈元素

（1）parent()：获取元素的父级元素

（2）parents()：元素元素的祖先元素

（3）closest(参数)，找到参数匹配最近的一个祖先元素就停止,相比parents()在性能上更优

  /* 遍历前辈元素 */
        // 1, parent()： 获取元素的父级元素
        $('.one').parent().css('border', '3px solid red');
        // 2, parents()： 元素元素的祖先元素， 包括html和body
        $('.one').parents().css('border', '3px solid red');
        // 3, closest(参数)， 找到参数匹配最近的一个祖先元素就停止, 在性能上更优
        $('.one').closest('ul').css('border', '3px solid red');
        //对比 parents(参数) 方法 会访问所有匹配的前辈元素， 会浪费资源
        $('.one').parents('ul').css('border', '3px solid red');

4.遍历其他方法：

（1）each( ) ：规定为每个匹配元素规定运行的函数

 <ul>
        <li>我是程序员</li>
        <li>我是程序员</li>
        <li>我是程序员</li>
        <li>我是程序员</li>
        <li>我是程序员</li>
    </ul>
    <script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
    <script>
        //each()方法；规定为每个匹配元素规定运行的函数
        //$(selector).each(function(index,ele)) ;
        //ele 是指的原生的元素
        $(function () {
            $('li').each(function (index, ele) {
                var str = $(this).text() + index;
                $(this).html(str)
            })
        })
    </script>

（2）$(select).find(参数) 方法：

在select 父元素中找到匹配参数的子孙元素，在select之外的不会被选中；

而通过类选中器选中的是所有符合的元素；

<body>
    <div>
        <div class="two">我是程序员</div>
    </div>
    <ul>
        <li>我是程序员</li>
        <li class="two">我是程序员</li>
        <li>我是程序员</li>
        <li>我是程序员</li>
        <li>我是程序员
            <ol>
                <li>我是程序员</li>
                <li class="two">我是程序员</li>
                <li>我是程序员</li>
                <li>我是程序员</li>
                <li>我是程序员</li>
            </ol>
        </li>
    </ul>
    <script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
    <script>
        //在 ul 父元素中找到含有class 为two的子孙元素， 在ul 外不会选中；
        // $('ul').find('.two').css("border", "2px solid red")
        $('.two').css("border", "2px solid red")

注：

1.字符串拼接模板:

可以将所有的内容直接用字符串拼接的方法，放入父元素；

let str = '<li>' +
                '<img src=' + arr[num] + ' class="img1">' +
                '<div class="div1">' +
                '<p class="p1"> ' + $('#title').val() + '</p>' +
                '<p class="p2">' +
                '<span class="text1">板块：' + $('#sec').val() + '</span>' +
                '发表时间：' + timer +
                ' </p>' +
                ' </div>' +
                ' </li>';
$('#postList').prepend(str)

2.es6字符串模板，``包裹字符串，${变量}

  let str2 = `
            <li>
                <img src= ${arr[num]} class="img1">
                    <div class="div1">
                        <p class="p1">${$('#title').val()}</p>
                        <p class="p2"><span class="text1">板块：${$('#sec').val()}</span>发表时间：${timer} </p>
                    </div>
                </li>
            `
  $('#postList').prepend(str2)