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对 ...
随机推荐
- 推荐一些iOS博客
公司性质的: 公司 地址 美团 http://tech.meituan.com/archives 个人博客: 博主 地址 (斜体的技术文章较少) 王巍(onevcat) https://onevcat ...
- [LeetCode] New 21 Game 新二十一点游戏
Alice plays the following game, loosely based on the card game "21". Alice starts with 0 p ...
- win10 vscode使用 智能提示
1.没有第三方库的智能提示 参考:https://code.visualstudio.com/docs/python/editing 1.点开Settings 2.搜索加添加 3.添加后的内容 然后就 ...
- ES5 常用 语法(object Arrary 函数绑定this指向)
ES object 扩展 ES object 扩展1. <!DOCTYPE html> <html> <head> <link rel="short ...
- linux操作命令之帮助命令
一.man命令的帮助: man 命令名 获取指定命令的帮助 例如man ls 查看ls的帮助 man man可以看到man有8个级别的man帮助命令使用场景 1.查看命令的帮助 2.查看可被内核调用的 ...
- 几个比较常用的jar包
implementation 'com.android.support:recyclerview-v7:26+'implementation 'org.greenrobot:eventbus:3.1. ...
- JavaEE开发之Spring中的条件注解、组合注解与元注解
上篇博客我们详细的聊了<JavaEE开发之Spring中的多线程编程以及任务定时器详解>,本篇博客我们就来聊聊条件注解@Conditional以及组合条件.条件注解说简单点就是根据特定的条 ...
- IOS微信点击input弹出输入法,关闭后页面留白解决方案
场景:IOS用微信点击input框弹出输入法后 不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局 解决方法: 给input添加 ...
- [Swift]LeetCode163. 缺失区间 $ Missing Ranges
Given a sorted integer array where the range of elements are [0, 99] inclusive, return its missing r ...
- [Swift]LeetCode445. 两数相加 II | Add Two Numbers II
You are given two non-empty linked lists representing two non-negative integers. The most significan ...