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

 

前景提要:  mark一下

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

javascript  原生Dom对象和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很容易发现截图如下:(源文件见下面附件)


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

》》注意: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里的方法,上边报错就是这样的。

___javascript  原生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

相关推荐