jQuery--DOM操作(一)

最新推荐文章于 2022-06-10 20:10:52 发布

我可能是个假开发

最新推荐文章于 2022-06-10 20:10:52 发布

阅读量280

点赞数 1

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

本文链接：https://blog.csdn.net/csdn_gia/article/details/79109235

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

jQuery–DOM操作(一)

通过jQuery的选择器可以方便的获取页面上的元素，通过选择器获取到的，不管是多个元素、零个元素还是一个元素，都会被封装到类数组的jQuery对象中，也称为jQuery对象集合或jQuery元素集合等。

jQuery对象集合.jpg

一、创建HTML

1.DOM对象和jQuery对象
区别：
• 检测DOM Object：

if ( obj.nodeType )

• 检测jQuery Object：

if ( obj.jquery )

• 转换：

var jqueryObj = $(domObj);
var domObj = jqueryObj.get([index]);

代码示例：

<head>
    <meta charset="UTF-8">
    <title>DOM Object vs jQuery Object</title>
</head>

<body>
    <div id="div">div</div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        var DOMObject = document.getElementById('div');
        var jQueryObject = $('#div');

        console.log(DOMObject);
        console.log(jQueryObject);

        //console.log('DOMObject.nodeType: %s', DOMObject.nodeType);
        //console.log('DOMObject.jquery: %s', DOMObject.jquery);

       // console.log('jQueryObject.nodeType: %s', jQueryObject.nodeType);
       // console.log('jQueryObject.jquery: %s', jQueryObject.jquery);

       // console.log('jQueryObject.get(0): %o', jQueryObject.get(0));
       // console.log('$(DOMObject): %o', $(DOMObject));

       // console.log('jQueryObject.get(0).nodeType: %s', jQueryObject.get(0).nodeType);
        //console.log('$(DOMObject).jquery: %s', $(DOMObject).jquery);
    });
    </script>
</body>

DOM对象和jQuery对象.jpg

2.创建元素

 $('<div>Hello</div>');

设置属性:

<head>
    <meta charset="UTF-8">
    <title>create HTML</title>
</head>

<body>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        var div = $('<div>Hello</div>'); //此时div为jQuery对象

        console.log(div);

        console.log($('div')); //在没有放到页面上之前，通过选择器是选择不到的

        div.appendTo('body'); //放到页面上  appendTo() 追加

        console.log($('div')); //此时可以选择出来

        //追加属性
        var link = $('<a>', {
            text: '百度',
            href: 'https://www.baidu.com',
            target: '_blank',
            title: '去往百度首页'
        });

        link.appendTo('body');

        var link2 = $('<a>百度</a>').attr({
            href: 'https://www.baidu.com',
            target: '_blank',
            title: '去往百度首页'
        });

        link2.appendTo('body');
    });
    </script>
</body>

3.检查和提取元素

检查和提取元素.jpg

(1)检查元素：

①检查元素数量

$('xxx').length

(2)提取元素

①[index] 返回DOM元素
②get([index]) 返回DOM元素或元素集合
③eq(index) 返回jQuery对象
④first()
⑤last()
⑥toArray()

<body>
<ul>
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
    <li>item-4</li>
    <li>item-5</li>
    <li id="item6">item-6</li>
    <li>item-7</li>
    <li>item-8</li>
    <li>item-9</li>
</ul>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
        var elements = $('li');
        console.log(elements.length);//9  检查元素数量


        var elements2 = $('div');
        //console.log(elements2[0].style.color = 'blue');  // error
        //console.log(elements2.eq(0).addClass('blue'));  // no error
        //console.log(elements2.addClass('blue'));  // no error


        console.log(elements[0]);
        console.log(elements[1]);
        console.log(elements.get()); //获取所有 (数组)
        console.log(elements.get(0));
        console.log(elements.get(1));
        console.log(elements.get(-1));//<li>item-9</li> 从最后往前计算 -1为第一个元素，以此类推。
        console.log(elements[-1]);
        console.log(elements.get(100)); //undefined
        console.log(elements[100]);//undefined

        console.log(elements.eq(0));//eq方法，性能比筛选器高
        console.log($('li').eq(0)); //eq筛选器
        console.log($('li:eq(0)'));

        console.log(elements.eq(0));
        console.log(elements.first()); //不需要参数 性能比筛选器高

        console.log(elements.eq(-1));
        console.log(elements.last());

        console.log(elements.toArray());
        console.log(elements.get());

        console.log(elements.index($('#item6'))); 

    });
</script>

二、通过关系查找jQuery对象

<body>

<div id="box">
    <div>
        <div>
            <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</p>
        </div>
    </div>
</div>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {

        var count1 = $('#info').parents().length;
        var count2 = $('#info').parents('div').length;

        console.log(count1);
        console.log(count2);

        var count3 = $('#box > *').length;
        var count4 = $('#box').children().length;

        console.log(count3);
        console.log(count4);

        var count5 = $('#info').children().length;
        var count6 = $('#info').contents().length;

        console.log(count5);
        console.log(count6);

    });
</script>

通过关系查找jQuery对象的方法：
• children([selector])：直接子元素
• contents()：直接子元素
• find(selector)：包含子元素和孙子元素
• parent([selector])：返回直接父元素
• parents([selector])：返回所有父元素
• parentsUntil([selector])：获取到具体层级的父元素（不包含最后一个）
• closest(selector)：从元素本身开始，逐级向上进行元素的匹配，并返回最先匹配的元素。会首先检查当前元素是否匹配，如果匹配则返回元素本身，不匹配时向上逐级寻找，都没找到则返回一个空的jQuery对象。
• next([selector])：获取当前元素之后紧邻的同辈元素
• nextAll([selector])：当前元素之后的所有同辈元素
• nextUntil([selector])：查找当前元素之后的所有同辈元素，直到遇到匹配的元素为止。
• prev([selector])：往前查找同辈元素。
• prevAll([selector])
• prevUntil([selector])
• siblings([selector])：取得元素的所有同辈元素的元素集合，即把该元素的兄弟姐妹全部取出来。

<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</p>
            <ul>
                <li class="item1">item1</li>
                <li class="item2">item2</li>
                <li class="item3">item3</li>
                <li class="item4">item4</li>
                <li class="item5">item5</li>
                <li class="item6">item6</li>
                <li class="item7">item7</li>
                <li class="item8">item8</li>
                <li class="item9">item9</li>
            </ul>
        </div>
    </div>
</div>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {

        console.log($('#box3').children());
        console.log($('#box3').children('p'));

        console.log($('#box3').contents());

        console.log($('#box3').find('.item1'));

        console.log($('ul, #box3').parent());
        console.log($('ul, #box3').parent('#box2'));

        console.log($('ul, #box3').parents());
        console.log($('ul, #box3').parents('#box2'));

        console.log($('.item1').parentsUntil('#box1'));

        console.log($('.item1').closest('div'));

        console.log($('.item1').closest('#box1'));
        console.log($('.item1').parents('#box1'));


        console.log($('.item4').next('li')); //item5
        console.log($('.item4').nextAll('li'));
        console.log($('.item4').nextUntil('.item7'));//item5 item6 

        console.log($('.item4').prev('li'));
        console.log($('.item4').prevAll('li'));
        console.log($('.item4').prevUntil('.item1'));

        console.log($('.item4').nextUntil('.item1'));
        console.log($('.item4').prevUntil('.item7'));


        console.log($('.item4').siblings());//不包含本身
        console.log($('.item4').siblings('.item2'));

    });
</script>

三、筛选和遍历jQuery对象

(1)添加元素
• add(selector)

(2)过滤元素
• not(selector):删除掉该元素。
• filter(selector)：筛选出和指定表达式匹配的元素集合，把选择器匹配到的返回。
• has(selector)：保留包含特定后代的元素

(3)获取子集
• slice(start[, end])

(4)转换元素
• map(callback)：将一个jQuery对象转换成另一个jQuery对象

(5)遍历元素
• each(iterator)

<body>

<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</p>
            <ul>
                <li class="item1">item1</li>
                <li class="item2">item2</li>
                <li class="item3">item3</li>
                <li class="item4">item4</li>
                <li class="item5">item5</li>
                <li class="item6">item6</li>
                <li class="item7">item7</li>
                <li class="item8">item8
                    <ul></ul>
                </li>
                <li class="item9">item9</li>
            </ul>
        </div>
    </div>
</div>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {

        console.log($('.item1, .item2'));
        console.log($('.item1').add('.item2'));

        console.log($('li').not('.item2, .item3'));
        console.log($('li').filter('.item2, .item3'));

        console.log($('li').not(function (index) {
            return $(this).hasClass('item1');
        }));
        console.log($('li').filter(function (index) {
            return $(this).hasClass('item1');
        }));

        console.log($('li').has('ul'));

        console.log($('li').slice(0));//所有元素
        console.log($('li').slice(3));
        console.log($('li').slice(3, 5));
        console.log($('li').slice(-2));//从集合尾部开始 8、9

        console.log($('div').map(function (index, domElement) { 
            return this.id;
        }));

        console.log($('li').each(function (index, domElement) {
            this.title = this.innerText;
        }));

        console.log($('div').each(function (index, domElement) {
        if(this.id === 'box2'){
            return false //return true:相当于continue  false：相当于break
        }
        this.title = this.id
    }));
    });
</script>

四、jQuery对象的其他操作

• is(selector)
• end():回到最近的一个破坏性操作之前，将匹配的元素集合变为前一次状态
• addBack([selector])：

破坏性操作.png

注意：如果不是破坏性操作，调用end会返回空

<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</p>
                <ul>
                    <li class="item1">item1</li>
                    <li class="item2">item2</li>
                    <li class="item3">item3</li>
                    <li class="item4">item4</li>
                    <li class="item5">item5</li>
                    <li class="item6">item6</li>
                    <li class="item7">item7</li>
                    <li class="item8">item8
                        <ul></ul>
                    </li>
                    <li class="item9">item9</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        console.log($('#box3').children().is('p')); //true
        console.log($('#box3').children().is('img'));//false

        console.log($('#box3').children().end());//
        console.log($('#box3').end());

        //        console.log(
        //            $('#box3').find('.item3').css('color', 'red') //破坏性操作 find之后返回的是item3
        //                .end().find('.item5').css('color', 'blue') //返回上一次状态
        //                .end().find('.item7').css('color', 'green')
        //                .end().find('.item9').css('color', 'orange')
        //        );

        //        console.log(
        //            $('.item3').nextUntil('.item6').css('color', 'red')
        //        );

        console.log(
            $('.item3').nextUntil('.item6').addBack().css('color', 'red')
        );
    });
    </script>
</body>

我可能是个假开发

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery--DOM操作(一)

jQuery–DOM操作(一)通过jQuery的选择器可以方便的获取页面上的元素，通过选择器获取到的，不管是多个元素、零个元素还是一个元素，都会被封装到类数组的jQuery对象中，也称为jQuery对象集合或jQuery元素集合等。一、创建HTML1.DOM对象和jQuery对象区别： • 检测DOM Object：if ( obj.nodeType )• 检测
复制链接

扫一扫