一、jQuery基本选择器

1.CSS选择器

在学习jQuery选择器之前，先介绍一下之前学过的CSS选择器。

选择器	语法	描述	示例
标签选择器	E { CSS规则 }	以文档元素为选择符
ID选择器	#ID{ CSS规则 }	以ID为选择符
类选择器	E.className{ CSS规则 }	以文档元素的Class为选择符
群组选择器	E1,E2{ CSS规则 }	多个选择符应用同样的样式
后代选择器	E F { CSS规则 }	元素E的任何后代F
通配符选择器	*{ CSS规则 }	文档的所有元素作为选择符

2.jQuery基本选择器

在网页中，每个id名称只能使用一次，class允许重复使用。基本选择器的介绍说明如下。

选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	$("#test")选取id为test的元素
.class	根据给定的类名匹配元素	集合元素	$(".test")选取所有class为test的元素
element	根据给定的元素名匹配元素	集合元素	$("p")选取所有的<p>元素
*	匹配所有的元素	集合元素	$("*")选取所有的元素
selector1,selector2	将每一个选择器匹配到的元素合并后引一起返回	集合元素	$("div,p.myclass")选取所有<div>，和用于class为myclass的<p>标签的一组元素

jQuery代码

    	$(function(){

    		//1.选择 id 为 one 的元素

    		$("#btn1").click(function(){

    			$("#one").css({ background : "#C1FFC1"});

    		});

    		//2.选择 class 为 mini 的所有元素

    		$("#btn2").click(function(){

    			$(".mini").css({background : "#C1FFC1"});

    		});

    		//3.选择 元素名是 div 的所有元素

    		$("#btn3").click(function(){

    			$("div").css({background : "#C1FFC1"});

    		});

    		//4.选择 所有的元素

    		$("#btn4").click(function(){

    			$("*").css({background : "#C1FFC1"});

    		});

    		//5.选择 所有的 span 元素和id为two的元素

    		$("#btn5").click(function(){

    			$("span,#two").css({background : "#C1FFC1"});

    		});

    	});

二、层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.

注意:

(1)("prev ~ div") 选择器只能选择"# prev"元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取。

(2)第一个和第二个比较常用，第三个和第四个有相关方法可以替代。

next(): 下一个紧挨着的同辈元素。

nextAll(): 所有后面的同辈元素。

prev(): 前面紧挨着的同辈元素。

prevAll(): 所有前面的同辈元素。

siblings(): 元素的同辈元素，不分前后。

<body>

        <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />

        <input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" />

        <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" /><br>

        <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />

        <input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" />

        <input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" />

        <input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" />

        <br><br>

        <div class="one" id="one">

            id 为 one,class 为 one 的div

            <div class="mini">class为mini</div>

        </div>

        <div class="one" id="two" title="test">

            id为two,class为one,title为test的div

            <div class="mini" title="other">class为mini,title为other</div>

            <div class="mini" title="test">class为mini,title为test</div>

        </div>

        <div class="one">

            <div class="mini">class为mini</div>

            <div class="mini">class为mini</div>

            <div class="mini">class为mini</div>

            <div class="mini"></div>

        </div>

        <div class="one">

            <div class="mini">class为mini</div>

            <div class="mini">class为mini</div>

            <div class="mini">class为mini</div>

            <div class="mini" title="tesst">class为mini,title为tesst</div>

        </div>

        <div style="display:none;" class="none">style的display为"none"的div</div>

        <div class="hide">class为"hide"的div</div>

        <div>

            包含input的type为"hidden"的div<input type="hidden" size="8">

        </div>

        <span id="span">^^span元素^^</span>

        <span id="span">--span元素--</span>

  </body>

jQuery代码

    	$(function(){

    		//1.选择 body内的所有 div元素

    		$("#btn1").click(function(){

    			$("body div").css({ background : "#C1FFC1" });

    		});

        	//2.在 body内,选择子元素是div的

        	$("#btn2").click(function(){

        		$("body > div").css({ background : "#C1FFC1" });

    		});

        	//3.选择 id 为 one 的下一个 div 元素

        	$("#btn3").click(function(){

        		$("#one + div").css({ background : "#C1FFC1" });

    		});

        	//4.选择 id 为 two 的元素后面的所有 div 兄弟元素

        	$("#btn4").click(function(){

        		$("#two ~ div ").css({ background : "#C1FFC1" });

    		});

        	//5.选择 id 为 two 的元素所有 div 兄弟元素

        	$("#btn5").click(function(){

        		$("#two").siblings("div").css({ background : "#C1FFC1" });

    		});

        	//6.选择 id 为 one 的下一个 span 元素

        	$("#btn6").click(function(){

    			$("#one").nextAll("span:first").css({ background : "#C1FFC1" });

    		});

        	//7.选择 id 为 two 的元素前边的所有的 div 兄弟元素

        	$("#btn7").click(function(){

        		$("#two").prevAll("div").css({ background : "#C1FFC1" });

    		});

    	});

点击按钮1

点击按钮2

点击按钮3

点击按钮4

点击按钮5

点击按钮6

点击按钮7

二、过滤选择器

过滤选择器主要通过特定的过滤规则来筛选出所需的DOM元素，选择器以" : "开头。按照不同的过滤规则可分为基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。

1.基本过滤选择器

2.内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

3.可见性过滤器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

可见选择器: hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素。

4.属性过滤选择器

属性过滤选择器是通过元素的属性来获取相应的元素。

5.子元素过滤器

上面示例解释:

每个class为one的div父元素下的第2个子元素。

每个class为one的div父元素下的第一个子元素。

每个class为one的div父元素下的最后一个子元素。

如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素。

nth-child() 选择器详解如下:

(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素。

(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素。

(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素。

(4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素。

6.表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤。

<body>

        <h3>表单对象属性过滤选择器</h3>

         <button id="btn1">对表单内 可用input 赋值操作.</button>

           <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />

         <button id="btn3">获取多选框选中的个数.</button>

         <button id="btn4">获取多选框选中的内容.</button><br /><br />

         <button id="btn5">获取下拉框选中的内容.</button><br /><br />

        <form id="form1" action="#">

            可用元素: <input name="add" value="可用文本框1"/><br>

            不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>

            可用元素: <input name="che" value="可用文本框2"/><br>

            不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>

            <br>

            多选框: <br>

            <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1

            <input type="checkbox" name="newsletter" value="test2" />test2

            <input type="checkbox" name="newsletter" value="test3" />test3

            <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4

            <input type="checkbox" name="newsletter" value="test5" />test5

            <br><br>

            下拉列表: <br>

            <select name="test" multiple="multiple" style="height: 100px">

                <option>浙江</option>

                <option selected="selected">辽宁</option>

                <option>北京</option>

                <option selected="selected">天津</option>

                <option>广州</option>

                <option>湖北</option>

            </select>

            <br><br>

        </form>

  </body>

jQuery代码

    $(function(){

    	//1.对表单内 可用input赋值操作

    	$("#btn1").click(function(){

    		$(":text:enabled").val("Tom");

    	});

    	//2.对表单内 不可用input赋值操作

    	$("#btn2").click(function(){

    		$(":text:disabled").val("Jerry");

    	});

    	//3.获取多选框选中的个数

    	$("#btn3").click(function(){

    		var num = $(":checkbox[name='newsletter']:checked").length;

    		alert(num);

    	});

    	//4.获取多选框选中的内容

    	$("#btn4").click(function(){

    		$(":checkbox[name='newsletter']:checked").each(function(){

    			alert(this.value);

    		});

    	});

    	//5.获取下拉列表选中的内容

    	$("#btn5").click(function(){

    		$("select[name='test'] :selected").each(function(){

    			alert(this.value);

    		});

    	});

    });

注意

    	//1.带空格表示选取class为test的元素里面的隐藏元素

    	var $t_a = $(".test :hidden");

    	//2.不带空格表示选取隐藏的class为test的元素

    	var $t_b = $(".test:hidden");

jQuery基础学习(二)—jQuery选择器的更多相关文章

jQuery基础学习7——层次选择器find()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery基础学习6——基本选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery基础学习3——jQuery库冲突
默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...
jQuery基础学习8——层次选择器next()和prev()方法
$('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 ...
jQuery基础学习8——层次选择器children()方法
$('body > div').css("background","#bbffaa"); //和children()方法是等价的,父子关系,和parent ...
jQuery基础学习(一)—jQuery初识
一.jQuery概述 1.jQuery的优点 jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...
jQuery基础学习(三)—jQuery中的DOM操作
一.查找节点查找属性节点: 通过jQuery的选择器来完成. 操作属性节点: 调用jQuery对象的attr()来获取它的属性值. 操作文本节点: 通过text()方法 ...
jQuery基础学习4——jQuery容错性
使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. <script type="t ...
jQuery基础之二
jQuery基础之二 jQuery的中文文档十分详细,并且权威.W3C的jQuery文档更加简单实用. jQuery 1.9.0 jQuery中文文档W3C的jQuery文档 jQuery操作DO ...

随机推荐

Javascript学习九
计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互 ...
计算机存储负数以及int转byte时-128的出现
我们看下面这段代码输出的结果的是128,这个没什么疑问但是当我们不改变数值仅仅加了一个强制转换后这时我们会发现结果会变成负的128.这时候我们就要怀疑了,为什么会出现这样的结果呢? 对于这个问题 ...
bash之重定向
标准输入 stdin:代码为0,使用< 或 <& ...
使用Github Pages和Hexo构建博客
Github Pages可以创建免费的静态站点,支持自带主题.支持自制页面等,并且可以使用Jekyll或者Hexo等静态博客框架进行管理. 独立博客是博客园等博客平台之外的一个良好补充,相比使用虚拟主 ...
《Shell脚本学习指南》学习笔记之变量、判断和流程控制
变量定义变量可以使用export和readonly来设置变量,export用于修改或打印环境变量,readonly则使得变量不得修改.语法: export name[=word] ... read ...
有个程序猿要去当CEO了：（一）事情始末
事情大概是这样的: 去年年底,我从原公司离职,原因大概是公司绩效不好,呆着也没意思. 后来听说,年终结算遣散了所有人. 今年年初的时候,前老板又找上我,说希望能和我再合作. 起先是想分我一部分干股,让 ...
Java 中的数组
1.声明数组String [] arr;int arr1[];String[] array=new String[5];int score[]=new int[3]; 2.初始化数组://静态初始化i ...
SQL AlawaysOn 之四：故障转移集群
声明,故障转移集群,仅安装在SQL服务器中,域服务器不能和SQL服务器一起加入集群. 1.添加故障转移集群,下一步 2.安装 3.在域控制服务器上的管理工具里打开故不障转移集群管理器,选择创建集群 4 ...
利用Register protocol实现网页调用桌面程序(类似迅雷、QQ等)
前言我们经常看到 tencent://.. thunder:// 这两种开头的网址,往往觉得很奇怪,很想弄懂其中的原理,是如何实现的,我查找了相关的资料,终于找到了,跟大家分享下. 原理篇 ...
在vs中打开cuda工程
以往都是在linux环境下使用cuda,编写cuda程序,因为一篇论文的源码要求用win系统+vs,首次在vs中打开.编译cuda工程,遇到一些阻碍,特此记录. 我的计算机环境是win10,cuda7 ...

jQuery基础学习(二)—jQuery选择器