jQuery 学习一(基础知识)

   ●  The jQuery wrapper 
          jQuery 中，一切都是 jQuery 对象。为了得到一组元素，我们可以使用以下简单的语法：$(selector) or jQuery(selector)，其中，selector 就是 CSS 选择器。 
        $() 函数其实就是 jQuery() 函数的一个别名而已，它返回一个特殊的 javascript 对象，这个对象包含的是匹配 selector 的 DOM 元素数组。所以，jQuery 使用 jQuery 方法(匹配选择器)将 DOM 元素(符合选择器的 DOM 元素)进行了包装，包装成 jQuery 对象(实际上 jQuery 方法返回的是 jQuery 对象数组，这里只是为了说明概念而已)，这个对象持有很多已经定义好的方法来操作这组 DOM 元素。 

    ●  Utility Functions 
          jQuery 的 $() 方法是我们使用的最频繁的以期望得到 DOM 元素集合的封装(jQuery 对象)的函数，但 $() 的职责不仅仅在于此项功能。它另外的一项功能是提供命名空间前缀，用来将一些功能比较集中的函数放入同一命名空间下，并作为工具函数。下面举一个典型的例子： 

Javascript代码  

1. /** 
2.  * $. 前缀看起来很怪异，但是请记住，$ 和你在 javascript 定义的任何标识符都一样，它只是一个标识符。 
3.  */  
4. $.trim(someString);  
5. /** 
6.  * 这样看起来更熟悉，trim() 函数被作为 jquery 或 jQuery 的别名 $ 命名空间(注意，命名空间本身在  
7.  * javascript 看来也是对象，此对象[我们可以称为 jQuery 对象]的数据类型是 Object，而不是我们通过类 
8.  * 选择器得出的 jQuery 对象，这两个对象的名字起的一样，有点晕乎)下的函数。有点类似 java 中的静态方法。 
9.  */  
10. jQuery.trim(someString);  

    ●  The document ready handler 
          我们经常希望在 DOM 全部加载完毕后去做一些事情，常用的是 window.onload。可是，window.onload 不仅仅是把整个 DOM 树加载完毕，它同时还要等待将所有的图片以及其它的外部资源完全加载完毕并且页面在浏览器中被显示(渲染)出来。可见，为了执行 window.onload 的回调函数，我们不得不等待很长时间(假设图片资源或其它的外部资源非常庞大)。更好的方法是，仅仅等到文档结构完全被解析，并且浏览器已经把 HTML 转换成 DOM 树型的这个时机做回调函数，此时不需管图片资源等是否加载到客户端(只要形成了了 DOM Tree 即可)。jquery 提供了简单的方法，一旦 DOM 树加载完毕，而不需外部资源加载完毕时来触发执行我们的代码： 

Javascript代码  

1. $(document).ready(function() {  
2.     ......  
3. });  
4.   
5. // 更为简便的写法是：  
6. $(function() {  
7.     ......  
8. });  

    ●  Extending jQuery 
          jQuery 包装函数提供了大量的有用的函数，但作为 javascript 库，它不可能考虑到我们系统的任何一种情况，这个时候，我们需要自己去扩展 jQuery 的包装类。将页面中符合 selector 的元素置为不可用，我们需要自己去扩展 jQuery 的包装类： 

Javascript代码  

1. /** 
2.  * $.fn.disable 的含义是：我们要使用一个函数名为 disable 的函数扩展 jQuery 的封装器的内容，这样， 
3.  * jQuery 对象就有了 disable 这个函数(原来是没有的)。 
4.  */  
5. $(selector).disable();  
6.   
7. $.fn.disable = function() {  
8.   return this.each(function() {  
9.     if (typeof this.disabled != "undefined") {  
10.       this.disabled = true;  
11.     }  
12.   })  
13. };  
14.   
15. // 等价的写法如下：  
16. $.fn.extend({  
17.   disable: function() {  
18.     return this.each(function() {  
19.       if (typeof this.disabled != "undefined") {  
20.         this.disabled = true;  
21.       }  
22.     })  
23.   }  
24. });