jQuery 学习日记（二）：选择器与过滤器

jQuery 使用正则表达式解析选择器的表达式，其表达式的语法并不复杂，如果使用过 Emmet 插件的同学使用起来一定非常的熟悉，因为 jQuery 选择器的语法和 Emmet 的语法非常相似。

基本选择器：

// id选择器
$("#id");

// 标签选择器
$("tag");

// 类选择器；
$(".class");

// 通配选择器
$("*");

// 组选择器
$("expr1, expr2");

层选择器：

/* 包含选择器，该选择器返回父元素下所有子元素，无论层级关系 */
$("ancestor chlid");

/* 子选择器，该选择器只返回父元素的直接子元素，多层关系的子元素不返回 */
$("parent>child");

/* 相邻选择器，该选择返回选定元素的下一个元素；使用prev来定位，但实际上返回的是next */
$("prev+next");

/* 兄弟选择器，该选择器返回选定元素的之后的所有兄弟元素，可以理解成allNext */
$("prev~siblings");

伪类选择器：

定位选择器；

/* 定位选择器 */

// 满足expr表达式的集合的第一个元素
$("expr:first");

// 满足expr表达式的集合的最后一个元素
$("expr:last");

// 满足expr表达式的集合的第index个元素
$("expr:eq(index)");

/* 范围选择器 */
$("expr:even");  //偶数位元素
$("expr:odd");  //奇数位元素
$("expr:gt(index)");  //大于索引位的元素
$("expr:lt(index)");  //小于索引位的元素

/* 排除选择器 */
$("expr1:not(expr2)");  //满足expr1且不满足expr2表达式的元素

内容选择器：

$("expr1:contains(expr2)");  //满足expr1表达式且包含内容expr2的元素

$("expr1:has(expr2)"); //满足expr1表达式且包含expr2元素的元素

$("expr:hidden");  //匹配所有不可见元素，注意：这里的不可见只能匹配出 display:none 的元素，无法匹配出 visibility:hidden 的元素

$("expr:visible");  //匹配所有可见元素

/* 表单内容选择器 */
$("input:type");  //type为input的type值，例如text,submit等

$("input:enabled");  //可用表单元素

$("input:disabled");  //不可用表单元素

$("input:checked");  //已选中元素，不包括option

$("input:selected");  //已选中元素，用于option

$("[attribute=value]"); //属性选择器

通过选择器和过滤器的使用，我们可以更好的定位到我们需要操作的DOM元素，下面讲解过滤器；

$("expr").hasClass("class");  //类过滤，检查当前元素是否含有class类,该函数返回的是一个bool值，注意，不是DOM对象;

$("expr").eq(index);  //坐标过滤，返回数组中指定坐标的元素；
/* 这里肯定有同学会问道，这个东西和get(index)和[index]有什么不同，eq(index)返回的实质上海是一个jQuery对象，他只起到过滤的作用，而get和[]则返回的DOM元素  */

$("expr1").filter("expr2");  //表达式过滤,相当于进行二次筛选；

$("expr").filter(function(index));  //函数表达式过滤，此方法非常灵活，可以在函数中进行控制，index代表的是当前的索引值，该函数返回一个bool值;

$("expr1").has("expr2");  //返回满足表达式1且包含满足表达式2的元素的元素集合

对于函数表达式过滤，很多同学可能不理解，下面举个例子，有如下HTML代码

<ul>
	<li class="licls">i am here</li>
	<li class="licls">i am here</li>
	<li class="licls">i am here</li>
</ul>
<ul>
	<li>i am not</li>
	<li>i am not</li>
	<li>i am not</li>
</ul>

以及如下js代码

var lis = $("li");
var filterLis = lis.filter(function(index){
	var cls = this.getAttribute("class");
	if("licls" == cls){
		console.log(index+": "+this.innerText);
		return true;
	}else{
		console.log(index+": "+this.innerText);
		return false;
	}
});
console.log(filterLis.text());

则控制台将会输出：

0: i am here

1: i am here

2: i am here

3: i am not

4: i am not

5: i am not

i am herei am herei am here

通过这个例子我们可以很深刻的理解函数表达式过滤的原理：

1. 当函数返回 true 的时候则返回当前这个元素，反之亦然；

2. 在函数中处理的对象是当前的DOM元素，index代表当前位置的索引；

3. 返回的是一个 jQuery 对象，不是DOM元素数组；

查找：

$("expr1").children("expr2");  //返回满足expr1表达式的元素的满足expr2表达式的直接子元素，返回的实际上是children，该表达式返回的是 jQuery 对象；

$("expr1").parent("expr2");  //返回满足条件的当前元素的直接父元素；

$("expr1").parents("expr2");  //从当前元素开始，返回满足条件的直接父元素，直至HTML元素，可以理解为返回所有直接父元素；

$("expr1").parentUntil("expr2");  //返回当前元素直到满足expr2表达式的父元素之间的所有父元素；

// 向下查找兄弟元素
$("expr1").next("expr2"); 
$("expr1").nextAll("expr2");
$("expr1").nextUntil("expr2");

//向上查找兄弟元素
$("exp1r").prev("expr2") ;
$("exp1r").prevAll("expr2") ;
$("exp1r").prevUntil("expr2") ;

// 以上方法类似；

$("expr1").siblings("expr2");  //返回当前元素所有满足条件的同级元素，不包括该元素本身
$("expr1").add("expr2");  //添加查找对象，通过expr1选择出一组元素，再通过expr2选择出一组元素，将该组元素添加在组当中；