欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery——选择器

程序员文章站 2022-05-02 23:46:45
简单介绍一下什么是选择器:选择器是CSS样式中用来选择页面元素的一个特有的方式,而JQuery的选择器同样也是如此,JQuery的选择器简单的分为一下这几种:1.常用的CSS选择器 标签选择器:E{ CSS规则 } E 代表页面上所有的标签 ID选择器: #ID{ CSS规则 } #号代表是ID(i ......

  简单介绍一下什么是选择器:选择器是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> 元素

 

  其实选择器这种技术还需要多去练习,练习多了自然就会了,贵在练习有很多细节部分还是需要得自己去领悟