`
flj643213995
  • 浏览: 12206 次
  • 性别: Icon_minigender_2
  • 来自: 长沙
社区版块
存档分类
最新评论

jQuery选择器类型

阅读更多
    jQuery选择器应该是学习jQuery的最基本的知识了,下面介绍一下各个类型的选择器的怎么写。

    1、基本选择器:这是最常用的选择器
       #id:根基给定的id匹配一个元素
       .class:根据类名匹配元素
       element:直接写出标签名,根据给定的元素名匹配元素
       *:通配符
       selector1,selector2,...,selectorN:将每一个选择器匹配的元素合并后一起返回

    2、层次选择器:根据层次之间的特定关系来获取元素
       $("ancestor descendant"):选取ancestor元素里的所有descendant后代元素
       $("parent>child"):选取parent元素下的child(子)元素
       $("pre+next"):选取紧接在pre后的next(下一个)元素
       $("prev~siblings"):选取prev元素之后的所有siblings(同辈)元素

    3、过滤选择器:基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单对象属性过滤
       基本过滤选择器:
                  :first :选择第一元素
                  :last:最后一个元素
                  :not(selector):去除所有与给定选择器匹配的元素
                  :even:偶数
                  :odd:奇数
                  :eq(index):选取索引等于index的元素(index从0开始)
                  :gt(index):索引大于index
                  :lt(index):索引小于index
                  :hender:选取所有标题元素
                  :animated:选取当前正在执行动画的元素
                  :focus:选取当前获取焦点的元素
       内容过滤选择器:
                  :contains(text):选取含有文本内容为“text”的元素
                  :empty:选取不包含子元素或者文本的空元素
                  :has(selector):选取含有选择器所匹配的元素的元素
                  :parent:选取含有子元素或者文本的元素
       可见性过滤选择器:
                  :hidden:选取所有不可见的元素
                  :visible:选取所有可见的元素
       属性过滤选取器:
                  [attribute]:选取拥有此属性的元素
                  [attribute=value]:属性值为value的元素
                  [attribute!=value]:属性值不等于value的元素
                  [attribute^=value]:属性值以value开头的元素
                  [attribute$=value]:属性值以value结尾的元素
                  [attribute*=value]:属性值含有value的元素
                  [attribute|=value]:属性等于给定字符串或以该字符串为前缀的元素(如果为前缀的话,该字符串之后要有“-”连字符)
                  [attribute~=value]:属性用空格分隔的值中包含有一个给定值的元素
                  [attribute1][attribute2][attributeN]:几个条件同时符合的元素
       子元素过滤选择器:
                  :nth-child(index/even/odd/equation):选取每个父元素下的第index个子元素或者奇偶元素(index从1开始)
                  :first-child:父元素中第一个子元素
                  :last-child:父元素中最后一个子元素
                  :only-child:如果某个元素是它父元素的唯一子类将会匹配
       表单对象属性过滤器:
                  :enabled:选取所有可用元素
                  :disabled:选取所有不可用元素
                  :checked:选取所有被选中的元素(单选框、复选框)
                  :select:选取所有被选中的选项元素(下拉列表)
   
    4、表单选择器
       :input:选取所有<input><textarea><select><button>元素
       :text:所有单行文本框元素
       :password:所有密码框
       :radio:所有单选框
       :checkbox:所有多选框
       :submit:所有提交按钮
       :image:所有图像按钮
       :reset:所有重置按钮
       :button:所有的按钮
       :file:所有的上传域
       :hidden:所有不可见元素


    选择器中有好多前边都带有冒号,使用的时候千万注意是否要加空格,例如:
             $("div :input")   指的是在div下的所有<input><textatea><select><button>元素
             $("div:input")    指的是在div下的为input标签的元素


     在jQuery中还有一些特使的字符,如$、[、{ 等,如果在选择器中没法识别应该用转译字符“\\”将其转译再使用。


    选择器的灵活应用可以使代码干净整洁,掌握好选择器是一个开发人员的基本素质。大家一起努力啦!fighting!
    

分享到:
评论

相关推荐

    详解强大的jQuery选择器之基本选择器、层次选择器

    jQuery允许开发者使用从CSS1到CSS3... jQuery选择器类型 jQuery选择器主要分为四类: 1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择器 由于过滤选择器内容比较多,因此本文仅介绍前两种,下篇文章将介绍后两

    JQuery各种选择器详解

    JQuery选择器,xpath类型等的选择器

    jQuery多类型范围选择器插件

    range-picker是一款支持多种类型数据的jQuery范围选择器插件。该范围选择器支持日期范围,星期范围,月份范围,整数范围等。并且可以设置为只支持单向选择,或双向选择的范围选择器。

    Jquery选择器大全

    介绍Jquery中选择器的类型,超级全面的

    jQuery date_input日期选择器

    jQuery date_input日期选择器 发一JQUERY插件jQuery date_input,是日期选择器..... 这个选择器是我已经修改过的,官方下载的选择界面是英文的,然后我把它又汉化了一下..根据中国国情,又修改了日期格式!! 效果图演示...

    jquery包含多种类型的日期选择器.zip

    jquery包含多种类型的日期选择器是一款jquery ui datepicker日期选择器包含多种类型日期选择。

    jquery选择器大全 全面详解jquery选择器

    选择器并没有一个固定的定义,在某种程度...现在我们正式进入jQuery选择器的学习。根据选择器的功能习惯将选择器进行分类,下面将不同类型的分类器进行分类,并且分别进行解释说明,使读者达到掌握程度。一、基本选择器

    jQuery 选择器

    jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”(或选择)HTML 元素。 它基于已经存在的 #id 选择器 jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。 页面中元素的 id 应该是唯一的...

    jquery_datepicker日期选择器包含多种类型日期选择

    jquery_datepicker日期选择器包含多种类型日期选择

    一款jquery datepicker日期选择器包含多种类型.zip

    一款jquery datepicker日期选择器包含多种类型.zip 一款jquery datepicker日期选择器包含多种类型.zip 一款jquery datepicker日期选择器包含多种类型.zip

    jquery包含多种类型的日期选择器特效代码

    jquery包含多种类型的日期选择器是一款jquery ui datepicker日期选择器包含多种类型日期选择。

    rangepicker是一款支持多种类型数据的jQuery范围选择器插件

    range-picker是一款支持多种类型数据的jQuery范围选择器插件。该范围选择器支持日期范围,星期范围,月份范围,整数范围等。并且可以设置为只支持单向选择,或双向选择的范围选择器。

    jQuery表单选择器用法详解

    表单选择器 1. :button Selector  1. jQuery(“:button”)  2. 选择所有元素和类型为按钮的元素 2. :checkbox Selector  1. jQuery(“:checkbox”)  2. 选择所有元素和类型为复选框的元素 3. :checked ...

    JQuery权威指南源代码

    使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤选择器 使用jQuery可见性过滤...

    jQuery权威指南-源代码

    2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容过滤选择器/25 2.2.5 可见性过滤选择器/27 2.2.6 属性过滤选择器/28 2.2.7 子元素过滤选择器/30 ...

    jquery-mobile-datepicker:用于日期月份选择器的 JQueryMobile 插件

    此版本的日期选择器已使用JQuery Mobile v1.4.2和JQuery v1.10.2进行测试 现场演示 查看 JSFiddle 中的现场演示:[单击此处]( ) 如何使用? 假设这些是您的输入:``` // 日期选择器// 月份选择器 To call jquery-...

    jQuery选择器之属性筛选选择器用法详解

    在这么多属性选择器中[attr=”value”]和[attr*=”value”]是最实用的 [attr=”value”]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type=”text”],input[type=”checkbox”]等 [attr*=”...

    jQuery实现的多级级联下拉列表

    基于jQuery实现的多级级联下拉列表,例子中使用数据类型为JSON

    column-selector:jQuery 列选择器

    选择器可以采用多种类型的参数来选择列,例如关键字、数字索引和方程。 这些在 API 部分有更详细的解释。 应用程序接口 这个插件向 jQuery 选择器 API 添加了一个新的伪选择器,称为nth-col 。 此外,它还向名为...

Global site tag (gtag.js) - Google Analytics