国产三级在线,国产精品无码久久久久,久精品视频

前端學(xué)習(xí)

2019.05.07

0.前言

在學(xué)習(xí)和使用javascript過程中經(jīng)常使用JQuery的選擇器，但是在獲取到選擇結(jié)果之后經(jīng)?！胺该院?，需要一個(gè)DOM對(duì)象時(shí)或者一個(gè)JQuery對(duì)象，這樣的尷尬經(jīng)常遇到。為了讓自己不再迷糊通過博文總結(jié)經(jīng)驗(yàn)教訓(xùn)，希望自己在總結(jié)過程中緩慢提高。

【示例頁(yè)面】——test-ul.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head> 
<!-- <script src="jquery.js"></script> -->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</head> 
<body> 
<ul>
<li>Raspberry</li> 
<li>Arduino</li> 
<li>Intel Galileo</li> 
</ul>
</body> 
</html>

1.選擇所有的li

【使用jquery】

var $obj = $("li");
console.log($obj);

【使用javascript】

var obj = document.getElementsByTagName("li");
console.log(obj);

【主要區(qū)別】

此時(shí)$obj為Jquery對(duì)象集合，而obj為DOM對(duì)象集合。

2.Jquery對(duì)象變?yōu)镈OM對(duì)象——[]方法

var obj = $("li")[0];
console.log(obj);                    // <li>Raspberry</li>
console.log(obj.innerHTML);     // Raspberry

【說明】

此處obj為DOM對(duì)象，可以使用屬性innerHTML。如果使用Jquery的html方法那么瀏覽器將會(huì)發(fā)出錯(cuò)誤警告。

3.Jquery對(duì)象變?yōu)镈OM對(duì)象——get方法

var obj = $("li").get(1);
console.log(obj);                    // <li>Arduino</li>
console.log(obj.innerHTML);     // Arduino

【說明】

[]方式和Jquery的get方法效果相同。

4.使用javascript達(dá)到相同效果

var obj = document.getElementsByTagName("li")[2];
console.log(obj);                    // <li>Intel Galileo</li>
console.log(obj.innerHTML);     // Intel Galileo

5.選擇子元素時(shí)仍為Jquery對(duì)象——eq方法

var $obj = $("li").eq(0);
console.log($obj);
console.log($obj.html());           // Raspberry

【說明】

使用eq方法獲得Jquery對(duì)象，那么獲得此對(duì)象的HTML內(nèi)容需要使用Jquery的html()方法，而不是javascript的innerHTML屬性。

6.使用Jquery遍歷所有子節(jié)點(diǎn)

$("li").each(function(index,item){
    console.log(item);                  // item為DOM對(duì)象
    console.log(item.innerHTML);   // 依次輸出 Raspberry Arduino Intel Galileo
});

【說明】

each遍歷的item為DOM對(duì)象而不是Jquery對(duì)象。

7.遍歷時(shí)再變?yōu)镴query對(duì)象

$("li").each(function(index,item){
    $item = $(item);                    // 再次變?yōu)镴query對(duì)象
    // console.log($item);              
    console.log($item.html());       // 依次輸出 Raspberry Arduino Intel Galileo
});

【說明】

$item = $(item)再一次變化出JQuery對(duì)象，$(item)此時(shí)和$(<li>Raspberry<li>)等價(jià)，意為選擇一個(gè)DOM對(duì)象并變?yōu)镴Query對(duì)象。

8.使用Javascript遍歷所有子節(jié)點(diǎn)

var objs = document.getElementsByTagName("li");
for(var i=0; i<objs.length; i++) {
    console.log(objs[i]);
    console.log(objs[i].innerHTML);    // 依次輸出 Raspberry Arduino Intel Galileo
}

9.總結(jié)

【1】使用Jquery選擇器之后可以使用[]和get獲得子DOM，也就是說[]和get具有把Jquery對(duì)象轉(zhuǎn)換為DOM對(duì)象的功能。

【2】eq方法獲得的對(duì)象仍為JQuery對(duì)象

【3】each方法遍歷時(shí)的item為DOM對(duì)象

【4】JQuery對(duì)象使用JQuery方法，DOM對(duì)象使用DOM方法。

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開APP，閱讀全文并永久保存查看更多類似文章

jQuery框架簡(jiǎn)單介紹

JQuery_01

jQuery學(xué)習(xí)大總結(jié)(一)jQuery對(duì)象與dom對(duì)象轉(zhuǎn)換

[譯]No JQuery! 原生JavaScript操作DOM

JS中獲取元素屬性的方法

JQuery常用小知識(shí)

更多類似文章 >>

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版