前景提要: 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
相关推荐
$(“#test”) //jQuery对象 $(“#test”)[0] //jQuery对象->原生的DOM对象 $($(“#test”)[0]) //DOM对象->jQuery对象(有点绕,但只要明白使用$()后能将原生的DOM对象封装成jQuery对象即可)
JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象。既然...
该代码为 html转base64图片格式,hmtl+js 需要IE9以上浏览器或firefox,chrome支持!
jsql 是一种 JavaScript 查询语言,以及一个简单的 JavaScript 对象 (POJSO) 参考实现。 这不是为了搜索 dom、jQuery 或某些特定...jsql 旨在为查询任何内容提供原生 JSON 查询格式,尽管最初仅限于 JavaScript 对象。
资源介绍,主要是通过javascript元素操作dom方法,结合jQuery动画实现的, 技术要点: 1、使用javaScript 原生方法封装 2、jQuery 实现的轮播动画 3、需要多加一个在后面,在浏览到最后一张时前换障目(技巧)
一个不可知的、React式的和极简主义 (3kb) JavaScript UI 库,可直接访问原生 DOM。 CalDOM 不是将您带入特定于库的神奇世界,而是让您在保持React性的同时直接完全访问 DOM :collision: . 因此,您可以充分利用...
jsdom 是 WHATWG DOM 和 HTML 标准的 JavaScript 实现,主要用于 io.js 框架。示例代码:// Count all of the links from the io.js build page var jsdom = require("jsdom"); jsdom.env( ...
值支持id名、原生dom对象,jquery对象。【如该容器为】: pages: 66, //总页数 curr: 6, //当前页 jump: function(e){ //触发分页后的回调 var view = document.getElementById('view1'); //你也可以直接使用...
运用原型和闭包,使用原生js编写的jQuery库,里面已经编写基本的功能(获取dom元素、删除类、增加类)
通过《DOM启蒙》,读者将学习如何通过文档对象模型(DOM)更有效率地操作HTML,而无需DOM操作库的帮助。...读者将理解jQuery在DOM脚本编写中扮演的角色,并学习如何在移动应用和特定浏览器中直接使用DOM编写应用程序。
attribute 是原生js dom 对象上的一个属性,这个属性有很多子属性,比如 isId(判断属性是否是Id) , name (获取属性名称) , value (获取属性值),attributes 用来获取dom元素 的所有属性集合。 话不多说,上例子...
我相信可能大部分人来这里学javascript主要还是想用这个结合... 如果页面中的元素是ID属性 ”dom”></div> JQ的方法:$(“#dom”), 原生js的方法:var a = document.getElementById(“dom”);这个a就等价于$(“#dom”)
全书分为11章,包含网页效果、DOM元素与属性、HTML事件、CSS样式、用户输入自动完成、拖放、图形图像、AJAX、算法、jQuery Mobile应用、浏览器、Cookies等jQuery技术内容,对提高网站开发人员和设计人员的jQuery技术...
感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write ...
1、操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结构如下: <li xss=removed></li> <li xss=removed></li> <li xss=removed></li> <li xss=removed></li> <li xss=removed></li> 当...
写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在),就删除(添加)一个样式 4.hasClass:判断样式是否存在...
解释器模式(Interpreter):定义一种语法格式,...匹配原理:浏览器在匹配CSS选择符时是按照从右到左匹配的,所以实现自己的DOM选择器时匹配行为也应该和浏览原生匹配行为一致。 代码: 代码如下: (function (ns) { /*