javascript 原生Dom对象和jQuery对象的联系和区别

 

前景提要:  mark一下

我也有一个表妹 ^_^ 刚开始接触jQuery，实现的效果不出现请我看看。截图如下：

 

我一看，确实有些问题：

1、最好使用jq，就不要穿插原生方法（格式统一更好些，更何况jq选择器简短而强大）；

2、直接用each方法简洁明了，为何用for循环呢；

3、主要：忽略了css的三种引入方式之间的优先级！ 混用class和css导致显隐效果不按照预期渲染。

 

问题浮现：

她修改后代码如下：（请check有什么问题么）

 

var orderbtn=$("#order-status").children();
var tabbtn=$("#tabbtn").children();
$(orderbtn).each(function(index){ //匿名回调函数 index表示序号
    $(this).click(function(){
        tabbtn[index].css("display","block");
        tabbtn[index].siblings().css("display","none");
    })
});

 执行debug发现：TypeError：tabbtn[index].css is not a function 

 

 

》》问题点：这是为何呢，是因为她混淆了原生Dom对象和jQuery对象；

 

tabbtn[index]是一个Dom对象，$(tabbtn[index])才是一个jQ对象。

怎么区分呢，debug很容易发现截图如下：(源文件见下面附件)

 

 

》》注意：Debug可见，Native对象的 <li> 显示的就是 li 对象，而jQ的显示的却是x.fn.x.init[1]   context:li

 

很多初识 jQuery的童鞋容易忽略，还有的服务端转前端的童鞋由于“拿来主义”使用在先没有系统学习的话也容易忽略这一点。

 

总结记录：

那 Dom原生对象和jQuery对象到底有什么联系和区别呢

 

联系---两者之间可互相转换

　　1、jQuery对象可以通过jQuery包装DOM对象后产生；

　　2、DOM对象也可以通过jQuery按索引取得；

区别---两个对象完全不同

　　1、jQuery选择器得到的jQuery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，两者不等价；

　　2、jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法，上边报错就是这样的。

______

A、DOM对象转成jQuery对象：

　　对于DOM对象，只需用 $() 把DOM对象包装起来，就可得到jQuery对象

　　var dom =document.getElementById("id");  // DOM对象

 

　　var $dom = $(dom);  // jQuery对象

 

B、jQuery对象转成DOM对象：两种转换方式 [index] 和 .get(index)

　　1.jQuery对象是一个数据对象，通过 [index] 的方法

　　     var $dom = $("#id") ;  // jQuery对象

　　     var dom = $dom [0];   // DOM对象

　　2.jQuery提供方法，通过 .get(index) 方法

　　     var $dom = $("#id");       // jQuery对象

　　     var dom = $dom.get(0); // DOM对象

 

转载请注明，原文链接：http://zl378837964.iteye.com/blog/2327825