jQuery 最核心的组成部分就是：选择器引擎。它继承了 CSS 的语法，可以对 DOM 元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性。

jQuery选择器实现了 CSS1~CSS3 的大部分规则之外，还实现了一些自定义的选择器，用于各种特殊状态的选择。

一．简单选择器
　　在使用 jQuery 选择器时，我们首先必须使用“$()”函数来包装我们的 CSS 规则。而CSS 规则作为参数传递到 jQuery 对象内部后，再返回包含页面中对应元素的 jQuery 对象。

　　随后，我们就可以对这个获取到的 DOM 节点进行行为操作了。

　　

　　1、id选择器：

　　　　最简单、最重点、速度最快的一种选择器

  1. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  2. <script type="text/javascript">
  3.     $(function(){
  4.         $('#box').css('color', 'blue');            //添加一个行为，这个行为是添加样式
  5.     });
  6. </script>
  7. <style>
  8.     #box {color:red;}    /*CSS添加一个样式*/
  9. </style>
  10. </head>
  11.  
  12. <body>
  13.     <div id="box">常规选择器</div>
  14. </body>

　　2、元素标签名选择器

  1. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  2. <script type="text/javascript">
  3.     $(function(){
  4.         $('div').css('color', 'maroon');            //元素选择器，返回多个元素
  5.     });
  6. </script>
  7. <style>
  8.     div{color:orange;}
  9. </style>
  10. </head>
  11.  
  12. <body>
  13.     <div>常规选择器</div>
  14.     <div>常规选择器</div>
  15.     <div>常规选择器</div>
  16. </body>

　　3、类(class)

  1. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  2. <script type="text/javascript">
  3.     $(function(){
  4.         $('.box').css('color', 'red'); //类(class)选择器，返回多个元素
  5.     });
  6. </script>
  7. <style>
  8.     .box{color:orange;}
  9. </style>
  10. </head>
  11.  
  12. <body>
  13.     <div class="box">常规选择器</div>
  14.     <div>常规选择器</div>
  15.     <div class="box">常规选择器</div>
  16. </body>

　　　　如果是多个id相同JQuery只选择第一个，而CSS就选择了全部

  1. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  2. <script type="text/javascript">
  3.     $(function(){
  4.         $('#box').css('color', 'red');//只控制了第一个id为box的元素
  5.     });
  6. </script>
  7. <style>
  8.     /*#box{color:orange;}控制了三个div*/
  9. </style>
  10. </head>
  11.  
  12. <body>
  13.     <div id="box">常规选择器</div>
  14.     <div id="box">常规选择器</div>
  15.     <div id="box">常规选择器</div>
  16. </body>

　　　　警告：有个问题特别要注意，ID 在页面只允许出现一次，我们一般都是要求开发者要遵守和保持这个规则。

　　　　但如果你在页面中出现三次，并且在 CSS 使用样式，那么这三个元素还会执行效果。但如果，你想在 jQuery 这么去做，那么就会遇到失明（即无效）的问题。

　　　　所以，开发者必须养成良好的遵守习惯，在一个页面仅使用一个 ID。

　　4、三种选择器返回的个数：

　　　　为了证明 ID 返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。

  1. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  2. <script type="text/javascript">
  3.     $(function(){
  4.         $('#box').css('color', 'red');//只控制了第一个id为box的元素
  5.         alert($('#box').size());//就算有三个id为box也只返回一个
  6.         alert($('#box').length);
  7.         alert($('.pox').size());//有多少个class就返回多少个
  8.         alert($('.pox').length);
  9.         alert($('div').size());//有多少个div就返回多少个
  10.         alert($('div').length);
  11.     });
  12. </script>
  13. <style>
  14.     /*#box{color:orange;}控制了三个div*/
  15. </style>
  16. </head>
  17.  
  18. <body>
  19.     <div id="box">常规选择器</div>
  20.     <div id="box">常规选择器</div>
  21.     <div id="box">常规选择器</div>
  22.     <div class="pox">常规选择器</div>
  23.     <div class="pox">常规选择器</div>
  24. </body>

　　5、从多个标签选择器或class类选择器中选择一个操作

  1. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  2. <script type="text/javascript">
  3.     $(function(){
  4.         $('div').eq(1).css('color', 'red');/*选中了第二个div，将字体颜色改为red*/
  5.     });
  6. </script>
  7. <style>
  8.     /*#box{color:orange;}控制了三个div*/
  9. </style>
  10. </head>
  11.  
  12. <body>
  13.     <div id="box">常规选择器</div>
  14.     <div id="box">常规选择器</div>
  15.     <div id="box">常规选择器</div>
  16.     <div class="pox">常规选择器</div>
  17.     <div class="pox">常规选择器</div>
  18. </body>

　　6、jQuery 选择器的特点

　　　　jQuery 选择器的写法与 CSS 选择器十分类似，只不过他们的功能不同。CSS 找到元素后添加的是单一的样式，而 jQuery 则添加的是动作行为。
　　　　最重要的一点是：CSS 在添加样式的时候，高级选择器会对部分浏览器不兼容，而 jQuery 选择器在添加 CSS 样式的时候却不必为此烦恼。

  1. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  2. <script type="text/javascript">
  3.     $(function(){
  4.         $('#box > p').css('color', 'red');/*只选中id为box的元素的子元素，不包括孙子元素，兼容了所有的浏览器*/
  5.     });
  6. </script>
  7. <style>
  8.     /*#box > p {color:red;}CSS 子选择器,表示选中id为box的元素的儿子元素，IE6 不支持*/
  9. </style>
  10. </head>
  11.  
  12. <body>
  13.     <div id="box">
  14.         <p>常规选择器</p>
  15.         <p>常规选择器</p>
  16.         <p>常规选择器</p>
  17.         <div>
  18.             <p>常规选择器</p>
  19.             <p>常规选择器</p>
  20.             <p>常规选择器</p>
  21.         </div>
  22.     </div>
  23. </body>

　　　　jQuery 选择器支持 CSS1、CSS2 的全部规则，支持 CSS3 部分实用的规则，同时它还有少量独有的规则。
　　　　jQuery 选择器在获取节点对象的时候不但简单，还内置了容错功能，这样避免像 JavaScript那样每次对节点的获取需要进行有效判断。

  1. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  2. <script type="text/javascript">
  3.     $(function(){
  4.         $('#pox').css('color','red');/*不会报错，也没有效果，因为没有id为pox的节点*/
  5.         /*document.getElementById('pox').style.color='red';使用原生的javascript报错了，报了id为pox的节点不存在*/
  6.  
  7.         //在通过id获取元素节点的时候最好先判断该id存不存在 因为很多情况下有动态DOM生成的问题，会导致执行不存在的id选择器
  8.         if(document.getElementById('pox')){
  9.             document.getElementById('pox').style.color='red';
  10.         }
  11.  
  12.         //而页面越多判断的越多，越麻烦，所以jQuery就有了容错的功能，把这个问题解决了，就不需要判断了，但是想让性能更高还是的判断一下，id不存在的时候就不用执行了
  13.         if($('#pox').size()>0){            //如果有id为pox的元素，$('#pox').size返回的结果就大于0，就可以执行下面的操作
  14.             $('#pox').css('color','red');
  15.         }
  16.  
  17.     });
  18. </script>
  19. </head>
  20. <body>
  21.     <div id="box">常规选择器</div>
  22. </body>

　　　　除了这种方式之外，还可以用转换为 DOM 对象的方式来判断

  1. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  2. <script type="text/javascript">
  3.     $(function(){
  4.         if ($('#pox').get(0)) {
  5.             //如果没有id为pox的元素返回undefined，就不会执行这里，如果有会返回id为pox的节点对象
  6.         };
  7.         if ($('#pox')[0]) {
  8.             //通过数组下标也可以获取 DOM 对象
  9.         }
  10.     });
  11. </script>
  12. </head>
  13. <body>
  14.     <div id="box">常规选择器</div>
  15. </body>

JQuery_简单选择器的更多相关文章

  1. jQuery - 4.简单选择器

    4.1 简单选择器   (1) :first 选取第一个元素.   (2) :last 选取最后一个元素.  (3) :not(选择器) 选取不满足"选择器"条件的元素   (4) ...

  2. JQuery_进阶选择器

    在简单选择器外,还有一些进阶的选择器方便我们更精准的选择元素. 1.群组选择器 可以将相同的样式合并 <script type="text/javascript" src=& ...

  3. jQuery_2_常规选择器-简单选择器

    JQuery最核心的组成部分就是:选择器引擎.它继承了css的语法,可以对DOM元素的标签名.属性名.状态等进行快速准确的选择. jQuery选择器的写法与CSS 选择器十分类似,只不过他们的功能不同 ...

  4. CSS简单选择器的学习笔记

    我们知道通过CSS定义页面样式的时候要用到各种各样的选择器,正确的使用选择器是我们能够正确使用CSS做页面样式的基础.下面是我学习选择器的一个简易笔记,举一些简单的例子. 为了方便展示,我选择在内部的 ...

  5. JQuery_过滤选择器

    一.基本过滤器 1.基本过滤器 过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头. <script type="text/ja ...

  6. JQuery_高级选择器

    在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...

  7. Jquery_类选择器笔记

    $("[id^=percent]").size() ^=:表示以什么开头 $=:表示以什么结尾 ~=:表示包含什么 id:表示按id选择

  8. jquery_简单介绍

    jquery是一个优秀的javascript的库. jquery对象是通过jquery包装DOM对象产生的对象 配置jquery 在<head> <script   src=&quo ...

  9. 黑马学习CSS之选择器 简单选择器，结合符，选择器，选择器组， 选择器优先级，名称空间

随机推荐

  1. 白话学习MVC(七)Action的执行一

    一.概述 在此系列开篇的时候介绍了MVC的生命周期 , 对于请求的处理,都是将相应的类的方法注册到HttpApplication事件中,通过事件的依次执行从而完成对请求的处理.对于MVC来说,请求是先 ...

  2. DuiLib学习bug整理——某些png不能显示

    今天下午遇到用ps导出的png显示不出来的情况.而从其他来源的png有的可以显示.到群里问了下也有人遇到过,但是都没想明白具体原因.后来经人指点说png保存时存在深度位不同.最后经过测试 8位深度.3 ...

  3. tcp protocol number

    在计算机网络OSI模型中,TCP端口完成第四层传输层所指定的功能.我们的电脑与网络连接的许多应用都是通过TCP端口实现的.本文与大家分享部分TCP端口的介绍. 21端口:21端口主要用于FTP(Fil ...

  4. 使用JavaService.exe(amd64)发布java服务(jdk x64)

    最近项目中需要使用java服务,但是java服务已经写好了,就等待部署到windows服务中,遇到了种种困难------在x64服务器中部署jdk x64编译的jar时,遇到了各种纠结. 本文找到了一 ...

  5. bootstrap入门-4.排版及其他固定样式

    本篇包括以下内容:排版.代码.表格.表单. 总结:超无聊,弃更. · 排版样式                                     标题 h1-h6 取消加粗,字体大小也有一定变化 ...

  6. 2Sigma OA prepare: Friends Circle

    DFS & BFS: 关键在于构造graph package twoSigma; import java.util.ArrayList; import java.util.HashSet; i ...

  7. 刨根问底U3D---如何退出Play模式后保留数据更改

    实际中遇到的需求 在做一款对抗类游戏,目前正在调整游戏的平衡性 所以就产生了一个需求 希望可以在Play模式时候对数据源做的更改可以在退出时候被保存下来. 举个Case, 比如 有一个炮塔 可以发射子 ...

  8. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数002·AI人工智能

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数002·AI人工智能 AI人工智能:包括knn.gmm.svm等 为方便阅读,在不影响说明的前提下,笔者对函数进行了 ...

  9. TextView,EditText中添加不同颜色的文字

    在很多时候,在我们项目里需要用到在一个TextView中要显示不同颜色的文字 private Spanned colorText(String text) { return Html.fromHtml ...

  10. [已解决] windows 80端口被占用

    看下是不是IIS开着,如果是关掉就OK拉 原文地址:http://www.cnblogs.com/gifisan/p/5822156.html