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允许开发者使用从CSS1到CSS3... jQuery选择器类型 jQuery选择器主要分为四类: 1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择器 由于过滤选择器内容比较多,因此本文仅介绍前两种,下篇文章将介绍后两
JQuery选择器,xpath类型等的选择器
range-picker是一款支持多种类型数据的jQuery范围选择器插件。该范围选择器支持日期范围,星期范围,月份范围,整数范围等。并且可以设置为只支持单向选择,或双向选择的范围选择器。
介绍Jquery中选择器的类型,超级全面的
jQuery date_input日期选择器 发一JQUERY插件jQuery date_input,是日期选择器..... 这个选择器是我已经修改过的,官方下载的选择界面是英文的,然后我把它又汉化了一下..根据中国国情,又修改了日期格式!! 效果图演示...
jquery包含多种类型的日期选择器是一款jquery ui datepicker日期选择器包含多种类型日期选择。
选择器并没有一个固定的定义,在某种程度...现在我们正式进入jQuery选择器的学习。根据选择器的功能习惯将选择器进行分类,下面将不同类型的分类器进行分类,并且分别进行解释说明,使读者达到掌握程度。一、基本选择器
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”(或选择)HTML 元素。 它基于已经存在的 #id 选择器 jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。 页面中元素的 id 应该是唯一的...
jquery_datepicker日期选择器包含多种类型日期选择
一款jquery datepicker日期选择器包含多种类型.zip 一款jquery datepicker日期选择器包含多种类型.zip 一款jquery datepicker日期选择器包含多种类型.zip
jquery包含多种类型的日期选择器是一款jquery ui datepicker日期选择器包含多种类型日期选择。
range-picker是一款支持多种类型数据的jQuery范围选择器插件。该范围选择器支持日期范围,星期范围,月份范围,整数范围等。并且可以设置为只支持单向选择,或双向选择的范围选择器。
表单选择器 1. :button Selector 1. jQuery(“:button”) 2. 选择所有元素和类型为按钮的元素 2. :checkbox Selector 1. jQuery(“:checkbox”) 2. 选择所有元素和类型为复选框的元素 3. :checked ...
使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 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 v1.4.2和JQuery v1.10.2进行测试 现场演示 查看 JSFiddle 中的现场演示:[单击此处]( ) 如何使用? 假设这些是您的输入:``` // 日期选择器// 月份选择器 To call jquery-...
在这么多属性选择器中[attr=”value”]和[attr*=”value”]是最实用的 [attr=”value”]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type=”text”],input[type=”checkbox”]等 [attr*=”...
基于jQuery实现的多级级联下拉列表,例子中使用数据类型为JSON
选择器可以采用多种类型的参数来选择列,例如关键字、数字索引和方程。 这些在 API 部分有更详细的解释。 应用程序接口 这个插件向 jQuery 选择器 API 添加了一个新的伪选择器,称为nth-col 。 此外,它还向名为...