简单介绍一下什么是选择器:选择器是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. 201771010126 王燕《面向对象程序设计(Java)》第十二周学习总结

    实验十二  图形程序设计 实验时间 2018-11-14 1.实验目的与要求 (1) 掌握Java GUI中框架创建及属性设置中常用类的API: 创建空框架 . 在Java中,常采用框架(Frame) ...

  2. ajax一些东西

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  3. gc笔记2

    空间分配担保:在发生MinorGC之前,虚拟机会检查老年代最大连续可用是否大于新生代所有对象的空间,如果这个条件成立,则minorgc时安全的

  4. RabbitMQ in Action (2): Running and administering Rabbit

    Server management the Erlang node and the Erlang application Starting nodes multiple Erlang applicat ...

  5. ABP入门系列(2)——领域层创建实体

    ABP入门系列目录--学习Abp框架之实操演练 这一节我们主要和领域层打交道.首先我们要对ABP的体系结构以及从模板创建的解决方案进行一一对应.网上有代码生成器去简化我们这一步的任务,但是不建议初学者 ...

  6. ABP入门系列(17)——使用ABP集成的邮件系统发送邮件

    ABP中对邮件的封装主要集成在Abp.Net.Mail和Abp.Net.Mail.Smtp命名空间下,相应源码在此. #一.Abp集成的邮件模块是如何实现的 分析可以看出主要由以下几个核心类组成: E ...

  7. Signed Distance Field Shadow in Unity

    0x00 前言 最近读到了一个今年GDC上很棒的分享,是Sebastian Aaltonen带来的利用Ray-tracing实现一些有趣的效果的分享. 其中有一段他介绍到了对Signed Distan ...

  8. OSGi解决的问题

    osgi最明显的缺陷 bundle尽管可以为隔离的服务建立独立生命周期管理的热部署方式,以及明确的服务导出和导入依赖能力,但是其最终基于jvm,无法对bundle对应的服务实现计算资源的隔离,一个服务 ...

  9. ansible基础-理解篇

    1. 介绍 要说现在的部署工具,ansible可以说家喻户晓了. ansible是一个开源软件,用于软件供应.配置管理.应用部署.ansible可以通过SSH.remote PowerShell.其他 ...

  10. [Swift]LeetCode930. 和相同的二元子数组 | Binary Subarrays With Sum

    In an array A of 0s and 1s, how many non-empty subarrays have sum S? Example 1: Input: A = [1,0,1,0, ...