第二章（jQuery选择器）

2.1jQuery选择器是什么

1.CSS选择器

选择器	示例	选择器	示例
标签选择器	a{ } p{ } ul{ }	ID选择器	#ID{ }
类选择器	.class{ }	群组选择器	td,p,div,a{ }
后代选择器	#link a{ }	通配符选择器	*{ }

2.jQuery选择器

*jQuery的行为规则都必须再获取到元素后才能生效

例：

<script type=”text/javascript”>function demo(){Alert(‘JavaScript demo’)
}
</script>
<p onclick = “demo();”>点击我.</p>

上述代码为元素设置onclick事件，但是JS和HTML混杂在一起不妥，应该将内容和行为分离：

<p class= “demo”>jQuery Demo</p>
<script type=”text/javascript”>$(“.demo”).click(function(){    //给class 为demo的元素添加行为
        Alert(“JQuery demo”);
})
</script>

2.2jQuery选择器的优势

①简洁的写法

②支持css1到css3选择器

③完善的处理机制

使用jQuery选择器不仅比使用传统的getElementById()函数简洁的多，而且能够避免某些错误

例：

<div>test</div><script type=”text/javascript”>document.getElementById(“tt”).styel.color = “red”;</script>

运行上述代码会报错，原因是没有id为”tt”的元素

改进：

<div>test</div><script type=”text/javascript”>
If(document.getElementById(“tt”)){     //判断id为tt是否存在
document.getElementById(“tt”).styel.color = “red”;}</script>

效果达到了，却很复杂。使用jQuery则可以避免

<div>test</div><script type=”text/javascript”>
$(“#tt”).css(“color”,”red”);               //这里无需判断id为tt是否存在</script>

*$(“#tt”)获取的永远是对象，即使网页上没有此元素。因此当用jQuery检查某个元素再网页上是否存在时，不能用以下代码:

If($(“#tt”)){//do something

}

而应该根据获取到元素的长度来判断：

if($(“#tt”).length >0 ){//do something

}

或者转化成DOM对象判断：

if($(“#tt”)[0] ){//do something

}

2.3jQuery选择器

①用js添加行为：（jQuery方法见2.4应用jQuery改写示例）

示例1：给每个p元素添加行为

步骤：1获取所有元素

　　 2对元素进行循环（因为获取的是数组对象）

　　 3给每个元素添加行为

var items = document.getElementsByTagName(“p”);   //获取网页中所有P元素for(var i=0;i<items.length;i++){items[i].onclick = function(){//doing something

}}

示例2：使一个特定的表格隔行变色

步骤：1根据表格id获取表格

2在表格内获取<tbody>元素

3在<tbody>元素下获取<tr>元素

4循环输出获取的<tr>元素

5对<tr>元素的索引值除以2取模，然后根据奇偶设置不同背景色

 <script type="text/javascript">window.onload = function(){var item = document.getElementById("tb"); var tbody = item.getElementsByTagName("tbody")[0];  //获取表格的第1个tbody元素var trs = tbody.getElementsByTagName("tr");for(var i = 0 ;i<trs.length;i++){if(i%2==0){trs[i].style.backgroundColor = "#888";}}}</script></head><body><table id="tb"><tbody><tr><td>第一行</td><td>第一行</td></tr><tr><td>第二行</td><td>第二行</td></tr><tr><td>第三行</td><td>第三行</td></tr><tr><td>第四行</td><td>第四行</td></tr><tr><td>第五行</td><td>第五行</td></tr><tr><td>第六行</td><td>第六行</td></tr></tbody></table></body>

效果如图

示例3：对多选框进行操作，输出选中的多选框个数

步骤： 1新建数组

2获取所有name为”check”的多选框

3循环判断多选框是否被选中，如果被选中则添加到数组里

4获取输出按钮，然后为按钮添加onclick事件，输出数组的长度

<body><input type="checkbox" value="1" name="check" checked/><input type="checkbox" value="2" name="check" ><input type="checkbox" value="3" name="check" checked/>  <!--checked 被选中状态--><input type="button" value="你选中的个数" id="btn"><script type="text/javascript">var btn = document.getElementById("btn");btn.onclick = function(){    //给btn按钮添加事件var arrays = new Array();var items = document.getElementsByName("check");for(var i = 0;i<items.length;i++){if(items[i].checked){arrays.push(items[i].value);}}alert("选中的个数为："+arrays.length)}</script></body>

2.3.1基本选择器

选择器	描述	返回	示例
#id	根据id匹配	单元素	$(“#id”)
.class	根据类名匹配	集合	$(“.class”)
element	根据原色名匹配	集合	$(“element”)
*	匹配所有	集合	$(“*”)
Selector1,selector2….	将每个选择器匹配到元素合并后一起返回	集合	$(“div,span,p.myClass”)选取所有div，span和clss为myClass的p标签的一组元素

2.3.2层次选择器（后代，子元素，相邻，兄弟元素等）

选择器	描述	返回	示例
$(“p span”)	P元素里所有span元素	集合元素	$(“div span”)选取div里所有的span元素
$(“parent>child”)	选取parent下的子元素	集合元素	$(“div > span”)选取div下元素名为span的子元素
$(“prev + next”)	选取紧接prev元素后的next元素	集合元素	$(“.one+div”)选取class为one的下一个div元素
$(“prev ~ siblings”)	选取prev元素之后所有siblings元素	集合元素	$(“#two ~div”)选取id为two的元素后面所有div兄弟元素

*$(“prev + next”)和$(“prev ~ siblings”)用的比较少，有更简单的方法代替

$(“prev + next”)与next()方法的等价关系

	选择器	方法
等价关系	$(“.one + div”)	$(“.one”).next(“div”)

$(“prev ~ siblings”)和nextAll()方法的等价关系

	选择器	方法
等价关系	$(“#prev~div”)	$(“#prev”).nextAll(“div”)

*$(“#prev~div”)选择器只能选择“#prev”元素后面同辈<div>元素，而siblings()方法与位置无关

$(“#prev ~ div”).css(“”,””); //选取#prev之后的同辈div元素

$(“#prev”).nextAll(“div”).css(“”,””) //同上

$(“#prev”).siblings(“div”).css(“”,””) //选取#prev所有的同辈div元素，无论前后位置

2.3.3过滤选择器

过滤选择器类似于伪类选择器以：开头。分为：基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器

①基本过滤选择器

选择器	描述	返回	示例
:first	获取第一个元素	单个元素	$(“div:first”)获取div中第一个div
:last	获取最后一个元素	单个元素	$(“div:last”)获取div中最后一个div
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	$(“input:not(:myClass)”)选取class不是myClass的input元素
:even	选取索引是偶数的所有元素，索引从0开始	集合元素	$(“input:event”)选取索引是偶数的input元素
:odd	奇数
:eq(index)	选取索引等于index的元素(index从0开始)	单个元素	$(“input:eq(1)”)选取索引等于1的input元素
:gt(index)	选取索引大于index的元素	集合元素	$(“input:gt(1)”)选取索引大于1的input元素(*大于1，不包括1)
:lt(index)	选取索引小于index的元素	集合元素	与:gt()相反
:header	选取所有标题元素	集合元素	$(“:header”)选取网页中所有标题
:animated	选取当前正在执行动画的所有元素	集合元素	$(“div:animated”)选取正照执行动画的div元素

②内容过滤器

选择器	描述	返回	示例
:contains(text)	选取含有文本内容为”text”的元素	集合元素	$(“div:contains(“我”)”) 选取含有”我”的div元素
:empty	选取不包含子元素或文本的空元素	集合元素	$(“div:empty”)选取不包含子元素（包括文本元素）的div元素
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素	$(“div:has(p)”)选取含有p元素的div元素
:parent	选取含有子元素或者文本的元素	集合元素	$(“div:parent”)选取拥有子元素（包括文本元素）的div元素

③可见性过滤选择器

选择器	描述	返回	示例
:hidden	选取所有不可见元素	集合元素	$(“:hidden”)选取所有不可见元素，包括<input type=”hidden”/>,<div style=”display:none;”>和<div style=”visibility:hidden”>等元素，如果只选取<input>元素，使用$(“input:hidden”)
:visible	选取所有可见元素	集合元素	#(“div:visible”)选取所有可见<div>元素

④属性过滤选择器

过滤规则是通过元素的属性来获取相应的元素

选择器	描述	返回	示例
[attribute]	选取拥有此属性的元素	集合元素	$(“div[id]”)选取拥有属性id的元素
[attribute=value]	选取属性为value元素	集合元素	$(“div[title=test]”)选取属性title为”test”的<div>元素
[attribute!=value]	选取属性不等于value的元素	集合元素	$(“div[title!=test]”)选取属性title不等于”test”的<div>元素(*没有有title属性的<div>元素也会被选取)
[attribute^=value]	选取属性值以value开始的元素	集合元素	$(“div[title^=test]”)选取属性title以”test”开始的<div>元素
[attribute$=value]	选取属性值以value结束的元素	集合元素	$(“div[title$=test]”)选取属性title以”test”结束的<div>元素
[attribute*=value]	选取属性值含有value的元素	集合元素	$(“div[title*=test]”)选取属性title含有”test”的<div>元素
[selector1][selector2] [selectorN]	用属性选择器合并成一个符合属性选择器，满足多个条件，每选择一次，缩小一次范围	集合元素	$(“div[id][title$=“test”]”)选取拥有属性id，并且属性title以”test”结束的<div>元素

⑤子元素过滤选择器

选择器	描述	返回	示例
:nth-child (index/even/odd/ equation)	选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)	集合元素	:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index从1开始，而:eq(index)是从0开始
:first-child	选取每个父元素的第1个子元素	集合元素	:first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。例：$(“ul li:first-child”)选取每个<ul>中第一个<li>元素
:last-child	与上例相反	集合元素	与上例相反
:only-child	如果某个元素是它父元素中唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，则不会被匹配	集合元素	$(“ul li:only-child”)在<ul>中选取是唯一子元素的<li>元素

* :nth-child()选择器是很常用的子元素过滤选择器，功能如下：

(1) :nth-child(even)能选取每个父元素下的索引值是偶数的元素

(2) :nth-child(odd) 能选取每个父元素下的索引值是奇数的元素

(3) :nth-child(2) 能选取每个父元素下的所以只等于2的元素

(4) :nth-child(3n) 能选取每个父元素下的索引值是3的倍数的元素（n从0开始）

(5) :nth-child(3n+1)能选取每个父元素下的索引值是（3n+1）的元素（n从0开始）

⑥表单对象属性过滤选择器

选择器	描述	返回	示例
:enabled	选取所有可用元素	集合元素	$(“#form1 :enabled”)选取id为”form1”的表单内的所有可用元素
:disabled	选取所有不可用元素	集合元素	$(“#form2 :disabled”)选取id为”form2”的表单内所有不可用的元素
:checked	选取所有被选中元素（单选框/复选框）	集合元素	$(“input :checked”)选取所有被选中的<input>元素
:selected	选取所有被选中的选项元素(下拉列表)	集合元素	$(“select :selected”)选取所有被选中的选项元素

2.3.4 表单选择器

选择器	描述	返回	示例
:input	选取所有<input>/<textarea>/<select>和<button>元素	集合元素	$(“:input”) 选取所有<input>/<textarea>/<select>和<button>元素
:text	选取所有的单行文本框	集合元素	$(“:text”)选取所有单行文本框
:password	选取所有密码框	集合元素	$(“:password”)选取所有密码框
:radio	选取所有单选框	集合元素	$(“:radio”)选取所有的单选框
:checkbox	选取所有多选框	集合元素	$(“:checkbox”)选取所有复选框
:submit	选取所有提交按钮	集合元素	$(“:submit”)
:image	选取所有图像按钮	集合元素	$(“:image”)
:reset	选取所有重置按钮	集合元素	$(“:reset”)
:button	选取所有按钮	集合元素	$(“:button”)
:file	选取所有的上传域	集合元素	$(“:file”)
:hidden	选取所有不可见元素	集合元素	$(“:hidden”)

转载于:https://www.cnblogs.com/cimuly/p/6028458.html

第二章（jQuery选择器）相关推荐

第二章jQuery选择器
一.jquery选择器的分类: 1.基本选择器 (1)标签选择器 $("h2").css("color","red"); (2)类选择器 $ ...
第二章 jQuery选择器
2019独角兽企业重金招聘Python工程师标准>>> #选择器 ##基本选择器 (#id) 根据给定的id匹配一个元素,$("#test") (.class) ...
第十四章 jQuery选择器
jQuery选择器 jQuery选择器类似于CSS选择器,用来选取网页中的元素 jQuery选择器分类通过CSS选择器选取元素基本选择器层次选择器属性选择器通过过滤选择器选择元素基本过滤选 ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
《jQuery权威指南》学习笔记——第二章
2.1 jQuery选择器概述 2.1.1 什么是选择器通过标签名.属性名或内容对DOM元素进行快速.准确的选择 2.1.2 选择器的优势 1.代码更简单:(示例2-1 使用JavaScript实现 ...
北大青鸟 JQuery制作特效第二章（上机练习
北大青鸟 JQuery制作特效第二章 (上机练习练习一丶制作简易的当当购物车页面 <!DOCTYPE html> <html> <head lang="en ...
jQuery系列第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元素的标签名.属性名.状态等进行快速准确 ...
jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器在CSS3选择器标淮草案定义 ...
jQuery选择器和选取方法
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器在CSS3选择器标淮草案定义 ...

第二章（jQuery选择器）

第二章（jQuery选择器）相关推荐

最新文章

热门文章