7-1 Sizzle选择器
本节编程练习不计算学习进度，请电脑登录imooc.com操作

Sizzle选择器

jQuery的定位就是一个DOM的操作库，那么可想而知选择器是一个至关重要的模块。Sizzle，作为一个独立全新的选择器引擎，出现在jQuery 1.3版本之后，并被John Resig作为一个开源的项目，可以用于其他框架：Mool、Dojo、YUI等。

jQuery是总入口，选择器支持9种方式的处理：

1.$(document)   
2.$('<div>’)
3.$('div')
4.$('#test')
5.$(function(){})
6.$("input:radio", document.forms[0]);
7.$('input', $('div'))
8.$()
9.$("<div>", {
         "class": "test",
         text: "Click me!",
         click: function(){ $(this).toggleClass("test"); }
      }).appendTo("body");
10.$($('.test'))

jQuery这个选择器重构了几次后，现在逻辑结构相当的清晰了，一看大概就知道，不能不说jQuery的反模式非职责单一深受开发者喜欢，一个接口承载的职责越多内部处理就越复杂了，jQuery查询的对象是dom元素，查询到目标元素后，如何存储？

   ☑  查询的到结果储存到jQuery对象内部，由于查询的dom可能是单一元素，也可能是合集

   ☑  jQuery内部应该要定义一个合集数组，用于存在选择后的dom元素

   ☑  当然啦，根据API，jQuery构建的不仅仅只是DOM元素，还有HTML字符串、Object、[] 等等…

看看入口的构造函数，如右侧代码：

init: function(selector, context, rootjQuery) {
     //如右侧代码
}

源码缩进后的结构：

  ☑ 处理""、null、undefined、false、返回this、增加程序的健壮性

  ☑ 处理字符串

  ☑ 处理DOMElement，返回修改过后的实例对象this

  ☑ 处理$(function(){})

任务

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. <title></title>
  7. </head>
  8. <body>
  9.  
  10.  
  11. <script type="text/javascript">
  12.  
  13.  
  14.  
  15. // 1.$(document)   
  16. // 2.$(‘<div>’) 
  17. // 3.$(‘div’) 
  18. // 4.$(‘#test’) 
  19. // 5.$(function(){}) 
  20. // 6.$("input:radio", document.forms[0]); 
  21. // 7.$(‘input’, $(‘div’)) 
  22. // 8.$() 
  23. // 9.$("<div>", { 
  24. //          "class": "test", 
  25. //          text: "Click me!", 
  26. //          click: function(){ $(this).toggleClass("test"); } 
  27. //       }).appendTo("body"); 
  28. // 10$($(‘.test’))
  29.  
  30.  
  31. var init = function(selector, context, rootjQuery) {
  32.   var match, elem;
  33.   // HANDLE: $(""), $(null), $(undefined), $(false)
  34.   if (!selector) {
  35.     return this;
  36.   }
  37.  
  38.   // Handle HTML strings
  39.   if (typeof selector === "string") {
  40.     // HANDLE: $(DOMElement)
  41.   } else if (selector.nodeType) {
  42.     // HANDLE: $(function)
  43.     // Shortcut for document ready
  44.   } else if (jQuery.isFunction(selector)) {
  45.     return rootjQuery.ready(selector);
  46.   }
  47.  
  48.   if (selector.selector !== undefined) {
  49.     this.selector = selector.selector;
  50.     this.context  = selector.context;
  51.   }
  52.  
  53.   return jQuery.makeArray(selector, this);
  54. }
  55.  
  56. </script> 
  57.  
  58. </body>
  59. </html>
下一节