1、什么是选择器
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
2、jQuery选择器分类
1)基本选择器 2)层次选择器
3)过滤选择器 4)表单选择器
5)简单选择器 6)内容选择器
7)可见性选择器 8)属性选择器
9)子元素选择器 9)表单对象属性等
3、jquery基本选择器的使用
jQuery基本选择器:
$(“#id”): 根据给定的id匹配一个元素
$(“.myclass”):根据类名匹配元素
$(“*”): 选取html页面中所有的元素
$(“div”):选取html页面中所有的div元素
$(“div,span,myclass”):选取所有的<div><span><myclass>一组元素
下面的代码基本包括了基本选择器的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="../jquery-1.6.js"></script>
<style>
div{
width:100px;
height:100px;
background-color:#6FF;
margin:0px;
border:1px dashed #F96;
float:left;
}
.one-1{
width:40px;
height:40px;
background-color:#F33;
margin:20px;
}
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
//<input type="button" id="but0" value="选中two并且背景颜色变成黄色$('#two')"></div>
$("#but0").click(function (){
$("#two").css("background","#ffff99")
});
//<input type="button" id="but1" value="类改变颜色$('.one-1')"></div>
$("#but1").click(function (){
$(".one-1").css("background","#cccccc");
});
//<input type="button" id="but2" value="所有标签$('div')">
$("#but2").click(function (){
$("div").css("background","yellow");
});
//<input type="button" id="but3" value="群组$('#three,.one-1,span')">
$("#but3").click(function (){
$("#three,.one-1,span").css("background","#ccffcc");
});
//<input type="button" id="but3" value="清空样式">
$("#but4").click(function (){
$("*").removeAttr("style");
});
//<input type="button" id="but4" value="$('div:first') 选取所有<div>元素中第1个<div>元素">
$("#but5").click(function (){
$("div:first").css("background","#666666");
});
//<input type="button" id="but6" value="$('div:last') 选取所有<div>元素中最后一个<div>元素">
$("#but6").click(function (){
$("div:last").css("background","#FF9");
});
//<input type="button" id="but7" value="$('div: not(.one-1)') 选取class不是one-1 的< div >元素not
$("#but7").click(function (){
$("div:not(.one-1)").css("background","#f99");
});
//<input type="button" id="but8" value="$('div:even') 选取索引值为偶数的<div>">
$("#but8").click(function (){
$("div:even").css("background","#fff");
});
//<input type="button" id="but9" value="$('div:odd') 选取索引值为基数的<div>">
$("#but9").click(function (){
$("div:odd").css("background","#ccc");
});
});
</script>
</head>
<body>
<div id="one">id=one
<div class="one-1">我是one-1</div>
</div>
<div id="two">我是two<span>哈哈哈哈</span></div>
<div id="three">我是three</div>
<div id="four">我是four</div>
<div class="five">我是five</div>
<div style="clear:both;">
<input type="button" id="but0" value="选中two并且背景颜色变成黄色$('#two')">
<input type="button" id="but1" value="类改变颜色$('.one-1')">
<input type="button" id="but2" value="所有标签$('div')">
<input type="button" id="but3" value="群组$('#three,.one-1,span')">
<input type="button" id="but4" value="清空样式">
<input type="button" id="but5" value="$('div:first') 选取所有<div>元素中第1个<div>元素">
<input type="button" id="but6" value="$('div:last') 选取所有<div>元素中最后一个<div>元素">
<input type="button" id="but7" value="$('div: not(.one-1)') 选取class不是one-1 的< div >元素not">
<input type="button" id="but8" value="$('div:even') 选取索引值为偶数的<div>">
<input type="button" id="but9" value="$('div:odd') 选取索引值为基数的<div>">
</div>
</body>
</html>
效果图如下
下面是基本选择器的几种,刚刚学了几个还没有学完,下面还包括选中正在执行的动画div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="jquery-1.6.js">
</script>
<script>
$(document).ready(function (){
// $("tr:even").css("background","#ffff99");
// $("tr:odd").css("background","#cccccc");
//<input type="button" id="btn0" value="选中索引值等于1的tr元素$('tr:sq(1)')">
$("#btn0").click(function (){
//设置索引值=1的tr
$("tr:eq(1)").css("background","#ffff99");
});
//<input type="button" id="btn0" value="选中索引值大于3的tr元素$('tr:gt(3)')">
$("#btn1").click(function (){
//设置索引值=1的tr
$("tr:gt(3)").css("background","#ffff99");
});
//<input type="button" id="btn0" value="选中索引值小于于3的tr元素$('tr:lt(3)">
$("#btn2").click(function (){
//设置索引值<1的tr
$("tr:lt(3)").css("background","#ffff99");
});
//<input type="button" id="btn0" value="选中网页中所有的标题元素$(':header')">
$("#btn3").click(function (){
//设置所有的标题标签元素
$(":header").css("background","#ffff99");
});
//<input type="button" id="btn4" value="选中正在执行动画的div $('div:animated')">
$("#btn4").click(function (){
//设置所有的标题标签元素
$("div:animated").css("background","red");
});
function move(){
$("#move").slideToggle(5000,move);
}
move();
});
</script>
</head>
<body>
<h1>简单选择器h1</h1>
<h2>简单选择器h2</h2>
<div id="move" style="background-color:#FC0;width:300px;height:300px;border:1px solid #3CF";>动画</div>
<table width="300" border="1" cellpadding="0">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>QQ</td>
</tr>
<tr>
<td><h3>豆</h3></td>
<td>女</td>
<td>14</td>
<td>1234455</td>
<td>34345</td>
</tr>
<tr>
<td>豆</td>
<td>女</td>
<td>14</td>
<td>1234455</td>
<td>34345</td>
</tr>
<tr>
<td>豆</td>
<td>女</td>
<td>14</td>
<td>1234455</td>
<td>34345</td>
</tr>
<tr>
<td>豆</td>
<td>女</td>
<td>14</td>
<td>1234455</td>
<td>34345</td>
</tr>
<tr>
<td>豆</td>
<td>女</td>
<td>14</td>
<td>1234455</td>
<td>34345</td>
</tr>
<tr>
<td>豆</td>
<td>女</td>
<td>14</td>
<td>1234455</td>
<td>34345</td>
</tr>
<tr>
<td>豆</td>
<td>女</td>
<td>14</td>
<td>1234455</td>
<td>34345</td>
</tr>
</table>
<input type="button" id="btn0" value="选中索引值等于1的tr元素$('tr:eq(1)')">
<input type="button" id="btn1" value="选中索引值大于3的tr元素$('tr:gt(3)')">
<input type="button" id="btn2" value="选中索引值小于于3的tr元素$('tr:lt(3)">
<input type="button" id="btn3" value="选中网页中所有的标题元素$(':header')">
<input type="button" id="btn4" value="选中正在执行动画的div $('div:animated')">
</body>
</html>
效果图如下