jQuery选择器全解析

1. 基本选择器

1.1 id选择器：$(#id)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div {
        width: 100%;
        height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
    }
</style>
</head>
<body>
    <div id="a"></div>
    <div id="a"></div>
    
    <script>
        $("#a").html("我选中你了");
    </script>
</body>
</html>

执行结果：只选中第一个。

1.2 类型选择器：$(.class)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div {
        width: 100%;
        height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
    }
</style>
</head>
<body>
    <div class="a"></div>
    <div class="a"></div>
    
    <script>
        $(".a").html("我选中你了");
    </script>
</body>
</html>

执行结果：两个div都会被选中。

1.3 元素选择器：$(element)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div, span {
        width: 100%;
        height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
        display:block;
    }
</style>
</head>
<body>
    <div></div>
    <div></div>
    <span></span>
    <span></span>
    
    <script>
        $("span").html("我选中你了");
    </script>
</body>
</html>

执行结果：两个span元素会被选中。

1.4 全部子孙选择器：$(选择器1 *)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div, span {
        width: 100%;
        min-height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
        display:block;
    }
</style>
</head>
<body>
    <div><span></span></div>
    <div><div></div></div>
    <span></span>
    <span></span>
    
    <script>
        $("body *").css("border-color","red");
    </script>
</body>
</html>

执行结果：body下的所有子元素（包含子元素的子元素）都被选中。

1.5 多项选择器：$(选择器1,选择器2,选择器3,选择器4)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div, span {
        width: 100%;
        min-height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
        display:block;
    }
</style>
</head>
<body>
    <div id="a"></div>
    <div class="b"></div>    
    <span>
        <div></div>
        <div></div>
    </span>
    <div></div>

 
    <script>
        $("#a,.b,span *").html("我选中你了");
    </script>
</body>
</html>

上例中，$("#a,.b,span *")包含了三个选择器，#a选中id等于a的元素，.b选中class等于b的元素，span *选中所有span下的所有元素。所以执行结果为：前两个div以及span内的两个div会被选中。

1.6 基本选择器的组合应用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div, span {
        width: 100%;
        min-height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
        display:block;
    }
</style>
</head>
<body>
    <div class="a"></div>
    <span class="a"></span>
    <span id="b"></span>
    <span id="c">
        <a></a>
        <a></a>        
    </span>
    <script>
            $("div.a, span#b, span#c *").html("我选中你了");
    </script>
</body>
</html>

执行结果：class等于a的div将会被选中，id等于b的span将会被选中，id等于c的所有子元素将会被选中。

2. 层级选择器

2.1 祖孙选择器：$(选择器1 选择器2)

选择“选择器1”的子元素（包含子元素的子元素）中，匹配“选择器2”的所有元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div, span {
        width: 100%;
        min-height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
        display:block;
    }
</style>
</head>
<body>
    <a>第1个</a>
    <span>
        <div>
            <a>第2个</a>
            <a>第3个</a>
        </div>
        <a>第4个</a>
        <div>
            <a>第5个</a>
            <span>
                <a>第6个</a>
            </span>
        </div>
    </span>
    <script>
            $("span a").css("color","red");
    </script>
</body>
</html>

执行结果：2-6会被选中。

2.2 父子选择器：$(选择器1>选择器2)

选择“选择器1”的子元素（必须是直属父子元素）中，符合“选择器2”的所有元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div, span {
        width: 100%;
        min-height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
        display:block;
    }
</style>
</head>
<body>
    <a>第1个</a>
    <span>
        <div>
            <a>第2个</a>
            <a>第3个</a>
        </div>
        <a>第4个</a>
        <div>
            <a>第5个</a>
            <span>
                <a>第6个</a>
            </span>
        </div>
    </span>
    <script>
            $("span>a").css("color","red");
    </script>
</body>
</html>

执行结果：4，6会被选中。

2.3 兄弟选择器：$(选择器1+选择器2)

选择“选择器1”下面与“选择器1”同级的且紧接“选择器1”的符合“选择器2”的元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div {
        width: 100%;
        min-height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
    }
</style>
</head>
<body>
    <div id="1" class="a">
        <div id="2" class="c"></div>
        <div id="3" class="b"></div>
    </div>
    <div id="4" class="b"></div>
    <div id="5" class="d"></div>
    <div id="6" class="b"></div>
    
    <script>
        $(".a+.b").html("我选中你了");
    </script>
</body>
</html>

执行结果：id等于4的div将会被选中，而id等于6的div则不会被选中。

2.4 同级选择器：$(选择器1~选择器2)

选择“选择器1”下面与“选择器1”同级的符合“选择器2”的元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div {
        width: 100%;
        min-height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
    }
</style>
</head>
<body>
    <div id="1" class="a">
        <div id="2" class="c"></div>
        <div id="3" class="b"></div>
    </div>
    <div id="4" class="b"></div>
    <div id="5" class="d"></div>
    <div id="6" class="b"></div>
    
    <script>
        $(".a~.b").html("我选中你了");
    </script>
</body>
</html>

执行结果：id等于4的div和id等于6的div都会被选中。

3. 过滤选择器

3.1 基本过滤器

过滤出第一个元素:first
过滤出最后一个元素:last
过滤出基数元素:even
过滤出偶数元素:old
过滤出第几个元素:eq(x)，括号内填写序号，从0开始。
过滤出第几个之后的元素:gt(x)，括号内填写序号，过滤出来的元素不包含x位
过滤出第几个之前的元素:lt(x)，括号内填写序号，过滤出来的元素不包含x位
过滤出所有的标题:header，即h1-h6
过滤出所有的动画元素:animated，注意是jquery动画，html5和css3动画不算。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div,span {
        width: 100%;
        min-height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
        display:block;
    }
</style>
</head>
<body>
    <div>        
        <span id="0">11111</span>
        <span id="1">22222</span>
        <span id="2">33333</span>
        <span id="3">44444</span>
        <span id="4">55555</span>
        <span id="5">66666</span>        
    </div>
    
    <script>
        $("div span:first").css("background-color","red");
        $("div span:last").css("background-color","gray");
        $("div span:even").css("color","green");
        $("div span:odd").css("color","blue");
        $("div span:not(#1,#4)").css("font-weight","bold");    
        $("div span:eq(3)").css("padding-left","100px");
        $("div span:gt(4)").css("padding-left","200px");
        $("div span:lt(2)").css("padding-left","300px");
    </script>
</body>
</html>

执行结果，id=0背景变红，id=5背景变灰，id=0,2,4字体颜色变绿，id=1,3,5字体颜色变蓝，id=0,2,3,5字体加粗，id=3文字右移100px，id=5文字右移200px，id=0,1文字右移300px。剩下两个过滤器不再展示。

3.2 内容过滤器：

:contains('x') 过滤出容包含x的元素，模糊匹配。
:empty 过滤出内容为空的元素，包含其他元素、包含空格、包含内容都不能算作为空。
:has('x') 过滤出包含x子元素的元素。

:parent 过滤出内容不为空的元素，包含其他元素、包含空格、包含内容都不能算作为空。（其实就是和empty相反）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div,span {
        width: 100%;
        min-height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
        display:block;
    }
</style>
</head>
<body>
    <div>        
        <span id="0">11a11</span>
        <span id="1">22b22</span>
        <span id="2"><a></a></span>
        <span id="3"></span>
        <span id="4"><a>55a55</a></span>
        <span id="5"><label>66a66<label></span>    
    </div>
    
    <script>
        $("div>span:contains('a')").css("color","red");
        $("div>span:empty").css("background-color","blue");
        $("div>span:has('a')").css("font-size","50px");
        $("div>span:parent").css("border-width","3px");        
    </script>
</body>
</html>

执行结果：红色字体id=0,4,5 蓝色背景id=3 大号字体id=4 加粗边框id=0,1,2,4,5

3.3 可见性过滤选择器：

　　针对css的display属性有效。

:hidden 过滤出不可见元素。
:visible 过滤出可见元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div,span {
        width: 100%;
        min-height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
        display:block;
    }
</style>
</head>
<body>
    <div id="a">        
        <div id="0" style="visibility:visible">000</div>
        <div id="1" style="visibility:hidden">111</div>
        <div id="2" style="display:none">222</div>
        <div id="3" style="display:block">333</div>
    </div>
    
    <script>
        $("div#a>div:visible").css("background-color","red");
        $("div#a>div:hidden").css("background-color","green");
    </script>
</body>
</html>

执行结果：

<div id="a">        
    <div id="0" style="visibility: visible; background-color: red;">000</div>
    <div id="1" style="visibility: hidden; background-color: red;">111</div>
    <div id="2" style="display: none; background-color: green;">222</div>
    <div id="3" style="display: block; background-color: red;">333</div>
</div>

3.4 属性过滤器

[attribute]过滤出包含某个属性的元素。
[attribute=value]过滤出某个属性等于某个值的元素（区分大小写）。
[attribute!=value]过滤出某个属性不等于某个值的元素（区分大小写）。
[attribute^=value]过滤出某个属性以某个值开头的元素（区分大小写）。
[attribute$=value]过滤出某个属性以某个值结尾的元素（区分大小写）。
[attribute*=value]过滤出某个属性包含某个值的元素（区分大小写）。
[属性过滤器1][属性过滤器2]属性过滤器的组合使用（and关系）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div,span {
        width: 100%;
        min-height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
        display:block;
    }
</style>
</head>
<body>
    <div>        
        <input id="1" name="a" value="ABCD"/>
        <input id="1" name="b" value="abcd"/>
        <input id="2" name="a" value="XYZ"/>
        <input id="2" name="b" value="xyz"/>
        <input value="哈哈哈"/>
    </div>
    
    <script>
        $("div>input[name]").css("background-color","red"); 
        $("div>input[name=a]").css("font-size","30px");
        $("div>input[name!=a]").css("font-size","60px");
        $("div>input[value^=a]").css("color","yellow");
        $("div>input[value$=z]").css("color","blue");
        $("div>input[value*=C]").css("color","green");
        $("div>input[value^=a][value$=d").css("border-width","8px");    
    </script>
</body>
</html>

执行结果：1-4背景红色，1、3是30px字体，2、4、5是60px字体，2是黄色字体，4是蓝色字体，1是绿色字体，2加粗边框。

3.5 子元素过滤器

:nth-child(x) 如果某元素是其父元素的第x个子元素，那么该元素将被过滤出来。
:first-child 如果某元素是其父元素的第一个子元素，那么该元素将被过滤出来
:last-child 如果某元素是其父元素的最后一个子元素，那么该元素将被过滤出来
:only-child 如果某元素是其父元素的唯一一个个子元素，那么该元素将被过滤出来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div,span {
        width: 100%;
        min-height: 20px;
        text-align:center;
        border: 1px solid #555;
        margin: 5px;
        display:block;
    }
</style>
</head>
<body>
    <div id="123">        
        <div>
            <div></div><div></div><div></div><div></div><div></div>
        </div>
        <div>
            <div></div><div></div><div></div><div></div><div></div>
        </div>
        <div>
            <div></div><div></div><div></div><div></div><div></div>
        </div>
        <div>
            <div></div><div></div><div></div><div></div><div></div>
        </div>
        <div>
            <div></div><div></div><div></div><div></div><div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>
    
    <script>
        $("div#123 div:nth-child(3)").css("background-color","red");        
        $("div#123 div:first-child").css("border-width","10px");
        $("div#123 div:last-child").css("margin-top","100px");
        $("div#123 div:only-child").css("margin-left","100px");
    </script>
</body>
</html>

执行结果：各位还是自己去试试看吧。

3.6 表单元素过滤器

　　常用的表单元素有：<input/><textarea/><select/><option/>。

:enabled 过滤出可用个的表单元素
:disabled 过滤出不可用的表单元素
:checked 过滤出被勾选了的表单元素
:selected 过滤出被选中了的表单元素
:input 过滤出所有表单元素
:text 过滤出type=text的input元素
:password 过滤出type=password 的input元素
:radio 过滤出type=radio 的input元素
:checkbox 过滤出type=checkbox 的input元素
:submit 过滤出type=submit 的input元素
:image 过滤出type=image 的input元素
:reset 过滤出type=reset 的input元素
:button 过滤出type=button 的input元素
:file 过滤出type=file 的input元素
:hidden 过滤出type=hidden 的input元素

posted @ 2016-06-22 22:25 柚子苹果果阅读(360) 评论(0) 编辑收藏举报

刷新页面返回顶部