jQuery粗略源码解析2 选择器

1 Sizzle选择器引擎

Sizzle是一个纯js实现的css选择器引擎，在Sizzle内部，如果浏览器支持querySelectorAll()则调用该方法查找元素，否则模拟该方法的行为。
使用jQuery时，大多数时候总是先调用Sizzle查找元素(也就是$.find()方法)，然后调用jQuery方法对查询结果进行操作。源码分析略。

---

2 将Sizzle暴露给jQuery

• .find() 匹配元素中每个元素的后代元素中查找。如果是字符串就是直接查找。如果是DOM或者jq对象，先全封装成jq对象，遍历这个jq对象判断是否在后代中，在就保留，不在舍弃。

<div>
    <p><span>111</span></p>
    <p><span>222</span></p>
    <span>333</span>
</div>
<script>
    $("div").find("span").css({"color":"blue"});//所有span选中
    $("p").find($("span")).css({"color":"red"});//前两个被选中
</script>

• .has() 匹配结果中保留后代中包含特定元素的，舍弃掉不符合的。

<ul>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    $("ul li").has("a").css({"background": "red"});
    //匹配后代中有a的li元素 前三个被选中
</script>

• .fliter() 筛选出符合要求的元素
• .not() 将符合选择器的元素舍弃掉

<ul>
    <li class="my">1</li>
    <li class="my" id="haha">2</li>
    <li class="my">3</li>
    <li class="my">4</li>
    <li>5</li>
</ul>
<script>
    $("ul li")
        .filter(".my")
        .not("#haha")
        .css({"color":"red"})//1,3,4被选中
</script>

• .is()匹配元素集合中有一个与结果匹配就返回true。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    $("ul").on("click","li",function () {
        var result=$(this).is($("ul li:eq(3)"));
        console.log(result);
        //点击第四个时，返回true 其他返回false
    })
</script>

• .index()判断下标。
  ①如果没传入参数就返回这个jq对象相对于兄弟元素的下标。
  ②传入DOM或jq对象，返回传入的对象第一个元素相对于应用jq对象的下标位置。
  ③传入选择器字符串，返回应用的jq对象第一个元素，相对于字符串查询得到jq对象中的下标位置。

$("ul").on("click","li",function () {
        var result=$(this).index();
        //点击DOM相对兄弟DOM的下标 例如：点击第三个时返回2
    });
    var my=document.getElementById("sel"),
        $context=$("ul li");
    console.log( $context.index(my));//传入DOM 4
    console.log( $context.index($("#dog")));//传入jq对象 2
    console.log( $("#cat").index("ul li"));//传入选择器 1 小=>大

• .add() 原有jq对象中添加一个jq对象。

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <span>内部</span>
</div>
<span>外部</span>
<script>
$("ul li").add("span").css({"background":"red"});
//两个选择器合并成一个jq对象
</script>

• :animated 伪类选择器 检测元素是否正在执行动画

 $("div").css({
        "background": "red", "display": "inline-block", "color": "white"
    }).click(function () {
        !$(this).is(":animated") ?
            $(this).animate({width: "+=300"}, 1000) :
            console.log("动画中...");
    });

• :hidden和:visible 可见性选择器，是通过offsetHeight和offsetWidth判断是否占据布局空间的，所以设置visibility和opacity不起作用。

$content = $("ul");
    $("div").click(function () {

        $content.is(":hidden") ?
            $content.show(100) :
            $content.hide(100)
    })

---

3 选择器的使用

• 基本选择器：
  id选择器：#id ；
  元素：element ；
  类名：.class；
  通配符:*;
  selector1,selector2,selectorN 合并选择。
• 层级选择器：
  selector1 selector2 ：1下所有的2；
  selector1>selector2：1下子代中的2
  selector1+selector2：紧邻1后的2
  selector1~selector2：1后所有的2
• 属性
  [attr1] 包含attr1属性的元素

<div data-age="26">点击</div>
<script>
    $("[data-age]").css({"background":"red"});
</script>

[attr1=value] attr1等于value的元素
[attr1!=value] attr1不等于value的元素
[attr1^=value] attr1以value开始的元素
[attr$=value] attr1以value结束的元素
[attr*=value] attr1的值中包含value的元素
[selector1][selector2][selectorN] 同时满足多个属性选择器的要求

• 基本筛选器
  :first 匹配的第一个
  :last 匹配的最后一个
  :eq(index) 匹配给定下标的那个
  :gt(index)匹配大于给定下标的那个
  :lt(index)匹配小于给定下标的那个
  :not(selector) 排除某些元素
  :even 匹配索引值为偶数的
  :odd 匹配索引值为奇数的
  :header 匹配标题元素
  :animated 动画中的元素
  :focus 获得焦点的元素
• 内容筛选器
  :contains(text) 匹配有给定文本的元素
  :empty 没子元素或文本为空的元素
  :parent 含有子元素或者文本的元素
  :has(selector) 后代中有指定选择器的那个元素
• 可见性筛选器
  :hidden 所有不可见
  :visible 所有可见
• 表单筛选器
  :input 匹配所有 input, textarea, select 和 button 元素
  :text 单行文本框
  :password 密码框
  :radio 单选按钮
  :checkbox 复选框
  :submit 提交按钮
  :image 图像域
  :reset 重置按钮
  :button 所有按钮
  :file 文件域
• 表单属性筛选器
  :enabled 所有可用元素
  :disabled 所有不可用元素
  :checked 匹配所有选中的被选中元素(复选框、单选框)
  :selected 选中的option元素