《jQuery Cookbook 中文版》笔记

《jQuery Cookbook 中文版》

仅摘记自己陌生的、新学到的知识点。

##第1章:jQuery基础

###关于ready()方法
jQuery(document).ready(function(){})方法可以在DOM加载之后、整个页面加载之前执行JS代码。与之相比,window.onload属性则是在页面全部加载完后(包括图片、SWF等)才被触发。

所以ready()比较贴合实际。但是它也不是必须的:

这个定制的jQuery事件只有在JavaScript必须嵌入到页面顶端的文档流并封装在<head>元素里时才有必要。我只需将JavaScript文件包含和内联代码放在<body>结束标签之前,就能避免使用ready()事件。原因有二。

一,现代优化技术已经断言,当JavaScript代码放在页面解析的最后由浏览器加载时,页面的加载速度就会变得更快。

二,ready()方法一定程度上增加了代码量,这样不好。代码越少,网页运行得总是越快。

###jQuery的选择器引擎
jQuery的选择器引擎是Sizzle —— A pure-JavaScript CSS selector engine
designed to be easily dropped in to a host library.

###克隆DOM元素
先克隆,再移动,最后删除原有的DOM元素,就可以实现DOM元素及其事件处理函数的移动了。

###html()方法机理
jQuery的html()方法会尽量使用DOM的innerHTML属性来获取和设置HTML块(从其源代码即可看出来)。html()方法在XML文档中不可用,但是可用于XHTML文档。

值得注意的是,html()方法与text()方法只有一点不同:后者会对HTML进行转义(将<>替换为HTML实体&lt;&gt;)。

##第2章:用jQuery选择元素

###使用上下文参数
jQuery()可以接受第二个参数,指定上下文。jQuery将在这个上下文中搜索匹配选择器表达式的元素。

jQuery使用的默认上下文是document,使用上下文时的执行逻辑可以按照如下方式表达:

1
jQuery( context ).find( selector );

——这就是jQuery在后台所做的事情。

所以,如果已经有了对上下文的引用,那么应该传递这个引用而不是选择器——让jQuery再次经历选择过程是浪费时间。

##第3章:超越基础

###将选中的jQuery对象转换为原始的DOM对象
使用jQuery(selector).get()即可得到DOM对象。或者使用[]符号进行下标访问,也可以获得原始DOM对象。

###从现有数组中建立独特的数组
jQuery的工具方法$.map(array, function(item, index){})

1
$.map([1,2,3], function(n, i){ return n+i; }); // => 返回一个新数组[1,3,5]

###避免jQuery与其他程序库冲突
一般是指Prototype库。可以在jQuery库加载代码后面立即运行 jQuery.noConflict();,用以释放$变量,然后jQuery就只能用jQuery变量了。

也可以声明自己的jQuery简写名:

1
var jq = jQuery.noConflict();

还有一种更高级的方法:在闭包中封装jQuery代码:

1
2
3
4
5
jQuery.noConflict();
(function($){
$('#some_id').css('font-weight', 'bold');
})(jQuery);

##第5章:更快、更简单、更有趣
我觉得这一章是精华。本章以几个常见的jQuery错误为例,从JavaScript层面上进行了详细的解释。

这不是jQuery,而是JavaScript。

对JavaScript理解不深的人也可以用jQuery做出炫丽的效果来。但是,理解jQuery的本质,才可以成为更好的程序员。

###从其他程序库借用代码
jQuery.fn与jQuery.prototype引用同一个对象。

当用jQuery()或$()创建一个jQuery对象时,实际上调用的是new jQuery()(jQuery库自动为你添加new操作)。……所以,编写jQuery.fn插件,实际上进行的是传统的面向对象JavaScript编程,用构造器的原型向对象添加一个方法。

Share