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>

最后编辑于：2018.01.20 16:23:41

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 200,783评论 5赞 472
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,396评论 2赞 377
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 147,834评论 0赞 333
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,036评论 1赞 272
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,035评论 5赞 362
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,242评论 1赞 278
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,727评论 3赞 393
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,376评论 0赞 255
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,508评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,415评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,463评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,140评论 3赞 316
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,734评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,809评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,028评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,521评论 2赞 346
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,119评论 2赞 341

jQuery--DOM操作(一)