jQuery选择器（20171026）

看案例（好友列表）
结构：
<div id="con" class="center">
    <ul id="friendslist">
        <li>
            <p class="border_bottom">我的好友</p>
            <ul>
                <li>张三</li>
                <li>李四</li>
                <li>王五</li>
                <li>宋六</li>
            </ul>
        </li>
        <li>
            <p class="border_bottom">同事</p>
            ....
        </li>
         ....
    </ul>
</div>
//原生js方法

var friendslist = document.getElementById("friendslist");
    var listItem = friendslist.getElementsByTagName("p");
    var item = friendslist.getElementsByTagName("ul");
    for (var i=0;i<listItem.length;i++){
        listItem[i].onclick = function(){
            //循环先让所有的子ul隐藏
            for( var j=0;j<listItem.length;j++){
                listItem[j].nextElementSibling.style.display = "none";
            }
            //让当前显示
            this.nextElementSibling.style.display = "block";
        }
    }

  //jquery方法

    $(function(){
        $("p").click(function(){
            console.log(123);
            $(this).siblings("ul").show().parent("li").siblings("li").find("ul").hide();
        })
    })

 var obj={
        n:2
    };
    obj.write = function(){
        console.log(this.n*2)
    };
    obj.say = function(){
        console.log("我是谁")
    };
//    obj.say();//4
//    obj.write();//我是谁
//    obj.say().write();//报错
修改：
 var obj={
        n:2
    };
    obj.write = function(){
        console.log(this.n*2)
        return this
    };
    obj.say = function(){
        console.log("我是谁")
         //就是在对象的函数里返回this；
        return this
    };
    //obj.say().write();//4，我是谁

1.基本选择器

2.过滤选择器

a)基本过滤选择器：
:first//（选取第一个元素）
:last//（选取最后一个元素）
:even//（选取索引是偶数的所有元素）
:odd//（选取索引是奇数的所有元素）
:eq(index)//（选取索引等于index的元素）
:gt(index)//（选取索引大于index的元素）
:lt(index)//（选取索引小于index的元素）
:header//（选取所有的h1,h2,h3等标题元素）
:animated//（选取当前正在执行动画的所有元素）

b)内容过滤选择器
:contains(text)//选取含有文本内容为text的元素
:empty//选取不包含子元素或者文本的空元素
:has(selector)//选取含有选择器所有匹配的元素的元素
:parent//选取含有子元素或者文本的元素

c)可见性选择器

:hidden//选取所有不可见的元素
（包括<input type="hidden" />、
<div style="display:none">和<div style="visibility:hidden;">；
若只选取<input type="hidden" />使用$("input:hidden")
:visible//选取所有可见元素

d)属性选择器

[attribute]//选取拥有此属性的元素
[attribute=value]//选取属性的值为value的元素
[attribute!=value]//选取属性的值不为value的元素
[attribute^=value]//选取属性的值以value开始的元素
[attribute$=value]//选取属性的值以value结束的元素
[attribute*=value]//选取属性的含有value的元素
[selector1][selector2][selectorN]//属性选择器合并成一个复合属性选择器，
注意：此处为属性选择器的并集，如$("div[id][class$='Bar']"

e)子元素选择器

:nth-child(index/even/odd/equation)//选取第index个子元素或者奇偶元素
:first-child//选取每个父元素的第一个元素（返回整个文档中每个元素的第一个子元素），
如$("ul li:first-child");选择每个<ul>中第1个元素
:last-child//选取每个父元素的最后一个元素
:only-child//若某子元素是其父元素中惟一的子元素，将会被匹配

f）表单对象属性选择器

:enabled//选择所有可用元素，例$("#form1:enabled")
:disabled//选取所有不可用元素
:checked//选取所有被选中元素（checkbox,radio）
:selected//选取所有被选中元素（下拉列表）

g)表单选择器

:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden

checkbox案例（一）
$(function(){
        //全选，反选
        $("thead input").click(function(){
                $("tbody input").prop("checked",$("thead input").prop("checked"));

        });
      //有一个没选，实现非全选
        $("tbody input").click(function(){
            var flag =true;
            $("tbody input").each(function(){
                if(!$(this).prop("checked")){
                    flag =false
                }
                if(flag){
                    $("thead input").prop("checked",true)
                }else{
                    $("thead input").prop("checked",false)
                }
            })

        })
checkbox案例（二）
$(function() {
            var arr=[];
            $(":checkbox").click(function(){
                if ($(":checkbox:checked").length > 3) {
                    alert("最多只能选择三个");
                    $(this).prop("checked",false)
                }
                var text =$(this).next().text();
                if($(this).prop("checked")){
                    //判断点击时当前项是否被选中，是选中就往数组里添加该项
                    arr.push(text)
                }else{
                    //不是选中状态就在数组中删除该项
                    var index = arr.indexOf(text);
                    if(index>=0){
                        arr.splice(index,1);
                    }
                }
                $("#txt").html(arr.join(","));
            })
        });
    </script>

案例三：利用jq内容选择器实现模糊搜索

结构：
<input type="text"/>
<div id="box">
    <p>小猫</p>
    <p>猫头鹰</p>
    <p>大地</p>
    <p>地球</p>
    <p>发小</p>
    <p>头大</p>
    <p>你好</p>
</div>

jq：
$(function(){
          $("#box p").hide();
          $(":text").keyup(function(){
              var keyword = $(this).val();
              if(keyword.length>0){
                  $("#box p:contains("+keyword+")").show()
              }else{
                  $("#box p").hide();
              }

          })
      })

结构：
<div id="con">
    <div id="pages" class="border_bottom"></div>
    <ul id="list">
        <li>我是第01个标签</li>
        <li>我是第02个标签</li>
       ...
        <li>我是第134个标签</li>
    </ul>
</div>
jq：
 $(function(){
        var count=0;//计数
        var timer=null;
        var eachPage =10;//每页的个数
        var pageCounts =Math.ceil($("#list li").length/eachPage ); //页数
        console.log(pageCounts)
        //默认让第一页显示
        $("#list li").slice(0,10).show();
        //循环添加a标签
        for(var i=1;i<pageCounts+1;i++){
            $("<a href='javascript:void(0)'></a>").text(i).appendTo($("#pages"));
        }
        //默认给第一个加被选中样式
        $("#pages a:first").addClass("red");
        $("#pages a").click(function(){
            count= parseInt($(this).index());
            var which = $(this).index();
            $(this).addClass("red").siblings().removeClass("red");
            $("#list li").siblings().hide().slice((which)*10,(which+1)*10).show();

        })
        //自动播放
        function change(){
            timer = setInterval(function(){
                count++;
                console.log(count)
                if(count<pageCounts){
                    $("#pages a").eq(count).addClass("red").siblings().removeClass("red");
                    $("#list li").siblings().hide().slice((count)*10,(count+1)*10).show();
                }else{
                    count=0
                    $("#pages a").eq(count).addClass("red").siblings().removeClass("red");
                    $("#list li").siblings().hide().slice((count)*10,(count+1)*10).show();
                }
            },1500)
        }
        change();
       $("#con").mouseleave(function(){
           change();
       })
        $("#con").mouseenter(function(){
            clearInterval(timer)
        })
    })