1、eq() 筛选指定索引号的元素 ************************* 筛选 ************************************ 一、eq() 筛选指定索引号的元素 语法:eq(index|-index) 索引号从0开始,若为负值,则从最后一个开始倒数,最后一个从-1开始 $("p").eq(1); //如果选择器改为 $("p").eq(-1),则我是第四个P会被选中 二、first() 筛选出第一个匹配的元素 语法:first() 此方法没有参数 $("p").first(); <div> <p>我是第一个P</p> //我的索引值是0,我是第一个,我会被选中 <p>我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> </div> 三、last() 筛选出最后一个匹配的元素 语法:last() 此方法没有参数 四、hasClass() 检查匹配的元素是否含有指定的类 语法:hasClass(class) class为类别名 //返回布尔值 if($("p").hasClass("p2")) 五、filter() 筛选出与指定表达式匹配的元素集合 语法:filter(expr|obj|ele|fn) expr:匹配表达式|obj:jQuery对象,用于匹配现有元素 | DOM:用于匹配的DOM元素 | function返回值作为匹配条件 $("p").filter(".p2"); 六、is() 检查元素是否参数里能匹配上的 语法:is(expr|obj|ele|fn) expr:匹配表达式|obj:jQuery对象,用于匹配现有元素 | DOM:用于匹配的DOM元素 | function返回值作为匹配条件 $($("p").first().is(".p2")) 七、map() 八、has() 筛选出包含指定子元素的元素 语法:has(expr|ele) expr:选择表达式 | DOM元素选择 $("div").has("p"); <div> //本div会被选中,因为该div含有p子元素 <p>我是第一个P</p> <p class="p2">我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> </div> 九、not() 排除能够被参数中匹配的元素 语法:not(expr|ele|fn) expr:选择表达式 | DOM元素选择 | fn的作用还不清楚 $("p").not(".p2"); <div> <p>我是第一个P</p> //会被选中,没有class=p2 <p class="p2">我是第二个P</p> //不会被选中,因为有class=p2被not(".p2")排除了 <p>我是第三个P</p> //会被选中,没有class=p2 十、slice() 从指定索引开始,截取指定个数的元素 语法:slice(start, [end]) start位置, end可选,结束位置,不包含结束位置那个。如果不指定,则匹配到最后一个。 $("p").slice(1,3) <div> <p>我是第一个P</p> //不会被选中,我索引为0 <p class="p2">我是第二个P</p> //会被选中,我索引为1 <p>我是第三个P</p> //会被选中,我索引为2 <p>我是第四个P</p> //不会被选中,虽然我的索引为3,但是不包括我 </div>
********************** 筛选 ********************************* 十一、children() 筛选获取指定元素的资源 语法:children(expr); 获取指定元素的资源,expr为子元素筛选条件 $("div").children(".p2"); <div> <p>我是第一个P</p> //不会被选中,虽然我是div的子元素,但是我没class=p2 <p class="p2">我是第二个P</p> //会被选中,我既是p的子元素,又有class=p2 <p>我是第三个P</p> //不会被选中,虽然我是div的子元素,但是我没class=p2 十二、closest() 从当前元素开始,返回最先匹配到的符合条件的父元素 $("span").closest("p","div"); <div> //不会被选中,被P抢了先机 <p>我是第一个P //P会被选中,因为P符合条件,而且是最先匹配到的,虽然div也符合条件了,但是div不是最先匹配到的。因此div不会被选中。 十三、find() 从指定元素中查找子元素 语法:find(expr|obj|ele) expr:匹配表达式 | obj用于匹配的jQuery对象 | DOM元素 $("div").find(".p2"); 十四、next() 获取指定元素的下一个兄弟元素 语法:next(expr) expr:可选,筛选条件,如果下一个兄弟元素不符合改条件,则返回空。 $(".p2").next(); //如果筛选改为$(".p2").next(".p4")那选中的是哪个呢?答案是:没选中任何元素,因为虽然有个class=p4的P,但它不是.p2的下一个。 <div> <p>我是第一个P</p> <p class="p2">我是第二个P</p> <p>我是第三个P</p> //我是.p2的next <p class="p4">我是第四个P</p> </div> 十五、nextAll() 获取其后的所有兄弟元素 语法:nextAll(expr) expr:可选,筛选条件,获取其后符合expr条件的所有兄弟元素 $(".p2").nextAll(); //如果筛选条件改为 $(".p2").nextAll(".p4"); 则只有我是第四个P会被选中 十六、nextUntil() 获取其后的元素,直到参数能匹配上的为止,不包括结束条件那个 语法:nextUntil([expr|ele][,fil]) expr筛选表达式 | DOM元素筛选,注意不包括参数里的那一个 $(".p2").nextUntil(".p4"); //注意此方法并不会包括.p4 十七、offsetPosition() 返回第一个用于定位的祖先元素,即查找祖先元素中position为relative或absolute的元素。 语法:offsetPosition() 此方法没有参数 由于CSS的绝对定位的定位基准是相对最近的一个已定位元素,因此此方法的作用不言而喻。 $("span").offsetParent(); 十八、parent() 获取指定元素的直接父元素 语法:parent(expr) expr为筛选条件,如果直接父元素不符合条件,则不返回任何元素(无论它的祖先是否具有能与expr匹配的) $("span").parent(); <div style="position:relative"> <p> //我是span的直接父元素,我会被匹配到 <span>我是一个span</span> </p> </div> 十九、parents() 获取指定元素的所有祖先元素,一直到<body></body> 语法:parents(expr) expr为筛选条件,如果某个祖先元素不符合expr则排除 $("span").parents(); <div style="position:relative"> //我是span的祖先元素,我也会被匹配到.另外<body></body>也会被匹配到 <p> //我是span的直接父元素,我会被匹配到 <span>我是一个span</span> </p> </div> 二十、parentsUntil() 获取指定元素的祖先元素,知道参数里能匹配到的为止 语法:parentsUntil(expr) expr为停止参数,一直匹配到expr为止,同时参数的条件是不会被匹配中的。 $("span").parentsUntil("div"); <div style="position:relative"> //我是span的祖先元素,但是我作为停止条件,我也不会被选中 <p> //我是span的直接父元素,我会被选中 <span>我是一个span</span> </p> </div> 二十一、prev() 获取指定元素的前一个兄弟元素 语法:prev(expr) expr:可选。当上一个兄弟元素不符合参数中的条件时,不返回任何元素。 $(".p2").prev(); <div> <p>我是第一个P</p> //我会被选中,我是.p2的前一个元素。 <p class="p2">我是第二个P</p> <p>我是第三个P</p> <p class="p4">我是第四个P</p> </div> 二十二、prevAll() 获取指定元素前面的所有兄弟元素 语法:prevAll(expr) expr:可选,排除所有不能够被expr匹配上的元素 $(".p4").prevAll(".p2"); <div> <p>我是第一个P</p> //不会被选中,虽然我是.p4前面的兄弟元素,但是我没有class=p2 <p class="p2">我是第二个P</p> //会被选中,我既是.p4前面的兄弟元素,而且我有class=p2 <p>我是第三个P</p> //不会被选中,虽然我是.p4前面的兄弟元素,但是我没有class=p2 二十三、prevUntil() 获取指定元素前面的所有兄弟元素,直到参数里的条件能够匹配到的。 注意参数条件本身不会被匹配 语法:prevUntil([expr|ele][,fil]) expr匹配表达式 | DOM元素匹配 $(".p4").prevUntil(".p2"); <div> <p>我是第一个P</p> //不会被选中,到p2就停止了 <p class="p2">我是第二个P</p> //不会被选中,我是停止条件,不包括我 <p>我是第三个P</p> //会被选中,我在.p2前,递归到我在到.p2 <p class="p4">我是第四个P</p> //不会被选中,我自己怎么可能是我自己前面的呢? </div>
/******************** 串联 *******************************/
二十四、siblings() 获取指定元素的兄弟元素,不分前后 语法:siblings(expr); expr为筛选条件,不符合条件的不会选中 $(".p2").siblings(); <div> <p>我是第一个P</p> //会被选中,我是.p2的兄弟元素 <p class="p2">我是第二个P</p> //不会被选中,我是自己 <p>我是第三个P</p> //会被选中,我是.p2的兄弟元素 二十五、add() 将选中的元素添加到jQuery对象集合中 add(expr|elements|html|jQueryObject) expr:选择器表达式 | DOM表达式 | Html片段 | jQuery对象,将jQuery对象集合一起方便操作; $(".p2").add("span").css("background-color","red"); <div> <p>我是第一个P</p> <p class="p2">我是第二个P</p> //会变红 <p>我是第三个P</p> <p class="p4">我是第四个P</p> </div> 二十六、andSelf() 将自身加到选中的jQuery集合中,以方便一次性操作 andSelf() 此方法无参数 $(".p2").nextAll().andSelf().css("background-color","red"); <div> <p>我是第一个P</p> <p class="p2">我是第二个P</p> //会变红,这就是andSelf()的效果 <p>我是第三个P</p> //会变红 <p class="p4">我是第四个P</p> //会变红 </div> 二十七、end() 将改变当前选择器选中的操作回退为上一个状态。 end() 此方法没有参数 $(".p2").next().end().css("background-color","red"); <div> <p>我是第一个P</p> <p class="p2">我是第二个P</p> //会变红,这就end()的效果 <p>我是第三个P</p> //不会变红,尽管next()方法之后选中的是这一个,但是由于被end()方法回退了因此是上一个。 <p class="p4">我是第四个P</p> </div> 二十八、contents 未明白 |
|