前端编程提高之旅(十三)----jquery选择器

  Jquery代表javascript和query,即对javascript查询操作的类库,jquery是web前端界的事实标准。最近读《锋利的jquery》,发现这本书最大特点是,更深层的讨论一些jquery使用情境和优化方法,对于有一定jquery使用经验的开发者有独特价值。本篇算是乐帝读此书,对选择器和DOM操作加深理解的总结。

   javascript自身包含三大弊端:

  • 复杂的文档对象模型(DOM)
  • 不一致的浏览器实现和便捷的开发
  • 调试工具的缺乏

   Jquery存在的意义就在于很好地解决了前两个弊端,而后一个弊端也随着近些年,特别是以chrome为首的浏览器厂商大幅提升浏览器性能和功能得到了很好地解决。

jquery代码编写风格:

    jquery代码核心特点:不需要显示new对象、链式调用。链式调用实际使用时,非常方便对一个对象多个操作。而不好的方面是,降低了可读性,所以写代码需要遵循一定的规则。

    单个对象较多操作,每行写一个操作:

$(this).removeClass("mouseout")
	       .addClss("mouseover")
	       .stop()
	       .fadeTo("fast,0.6")
	       .unbind("click");

如果多个对象的少量操作时,每个对象写一行,涉及子元素,适当缩进。

$(this).removeClass("mouseout")
	       .children("li").show().end()
	 .siblings().addClss("mouseover")
	       .children("li").hide()

 jquery对象与DOM对象区别与联系:

    DOM对象可以使用javascript中的方法,而Jquery对象则是通过Jquery包装DOM对象后产生的对象。如果是jquery对象就可以使用jquery中的方法。

   如果获取对象是jquery对象,那么在变量前加$:

var domObj = document.getElementsByTagName("h3")[0]; // Dom对象
var $jQueryObj = $(domObj);  //jQuery对象

jquery对象是一个类似数组的对象,可通过两种方法得到相应dom对象:

var $cr = $("#cr");
	// 第一种
	var cr =$cr[0];
	// 第二种
	var cr $cr.get(0);

DOM转jquery只需要使用$()将DOM对象包装起来就可获得:

var domObj = document.getElementsByTagName("h3")[0]; // Dom对象
var $jQueryObj = $(domObj);  //jQuery对象

不过需要注意的是上述方法$()获取的永远是对象,即便网页上没有取到元素。如下图实例:

   所以此时判断是否含有元素的方法需要判断对象长度或者转化成DOM对象判断:

if ($("#noExitst").length) {
        console.log("this is an object");
    } else {
    	console.log("there is no DOM element");
    }

高性能使用jquery选择器:

    jquery选择器各种选择器的使用网上已经科普很多了,这里主要从性能上讨论选择器。

    选择器的性能主要从jquery源码与javascript核心方法结合与否及遍历复杂度考虑。

    首先一点,能够预见高性能的方法是能够直接采用javascript本地方法的选择器。比如$("#id")、$("div")都有本地方法与之对应:document.getElementById()、document.getElementByTagName()。而$(".class")、$("[attribute=value]")、$(":hidden")此类选择器都没有本地方法实现,大多使用DOM搜索方式达到效果,所以从性能上考虑,后面这些方法是比较有害的。

   总体建议是:尽量使用ID选择器、尽量给选择器指定上下文。乐帝的建议是,先使用ID选择器选定父元素,再根据标签选择器选择标签。有点类似css中先使用class再使用层级选择器的方法。

   jquery构造的多种选择器,虽然方便了使用,但却牺牲了性能。所以性能与高效上没有银弹。

时间: 2024-08-25 02:22:47

前端编程提高之旅(十三)----jquery选择器的相关文章

前端编程提高之旅(二)----网站常见特效的jquery实现

最好的编程语言是逻辑,前端各种交互特效的实现多可以用jquery实现,特效可以纷飞,内在逻辑则基本不变.这一篇文章主要介绍jquery实现常见特效背后的逻辑.    1.通过类名获取元素集合    首先来看一个js原生代码不支持的方法,通过类来获取元素集合. document.getElementsByClassName=function(classname){ var retnode = []; var myclass = new RegExp('\\b'+classname+'\\b');/

前端编程提高之旅(三)----浏览器兼容之IE6

在爱奇艺实习期间,乐帝主要负责移动端活动页面的制作,由于移动浏览器是随着智能手机兴起的,这就决定了移动端不会重蹈浏览器兼容问题的覆辙,一开始就比较好的支持web标准,而纵观整个互联网行业,移动web开发还处于起步阶段,在很长一段时间pc端web作为主要的服务形式还会继续.从小来说作为一名前端开发人员,不了解浏览器兼容也会贻笑大方.这篇文章基于<IE7web标准之道>,对浏览器兼容做一个概览.    时间到了2014年,大概很少人会想到IE7发布之后,时隔这么多年IE6仍然占据市场7%的浏览器份

前端编程提高之旅(二)----站点常见特效的jquery实现

最好的编程语言是逻辑,前端各种交互特效的实现多能够用jquery实现.特效能够纷飞.内在逻辑则基本不变.这一篇文章主要介绍jquery实现常见特效背后的逻辑.   1.通过类名获取元素集合    首先来看一个js原生代码不支持的方法.通过类来获取元素集合. document.getElementsByClassName=function(classname){ var retnode = []; var myclass = new RegExp('\\b'+classname+'\\b');//

前端编程提高之旅(十七)----jquery中表单、表格和ajax

从一个框架核心功能层面上说,实现了选择器.DOM操作.事件.动画,功能已经完备了.而任何框架写出了就是应用的,所以这篇涉及的表单与表格知识,虽在DOM操作中有所涉及,但更偏于实际项目中的应用技巧的使用.ajax部分的内容更是前端与后端交互的核心.    一.jQuery中的表单与表格应用    实际项目中,表单和表格分别扮演采集.提交用户输入的信息和显示列表的数据.在HTML中非常重要.下面是这部分知识导图:    1.表单    (1)单行文本框     单行文本框职能是获取用户输入的指定格式

前端编程提高之旅(十一)----jquery代码的组织

最近做内推项目,虽然项目不算太大,还是遇到了一些代码组织的问题,说到底还是对整个项目的掌控力不够,为此乐帝专门在网络中搜集了一些jquery代码组织的文章并总结出两种方法来更好组织jquery代码.    一.回调函数   回调函数的定义:   A callback is a function that is passed as an argument to another function and is executed after its parent function has comple

前端编程提高之旅(十五)----jquery事件

HTML与js交互主要通过用户与浏览器操作页面时引发事件.文档或某些元素发生某些变化或操作时,浏览器会生成事件.jquery增加了事件处理能力.    jquery事件部分可以从以下五部分理解:    一.加载DOM函数    这里指的如下方法: $(document).ready(function(){ }) 相比于传统的window.onload方法,前者在执行时机与可否多次使用上区别于后者.    前者是在DOM完全就绪回调就会被调用,后者则是网页所有元素(包含关联文件)完全加载到浏览器后

前端编程提高之旅(十六)————jquery中的动画

    上一篇文章对jquery中的事件做了总结,这篇文章主要对jquery中的动画做一下总结归类.最近微信端分享中,有很多页面交互及动画做的非常受欢迎,非常符合移动端体验.看似花哨的动画从本质上都脱离不了编写动画的基本方法.乐帝将jquery动画部分内容,做了一个简单的归类.     如下图:     如上图所示,无论多复杂的动画,从实现上都采用这些最底层的动画方法.本篇将从动画方法和与动画状态有关的方法讲起.    一.动画方法    1.同时改变高.宽.不透明度方法    这里涉及show

前端编程提高之旅(十八)----移动端web流行交互技术方案研究

   在停止实习后,生活最大变化在于没有项目的压力,可以根据兴趣场景,探索技术实现.这个过程对于个人来说,动力自内而外,需求自上而下,都由个人把握.    生活在移动互联网井喷的今天,同时又关注前端技术,平常对微信端流行的交互(或者说玩法)有着特殊的敏感性.如果说之前接触MVC框架还是对单页面网站.CSS3前沿特效有一个概念的话,微信朋友圈及好友分享网页,则把国内网页构建的流行趋势,从幕后推向前台.    乐帝通过研究移动端web流行交互,构建起了一个初步可行的技术方案,用来实现单页面与DOM动

前端编程提高之旅(七)----marionette实现todoMVC

   marionetteJS是在backboneJS基础上进行更简洁的操作,平常开发主要用到几个涉及到view的概念:CollectionView.CompositeView.ItemView.LayoutView.这几个概念中,用的最广的当属ItemView.ItemView相对于backbone中view的概念方便之处在于:不用显式定义render方法,而是由ItemView本身完成将数据渲染到模板,并将视图追加到el,由此可见减少了很多流程化的操作. 同时marionetteJS还有很多