关于jQuery里面的选择器

一、JQuery选择器的概述

　　选择器是JQuery的根基，在JQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。

二、选择器的优势

1、简洁的语法

2、支持CSS1.0到CSS3.0选择器

3、完善的处理机制

三、基本选择器

名称	语法构成	描述	实例
标签选择器	element	根据给定的标签名匹配元素	$("h2" )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,...,selectorN	将每一个选择器匹配的元素合并后一起返回	$("div,p,.title" )选取所有div、p和拥有class为title的元素
交集选择器	element.class或element#id	匹配指定class或id的某元素或元素集合	$("h2.title")选取所有拥有class为title的h2元素
全局选择器	*	匹配所有元素	$("*" )选取所有元素

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        #box { background-color:#FFF; border:2px solid #;padding:5px;  }

    </style>

    <script src="js/jquery-1.12.3.min.js"></script>

    <script>

        $(document).ready(function () {

            $("h2").click(function () {                         //获取<h2>元素为其添加click事件函数  标签选择器

               $("h3").css("background-color", "#09F");         //css   是属性  属性值

               $(".title").css("background", "pink");            //类选择器

               $("#box").css("background", "purple");            //ID选择器

               $("h2,dt,title").css("background","purple");     //给多个属性设置值  并集选择

               $("h2.title").css("font-size", "50px");           //先获取class的title   给h2元素设置字体的大小   交集选择

               $("*").css("color","red");                      //改变所有的字体颜色   全局选择器

            });

        });

    </script>

</head>

<body>

    <div id="box">  id为box的div

        <h2 class="title">class为title的h2</h2>

        <h3 >class为title的h3</h3>

        <dl>

        <dt>

            <img src="data:image/1419573178hE6KzQ.jpg"  width="" height="" alt="公主" title="当图片不显示的时候就显示alt属性的值"/></dt>

         <dd class="title">公主</dd>

        </dl>

    </div>

</body>

</html>

四、层次选择器

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的<span>元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素<span>
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="js/jquery-1.12.3.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("h2").click(function () {

                //$("#all span").css("background","pink");    //后代选择器    #all  ---->后代是span

                //$("#all>span").css("background", "pink");     //子选择器 就是在#all的标签而不是包裹在别人下的======子元素

                // $("dt+dd").css("background","pink");          //相邻选择器  就是必须相邻的有顺序的

                //$("span~dl").css("background","pink");          //同辈选择器  span在之后的dl

            });

        });

    </script>

</head>

<body>

    <div id="all">

        <h2>全部旅游产品分类</h2>

        <span>content</span>

        <dl>

            <dt>北京周边旅游<span>特价</span></dt>

                <dd>  <a href="#">按天数</a>  <a href="#">海边旅游</a>   <a href="#">草原</a> </dd>

        </dl>

        <dl>

            <dt>景点门票</dt>

                <dd><a href="#">名胜</a>   <a href="#">暑假</a>    <a href="#">乐园</a></dd>

                <dd><a href="#">山水</a>   <a href="#">双休</a></dd>

        </dl>

        <span>更多分类</span>

    </div>

</body>

</html>

五、属性选择器

名称	语法构成	描述	示例
属性选择器	[attribute]	选取包含给定属性的元素	$(" [href]" )选取含有href属性的元素
	[attribute=value]	选取等于给定属性是某个特定值的元素	$(" [href ='#']" )选取href属性值为“#”的元素
	[attribute !=value]	选取不等于给定属性是某个特定值的元素	$(" [href !='#']" )选取href属性值不为“#”的元素

属性选择器	[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^='en']" )选取href属性值以en开头的元素
	[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
	[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* ='txt']" )选取href属性值中含有txt的元素
	[selector] [selector2] [selectorN]	选取满足多个条件的复合属性的元素	$("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的<li>元素

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="js/jquery-1.12.3.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("h2").click(function () {

                //$("h2[title]").css("background", "pink");                 //选取包含属性的元素   h2标签里面          title的属性

                //$("[class=odds]").css("background", "pink");              //改变             class属性的值        odds元素背景颜色

                $("[id!=box]").css("color","pink");

                // $("[title^=h]").css("background", "pink");                     //改变           title属性的值中以h   开头的元素背景颜色

                //$("[title$=jp]").css("background","pink");                      //改变    title属性的值中以       jp结尾的元素的背景颜色

                //$("[title*=s]").css("background","pink");                     //改变    title属性的值中含有       s元素的背景颜色

                //$("li[class][title*=y]").css("background","pink");          //改变包含  class属性且title属性的值含有 y的<li>元素的背景颜色

            });

        });

    </script>

</head>

<body>

    <div id="box">

        <h2 class="odds" title="cartoonlist">动画列表</h2>

        <ul >

            <li class="odds" title="kn_jp">名侦探柯南</li>

            <li class="evens" title="hy_jp">火影忍者</li>

            <li class="odds" title="ss_jp">死神</li>

        </ul>

    </div>

</body>

</html>

六、基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素

基本过滤选择器	:first	选取第一个元素	$(" li:first" )选取所有<li>元素中的第一个<li>元素
	:last	选取最后一个元素	$(" li:last" )选取所有<li>元素中的最后一个<li>元素
	:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有<li>元素
	:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有<li>元素

名称	语法构成	描述	示例
基本过滤选择器	:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
	:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
	:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="js/jquery-1.12.3.min.js"></script>

    <script>

        $(document).ready(function () {

            $("h2").click(function () {

                // $("li:first").css("background", "#09F");   //改变第一个<li>(进行过滤的元素:)的背景颜色

                //$("li:last").css("background", "pink");     //改变最后一个<li>(进行过滤的元素:)的背景颜色

                //$("li:not(.three)").css("color","pink");    //改变在<li>里面除了three以外都改变字体颜色

                //$("li:even").css("color", "pink");          //改变索引为偶数的<li>元素的字体颜色

                //$("li:odd").css("color","#09F");            //改变索引为奇数的<li>元素的字体颜色

                // $("li:eq(1)").css("background", "pink");       //改变索引值   等于1的<li>元素的颜色

                //$("li:gt(1)").css("background", "pink");       //改变索引值   大于1的<li>元素的颜色

                //$("li:lt(1)").css("background", "pink");       //改变索引值   小于1的<li>元素的颜色

                //$(":header").css("color","pink");                //改变所有标题元素背景颜色如  h2  h3.....

                $(":focus").css("background","pink");  //改变当前获取焦点的元素背景

            });

        });

    </script>

</head>

<body>

    <h2>  网络小说</h2>

    <ul>

        <li>王妃不好当 </li>

        <li>致命交易 </li>

        <li class="three"> 非诚勿扰</li>

        <li> 逆天之宠</li>

        <li> 交错时光的恋爱</li>

        <li> 张震鬼故事</li>

        <li> 第一次亲密接触</li>

    </ul>

</body>

</html>

七、可见性过滤选择器

名称	语法构成	描述	示例
可见性过滤选择器	:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
可见性过滤选择器	:hidden	选取所有隐藏的元素	$(":hidden" ) 选取所有隐藏的元素

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="js/jquery-1.12.3.min.js"></script>

    <style>

        #txt_show {display:none;color:#00C      }

        #txt_show {display:block;color:#F30     }

    </style>

    <script>

        $(document).ready(function () {

            $("[name=show]").click(function () {

                $("p:hidden").show();     //获取隐藏元素，使其显示

            });

            $("[name=hide]").click(function () {

                $("p:visible").hide();     //获取显示元素，使其隐藏

            });

        });

    </script>

</head>

<body>

    <p id="txt_hide">点击按钮我会隐藏哦 </p>

    <p id="txt_show">隐藏我会显示哦 </p>

    <input name="show" type="button" value="点击显示文字"/>

    <input name="hide" type="button"  value="点击隐藏文字"/>

</body>

</html>

总结：（一定要看实列，才会有收获哦）

基本选择器

标签选择器、类选择器、ID选择器

并集选择器、交集选择器、全局选择器

层次选择器

后代选择器、子选择器

相邻选择器、同辈选择器

属性选择器

属性名过滤、属性值过滤、多属性条件过滤

基本过滤选择器

可见性过滤选择器

关于jQuery里面的选择器的更多相关文章

jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
JQuery：JQuery语法、选择器、事件处理
JQuery语法: 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
jQuery的筛选选择器
基本筛选选择器很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画（转）
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画转至元数据结尾我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章目录 JQuery总结一:选择器归 ...
jQuery中的选择器<思维导图>
选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...
jQuery中的选择器《思维导图》
学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...
jQuery简单过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--jQuery选择器详解根据所获 ...

随机推荐

oracle 中 rownum 和 row_number()
简单的介绍下oracle 中rownum 和 row_number() 使用,实例演示. 参照:http://www.cnblogs.com/zjrstar/archive/2006/08/31/49 ...
AMD 和 CMD 的区别有哪些？
看到玉伯在介绍seajs和requirejs时,说“RequireJS 遵循的是 AMD(异步模块定义)规范,SeaJS 遵循的是 CMD (通用模块定义)规范”. 能否详细(举例)说明下这个2个规范 ...
Web Workers 的基本信息
问题:JavaScript 并行性要将有趣的应用(例如从侧重服务器端的实施)移植到客户端 JavaScript,存在很多制约瓶颈.其中包括浏览器兼容性.静态类型.可访问性和性能.幸运的是,随着浏览器 ...
Implementation Model Editor of AVEVA in OpenSceneGraph
Implementation Model Editor of AVEVA in OpenSceneGraph eryar@163.com 摘要Abstract:本文主要对工厂和海工设计软件AVEVA的 ...
hibernate（二）annotation第一个示例
一.在数据库中创建teacher表(数据库hibernate) create table teache( id int auto_increment primary key, name ), titl ...
python--基础学习（三）字符串单引号、双引号、三引号
1.基本认识单引号字符串:'python' 双引号字符串:"python" 三引号字符串:'''python'''(三单引号),"""python& ...
简明 Git 命令速查表
本文总结了git常用的命令,以便学习者使用时查阅~ 几个专用名词的译名如下 Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remote ...
JS双月份显示联动效果，点击日期浮出消息提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
10套免费的 Photoshop UI 元素以及 PSD 素材
免费的 PSD 用户界面工具包以及可以编辑 Photoshop PSD 文件,有你需要的设计漂亮的用户界面和惊人使用体验.这些用户界面工具包可有免费下载,可随意定制的,而且这些 PSD 分层素材文件组 ...
PHP内核研究(内存管理1)
PHP内存管理 PHP在5.3之前采用的是引用计数法 PHP在5.3之后采用了新的垃圾回收机制操作系统在申请内存空间的时候回引发系统调用在操作系统申请内存空间的时候,会将CPU从用户态切换到内核态 ...

关于jQuery里面的选择器

关于jQuery里面的选择器的更多相关文章

随机推荐

热门专题