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