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对 ...
随机推荐
- LeetCode 80 Remove Duplicates from Sorted Array II [Array/auto] <c++>
LeetCode 80 Remove Duplicates from Sorted Array II [Array/auto] <c++> 给出排序好的一维数组,如果一个元素重复出现的次数 ...
- 可道云kodexplorer网盘未清理造成linux服务器爆满的解决方法
今天登陆宝塔面板的时候发现硬盘占用37GB,已经变红提示我空间不足了,惊呆了, 还以为是宝塔抽风了,去远程连接服务器看了一下,懵逼了. df -h 查看挂载目录使用情况 还是不相信现实的我又重启了一下 ...
- React的类型检测PropTypes
React.propTypes:React.PropTypes 提供很多验证器来验证传入数据的有效性,当向props传入无效数据时,JavaScript 控制台会抛出警告. ; class MyTit ...
- [Codeforces Round #516][Codeforces 1063C/1064E. Dwarves, Hats and Extrasensory Abilities]
题目链接:1063C - Dwarves, Hats and Extrasensory Abilities/1064E - Dwarves, Hats and Extrasensory Abiliti ...
- MapReduce的工作原理
MapReduce简介 MapReduce是一种并行可扩展计算模型,并且有较好的容错性,主要解决海量离线数据的批处理.实现下面目标 ★ 易于编程 ★ 良好的扩展性 ★ 高容错性 MapReduce ...
- python绘制图
如何用python绘制图表 摘要: 使用python绘制简单的图表,包括折线图.柱状图.条形图.饼图.散点图.气泡图.箱线图.直方图等. 前言 本文介绍如果使用python汇总常用的图表,与Excel ...
- 带parent指针的successor求解
题目: 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点(不存在重复数据).树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 思路: 如果当前节点有右孩子,则下一个节点是右孩子中 ...
- Java软件工程师面试题:Java运行时异常与一般异常有什么不一样?
异常表示程序运行过程中可能出现的非正常状态,运行时异常表示虚拟机的通常操作中可能遇到的异常,是一种常见运行错误.java编译器要求方法必须声明抛出可能发生的非运行时异常,但是并不要求必须声明抛出未被捕 ...
- InputStream和Reader,FileInputStream和 FileReader的区别
一.InputStream和Reader的区别 InputStream和Reader都可以用来读数据(从文件中读取数据或从Socket中读取数据),最主要的区别如下: InputStream用来读取二 ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...