1.子代选择器
$("选择器1 > 选择器2")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#ul1 > li:nth-last-of-type(2n+1){
background: red;
}
#ul1 > li:nth-last-of-type(2n+2){
background: pink;
}
</style>
<script type="text/javascript" src="../js/jquery-2.2.4.min.js">
</script>
<script type="text/javascript">
//$("#ul > li:hover").css("clolor","red");
$(function(){
$("#ul1 > li").mouseover(function(){
$(this).css("color","burlywood");
})
})
</script>
</head>
<body>
<ul id="ul1">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
</ul>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
</ul>
</body>
</html>
2.后代选择器
$("选择器1 选择器2")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.2.4.min.js">
</script>
<script type="text/javascript">
$(function(){
$("p a").css("color","red");
})
</script>
</head>
<body>
<p>你好你好你好你好你好
<a href="">你好</a>
<a href="">你好</a>
</p>
<a href="">你好你好</a>
</body>
</html>
3.属性选择器
3.1 属性名选择器
$("[属性名]")
3.2 属性选择器
$("[属性名 = '值']")
3.3 复合属性选择器
$("[type][class='c'][value='female'][name]")
$("[属性名1='值1'][属性名2][].............")
$("[属性名^ = '值']"):以指定内容开头的
$("[属性名$ = '值']"):以指定内容结尾的
$("[属性名!= '值']"):属性值不为指定内容,以及没有该属性的标签
$("[属性名* = '值']"):含有指定内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(function(){
//$("[name]").css("background","red")
$("[type='password']").css("background","palegoldenrod");
})
</script>
</head>
<body>
<input type="text" name="user"/>
<input type="text" />
<input type="password" />
<input type="password" />
<input type="button" value="按钮" />
</body>
</html>
4.过滤选择器
4.1首元素选择器
:first
4.2尾元素选择器
:last
4.3非元素选择器
:not(选择器)
4.4奇数选择器
:odd
4.5偶数选择器
:even
4.6等于索引选择器
:eq(index)
4.7大于索引选择器
:gt(index)
4.8小于索引选择器
:lt(index)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.2.4.min.js">
</script>
<script type="text/javascript">
$(function(){
$("li:first").css("font-size","20px")
})
</script>
</head>
<body>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
</ul>
</body>
</html>
5.表单过滤选择器
5.1可用元素选择器
:enable
5.2 不可用元素选择器
:disable
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.2.4.min.js">
</script>
<script type="text/javascript">
$(function(){
$("input:enabled").css("color","red");
$("input:disabled").css("color","red");
})
</script>
</head>
<body>
<input type="text" disabled="disabled" />
<input type="text" disabled="" />
<input type="text" disabled />
<input type="text"/>
</body>
</html>