<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery选择器</title>
<style>
div,span,p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide{
display: none;
}
</style>
</head>
<body>
<h1>jQuery选择器</h1>
<div class="one" id="one">
id为one，class为one
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one，title为test
<div class="mini" title="other">class为mini，title为other</div>
<div class="mini" title="test">class为mini，title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="test">class为mini，title为test</div>
</div>
<div style="display:none;" class="one">
style的dispaly为"none"的div
</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div <input type="hidden" size="8">
</div>
<span id="mover">正在执行动画的span</span>
</body>
<script src="./script/jquery-1.7.1.js"></script>
<script>
//基本选择器
//$("#one").css("background","#bbffaa");
//$(".mini").css("background","#bbffaa");
//$("div").css("background","#bbffaa");
//$("*").css("background","#bbffaa");
//$("span,#two").css("background","yellow");
//层次选择器
//$("body div").css("background","#bbffaa");
//$("body>div").css("background","#bbffaa");
//$(".one+div").css("background","#bbffaa");
//$("#two~div").css("background","#bbffaa");
//过滤选择器
//基本过滤选择器
//$("div:first").css("background","#bbffaa");
//$("div:last").css("background","#bbffaa");
//$("div:not(.one)").css("background","#bbffaa");
//$("div:even").css("background","#bbffaa");
//$("div:odd").css("background","#bbffaa");
//$("div:eq(3)").css("background","#bbffaa");
//$("div:gt(3)").css("background","#bbffaa");
//$("div:lt(3)").css("background","#bbffaa");
//$(":header").css("background","#bbffaa");
//$(":animated").css("background","#bbffaa");
//$(":focus").css("background","#bbffaa");
//内容过滤选择器
//$("div:contains(di)").css("background","#bbffaa");
//$("div:empty").css("background","#bbffaa");
//$("div:has('.mini')").css("background","#bbffaa");
//$("div:parent").css("background","#bbffaa");
//可见性过滤器
//$("div:visible").css("background","#ff6500");
//$("div:hidden").show(3000);
//属性过滤选择器
//$("div[title]").css("background","#bbffaa");
//$("div[title=test]").css("background","#bbffaa");
//$("div[title!=test]").css("background","#bbffaa");
//$("div[title^=te]").css("background","#bbffaa");
//$("div[title$=est]").css("background","#bbffaa");
//$("div[title*=es]").css("background","#bbffaa");
//$("div[title=test]").css("background","#bbffaa");
//子元素过滤选择器
//$("div.one :nth-child(2)").css("background","#bbffaa");
//$("div.one :first-child").css("background","#bbffaa");
//$("div.one :last-child").css("background","#bbffaa");
//$("div.one :only-child").css("background","#bbffaa");
//表单对象属性选择过滤器
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery选择器-表单对象属性选择过滤器</title>
</head>
<body>
<form id="form1" action="#">
可用元素：<input name="add" value="可用文本框"><br>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br>
可用元素：<input name="che" value="可用文本框"><br>
不可用元素：<input name="name" disabled="disabled" value="不可用文本框"><br>
<br>
多选框：<br>
<input type="checkbox" name="newsletter" checked="checked" value="test1">test1
<input type="checkbox" name="newsletter" value="test2">test2
<input type="checkbox" name="newsletter" value="test3">test3
<input type="checkbox" name="newsletter" checked="checked" value="test4">test4
<input type="checkbox" name="newsletter" value="test5">
<div></div>
<br><br>
下拉列表1：<br>
<select name="test" multiple="multiple" style="height:10px">
<option>浙江</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br><br>
下拉列表2：<br>
<select name="test2">
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<div></div>
</form>
<script src="./script/jquery-1.7.1.js"></script>
<script>
$("#form1 input:enabled").val("这里变化了！");
$("#form1 input:disabled").val("这里不能变化了！");
var l = $("input:checked").length;
var str = $("select :selected").text();
console.log(l+"- -"+str);
</script>
</body>
</html>
