1.基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<link rel="stylesheet" href="../jq/style.css">
<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","red");
});
$("#btn2").click(function(){
$(".mini").css("background-color","red");
});
$("#btn3").click(function(){
$("div").css("background-color","red");
});
$("#btn4").click(function(){
$("*").css("background-color","red");
});
$("#btn5").click(function(){
$("#two,.mini").css("background-color","red");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择为one的元素"/>
<input type="button" id="btn2" value="选择样式为mini的元素"/>
<input type="button" id="btn3" value="选择所有的div元素"/>
<input type="button" id="btn4" value="选择所有元素"/>
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
2.层级选择器
A B:获得A元素内部的所有B元素(祖孙后代)
A>B:获得A元素下面的所有B子元素(父子)
A+B:获得A元素同级下一个B元素(兄弟)
A~B:获得A元素同级所有B元素(兄弟)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" href="../jq/style.css" type="text/css"/>
<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","blue");
});
$("#btn2").click(function(){
$("body>div").css("background-color","blue");
});
$("#btn3").click(function(){
$("#two+div").css("background-color","blue");
});
$("#btn4").click(function(){
$("#one~div").css("background-color","blue");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素"/>
<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
3.基本过滤选择器
:first 第一个
:last 最后一个
:not() 删除指定内容
:even 偶数
:odd 奇数
:eq 指定第几个
:gt 大于
:lt 小于
:header 获得标题
:animated 获得动画的
:focus 获得焦点
<script>
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background-color","red");
});
$("#btn2").click(function(){
$("body div:last").css("background-color","red");
});
$("#btn3").click(function(){
$("body div:odd").css("background-color","red");
});
$("#btn4").click(function(){
$("body div:even").css("background-color","red");
});
});
</script>
4.属性选择器
[属性名],[属性名=值],[属性名!=值]
[属性名^=值] 获得属性名以值开头元素
[属性名$=值] 获得属性名以值结尾元素
[属性名*=值] 获得属性名含有值 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" href="../jq/style.css" type="text/css"/>
<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").cass("background-color","blue");
});
$("#btn2").click(function(){
$("div[id='two']").cass("background-color","red");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择有id属性的div"/>
<input type="button" id="btn2" value="选择有id属性的值为two的div"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
5.表单属性选择器
:enabled 可用
:disabled 不可用
:checked 选中
:selected 选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<link rel="stylesheet" href="../jq/style.css" type="text/css"/>
<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$(":input").css("background-color","blue");
});
$("#btn2").click(function(){
$(":text").css("background-color","green");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择所有input元素" />
<input type="button" id="btn2" value="选择文本框" />
<br/>
<form>
<input type="text" /><br />
<input type="checkbox" /><br />
<input type="radio" /><br />
<input type="image" /><br />
<input type="file" /><br />
<input type="submit" />
<input type="reset" /><br />
<input type="password" /><br />
<input type="button" /><br />
<select><option/></select><br />
<textarea></textarea><br />
<button></button>
</form>
</body>
</html>