JQuery_简单选择器
jQuery 最核心的组成部分就是:选择器引擎。它继承了 CSS 的语法,可以对 DOM 元素的标签名、属性名、状态等进行快速准确的选择,并且不必担心浏览器的兼容性。
jQuery选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。
一.简单选择器
在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则。而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象。
随后,我们就可以对这个获取到的 DOM 节点进行行为操作了。
1、id选择器:
最简单、最重点、速度最快的一种选择器
<script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript"> $(function(){ $('#box').css('color', 'blue'); //添加一个行为,这个行为是添加样式 }); </script> <style> #box {color:red;} /*CSS添加一个样式*/ </style> </head> <body> <div id="box">常规选择器</div> </body>
2、元素标签名选择器
<script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript"> $(function(){ $('div').css('color', 'maroon'); //元素选择器,返回多个元素 }); </script> <style> div{color:orange;} </style> </head> <body> <div>常规选择器</div> <div>常规选择器</div> <div>常规选择器</div> </body>
3、类(class)
<script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript"> $(function(){ $('.box').css('color', 'red'); //类(class)选择器,返回多个元素 }); </script> <style> .box{color:orange;} </style> </head> <body> <div class="box">常规选择器</div> <div>常规选择器</div> <div class="box">常规选择器</div> </body>
如果是多个id相同JQuery只选择第一个,而CSS就选择了全部
<script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript"> $(function(){ $('#box').css('color', 'red');//只控制了第一个id为box的元素 }); </script> <style> /*#box{color:orange;}控制了三个div*/ </style> </head> <body> <div id="box">常规选择器</div> <div id="box">常规选择器</div> <div id="box">常规选择器</div> </body>
警告:有个问题特别要注意,ID 在页面只允许出现一次,我们一般都是要求开发者要遵守和保持这个规则。
但如果你在页面中出现三次,并且在 CSS 使用样式,那么这三个元素还会执行效果。但如果,你想在 jQuery 这么去做,那么就会遇到失明(即无效)的问题。
所以,开发者必须养成良好的遵守习惯,在一个页面仅使用一个 ID。
4、三种选择器返回的个数:
为了证明 ID 返回的是单个元素,而元素标签名和类(class)返回的是多个,我们可以采用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。
<script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript"> $(function(){ $('#box').css('color', 'red');//只控制了第一个id为box的元素 alert($('#box').size());//就算有三个id为box也只返回一个 alert($('#box').length); alert($('.pox').size());//有多少个class就返回多少个 alert($('.pox').length); alert($('div').size());//有多少个div就返回多少个 alert($('div').length); }); </script> <style> /*#box{color:orange;}控制了三个div*/ </style> </head> <body> <div id="box">常规选择器</div> <div id="box">常规选择器</div> <div id="box">常规选择器</div> <div class="pox">常规选择器</div> <div class="pox">常规选择器</div> </body>
5、从多个标签选择器或class类选择器中选择一个操作
<script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript"> $(function(){ $('div').eq(1).css('color', 'red');/*选中了第二个div,将字体颜色改为red*/ }); </script> <style> /*#box{color:orange;}控制了三个div*/ </style> </head> <body> <div id="box">常规选择器</div> <div id="box">常规选择器</div> <div id="box">常规选择器</div> <div class="pox">常规选择器</div> <div class="pox">常规选择器</div> </body>
6、jQuery 选择器的特点
jQuery 选择器的写法与 CSS 选择器十分类似,只不过他们的功能不同。CSS 找到元素后添加的是单一的样式,而 jQuery 则添加的是动作行为。
最重要的一点是:CSS 在添加样式的时候,高级选择器会对部分浏览器不兼容,而 jQuery 选择器在添加 CSS 样式的时候却不必为此烦恼。
<script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript"> $(function(){ $('#box > p').css('color', 'red');/*只选中id为box的元素的子元素,不包括孙子元素,兼容了所有的浏览器*/ }); </script> <style> /*#box > p {color:red;}CSS 子选择器,表示选中id为box的元素的儿子元素,IE6 不支持*/ </style> </head> <body> <div id="box"> <p>常规选择器</p> <p>常规选择器</p> <p>常规选择器</p> <div> <p>常规选择器</p> <p>常规选择器</p> <p>常规选择器</p> </div> </div> </body>
jQuery 选择器支持 CSS1、CSS2 的全部规则,支持 CSS3 部分实用的规则,同时它还有少量独有的规则。
jQuery 选择器在获取节点对象的时候不但简单,还内置了容错功能,这样避免像 JavaScript那样每次对节点的获取需要进行有效判断。
<script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript"> $(function(){ $('#pox').css('color','red');/*不会报错,也没有效果,因为没有id为pox的节点*/ /*document.getElementById('pox').style.color='red';使用原生的javascript报错了,报了id为pox的节点不存在*/ //在通过id获取元素节点的时候最好先判断该id存不存在 因为很多情况下有动态DOM生成的问题,会导致执行不存在的id选择器 if(document.getElementById('pox')){ document.getElementById('pox').style.color='red'; } //而页面越多判断的越多,越麻烦,所以jQuery就有了容错的功能,把这个问题解决了,就不需要判断了,但是想让性能更高还是的判断一下,id不存在的时候就不用执行了 if($('#pox').size()>0){ //如果有id为pox的元素,$('#pox').size返回的结果就大于0,就可以执行下面的操作 $('#pox').css('color','red'); } }); </script> </head> <body> <div id="box">常规选择器</div> </body>
除了这种方式之外,还可以用转换为 DOM 对象的方式来判断
<script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript"> $(function(){ if ($('#pox').get(0)) { //如果没有id为pox的元素返回undefined,就不会执行这里,如果有会返回id为pox的节点对象 }; if ($('#pox')[0]) { //通过数组下标也可以获取 DOM 对象 } }); </script> </head> <body> <div id="box">常规选择器</div> </body>
JQuery_简单选择器的更多相关文章
- jQuery - 4.简单选择器
4.1 简单选择器 (1) :first 选取第一个元素. (2) :last 选取最后一个元素. (3) :not(选择器) 选取不满足"选择器"条件的元素 (4) ...
- JQuery_进阶选择器
在简单选择器外,还有一些进阶的选择器方便我们更精准的选择元素. 1.群组选择器 可以将相同的样式合并 <script type="text/javascript" src=& ...
- jQuery_2_常规选择器-简单选择器
JQuery最核心的组成部分就是:选择器引擎.它继承了css的语法,可以对DOM元素的标签名.属性名.状态等进行快速准确的选择. jQuery选择器的写法与CSS 选择器十分类似,只不过他们的功能不同 ...
- CSS简单选择器的学习笔记
我们知道通过CSS定义页面样式的时候要用到各种各样的选择器,正确的使用选择器是我们能够正确使用CSS做页面样式的基础.下面是我学习选择器的一个简易笔记,举一些简单的例子. 为了方便展示,我选择在内部的 ...
- JQuery_过滤选择器
一.基本过滤器 1.基本过滤器 过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头. <script type="text/ja ...
- JQuery_高级选择器
在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...
- Jquery_类选择器笔记
$("[id^=percent]").size() ^=:表示以什么开头 $=:表示以什么结尾 ~=:表示包含什么 id:表示按id选择
- jquery_简单介绍
jquery是一个优秀的javascript的库. jquery对象是通过jquery包装DOM对象产生的对象 配置jquery 在<head> <script src=&quo ...
- 黑马学习CSS之选择器 简单选择器,结合符,选择器,选择器组, 选择器优先级,名称空间
随机推荐
- redis 自启动
第一步: 在/etc/init.d/目录下建立一个名字为 redis 的启动脚本 cd /etc/init.d touch redis 然后在这个脚本中添加如下脚本 <注意修改自己的PIDFI ...
- net-snmp源码VS2013编译添加加密支持(OpenSSL)(在VS里配置编译OpenSSL)
net-snmp源码VS2013编译添加加密支持(OpenSSL) snmp v3 协议使用了基于用户的安全模型,具有认证和加密两个模块. 认证使用的算法是一般的消息摘要算法,例如MD5/SHA等.这 ...
- jQuery判断对象是否是函数
var show=function () { // body... } if($.isFunction(show)){ //是函数 }else{ //不是函数 }
- CentOS编译安装PHP 7.0
问题1: Cannot find ldap.h 解决办法: yum install openldapyum install openldap-devel 问题2: Cannot find ldap l ...
- JDBC-java访问数据库
定义:JDBC是一个独立于数据库管理系统的,通用的SQL数据库存取和操作的公共接口 (由JAVA类和接口组成,接口由各数据库厂家负责实现) 使用方法: 1.加载驱动 Class.forName(&qu ...
- 商人过河问题(DFS)
问题描述:3个商人带着3个仆人过河,过河的工具只有一艘小船,只能同时载两个人过河,包括划船的人.在河的任何一边,只要仆人的数量超过商人的数量,仆人就会联合起来将商人杀死并抢夺其财物,问商人应如何设计过 ...
- Excel应该这么玩——4、命名区域:搞定下拉框
前三篇都是讲的给Excel元素命名,本篇再介绍一种命名的使用方式:命名区域.区域是多个单元格的集合,可以是单行.单列或者类似表格的单元格矩阵,也可以是不连续的多个单元格,但很少用到.当然,一个单元格也 ...
- C# property简介
property专属的关键字就只有value.其他的性质实现都是用其他的方法的组合.property通过对一系列方法的灵活组合应用,能够间接地对私有的成员变量进行赋值操作和得到值.因为是间接地,私有变 ...
- 文件上传插件uploadify详解
官网:http://www.uploadify.com/ 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上 ...
- CSS:opacity 的取值范围是 0~1
CSS:opacity 的取值范围是 0~1,难怪设置为 1~100 看不到效果.