JQuery选择器【一】

层次选择器　

<body>
    <div id="divOne">
        <span id="spanOne">
            <span id="spanTwo"></span>
        </span>
    </div>
    <div id="divTwo">
        <span id="spanThree"></span>
    </div>
    <div id="divThree">
    </div>
    <span id="spanFore"></span>
    <span id="spanFive"></span>
</body>

　　注意：下面的代码中的console.log()只能在火狐浏览器中运行，请大家借助火狐浏览器的Firebug查看运行的结果，造成不便之处请原谅！

　　$("ancestor descendant")：选取ancestor元素里的所有descendant(后代)元素　

            //$("div span")选取<div>里的所有的<span>元素
            //结果：[span#spanOne, span#spanTwo, span#spanThree]
            console.log($("div span"));

　　$("parent>child")：选取parent元素下的child(子)元素

            //$("div > span")选取<div>元素下元素名是<span>的子元素
            //结果：[span#spanOne, span#spanThree]
            console.log($("div>span"));

　　$("prev+next")：选取紧接在prev元素后的next元素

            //$("div+span")选取<div>元素的下一个<span>兄弟元素
            //结果：[span#spanFore]
            console.log($("div+span"));

　　$("prev~siblings")：选取prev元素之后的所有siblings元素

            //$("div~span")选取<div>元素后面的所有<span>兄弟元素
            //结果：[span#spanFore, span#spanFive]
            console.log($("div~span"));

基本过滤选择器

<body>
    <h1></h1>
    <h2></h2>
    <div id="divOne">
        <span id="spanOne"></span>
        <span id="spanTwo"></span>
    </div>
    <div id="divTwo">
        <span id="spanThree"></span>
    </div>
    <div id="divThree">
    </div>
    <span id="spanFore"></span>
    <span id="spanFive"></span>
</body>

　　:first 选取第一个元素

                //$("div:first")选取所有<div>元素中第一个<div>元素
                //[div#divOne]
                console.log($("div:first"));

　　:last 选取最后一个元素

                //$("div:last")选取所有<div>元素中最后一个<div>元素
                //[div#divThree]
                console.log($("div:last"));

　　:not(selector) 去除所有与给定选择器匹配的元素

                //$("div:not(#divTwo)")选取id不是divTwo的div元素
                //[div#divOne, div#divThree]
                console.log($("div:not(#divTwo)"));

　　:even 选取索引是偶数的所有元素，索引从0开始

                //选取索引是偶数的所有元素，索引从0开始
                //[span#spanOne, span#spanThree, span#spanFive]
                console.log($("span:even"));

　　:odd 选取索引是奇数的所有元素，索引从0开始

                //选取索引是奇数的所有元素，索引从0开始
                //[span#spanTwo, span#spanFore]
                console.log($("span:odd"));

　　:eq(index) 选取索引等于index的元素(index从0开始)

                //选取索引等于index的元素(index从0开始)
                //[span#spanThree]
                console.log($("span:eq(2)"));

　　:gt(index) 选取索引大于index的元素(index从0开始)

                //选取索引大于index的元素(index从0开始)
                //[span#spanFore, span#spanFive]
                console.log($("span:gt(2)"));

　　:lt(index) 选取索引小于index的元素(index从0开始)

                //选取索引小于index的元素(index从0开始)
                //[span#spanOne, span#spanTwo]
                console.log($("span:lt(2)"));

　　:header 选取所有标题元素，例如：h1,h2,h3等等

                //选取所有标题元素，例如：h1,h2,h3等等
                //[h1, h2]
                console.log($(":header"));

内容过滤选择器

<body>
    <div id="divOne">
        <span id="spanOne">son</span>
        <span id="spanTwo"></span>
    </div>
    <div id="divTwo">
        <span id="spanThree"></span>
    </div>
    <div id="divThree">
        son
    </div>
    <span id="spanFore"></span>
    <span id="spanFive">son</span>
</body>

　　:contains(text) 选取含有文本内容为text的元素

                //选取含有文本内容为text的元素
                //$("div:contains('son')")选取含有文本"son"的<div>元素
                //[div#divOne, div#divThree]
                console.log($("div:contains('son')"));

　　:empty 选取不包含子元素或者文本的空元素

                //选取不包含子元素或者文本的空元素
                //$("span:empty")选取不包含子元素(包括文本元素)的<span>空元素
                //[span#spanTwo, span#spanThree, span#spanFore]
                console.log($("span:empty"));

　　:has(selector) 选取含有选择器所匹配的元素的元素

                //选取含有选择器所匹配的元素的元素
                //$("div:has(span)")选取含有<span>元素的<div>元素
                //[div#divOne, div#divTwo]
                console.log($("div:has(span)"));

　　:parent 选取含有子元素或者文本的元素

                //选取含有子元素或者文本的元素
                //$("span:parent")选取拥有子元素(包括文本元素)的<span>元素
                //[span#spanOne, span#spanFive]
                console.log($("span:parent"));