简单介绍一下什么是选择器:选择器是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——选择器的更多相关文章

  1. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  2. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  3. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  4. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  5. 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...

  6. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  7. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  8. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  9. jQuery-1.9.1源码分析系列(二)jQuery选择器

    1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...

  10. jQuery-1.9.1源码分析系列(二)jQuery选择器续1

    在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...

随机推荐

  1. windows服务定时任务

    其实定时任务时不时会碰到,只不过解决方案也不是只有一个,网上也有很多文章,但是没有一篇说得很清楚,尤其是安装环节,今天就着重说一下安装, 其他步骤带过,C#开发windows服务,开发,安装,调试 1 ...

  2. 漏测BUG LIst

    5. 接口设计问题 -  主从存在延时,当两个接口需要一个主库,一个从库的时候,可能会出问题,时时性 4. 开发的接口文档也得进行简单的测试,根据产品文档/业务测试接口(针对问题2) 3. 需要上的课 ...

  3. Java_异常处理

    这篇我们聊聊java中的异常.首先我们要知道什么是异常? Exception: exception翻译过来就是“意外”的意思.事实上,异常的本质就是程序的错误,包括程序逻辑错误和系统错误.错误在编写程 ...

  4. npm install命令详解

    -S,–save 安装包信息将加到dependencies(生产阶段的依赖) npm install --save 或 npm install -S -D, –save-dev 安装包信息将加到dev ...

  5. laravel之url跳转

    1.先写一下路由 2.在写a标签跳转

  6. javascript 零碎笔记

    使用 live-serve 这个工具,可以热更新 js 代码 逻辑运算符: 常用于单边条件判断,比如 真判断(获取子属性) {error && <div className=&q ...

  7. Hadoop集群搭建-full完全分布式(三)

    环境:Hadoop-2.8.5 .centos7.jdk1.8 一.步骤 1).4台centos虚拟机 2). 将hadoop配置修改为完全分布式 3). 启动完全分布式集群 4). 在完全分布式集群 ...

  8. js封装一个模块

    (function(){ var defaultSetting = { color:'red' } Setting (options) { var self = this; self = Object ...

  9. Apache Storm 核心概念

    前言: Storm读取实时数据流,并传递给处理单元,最终输出处理后的数据. 下图描述了storm的处理数据的主要结构. 元组(Tuple) :       元组是Storm提供的一个轻量级的数据格式, ...

  10. Android程序员必知必会的网络通信传输层协议——UDP和TCP

    1.点评 互联网发展至今已经高度发达,而对于互联网应用(尤其即时通讯技术这一块)的开发者来说,网络编程是基础中的基础,只有更好地理解相关基础知识,对于应用层的开发才能做到游刃有余. 对于Android ...