欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-13 12:18:10
...

 

前景提要:  mark一下

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

 

javascript  原生Dom对象和jQuery对象的联系和区别
            
    
    博客分类: web webjsjquery 

我一看,确实有些问题:

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对象的联系和区别
            
    
    博客分类: web webjsjquery 
 
javascript  原生Dom对象和jQuery对象的联系和区别
            
    
    博客分类: web webjsjquery 
 

》》注意: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对象的联系和区别
            
    
    博客分类: web webjsjquery ___

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

 

  • javascript  原生Dom对象和jQuery对象的联系和区别
            
    
    博客分类: web webjsjquery 
  • 大小: 10 KB
  • javascript  原生Dom对象和jQuery对象的联系和区别
            
    
    博客分类: web webjsjquery 
  • 大小: 11 KB
  • javascript  原生Dom对象和jQuery对象的联系和区别
            
    
    博客分类: web webjsjquery 
  • 大小: 4.4 KB
  • javascript  原生Dom对象和jQuery对象的联系和区别
            
    
    博客分类: web webjsjquery 
  • 大小: 28.3 KB
相关标签: web js jquery