前景提要: 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
相关推荐
然后,我们讨论DOM对象与jQuery对象的区别和转换。DOM(Document Object Model)是HTML和XML文档的标准表示,而jQuery对象则是jQuery库处理的特定对象,封装了DOM元素。DOM对象是原生JavaScript操作,如通过`...
DOM对象拥有原生的JavaScript属性和方法,如`innerHTML`、`style`、`addEventListener`等,用于读取或修改元素的属性、样式和事件处理。 例如,以下代码展示了如何获取并修改DOM对象的文本内容: ```javascript ...
- **DOM对象**:通过JavaScript原生方法如`getElementById()`获取的元素,可以调用DOM提供的所有属性和方法。 - **jQuery对象**:通过jQuery的选择器或者`$(...)`包裹的元素集合,提供了丰富的jQuery方法,但不能...
这些DOM对象可以使用JavaScript原生的属性和方法,如`innerHTML`,`style`等。 例如,以下代码展示了如何获取和设置元素的`innerHTML`: ```javascript // 使用jQuery对象 $("#msg").html(); // 将jQuery对象转换...
### 关于DOM与jQuery对象的理解 #### DOM简介 在探讨DOM与jQuery之间的关系之前,我们首先需要明确什么是DOM(Document Object Model)。DOM是一种用于表示HTML或XML文档的标准接口,它提供了一种方式来读取、操作...
jQuery对象和JavaScript对象(DOM对象)虽然在很多方面都是互补的,但它们在功能和使用上有着明显的区别。理解如何在这两者之间进行转换是编写高效、简洁的jQuery代码的关键。 首先,jQuery对象是通过调用jQuery...
总结来说,通过上述方法,我们可以在jQuery对象和DOM对象之间灵活地转换,充分利用jQuery和原生JavaScript各自提供的功能。在实际开发中,这种转换技巧可以帮助开发者更高效地编写代码,解决特定问题。不过需要注意...
首先,DOM(文档对象模型)对象是浏览器提供的用于操作文档内容和结构的原生JavaScript对象。例如,document.getElementById()返回的就是一个DOM对象。DOM对象直接操作DOM结构,可以使用原生JavaScript的属性和方法...
总结来说,DOM对象和jQuery对象在本质上是不同的,但它们之间存在着密切的联系和转换方法。开发者在使用jQuery时,必须熟悉这两种对象的操作和转换,以便高效地与Web页面上的元素进行交互。通过理解并熟练运用这些...
- 当需要调用原生DOM方法,如`offsetParent`或`addEventListener`时,需要将jQuery对象转换为DOM对象。 - 当需要使用jQuery提供的链式操作和便捷的DOM操作,如`append`、`remove`等时,则需将DOM对象转换为jQuery...
在JavaScript开发中,我们经常需要在jQuery对象和原生DOM对象之间进行转换。这种转换在处理Web页面的元素时尤其重要,因为有时候jQuery提供的方法更为方便,有时候又需要直接操作DOM元素。对于使用jQuery学习和开发...
jQuery库是JavaScript的一个强大工具,它极大地简化了对DOM(Document Object Model)的操作。DOM是HTML和XML文档的结构化表示,允许我们通过编程方式访问和修改页面内容。jQuery提供了丰富的选择器、遍历和操作方法...
在JavaScript编程中,jQuery库极大地简化了DOM操作和事件处理,但有时我们可能需要将jQuery对象转换为原生DOM对象,以便使用某些不被jQuery支持的API或提高性能。这篇博文将探讨如何进行这种转换,并介绍JavaScript...
这是因为它们各有优势,jQuery对象可以使用jQuery提供的各种便利方法,而DOM对象则可以使用原生JavaScript的所有属性和方法。理解这两种对象的区别及它们之间的转换方法,对于高效的前端开发至关重要。 首先,我们...
DOM表示由节点和对象层次结构组成的文档,这使得程序和脚本能够动态地访问和更新文档的内容、结构以及样式。 1. jQuery对象与DOM对象的基本概念 首先,DOM对象是指直接通过原生JavaScript获取的节点对象,例如使用...
在实际开发中,理解并掌握这两种类型的对象转换是非常重要的,因为jQuery提供了一些方便的方法,如动画效果、事件处理等,而原生DOM对象在某些情况下可能更高效,比如在处理大型数据集或者执行性能敏感的操作时。...
DOM对象,即Document Object Model对象,是由JavaScript原生提供的,通过如`document.getElementById()`或`document.querySelector()`等方法获取的元素节点。它们代表了HTML文档的结构,允许我们对页面元素进行读取...
jQuery 对象是通过 `$()` 函数创建的,包含了多个 DOM 元素,而 DOM 对象则是 JavaScript 的原生对象,代表单个 HTML 或 XML 元素。jQuery 对象可以通过 `[index]` 或 `get(index)` 转换为 DOM 对象,反之,可以使用...