jQuery--DOM操作(一)

千與千尋

通過jQuery的選擇器可以方便的獲取頁(yè)面上的元素摄悯，通過選擇器獲取到的切油，不管是多個(gè)元素只磷、零個(gè)元素還是一個(gè)元素经磅，都會(huì)被封裝到類數(shù)組的jQuery對(duì)象中，也稱為jQuery對(duì)象集合或jQuery元素集合等钮追。

jQuery對(duì)象集合

一预厌、創(chuàng)建HTML

1.DOM對(duì)象和jQuery對(duì)象
區(qū)別：
? 檢測(cè)DOM Object：

if ( obj.nodeType )

? 檢測(cè)jQuery Object：

if ( obj.jquery )

? 轉(zhuǎn)換：

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對(duì)象和jQuery對(duì)象

2.創(chuàng)建元素

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

設(shè)置屬性:

<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>'); //此時(shí)div為jQuery對(duì)象

        console.log(div);

        console.log($('div')); //在沒有放到頁(yè)面上之前，通過選擇器是選擇不到的

        div.appendTo('body'); //放到頁(yè)面上  appendTo() 追加

        console.log($('div')); //此時(shí)可以選擇出來

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

        link.appendTo('body');

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

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

3.檢查和提取元素

檢查和提取元素.jpg

(1)檢查元素：

①檢查元素?cái)?shù)量

$('xxx').length

(2)提取元素

①[index] 返回DOM元素
②get([index]) 返回DOM元素或元素集合
③eq(index) 返回jQuery對(duì)象
④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  檢查元素?cái)?shù)量

        
        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()); //獲取所有 (數(shù)組)
        console.log(elements.get(0));
        console.log(elements.get(1));
        console.log(elements.get(-1));//<li>item-9</li> 從最后往前計(jì)算 -1為第一個(gè)元素元媚，以此類推轧叽。
        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()); //不需要參數(shù) 性能比篩選器高

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

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

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

    });
</script>

二刊棕、通過關(guān)系查找jQuery對(duì)象

<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>

通過關(guān)系查找jQuery對(duì)象的方法：
? children([selector])：直接子元素
? contents()：直接子元素
? find(selector)：包含子元素和孫子元素
? parent([selector])：返回直接父元素
? parents([selector])：返回所有父元素
? parentsUntil([selector])：獲取到具體層級(jí)的父元素（不包含最后一個(gè)）
? closest(selector)：從元素本身開始炭晒，逐級(jí)向上進(jìn)行元素的匹配，并返回最先匹配的元素甥角。會(huì)首先檢查當(dāng)前元素是否匹配网严，如果匹配則返回元素本身，不匹配時(shí)向上逐級(jí)尋找嗤无，都沒找到則返回一個(gè)空的jQuery對(duì)象震束。
? next([selector])：獲取當(dāng)前元素之后緊鄰的同輩元素
? nextAll([selector])：當(dāng)前元素之后的所有同輩元素
? nextUntil([selector])：查找當(dāng)前元素之后的所有同輩元素怜庸，直到遇到匹配的元素為止。
? 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對(duì)象

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

(2)過濾元素
? not(selector):刪除掉該元素宏榕。
? filter(selector)：篩選出和指定表達(dá)式匹配的元素集合，把選擇器匹配到的返回侵佃。
? has(selector)：保留包含特定后代的元素

(3)獲取子集
? slice(start[, end])

(4)轉(zhuǎn)換元素
? map(callback)：將一個(gè)jQuery對(duì)象轉(zhuǎn)換成另一個(gè)jQuery對(duì)象

(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:相當(dāng)于continue  false：相當(dāng)于break
        }
        this.title = this.id
    }));
    });
</script>

四、jQuery對(duì)象的其他操作

? is(selector)
? end():回到最近的一個(gè)破壞性操作之前趣钱，將匹配的元素集合變?yōu)榍耙淮螤顟B(tài)
? addBack([selector])：

破壞性操作.png

注意：如果不是破壞性操作涌献，調(diào)用end會(huì)返回空

<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') //返回上一次狀態(tài)
        //                .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.08.30 15:04:52

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市首有，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌枢劝，老刑警劉巖井联，帶你破解...
沈念sama閱讀 210,914評(píng)論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異您旁，居然都是意外死亡烙常，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 89,935評(píng)論 2贊 383
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門鹤盒，熙熙樓的掌柜王于貴愁眉苦臉地迎上來蚕脏，“玉大人，你說我怎么就攤上這事侦锯⊥毡蓿” “怎么了？”我有些...
開封第一講書人閱讀 156,531評(píng)論 0贊 345
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵尺碰，是天一觀的道長(zhǎng)挣棕。經(jīng)常有香客問我，道長(zhǎng)亲桥，這世上最難降的妖魔是什么洛心？我笑而不...
開封第一講書人閱讀 56,309評(píng)論 1贊 282
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮题篷，結(jié)果婚禮上词身，老公的妹妹穿的比我還像新娘。我一直安慰自己番枚，他們只是感情好法严，可當(dāng)我...
茶點(diǎn)故事閱讀 65,381評(píng)論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布璧瞬。她就那樣靜靜地躺著，像睡著了一般渐夸。火紅的嫁衣襯著肌膚如雪嗤锉。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,730評(píng)論 1贊 289
城市分裂傳說
那天墓塌，我揣著相機(jī)與錄音瘟忱，去河邊找鬼。笑死苫幢，一個(gè)胖子當(dāng)著我的面吹牛访诱，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播韩肝，決...
沈念sama閱讀 38,882評(píng)論 3贊 404
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼触菜，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了哀峻？” 一聲冷哼從身側(cè)響起涡相，我...
開封第一講書人閱讀 37,643評(píng)論 0贊 266
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎剩蟀，沒想到半個(gè)月后催蝗，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,095評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡育特，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,448評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年丙号，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缰冤。...
茶點(diǎn)故事閱讀 38,566評(píng)論 1贊 339
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡犬缨，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出棉浸，到底是詐尸還是另有隱情怀薛，我是刑警寧澤，帶...
沈念sama閱讀 34,253評(píng)論 4贊 328
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布涮拗，位于F島的核電站乾戏，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏三热。R本人自食惡果不足惜鼓择，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,829評(píng)論 3贊 312
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望就漾。院中可真熱鬧呐能，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,715評(píng)論 0贊 21
一樁弒父案朗徊，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至偎漫，卻和暖如春爷恳，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背象踊。一陣腳步聲響...
開封第一講書人閱讀 31,945評(píng)論 1贊 264
情欲美人皮
我被黑心中介騙來泰國(guó)打工温亲，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人杯矩。一個(gè)月前我還...
沈念sama閱讀 46,248評(píng)論 2贊 360
代替公主和親
正文我出身青樓栈虚，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親史隆。傳聞我的和親對(duì)象是個(gè)殘疾皇子魂务，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,440評(píng)論 2贊 348

jQuery--DOM操作(一)

一预厌、創(chuàng)建HTML

二刊棕、通過關(guān)系查找jQuery對(duì)象

三嘉栓、篩選和遍歷jQuery對(duì)象

四、jQuery對(duì)象的其他操作

推薦閱讀更多精彩內(nèi)容