如何將jquery生成的物件轉換成dom物件

antzone發表於2017-03-18
jQuery物件

大家知道通常情況下通過jQuery選擇器獲取的是一個jQuery物件。

jQuery物件是無法直接使用原生javascript的方法和屬性的，所以需要將jquery物件轉換為dom物件，下面介紹一下如何進行轉換。

一.使用get()方法:

此函式可以將匹配元素集合中的DOM元素轉儲存於陣列之中，或者獲取匹配元素集合中的某個DOM元素。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  var doms=$(".zhuanqu").get();
  for(var index=0;index<doms.length;index++){
    doms[index].style.color="green";
  }
}) 
</script> 
</head> 
<body> 
<div> 
  <ul> 
    <li>ASP專區</li> 
    <li class="zhuanqu">jsp專區</li> 
    <li>php專區</li> 
    <li>ASP.NET專區</li> 
  </ul> 
  <ul> 
    <li>DIV+CSS專區</li> 
    <li class="zhuanqu">Jquery專區</li> 
    <li class="zhuanqu">javascript專區</li> 
    <li>html專區</li> 
  </ul> 
</div> 
</body> 
</html>

上面的程式碼可以將class屬性值為zhuanqu的li元素的字型顏色設定為綠色。

關於get()函式可以參閱jQuery get()一章節。

二.直接使用索引的方式獲取dom元素:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".zhuanqu")[0].style.color="green";
}) 
</script> 
</head> 
<body> 
<div> 
  <ul> 
    <li>ASP專區</li> 
    <li class="zhuanqu">jsp專區</li> 
    <li>php專區</li> 
    <li>ASP.NET專區</li> 
  </ul> 
  <ul> 
    <li>DIV+CSS專區</li> 
    <li class="zhuanqu">Jquery專區</li> 
    <li class="zhuanqu">javascript專區</li> 
    <li>html專區</li> 
  </ul> 
</div> 
</body> 
</html>

直接使用類似於訪問陣列的方式就可以獲取匹配元素集合中指定索引的元素。

三.使用each()函式進行遍歷:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".zhuanqu").each(function(){
    this.style.color="green";
  })
}) 
</script> 
</head> 
<body> 
<div> 
  <ul> 
    <li>ASP專區</li> 
    <li class="zhuanqu">jsp專區</li> 
    <li>php專區</li> 
    <li>ASP.NET專區</li> 
  </ul> 
  <ul> 
    <li>DIV+CSS專區</li> 
    <li class="zhuanqu">Jquery專區</li> 
    <li class="zhuanqu">javascript專區</li> 
    <li>html專區</li> 
  </ul> 
</div> 
</body> 
</html>

each()語句可以遍歷匹配元素集合中的每一個dom元素，並且以此元素為引數函式的作用上下文。

關於each()函式可以參閱$.each()與$(selector).each()方法的區別一章節。

相關文章