zoukankan      html  css  js  c++  java
  • jquery selector

    jquery选择器的优势:

    (1) 代码更简单;

    (2) 完善的检测机制。

     

    根据所获取页面中元素的不同,可以将jquery选择器分为:

    基本选择器、

    层次选择器、

    过滤选择器、

    表单选择器。

     

    其中,过滤选择器又可分为:

    简单过滤选择器、

    内容过滤选择器、

    可见性过滤选择器、

    属性过滤选择器、

    子元素过滤选择器、

    表单对象属性过滤器。

     

    一、基本选择器

    基本选择器是jquery中使用最频繁的选择器,它由元素id、class、元素名、多个选择符组成,通过基本选择器可以实现大多数页面元素的查找。

    #id:根据给定的id匹配一个元素,返回单个元素;

    element:根据给定的元素名匹配所有元素,返回元素集合;

    .class:根据给定的类匹配元素,返回元素集合;

    *:匹配所有元素,返回元素集合;

    selector1,selector2:将每一个选择器匹配到的元素合并后一起返回,返回元素集合。

     

    二、层次选择器

    层次选择器通过dom元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中某类关系可以方便快捷地定位元素。

    ancestor descedant:根据祖先元素匹配所有的后代元素,返回元素集合;

    parent>child:根据父元素匹配所有的子元素,返回元素集合;

    prev+next:匹配所有紧接在prev元素后的相邻元素,返回元素集合;

    prev~siblings:匹配prev元素之后的所有兄弟元素,返回元素集合;

    注意:ancestor descedant与parent>child所选择的元素集合是不同的,前者的层次关系是祖先与后代,而后者是父子关系;另外,prev+next可以使用.next()代替,而prev~siblings可以使用nextAll()代替。

    siblings()方法与选择器prev~slblings区别在于,前者获取全部的相邻元素,不分前后,而后者仅获取标记后面全面相邻元素,不能获取前面部分。

     

    三、过滤选择器

    1、简单过滤选择器

    first()或:first,获取第一个元素;

    last()或:last,获取最后一个元素;

    :not(selector),获取除给定选择器外的所有元素;

    :even,获取所有索引值为偶数的元素,索引号从0开始; 

    :odd,获取所有索引值为奇数的元素,索引号从0开始;

    :eq(index),获取指定索引值的元素,索引号从0开始;

    :gt(index),获取所有大于给定索引值的元素,索引号从0开始;

    :lt(index),获取所有小于给定索引值的元素,索引号从0开始;

    :header,获取所有标题类型的元素,如h1、h2.....;

    :animated,获取正在执行动画效果的元素。

    2、内容过滤选择器

    :contains(text),获取包含给定文本的元素;

    :empty,获取所有不包含子元素或者文本的空元素;

    :has(selector),获取含有选择器所匹配的元素的元素;

    :parent,获取含有子元素或者文本的元素;

    注意:在:contains(text)内容过滤选择器中,如果是查找字母,则有大小写的区别。

    3、可见性过滤选择器

    :hidden,获取所有不可见元素,或者type为hidden的元素;

    :visible,获取所有的可见元素;

    注意  :hideen选择器所选择的不仅包括样式为display:none所有元素,而且还包括属性type='hidden'和样式为visiblity:hidden的所有元素。

    4、属性过滤选择器

    [attr],获取包含给定属性的元素;

    [attr=value],获取等于给定的属性是某个特定值的元素;

    [attr!=value],获取不等于给定的属性是某个特定值的元素;

    [attr^=value],获取给定的属性是以某些值开始的元素;

    [attr$=value],获取给定的属性是以某些值结尾的元素;

    [attr*=value],获取给定的属性是以包含某些值的元素;

    [selectro1][selector2][selectorn],获取满足多个条件的复合属性的元素;

    5、子元素过滤选择器

    :nth-child(eq | even | odd | index),获取每个父元素下的特定位置元素,索引号从1开始;

    :first-child,获取每个父元素下的第一个子元素;

    :last-child,获取每个父元素下的最后一个子元素;

    :only-child,获取每个父元素下的仅有一个子元素;

    6、表单对象属性过滤器

    :enabled,获取表单中所有属性为可用的元素;

    :disabled,获取表单中所有属性为不可用的元素;

    :checked,获取表单中所有被选中的元素;

    :selected,获取表单中所有被选中option的元素;

     

    四、表单选择器

    :input,获取所有input、textarea、select;

    :text,获取所有单行文本框;

    :password,获取所有密码框;

    :radio,获取所有单选按钮;

    :checkbox,获取所有复选框;

    :submit,获取所有提交按钮;

    :image,获取所有图像域 ;

    :reset,获取所有重置按钮;

    :button,获取所有按钮;

    :file,获取所有文件域;

  • 相关阅读:
    面试题 31: 求子数组的最大和
    [面试] 结构体占用空间的问题,内存对齐~! 真的懂了,cpu取加快速度,省空间来考虑。
    [计算机] 32768~32767 计算机中的 1 表示
    C#跨线程调用窗体控件
    合并字节数组
    将汉字转化为2位大写的16进制Unicode
    关公与子龙两大杀手
    早年的J2EE笔记
    给小组新成员的一份信
    c++虚函数详解
  • 原文地址:https://www.cnblogs.com/pengjielee/p/jquery-selector.html
Copyright © 2011-2022 走看看