jquery dom對象和js DOM對象互相轉換

導入遠程jquery庫

http://libs.baidu.com/jquery/1.9.1/jquery.min.js

jquery對象轉js對象

$("#span3")獲取到的是一個數組,數組的第0個元素就是dom對象

js dom對象轉jquery對象

$(dom對象)

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function test1() {
  var spn1 = document.getElementById("spn1");
  spn1.innerHTML = "span1";
}

function test2() {
  $("#spn2").html("span2");
}

function test3() {
  //jQuery對象轉換成js對象
  //$(this).get(0)與$(this)[0]等價
  $("#spn3")[0].innerHTML = "span3";
}
function test4(){
  var spn4 = document.getElementById("spn4");
  //js對象轉jquery對象
  $(spn4).html("span4");
}
</script>
</head>

<body>
<div id="div1"></div>
<input type="button" value="原生態js" onclick="test1()">
<span id="spn1"></span>
<input type="button" value="jquery" onclick="test2()">
<span id="spn2"></span>
<input type="button" value="jquery轉js" onclick="test3()">
<span id="spn3"></span>
<input type="button" value="jquery轉js" onclick="test4()">
<span id="spn4"></span>
</body>

</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章