jQuery选择器分类,总结
（1）基本选择器
1,根据id匹配元素
2,根据给定的类名匹配元素
3,根据给定的元素名匹配元素
4,*匹配所有的元素
5,集合元素,将每个选择器匹配到的元素合并后一起返回
<script>
/*jquery基本选择器*/
$(document).ready(function(){
//1,根据id匹配元素
var $p = $("#para");
$p.click(function(){
alert("this is paragraph");
});
//2,根据类名匹配元素
var $span = $(".span");
$span.css("font-size","35px");
//3,根据给定的元素名匹配元素
var $div = $("div");
$div.css("background","blue");
//4,集合元素(将选择器匹配到的所有元素合并返回)
var $jihe = $("p,span,div");
$jihe.click(function(){
alert("这是集合");
});
});
</script>
<body>
<p id="para">这是一个p元素</p>
<span class="span">这是span元素</span>
<div>这是一个div</div>
<ul>
<li>橘子</li>
<li>苹果</li>
<li>梨</li>
</ul>
</body>
（2）层次选择器
1,后代元素选择器
2,子元素选择器
3,相邻元素(紧接在前一个元素之后的选择器)
4,兄弟元素选择器
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
//后代元素选择器
//css（）方法设置多种样式 json 方法
$("#div1 ul li").css({"color":"blue","fontSize":"30px"});
//子元素选择器（只包括儿子元素）
$("#div2>span").css("background","green");
//相邻元素选择器（紧接着前一个元素的后面元素）
$("#div1 ul + div").css({"background":"red","fontSize":"35px"});
//兄弟选择器
$("span~.div").css({"background":"pink","fontSize":"50px"});
});
</script>
</head>
<body>
<div id="div1">
<ul>
<li>这是第一个li</li>
<li>这是第二个li</li>
</ul>
<div id="div2">
<span>这是第一个span</span>
<div class="div">这是第一个div</div>
</div>
</div>
</body>
（3）基本过滤选择器
1,所有div元素中，第一个div
2,所有div元素中,最后一个div
3,获取索引是偶数的所有元素,索引从0开始
4,获取索引是奇数的所有元素，索引从0开始
5,获取索引等于index的所有元素
6,索引大于小于 gt() lt()
7,获取网页中所有的h标签内容
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
/*过滤选择器*/
$(document).ready(function(){
//1,匹配所有div元素中,第一个div
$("div:first").click(function(){alert('这是first个div')});
//2,匹配所有div元素中，最后一个div
$("div:last").click(function(){alert('这是last个div')});
//3,匹配索引是偶数的div,索引是从0开始
$("div:even").click(function(){alert('这是偶数（even）个div')});
//4,匹配索引是偶数的div,索引是从0开始
$("div:odd").click(function(){alert('这是奇数（odd）个div')});
//5,匹配索引等于0的div,索引是从0开始
$("div:eq(0)").click(function(){alert('这是一个索引等于0 的div')});
//6,匹配索引大于1数的div,索引是从0开始
$("div:gt(1)").click(function(){alert('这是一个索引大于1 的div')});
//7,匹配网页中所有的h标签
$(":header").css({"color":"blue","background":"green"});
//8,匹配网页中正在执行动画效果的元素
$(":animated")
});
</script>
</head>
<body>
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<div>这是一个div</div>
<div>这是二个div</div>
<div>这是三个div</div>
</body>
（4）内容过滤选择器
1,选取含有文本内容为text的元素
2,选取含有某元素的元素
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
/*内容过滤选择器*/
$(document).ready(function(){
//1,选取含有文本内容为标签的元素
$("span:contains('标签')").css("background","pink");
//2,匹配含有P元素的元素
$("div:has(b)").css("color","red");
});
</script>
</head>
<body>
<span>我是span标签</span>
<div><b>这里是P标签</b></div>
</body>
（5）可见性过滤选择器
1,选取所有可见的元素
2,选取所有不可见的元素
<style>
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
/*可见性过滤选择器*/
$(document).ready(function(){
$("div:visible").css({"fontSize":"30px","background":"pink"});
$("div:hidden").show(1000);
});
</script>
</head>
<body>
<div class="show">这是现实的div</div>
<div class="hide">这是隐藏的div</div>
</body>
（6）属性过滤选择器
1,选取拥有此属性的选择器
2,选取属性值为value的元素
<style>
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("div[class]").css({"color":"red","background":"yellow"});
$("div[class=hide]").show(1000);
});
</script>
</head>
<body>
<div class="show">这是现实的div</div>
<div class="hide">这是隐藏的div</div>
</body>
