标签：
常用的CSS选择器：标签选择器，类选择器，ID选择器，群组选择器，后代选择器，通配选择。
<html>
<head>
<meta charset="utf-8">
<title>选择器练习</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// 基本选择器
$(function()
{
// 改变id=one的元素的背景色
// $("#one").css("background-color","blue");
// // 改变所有inner.div的背景色
// $(".inner").css("background-color","red");
// // 改变所有div的背景色
// // $("div").addClass("newclass");
// // 改变所有元素的样式
// // $("*").css("border","4px solid white");
// // 改变所有ul元素和id=second的元素的背景色,逗号隔开
// $("ul ,#second,#one,#fifth").css("background-color","green");
});
// 层次选择器（通过DOM元素之间的层次关系来获取特定元素，如后代元素，子元素，相邻元素和同辈元素）
// alert($(".ancestor parent").length);
// 改变body内子元素<div>的背景色
$(function()
{
// $("#ancestor").css("background-color","green");
// $("body > div").css("background-color","red");
// // alert($("body > div").length);//2
// // 改变class为test的下一个div同辈元素=>testnext,与$(".test").next("div");
// $(".test+div").css("background-color","red");
// // 与$(".test").nextAll("div");等价
// $(".test-div").css("background-color","black");
//$("pre~div"):匹配pre元素后的同辈div元素,siblings()与前后位置无关，匹配所有同辈元素
});
// 过滤选择器:first,:last,:not(selector),:even(index-偶数),:odd,:eq(index),:lt(index)//选取索引小于index的元素,:header(选取所有的标题元素h1...) ,:animated,:focus(获取焦点的元素)
$(function(){
// $("div:first").css("border","2px solid black");//body->第一个div
// $("#ancestor:first").css("border","3px solid yellow");
$("div:even").css("background-color","black");
$("div:odd").css("background-color","white");
$("div:not(:even)").css("background-color","yellow");
$("div:not(:odd)").css("background-color","green");
$("div:eq(0)").css("background-color","PINK");
$("div:lt(2)").css("background-color","PINK");
})
//内容过滤选择器
// $(function(){
// // contatins括号内不加引号
// $("div:contains(周)").css("font-family","黑体");
// $("div:contains(*)").css("color","red");
// // 改变含有.textnext的div的背景色
// $("div:has(.textnext)").css("background-color","pink");
// });
//可见性过滤选择器:hidden,:visible
// 属性过滤选择器
// $(function(){
// alert($("div[class]").length);//8
// alert($("div[class=testnext]").length);//3
// alert($("div[class!=testnext]").length);//3
// alert($("div[class^=test]").length);//以test开始
// alert($("div[class$=test]").length);//以test结束
// alert($("div[class*=test]").length);//含有test
// });
// 子元素过滤选择器
$(function(){
$()
});
// 表单对象属性过滤选择器
$(function(){
// // 选取可用
// $(":enabled")
// // 选取不可用元素
// $(":disabled")
// //选取所有被选中的元素
// $(":checked")
// //选取所欲被选中的选项个数
// $(":selected")
// alert($("#count").text());
// checkbox选中的个数
var currentCount;
$("#count").text("0");
$("input:checkbox").click(function(){
currentCount= $("input:checked").length
$("#count").text(currentCount);
});
// 下拉框选中的内容
var currentSelected;
document.click(function(){
currentSelected=$("select:selected").text();
$("#tstselected").text(currentSelected);
$("#othertstselected").text(currentSelected);
});
});
// 表单选择器
$(function(){
$(":input")
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$(":hidden")
})
</script>
<style type="text/css">
div{height:20%;width:100%;margin-top:10px;}
div{
margin-top:20px;
border:1px solid white;
margin-bottom:10px;
}
#one{background-color:red;}
#second{background-color:orange;}
#third{background-color:yellow;}
#fourth{background-color:green;}
#fifth{background-color:blue;}
.inner{background:white;}
.newclass{border:1px solid black;}
</style>
</head>
<body>
<div>checkbox当前选中个数为：<label id="count" ></label></div>
<div>
<form>
可用元素:<input name="add" type="text" value="可用文本框" /><br>
不可用元素:<input name="add" type="text" value="不可用文本框" disabled="disabled" /><br>
可用元素
不可用元素
<br>
多选框<br>
<input type="checkbox" name="zdy" value="test1" />test1
<input type="checkbox" name="zdy" value="test2" />test2
<input type="checkbox" name="zdy" value="test3" />test3
<input type="checkbox" name="zdy" value="test4" />test4
<div></div>
<br><br>
下拉列表一：
<select name="tst" multiple="multiple" style="height:50px;">
<option selected="selected">泉州</option>
<option>漳州</option>
<option>厦门</option>
<option>龙岩</option>
<option>三明</option>
</select>
<br><br>
<lable id="tstselected">当前选中内容：</label>
<br> <br>
下拉列表二：
<select name="othertst" multiple="multiple" style="height:50px;">
<option selected="selected">朝阳</option>
<option>海淀</option>
<option>西城</option>
<option>其他</option>
<option>其他他</option>
</select>
<label id="othertstselected">当前选中内容：</label>
<br> <br>
</form>
</div>
<!-- 层次选择器 -->
<!-- <div style="height:auto">
-->
<!-- <div class="test"></div> -->
<!-- $(".test+div")=>testnext -->
<div style="display:none;">
<div class="testnext" style="height:30px;width:50px;">断了的弦
</div>
<div class="testnext" style="height:30px;width:50px;">周杰伦</div>
<div class="testnext" style="height:30px;width:50px;">*</div>
</div>
<!-- <div id="ancestor">
ancestor
<div id="parent">
parent
<div id="childern">
childern
<div id="grandson">
grandson
</div>
</div>
</div>
<div id="parentbrother">
parentbrother
</div>
</div> -->
<!-- </div> -->
<!-- 基本选择器 -->
<div style="display:none">
<div id="one">the one
<div class="inner">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div id="second">second
<div class="inner">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div id="third">third
<div class="inner">
</div>
</div>
<div id="fourth">fourth
<div class="inner">
</div>
</div>
<div id="fifth">fifth
<div class="inner">
</div>
</div>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/ypcute/p/5608090.html
