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元素
