码迷,mamicode.com
首页 > Web开发 > 详细

JQuery对象与DOM对象

时间:2015-05-31 23:15:02      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

[转]前端学习——选择结果为JQuery对象还是DOM对象:http://blog.csdn.net/xukai871105/article/details/34531373

1.选择所有的li
[使用jquery]
1 var $obj = $("li");  
2 console.log($obj); 

[使用javascript]

1 var obj = document.getElementsByTagName("li");  
2 console.log(obj); 
[主要区别]
此时$obj为Jquery对象集合,而obj为DOM对象集合。
 
2.Jquery对象变为DOM对象——[]方法
1 var obj = $("li")[0];  
2 console.log(obj);                    // <li>Raspberry</li>  
3 console.log(obj.innerHTML);     // Raspberry  
[说明]
此处obj为DOM对象,可以使用属性innerHTML。如果使用Jquery的html方法那么浏览器将会发出错误警告。
 
3.Jquery对象变为DOM对象——get方法
1 var obj = $("li").get(1);  
2 console.log(obj);               // <li>Arduino</li>  
3 console.log(obj.innerHTML);     // Arduino  
[说明]
[]方式和Jquery的get方法效果相同。
 
4.使用javascript达到相同效果
1 var obj = document.getElementsByTagName("li")[2];  
2 console.log(obj);               // <li>Intel Galileo</li>  
3 console.log(obj.innerHTML);     // Intel Galileo  

 

5.选择子元素时仍为Jquery对象——eq方法

1 var $obj = $("li").eq(0);  
2 console.log($obj);  
3 console.log($obj.html());           // Raspberry 
[说明]
使用eq方法获得Jquery对象,那么获得此对象的HTML内容需要使用Jquery的html()方法,而不是javascript的innerHTML属性。
 

6.使用Jquery遍历所有子节点

1 $("li").each(function(index,item){  
2     console.log(item);                  // item为DOM对象  
3     console.log(item.innerHTML);        // 依次输出 Raspberry Arduino Intel Galileo  
4 }); 
[说明]
each遍历的item为DOM对象而不是Jquery对象。
 
7.遍历时再变为Jquery对象
1 $("li").each(function(index,item){  
2     $item = $(item);                    // 再次变为Jquery对象  
3     // console.log($item);                
4     console.log($item.html());          // 依次输出 Raspberry Arduino Intel Galileo  
5 });
[说明]
$item = $(item)再一次变化出JQuery对象,$(item)此时和$(<li>Raspberry<li>)等价,意为选择一个DOM对象并变为JQuery对象。
 
8.使用Javascript遍历所有子节点
1 var objs = document.getElementsByTagName("li");  
2 for(var i=0; i<objs.length; i++) {  
3     console.log(objs[i]);  
4     console.log(objs[i].innerHTML);    // 依次输出 Raspberry Arduino Intel Galileo  
5 }  

 

9.总结
    [1]使用Jquery选择器之后可以使用[]和get获得子DOM,也就是说[]和get具有把Jquery对象转换为DOM对象的功能。
    [2]eq方法获得的对象仍为JQuery对象
    [3]each方法遍历时的item为DOM对象
    [4]JQuery对象使用JQuery方法,DOM对象使用DOM方法。
 
 
 

JQuery对象与DOM对象

标签:

原文地址:http://www.cnblogs.com/k11590823/p/4542830.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!