`
zl378837964
  • 浏览: 189427 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • web
阅读更多

 

前景提要:  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

 

  • 大小: 10 KB
  • 大小: 11 KB
  • 大小: 4.4 KB
  • 大小: 28.3 KB
2
0
分享到:
评论
1 楼 qq32933432 2019-03-13  
do不dom的不重要,主要是这个表妹~~~有联系方式吗?

相关推荐

    jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别

    然后,我们讨论DOM对象与jQuery对象的区别和转换。DOM(Document Object Model)是HTML和XML文档的标准表示,而jQuery对象则是jQuery库处理的特定对象,封装了DOM元素。DOM对象是原生JavaScript操作,如通过`...

    jquery对象和dom对象

    DOM对象拥有原生的JavaScript属性和方法,如`innerHTML`、`style`、`addEventListener`等,用于读取或修改元素的属性、样式和事件处理。 例如,以下代码展示了如何获取并修改DOM对象的文本内容: ```javascript ...

    jquery dom对象 详细介绍1

    - **DOM对象**:通过JavaScript原生方法如`getElementById()`获取的元素,可以调用DOM提供的所有属性和方法。 - **jQuery对象**:通过jQuery的选择器或者`$(...)`包裹的元素集合,提供了丰富的jQuery方法,但不能...

    jquery对象和dom对象.doc

    这些DOM对象可以使用JavaScript原生的属性和方法,如`innerHTML`,`style`等。 例如,以下代码展示了如何获取和设置元素的`innerHTML`: ```javascript // 使用jQuery对象 $("#msg").html(); // 将jQuery对象转换...

    关于dom和jquery对象理解

    ### 关于DOM与jQuery对象的理解 #### DOM简介 在探讨DOM与jQuery之间的关系之前,我们首先需要明确什么是DOM(Document Object Model)。DOM是一种用于表示HTML或XML文档的标准接口,它提供了一种方式来读取、操作...

    jquery对象和javascript对象即DOM对象相互转换

    jQuery对象和JavaScript对象(DOM对象)虽然在很多方面都是互补的,但它们在功能和使用上有着明显的区别。理解如何在这两者之间进行转换是编写高效、简洁的jQuery代码的关键。 首先,jQuery对象是通过调用jQuery...

    jQuery对象和DOM对象之间相互转换的方法介绍

    总结来说,通过上述方法,我们可以在jQuery对象和DOM对象之间灵活地转换,充分利用jQuery和原生JavaScript各自提供的功能。在实际开发中,这种转换技巧可以帮助开发者更高效地编写代码,解决特定问题。不过需要注意...

    jQuery之DOM对象和jQuery对象的转换与区别分析

    首先,DOM(文档对象模型)对象是浏览器提供的用于操作文档内容和结构的原生JavaScript对象。例如,document.getElementById()返回的就是一个DOM对象。DOM对象直接操作DOM结构,可以使用原生JavaScript的属性和方法...

    jQuery学习笔记之DOM对象和jQuery对象

    总结来说,DOM对象和jQuery对象在本质上是不同的,但它们之间存在着密切的联系和转换方法。开发者在使用jQuery时,必须熟悉这两种对象的操作和转换,以便高效地与Web页面上的元素进行交互。通过理解并熟练运用这些...

    jQuery对象与DOM对象之间的相互转换

    - 当需要调用原生DOM方法,如`offsetParent`或`addEventListener`时,需要将jQuery对象转换为DOM对象。 - 当需要使用jQuery提供的链式操作和便捷的DOM操作,如`append`、`remove`等时,则需将DOM对象转换为jQuery...

    JavaScript对象之间的转换 jQuery对象和原声DOM

    在JavaScript开发中,我们经常需要在jQuery对象和原生DOM对象之间进行转换。这种转换在处理Web页面的元素时尤其重要,因为有时候jQuery提供的方法更为方便,有时候又需要直接操作DOM元素。对于使用jQuery学习和开发...

    JQuery DoM和ajax 操作

    jQuery库是JavaScript的一个强大工具,它极大地简化了对DOM(Document Object Model)的操作。DOM是HTML和XML文档的结构化表示,允许我们通过编程方式访问和修改页面内容。jQuery提供了丰富的选择器、遍历和操作方法...

    jQuery对象换为DOM对象,js常用API

    在JavaScript编程中,jQuery库极大地简化了DOM操作和事件处理,但有时我们可能需要将jQuery对象转换为原生DOM对象,以便使用某些不被jQuery支持的API或提高性能。这篇博文将探讨如何进行这种转换,并介绍JavaScript...

    jQuery对象与DOM对象之间的转换方法

    这是因为它们各有优势,jQuery对象可以使用jQuery提供的各种便利方法,而DOM对象则可以使用原生JavaScript的所有属性和方法。理解这两种对象的区别及它们之间的转换方法,对于高效的前端开发至关重要。 首先,我们...

    Jquery对象和Dom对象的区别分析

    DOM表示由节点和对象层次结构组成的文档,这使得程序和脚本能够动态地访问和更新文档的内容、结构以及样式。 1. jQuery对象与DOM对象的基本概念 首先,DOM对象是指直接通过原生JavaScript获取的节点对象,例如使用...

    jquery对象与DOM对象转化

    在实际开发中,理解并掌握这两种类型的对象转换是非常重要的,因为jQuery提供了一些方便的方法,如动画效果、事件处理等,而原生DOM对象在某些情况下可能更高效,比如在处理大型数据集或者执行性能敏感的操作时。...

    jQuery对象和DOM对象使用说明

    DOM对象,即Document Object Model对象,是由JavaScript原生提供的,通过如`document.getElementById()`或`document.querySelector()`等方法获取的元素节点。它们代表了HTML文档的结构,允许我们对页面元素进行读取...

    Jquery+dom+easyUI教程

    jQuery 对象是通过 `$()` 函数创建的,包含了多个 DOM 元素,而 DOM 对象则是 JavaScript 的原生对象,代表单个 HTML 或 XML 元素。jQuery 对象可以通过 `[index]` 或 `get(index)` 转换为 DOM 对象,反之,可以使用...

Global site tag (gtag.js) - Google Analytics