jQuery object & dom object

jQuery对象与dom对象调用方法是有区别的。普通的dom对象一般可以通过$()转换成jquery对象，如$(document.getElementById("id"))，转换后即可以使用JQ对象的方法。
jquery对象本身是一个集合，如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。如$("btn")[0],   $("#ul li").get(1)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<script>
    $(function(){
              
       var oUl=document.getElementById("ul");
       console.log(oUl.id)

       //转jq对象
       var $ul=$(oUl);
       $ul.addClass("test");

       var oLi=oUl.getElementsByTagName("li");
       console.log(oLi.length);

       $li=$(oLi);
       console.log($li.length)//5

       var $btn=$("#btn");
       console.log($btn.text())

       //转DOM对象
       var oBtn=$btn[0];
       console.log(oBtn.innerHTML);

       $jqLi=$("#ul li");
       console.log($jqLi.length);

       var domLi=$jqLi.get(1);//33
       console.log(domLi.innerHTML)

       var $div=$("div");
       var oDiv=$div.get(2);
       console.log(oDiv.innerHTML)//ccccccc
    })
</script>
<ul id="ul">
    <li class="name">111</li>
    <li class="name">333</li>
    <li class="name">444</li>
    <li class="name">55</li>
    <li class="name">77</li>
</ul>
<button type="button" id="btn">test</button>

<div class="cccc">aaaaaa</div>
<div class="cccc">bbbbbb</div>
<div class="cccc">ccccccc</div>
<div class="cccc">dddddddd</div>
</body>
</html>
</html>

 

posted @ 2015-08-11 22:52  eaysun  阅读(464)  评论(0)  编辑  收藏  举报