JQuery——选择器
简单介绍一下什么是选择器:选择器是CSS样式中用来选择页面元素的一个特有的方式,而JQuery的选择器同样也是如此,JQuery的选择器简单的分为一下这几种:1.常用的CSS选择器
标签选择器:E{ CSS规则 } E 代表页面上所有的标签
ID选择器: #ID{ CSS规则 } #号代表是ID(identity)的意思,也就是身份 注意:在一个页面上只能出现一个ID 且ID永不重复,如果页面上有两个ID那个选择器会自动匹配第一个名为ID的元素
类选择器: .class{ CSS规则 } .代表Class 且 . 必须是英文状态,不能是 。开头否则无效
群组选择器: E,F { CSS规则 } 群组选择器中间以空格隔开,可以是多个中间必须以,号隔开
后代选择器:E F { CSS规则 } 后代选择器在两个名字中间加上空格,以空格为分割,后代选择器是取 子孙...等后面所有的元素
第二个就是JQuery的基本选择器,简单叙述一下,$ 符号 该符号代表JQuery ,在前缀面前加有$符号就代表就JQuery元素,当然如果直接打出JQuery也可以使用只不过JQuery的缩写就是 $ 符号,就是键盘上面的小4 按住Shift键 + 4就可以打出$符号 (必须是英文状态在才可以的)
基本选择器分为 5 种
第一个就是 标签选择器 $('input') 返回的元素是集合元素, $('input') 代表的意思就是 JQuery('Input') 说到这里要重点提醒一下大家,
很多人不理解为什么要用括号括起来:JQuery大家都知道他是JS的库中的一部分,也就是说JQuery是别人封装号的一个方法,JQuery也可以说是一个函数,委托都可以,那么既然是函数,是方法那方法大家都知道方法要()括起来才能使用,所以在这里$('input')的意思就是寻找页面上有没有input标签的元素
有很多人可能问那为什么要加上 '' 号呢,很简单选择器里都是以字符串的形式去查找,当然也有很多是可以不用带括号的,比如this 当然对象,再比如转换元素等等,当然既然是Javascript的库那么就当然没有那么的简单了,每个人都有很多东西要去学习啦
第二个就是ID选择器: $('#ID')跟CSS选择器差不多,只不过用JQuery的方式去写的话就是加上JQuery符号后面跟('')去使用,原理跟CSS一样,有CSS基础的人当然也很容易上手去学习
第三个就是类选择: $('.class') 代表的意思就是用JQuery就筛选一下页面元素有没有名为class类的元素
第四个就是群组群组选择器:$('div,span,p') 这个就不一一解释了 提一下就是多个元素以逗号隔开
最后一个当然就是我们的通配符选择器:$('*') 意思就是选取页面上所以的元素 通配符 就是所有 全部
3.层次选择器
$(' div span') 选取 div 中所有的 soan选择器
$(' div>span ') 选取div元素下的span子元素,这里就要注意是子元素,不是子孙 ,在选择器中不要随随便便的敲空格,一个小小的空格就可能导致你筛选出来的结果不是想要的结果,所以使用的时候要谨慎,谨慎
$(div+p") 意为选取 div 标签下的 p 标签 只选择其下,下一级,没有多余的集
$( '#one~div' ) 选取ID为one的后面所有的div兄弟 ~代表所有跟+相反, +只取下一集 ~ 取所以
4.JQuery的基本过滤选择器
$(':first') :意思就是过滤,当然过滤要有一定的前提,如果页面上没有元素那么就无法过滤,过滤意思就是,在原有结果上过滤出一个结果。
$('div:first') 选择所以div元素下的第一个div ,在这里重点提醒如果查询出结果不是你想要的那么请检查在选择器中是否有空格 因为一旦有空格意义就变了 因为如果你不给值的情况下 空格代表 * 号 * 的意思就是通配,所有 这下就明白了吧
当然有了第一个那么当然也有最后一个 $( 'div:last' ) 选取所有div 元素最后一个 div 与 first相反
$('input:not(.one)') 选取class不是one的input元素
$('input:even') 选取索引是偶数的 input 元素 (索引从0开始)
有偶数当然也就有奇数 $('input:odd')取索引为基数的input元素(索引从0开始)
$('input:eq(5) ') 选取元素索引为5的 input元素
$('p:gt(2)') 选取索引大于2的p标签
$('p:lt(1)') 选取索引小于1的p标签
$(':header')选取所有标题元素 标题元素有 <h1> <h2> <h3>……
$('div:animated ') 选取正在执行动画的<div> 元素
其实选择器这种技术还需要多去练习,练习多了自然就会了,贵在练习有很多细节部分还是需要得自己去领悟
JQuery——选择器的更多相关文章
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- jQuery的案例及必知重要的jQuery选择器
Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器续1
在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...
随机推荐
- spring-cloud-Zuul学习(二)【基础篇】--典型配置【重新定义spring cloud实践】
-- 2019-04-15 20:22:34 引言 上一节是一个最基本的zuul网关实例,它是整个spring-cloud生态里面“路由-服务”的一个缩影,后续也就是锦上添花.这节主要讲述zuul的一 ...
- [LeetCode] Race Car 赛车
Your car starts at position 0 and speed +1 on an infinite number line. (Your car can go into negati ...
- SpringAop注解实现日志的存储
一.介绍 1.AOP的作用 在OOP中,正是这种分散在各处且与对象核心功能无关的代码(横切代码)的存在,使得模块复用难度增加.AOP则将封装好的对象剖开,找出其中对多个对象产生影响的公共行为,并将其封 ...
- Vue 中动态添加class(使用v-bind:class)
今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...
- 整理4种Vue组件通信方式
整理4种Vue组件通信方式 重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白. 父子组件的通信 非父子组件的eventBus通信 ...
- [Swift]LeetCode345. 反转字符串中的元音字母 | Reverse Vowels of a String
Write a function that takes a string as input and reverse only the vowels of a string. Example 1: In ...
- [Swift]LeetCode754. 到达终点数字 | Reach a Number
You are standing at position 0 on an infinite number line. There is a goal at position target. On ea ...
- [Swift]LeetCode973. 最接近原点的 K 个点 | K Closest Points to Origin
We have a list of points on the plane. Find the K closest points to the origin (0, 0). (Here, the d ...
- mybatis xml < >
[参考文章]:mybatis 中的 xml 配置文件中 ‘<’. ‘>’ 处理 1.使用转义字符将 ‘<’. ‘>’ 替换掉 描述 字符 转义字符小于号 < <大于 ...
- 优化之Aggregator组件
Aggregator组件通常会降低性能,因为它们必须在处理数据之前对数据进行分组 Aggregator组件需要额外的内存来保存中间组结果 通过如下方式对Aggregator组件进行优化 简化group ...