一、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 ...

随机推荐

解释 : translate 功能,过程
本来预计是这样设计的 admin在增加内容时,如:添加新的地点或新的FAQ,这时需要有中文,马来文等,但是顾客通常是不会添加的,所以这部分就不给顾客添加或更改. 用户来到前台,先看看localstor ...
项目架构开发：数据访问层之Query
接上文项目架构开发:数据访问层之Repository 上一章我们讲了IRepository接口,这张我们来讲IQuery 根据字面意思就可以知道,这次主要讲数据查询,上一章我们只针对单表做了查询的操 ...
技术分享，学术报告presentation 常用的承接句
前言现在即使是搞技术,做科研的,也需要在不同的场合,用ppt来做分享,做汇报,做总结. 如果国际会议,研讨会,或者在外企,国外工作,英文的presentation就更加必不可少.英语的提升需要大家从 ...
3450: Tyvj1952 Easy
3450: Tyvj1952 Easy Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 269 Solved: 198[Submit][Status] ...
APIJSON-以坚持和偏执，回敬傲慢和偏见
APIJSON简介: APIJSON是一种JSON传输结构协议. 客户端可以定义任何JSON结构去向服务端发起请求,服务端就会返回对应结构的JSON字符串,所求即所得. 一次请求任意结构任意数据,方便 ...
ECSHOP info: Can't Connect MySQL Server(localhost:3306)!
今天对服务器压力测试后,某个公司电脑的页面显示标题所示,别人电脑正常.故让她清理cookie.无效.重启MySQL后问题解决.
cuda编程学习2——add
cudaMalloc()分配的指针有使用限制,设备指针的使用限制总结如下: 1.可以将其传递给在设备上执行的函数 2.可以在设备代码中使用其进行内存的读写操作 3.可以将其传递给在主机上执行的函数 4 ...
POP3是收邮件的协议,SMTP是发邮件的协议,IMAP是一种邮箱通信协议。
我也是第一次接触这种服务,是因为我自己在做一个小小的自动推送天气情况到自己邮箱.所以才碰到这个的/ 看一下标题,我们可以先这样理解. POP3(Post Office Protocol - Versi ...
实验楼-2-Linux基础快捷键
终端:本质上对应着Linux上的/dev/tty设备 shell:打开终端,shell则自动打开可以在终端直接输入: echo "hello world" /*shell程序自动 ...
Oracle存储过程的调用和执行
1.什么是存储过程: 用于在数据库中完成特定的操作或者任务.是一个PLSQL程序块,可以永久的保存在数据库中以供其他程序调用. 2.无参存储过程的使用: Normal 0 7.8 磅 0 2 fals ...

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