概念:允许的多个元素组或单个严肃进行操作,从而找出想要的元素。
几种jquery选择器的介绍:
一、基本选择器
1、 Id选择器
功能:根据匹配的ID匹配一个元素
示例:$(“#id”)
2、 class选择器
功能:根据给定的类匹配元素。
示例:$(“.class”)
3、*
功能:匹配所有元素。
示例:$(“*”)
4、element
功能:根据给定的元素名匹配所有的元素。
示例:$(“div”) 查找所有的div
5、组选择器
功能:将每一个选择器匹配到的元素合并后一起返回。
示例:$(“table tr td”)
二、层级选择器
1、 ancestor descendant
功能:在给定的祖先元素下匹配所有的后代元素
示例:$(“div span”)
2、 选取子元素
功能:在给定的父元素下匹配所有的子元素
示例:$(“div>span”)
3、 prev+next
功能:匹配所有进阶在prev后的下一个元素(紧邻)
示例:$(“#one+div”)
4、~
功能:匹配选定的操作符后所有兄弟元素
示例:$(“#one~div”)
三、简单选择器(冒号不可省略)
1、:first
功能:匹配找到第一个元素。
示例:$(“div:first”)
2、:last
功能:匹配找到最后一个元素。
示例:$(“div:last”)
4、 not
功能:去除所有与给定选择器匹配的元素
示例:$(“div:not(#d2)”)
5、 :even
功能:匹配所有索引值为偶数的元素,从0开始计数
示例:$(“tr:even”)
6、 :odd
功能:匹配所有索引值为奇数的元素,从0开始计数
示例:$(“tr: odd”)
7、:eq(index)
功能:匹配一个给定索引值的元素
示例:$(“tr: eq(1)”)
8、:gt(index)
功能:匹配所有大于给定索引值的元素
示例:$(“gt: eq(3)”)
9、:lt(index)
功能:匹配所有小于给定索引值的元素
示例:$(“tr: lt(3)”)
10、:header
功能:匹配如h1,h2之类的标题元素
示例:$(“:header”)
11、:animated
功能:匹配所有正在执行画效果的元素
示例:$(“div:animated”)
学习了这些jquery的选择器,下面给大家附上动画效果的代码:
<!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>jquery简单选择器的效果2</title>
</head>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
//获取所引致等于1的tr
$("#btn0").click(function (){
$("tr:eq(1)").css("background","green");
});
//获取索引大于3的tr
$("#btn1").click(function (){
$("tr:gt(3)").css("background","green");
});
//获取索引小于3的tr
$("#btn2").click(function (){
$("tr:lt(3)").css("background","green");
});
//获取网页中所有的标题h1 h2
$("#btn3").click(function (){
$(":header").css("background","green");
});
//获取网页中正在执行的动画
$("#btn4").click(function (){
$("div:animated").css("background","red");
});
//定义一个动画函数
function move(){
$("#move").slideToggle(2000,move);
};
move();
//取消效果
$("#btn5").click(function (){
$("*").removeAttr("style");
});
});
</script>
<body>
<h1>简单选择器1</h1>
<h2>简单选择器2</h2>
<div id="move" style="width:200px; height:200px; background-color:#03C;">这是动画效果</div>
<table width=" 600" border="1">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>电话</td>
<td>住址</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>110110;</td>
<td>大象</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>110110;</td>
<td>大象</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>110110;</td>
<td>大象</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>110110;</td>
<td>大象</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>110110;</td>
<td>大象</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>110110;</td>
<td>大象</td>
</tr>
</table>
<input type="button" id="btn0" value="获取所引致等于1的tr">
<input type="button" id="btn1" value="获取索引大于3">
<input type="button" id="btn2" value="获取索引小于3">
<input type="button" id="btn3" value="获取网页中所有的标题h1 h2">
<input type="button" id="btn4" value="获取网页中正在执行的动画">
<input type="button" id="btn5" value="取消效果">
</body>
</html>