您的位置：首页 > Web前端 > JQuery

Jquery选择器的概念以及选择器的学习一（基本、层级、简单，另有简单动画效果代码）

2012-03-20 19:11 766 查看

什么是jquery选择器？
概念：允许的多个元素组或单个严肃进行操作，从而找出想要的元素。

几种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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航