jQuery实战笔记（一）-jQuery基本原理

jQuery核心：从HTML页面获取元素并对其进行操作。
一、jQuery包装器
$()函数（jQuery()函数的别名）返回特别的JavaScript对象，它包含着与选择器相匹配的DOM元素的数组。
该对象拥有大量预定义的有用方法，能够作用于该组元素。这种构造成为包装器，因为它用扩展功能来对匹配的元素进行包装。
jQuery包装器方法的特征是，当完成了一个操作时，它们返回相同的一组元素，提供给下一个操作。如：

$("div.notLongForThisWorld").fadeOut().addClass("removed");

这些jQuery链可以无限延续。

二、实用工具函数
包装元素以便于操作是jQuery的$()函数最常见的用途之一，它的另一个职责是作为几个通用的实用工具函数的命名空间前缀。
如:$.trim(someString); 即jQuery.trim(someString);函数trim()不过是存在于别名为$的命名空间jQuery里。


三、文档就绪处理函数
处理方式：
1.在文档完整加载之后执行(不仅是在构建DOM树之后，也是在所有图像和其他外部资源完整地加载并且页面在浏览器窗口显示完毕之后)

window.onload = function() {
   $("table tr:nth-child(even)").addClass("even");
}

【onload机制只接受一个函数。(并非最优方法)】
2.只要等到文档结构被完整地解析，浏览器把HTML转换成DOM树形式的时候，立刻执行脚本使丰富的行为生效。

$(document).ready(function() {
   $("table tr:nth-child(even)").addClass("even");
});

【首先，用$()即jQuery()函数来包装文档实例，然后调用ready()方法，给其传递一个函数。当文档为操作准备就绪的时候，就去执行该函数。】
简写形式：

$(function() {
   $("table tr:nth-child(even)").addClass("even");
});

【可以在同一个HTML文档中多次使用，并且浏览器按照函数在页面中定义的先后顺序，一一执行指定的函数。】

四、创建DOM对象
到目前为止，jQuery的作者使得$()函数（你的记忆里它只是jQuery()函数的别名而已）足够通用以便履行许多职责，从而避免把一堆全局性的名称引入JavaScript命名空间。
此外，通过给$()函数传递包含HTML标记的字符串，可以即时创建相应的DOM元素。如：$("<p>Hi there!</p>").insertAfter("#followMe");

五、扩展jQuery
即使我们已经大量使用jQuery包装器所提供的有用函数，但是jQuery库不可能预料所有人的需求，也不应该将每个人需要的东西都预先准备好，这样子可能导致一大堆大而笨重的、包含很少用到的功能的代码。所以jQuery在设计上易于用附加功能来进行扩展。
特别示例：
jQuery并不提供预定义的、用于禁用一组表单元素的函数。如果在Web应用中大量使用表单，就会发现利用以下语法非常便利：
$("form#myForm input.special").disable();
幸运的是，通过扩展在调用$()时返回的包装器，jQuery从设计上就便于扩展函数集。扩展jQuery的基本惯用语法如下：

$.fn.disable = function() {
   return this.each(function() {
       if (typeof this.disabled != "undefined") this.disabled = true;
   });
}

【首先，$.fn.disable表示我们用名为disable的函数来扩展$包装器。在函数内部，this是将被操作的包装DOM元素的集合。
然后，调用包装器的each()方法遍历包装集里的每个元素。对于每个元素，检查该元素是否拥有disabled特性，如果拥有，则把disabled的值设为true。
因为我们返回each()方法的结果（即包装器），所以扩展的全新的disable()也支持jQuery命令链。】

六、使用jQuery和其他库
如果需要采用多个JavaScript库，可能会产生冲突。jQuery避免使用大量的标识符而污染全局命名空间——可能不仅妨碍到其他库，也妨碍到你想在页面上采用的名称。jQuery标识符和他的$别名防止jQuery对全局命名空间的侵入。
同时，jQuery提供了noConflict()实用工具函数来消除冲突。jQuery.noConflict();把$还原到非jQuery库所定义的含义。

七、小结
事实上，jQuery在JavaScript命名空间中只引入了两个新名称——自命名的jQuery函数和它的$别名——通过使该函数高度多功能化，或基于函数的不同参数来调整所执行的操作，该库还是提供了大量的功能。
1.选择和包装DOM元素以便操作。
2.充当全局实用工具函数的命名空间。
3.根据HTML标记来创建DOM元素。
4.建立代码，当DOM为操作准备好时立刻执行。