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

页面导航:首页 > 网络编程 > JavaScript > 前端编程提高之旅(十三)----jquery选择器

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

来源: 作者: 时间:2016-02-05 11:06 【

Jquery代表javascript和query,即对javascript查询操作的类库,jquery是web前端界的事实标准。最近读《锋利的jquery》,发现这本书最大特点是,更深层的讨论一些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构造的多种选择器,虽然方便了使用,但却牺牲了性能。所以性能与高效上没有银弹。

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<