筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

  1. $("div:first")        直接获得第一个div （永远只能操作第一个）
  2. $("div").first()    先获得所有的div，从所有的中筛选出第一个。 （可以操作第一个，也可以操作所有）

一、过滤

  1. eq(index | -index)  类型 :eq()
  2.     index：正数，从头开始获得指定索引的元素。这个元素的位置是从0算起。0表示第一个
  3.     -index：负数，从尾开始获得指定索引的元素。-1算起， -1表示最后一个，之前分别是-2，-3…..
  4. first()         第一个  :first
  5. last()         最后一个  :last
  6. is()         判断
  7. hasClass()     判断是否是指定class 。返回值true和false  <xxx class="my">
  8. filter()     筛选出与指定表达式匹配的元素集合
  9. not()           将指定内容删除
  10. --------------------------------
  11. has()        子元素是否有，返回父元素
  12. slice(start , end)  截取元素 ，(2,4)  --> 2,3
  1. <script type="text/javascript">
  2.     $(document).ready(function(){
  3.     //<input type="button" value=" 选择索引值等于3的元素"  id="b1"/>
  4.     $("#b1").click(function(){
  5.         //$("div").eq(3).css("background-color","red");
  6.         $("div").eq(-3).css("background-color","red").show();
  7.     });
  8.     //<input type="button" value=" 选择第一个div元素"  id="b2"/>
  9.     $("#b2").click(function(){
  10.         $("div").first().css("background-color","red");
  11.     });
  12.     //<input type="button" value=" 选择最后一个div元素"  id="b3"/>
  13.     $("#b3").click(function(){
  14.         $("div").last().css("background-color","red").show();
  15.     });
  16.     //<input type="button" value=" id=one div样式是否是one"  id="b4"/>
  17.     $("#b4").click(function(){
  18.         //alert($("div#one").hasClass("one"));
  19.         $("div#one.one").css("background-color","red");
  20.     });
  21.     //<input type="button" value=" 选择class为none的所有div"  id="b5"/>
  22.     $("#b5").click(function(){
  23.         //$("div.none").css("background-color","red").show();
  24.         $("div").filter(".none").css("background-color","red").show();
  25.     });
  26.     //<input type="button" value=" 样式为hide div 下一个兄弟是否是span"  id="b6"/>
  27.     $("#b6").click(function(){
  28.         //alert($("div.hide+").is("span"));
  29.         alert($("div.hide").next().is("span"));
  30.     });
  31.     //<input type="button" value=" 选择所有div中含有div的"  id="b7"/>
  32.     $("#b7").click(function(){
  33.         //$("div:has(div)").css("background-color","red");
  34.         $("div").has("div").css("background-color","red");
  35.     });
  36.     //<input type="button" value=" 选择样式为one div 子元素中没有title属性的div(子元素div)"  id="b8"/>
  37.     $("#b8").click(function(){
  38.         //$("div.one :not([title])").css("background-color","red");            $("div.one").children().not("[title]").css("background-color","red");
  39.     });
  40.     //<input type="button" value=" 选择索引号为3,4的div"  id="b9"/>
  41.     $("#b9").click(function(){
  42.         //$("div:gt(2):lt(2)").css("background-color","red");
  43.         $("div").slice(3,5).css("background-color","red");
  44.     });
  45. });

示例：

文本框获取和失去焦点

  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.     //方式一：使用focus和blur方法
  4.     /*$("input[type='text']").focus(function(){
  5.               $(this).val("获取焦点");
  6.           }).blur(function(){
  7.             $(this).val("失去焦点");
  8.           }); */
  10.     //方式二：使用on方法
  11.     $("input[type='text']").on("focus blur",
  12.         function(){
  13.             if($(this).is(":focus")){
  14.                 $(this).val("得到焦点");
  15.             }
  16.             else{
  17.                 $(this).val("失去焦点");
  18.             }
  19.         });    
  20.     });
  21. </script

二、查找

  1. <A>
  2.     <B>
  3.         <C></C>
  4.         <D></D>
  5.         <E></E>
  6.         <F></F>
  7.     </B>
  8. </A>
  10. B.children([...])   获得所有的子元素。CDEF
  11. A.find(D)         从指定的区域查询指定元素。D
  12. D.next()         下一个兄弟。E
  13. D.nextAll()       后面的所有兄弟。EF
  14. E.prev()         上一个兄弟。D  （previous）
  15. E.prevAll()       前面的所有兄弟。CD
  16. E.siblings()      所有兄弟。CDF
  17. E.parent()        父元素。B
  18. E.closest(A)      向上获得指定的父元素（含自己），如果获得返回一个对象，如果没有没有对象。
  19. E.parents()       获得所有的父元素。AB
  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.     //         <input type="button" value=" 选择 id=two 所有子元素"  id="b1"/>
  4.     $("#b1").click(function() {
  5.         //alert($("#two *").length);
  6.         $("#two").children().css("background-color","red");
  7.     });
  8.     //         <input type="button" value=" 选择 id=two 子元素title=other 元素 "  id="b2"/>
  9.     $("#b2").click(function() {
  10.         //$("#two>[title='other']").css("background-color","red");
  11.         $("#two").children("[title='other']").css("background-color","red");
  12.     });
  13.     //         <input type="button" value=" 选择 id=two 下一个兄弟"  id="b3"/>
  14.     $("#b3").click(function() {
  15.         //$("#two+").css("background-color","red");
  16.         $("#two").next().css("background-color","red");
  17.     });
  18.     //         <input type="button" value=" 选择 id=two 后面的所有兄弟"  id="b4"/>
  19.     $("#b4").click(function() {
  20.         $("#two").nextAll().css("background-color","red");
  21.     });
  22.     //         <input type="button" value=" 选择 id=two 上一个兄弟"  id="b5"/>
  23.     $("#b5").click(function() {
  24.         $("#two").prev().css("background-color","red");
  25.     });
  26.     //         <input type="button" value=" 选择 id=two 前面的所有兄弟"  id="b6"/>
  27.     $("#b6").click(function() {
  28.         $("#two").prevAll().css("background-color","red");
  29.     });
  30.     //         <input type="button" value=" 选择 id=two 所有兄弟"  id="b7"/>
  31.     $("#b7").click(function() {
  32.         $("#two").siblings().css("background-color","red");
  33.     });
  34.     //         <input type="button" value=" 选择 id=two 父元素"  id="b8"/>
  35.     $("#b8").click(function() {
  36.         $("#two").parent().css("background-color","red");
  37.     });
  38. });
  39. </script>

示例：

QQ分组

  1. <script type="text/javascript">
  2.     $(document).ready(function(){
  3.     //开始所有的a标签默认隐藏
  4.     $("div").children("a").hide().prev("span").click(function(){
  5.         //1.切换隐藏显示
  6.         if($(this).nextAll().is(":hidden")){
  7.             $(this).nextAll().show();
  8.         }
  9.         else{
  10.             $(this).nextAll().hide();
  11.         }
  13.         //2.点击当前展开当前，自动关闭其他
  14.         //$(this).nextAll().show().parent().siblings("div").children("a").hide();
  15.     });
  16. });
  17. </script>

三、串联

  1. A.add(B)  将A和B组合一个对象 。类似 $("A,B")
  2. end() ：回到最近的一个操作之前
  3.     A.children().children().end() .end()  
  4.     A   孩子   孙子        孩子  A
  5. -----------------------
  6. contents()  获得所有的子节点（子元素 和 文本）
  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.     //         <input type="button" value=" 选择 id=one和two 的div"  id="b1"/>
  4.     $("#b1").click(function(){
  5.         //$("#one,#two").css("background-color","red");
  6.         $("#one").add($("#two")).css("background-color","red");
  7.     });
  9.     //         <input type="button" value=" 选择id=one 所有的孩子，以及one自己"  id="b2"/>
  10.     $("#b2").click(function(){
  11.         //$("#one>*,#one").css("background-color","red");
  12.         $("#one").children().add("#one").css("background-color","red");
  13.     });
  15.     //         <input type="button" value=" 选择id=one 所有的孩子，设置颜色为红，设置one自己为黄"  id="b3"/>
  16.     $("#b3").click(function(){
  17.         $("#one").children().css("background-color","red").end().css("background-color","yellow");
  18.     });
  20.     //         <input type="button" value=" 获得id=two 子节点个数"  id="b4"/>
  21.     $("#b4").click(function(){
  22.         alert($("#two").contents().length);
  23.     });
  24.     //注意：这里面打印结果为5，原因有默认的换行的文本节点存在
  25. });
  26. </script>

示例：

获取兄弟元素

  1. <ul>
  2.     <li>青岛啤酒（TsingTao）</li>
  3.     <li>瓦伦丁（Wurenbacher）</li>
  4.     <li>雪花（SNOW）</li>
  5.     <li>奥丁格教士（Franziskaner）</li>
  6.     <li>科罗娜喜力柏龙（Paulaner）</li>
  7.     <li>嘉士伯Kaiserdom</li>
  8.     <li>罗斯福（Rochefort）</li>
  9.     <li>粉象（Delirium）</li>
  10.     <li>爱士堡（Eichbaum）</li>
  11.     <li>哈尔滨牌蓝带</li>
  12. </ul>
  14. <style>
  15.     ul {
  16.         list-style-type: none;
  17.         width: 200px;
  18.         position: absolute;
  19.         left: 500px;
  20.     }
  22.     ul li {
  23.         margin-top: 10px;
  24.         cursor: pointer;
  25.         text-align: center;
  26.         font-size: 20px;
  27.     }
  28. </style>
  31. <script>
  32. //获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件
  33. $(function () {
  34.     //获取ul->li
  35.     $("ul>li").mouseenter(function () {
  36.         $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
  37.     }).mouseleave(function () {
  38.         $(this).css("backgroundColor","").siblings().css("backgroundColor","");
  39.     }).click(function () {
  40.         //当前元素前面的所有兄弟元素背景颜色为黄色
  41.         //$(this).prevAll().css("backgroundColor","yellow");
  42.         //当前元素后面的所有兄弟元素背景颜色为蓝色
  43.         //$(this).nextAll().css("backgroundColor","blue");
  45.         //链式编程代码
  46.         //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,
  47.         //解决断链--->恢复到断链之前的一个效果--修复断链
  48.         //.end()方法恢复到断链之前的效果
  49.         $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
  50.     });
  51. });
  52. </script>

五星评分

  1. <ul class="comment">
  2.     <li>☆</li>
  3.     <li>☆</li>
  4.     <li>☆</li>
  5.     <li>☆</li>
  6.     <li>☆</li>
  7. </ul>
  9. <style>
  10. * {
  11.     padding: 0;
  12.     margin: 0;
  13. }
  15. .comment {
  16.     font-size: 40px;
  17.     color: yellow;
  18. }
  20. .comment li {
  21.     float: left;
  22. }
  24. ul {
  25.     list-style: none;
  26. }
  27. </style>
  29. <script>
  30.    $(function () {
  31.         $(".comment>li").mouseover(function () {
  32.             $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
  33.         }).mouseout(function () {
  34.             $(".comment").find("li").text("☆");
  35.             //鼠标移出的时候让所点击的li之前的所有li选中
  36.             $(".comment>li[index=1]").text("★").prevAll("li").text("★")
  37.         }).click(function () {
  38.             //点击li的时候给当前li绑定一个属性值用于鼠标移出时候记录哪些li需要选中
  39.             $(this).attr("index","1").siblings("li").removeAttr("index");
  40.         });
  41.    });
  42. </script>