jQuery 一些基本选择器及其用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a{ 100px;height: 100px;background-color: red;margin-bottom: 10px;}
.b{ 100px;height: 100px;background-color: blue;}
.c{ 150px;height: 150px;background-color: green;}
.d{ 150px;height: 150px;background-color: yellow;}
</style>
</head>
<body>
<div class="box">点击</div>
<div class="a"><span></span>a</div>
<div class="a">b</div>
<div class="a">c</div>
<div class="a">d</div>
<script src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
//第一个
$('.a:first').click(function(){
$(this).html('xxx').css('background','royalblue');
})
//奇数
$('.a:nth-child(odd)').click(function(){
$(this).html('xxx').css('background','green');
})
//even 偶数（0开始）， odd:奇数（1开始）
$('.a:even').click(function(){
$(this).html('xxx').css('background','black');
})
//匹配对应元素，角标重0 开始
$('.a:eq(2)').click(function(){
$(this).html('xxx').css('background','blue');
})
//:gt(index) 选取索引大于index的元素，index从0开始,不包括index
// :lt(index) 选取索引小于index的元素，index从0开始,不包括index
// :animated 选取当前正在执行动画的所有元素
//内容过滤选择器
//匹配特有的
$('.a:has(span)').click(function(){
$(this).css('background','yellow')
})
// :has(selector) 选取含有选择器所匹配元素的元素
//:empty 匹配没有文本或者子元素的元素；
//:parent 选取含有子元素或文本的元素
// :contains(text) 选取含有文本内容text的元素
// :hidden 选取所有不可见元素
// :visible 选取所有可见元素
// :enabled 选取所有可用元素
// :disabled 选取所有不可用元素
//:checked 选取所有被选中的元素(单选框、复选框）
//selected 选取所有被选中的选项元素（下拉列表）
</script>
</body>
</html>