`

Jquery(一) 选择器

 
阅读更多

不是基于最新版本,有待更新。

 优势:

1.写法简洁

2.支持css1到css3

3.完善的处理机制。如避免不必要的错误和空的判断

 

元素查找方法 

 1.id选择器:        $("#myELement") 

 2.element选择器(遍历html元素):  $("div")   

 3.class选择器:  $(".myClass")  

 4. * 选择器(遍历所有元素): $("*")         

 5.并列选择器:   例如:将p元素和div元素的margin设为0   =>    $('p, div').css('margin', '0');

 

层叠选择器: 

 1.$("div span")         选择所有的div元素中的span元素 

 2.parent > child(直系子元素):   $('div > span').css('color', '#FF0000'); 

 3.prev + next(下一个兄弟元素,等同于next()方法):

        $('.item + div')   => 选取class为item的下一个div兄弟元素

 4.prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法)

 例如: $('.inside ~ div')  =>   选取class为inside之后的所有div兄弟元素

 

基本过滤选择器: 

选择器 描述 返回 实例
:first 选取第一个元素 单个元素 $("tr:first")  
:last 选取最后一个元素 单个元素 $("tr:last")
:not(selector) 去除所有给定选择匹配的元素 集合元素 $(input:not(.myClass))
:even 选取索引是偶数的所有元素 集合元素 $("tr:even")
:odd 选取索引是奇数的所有元素 集合元素 $("tr:odd")
eq:(index) 选取索引等于index的元素 集合元素 $("td:eq(1)")
:gt(index) 选取索引大于index的元素 集合元素 $("td:gt(4)")
:lt(index) 选取索引小于index的元素 集合元素 $("td:lt(1)")
:header 选取所有的标题元素 集合元素 $(":header") 
:animated 选择当前正在执行动画的所有元素 集合元素 $("div:animated") 
:focus 选取当前获取焦点的元素 集合元素 $(":focus")

 

内容过滤选择器:

选择器 描述 返回 实例
 :contains(text)

 选取含有文本内容为text的元素

集合元素   $("div:contains('ss')")
 :empty  选取不包含子元素或者空元素  集合元素   $("td:empty")           选择所有的为空(也不包括文本节点)的td元素的数组 
 :has(selector)  选取含有选择器所匹配的元素的元素  集合元素   $("div:has(p)")        选择所有含有p标签的div元素 
 :parent  选取含有子元素或者文本的元素  集合元素   $("td:parent")          选择所有的以td为父节点的元素数组 

 

可视化过滤选择器:

选择器 描述 返回 实例
:hidden 选取所有不可见的元素 集合元素  $("div:hidden")        选择所有的被hidden的div元素 
:visible 选取所有可见的元素 集合元素  $("div:visible")        选择所有的可视化的div元素 

 

属性过滤选择器:

选择器 描述 返回 实例
[attribute] 选取拥有此属性的元素 集合元素 $("div[id]")              选择所有含有id属性的div元素 
[attribute=value] 选取属性的值为value的元素 集合元素 $("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素
[attribute!=value] 选取属性的值不为value的元素 集合元素 $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
[attribute^=value] 选取属性的值以value开头的元素 集合元素 $("input[name^='news']")         选择所有的name属性以'news'开头的input元素 
[attribute$=value] 选取属性的值以value结尾的元素 集合元素 $("input[name$='news']")         选择所有的name属性以'news'结尾的input元素 
[attribute*=value] 选取属性的值含有value的元素 集合元素 $("input[name*='man']")          选择所有的name属性包含'news'的input元素
[attribute|=value] 选取属性等于给定字符串或以改字符串为前缀(字符串后紧跟链接符'-')的元素 集合元素  
[attribute~=value] 选取属性用空格分隔的值中包含一个给定值的元素 集合元素  
[attribute1][attribute2][atrributeN] 用属性选择器合并一个复合属性选择器 集合元素 $("input[id][name$='man']")    可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

 

 

子元素过滤选择器:

选择器 描述 返回 实例
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素。index从1算起 集合元素 $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
:first-child 选取每个父元素的第一个元素 集合元素 $("div span:first-child")          返回所有的div元素的第一个子节点的数组
:last-child 选取每个父元素的最后一个元素 集合元素 $("div span:last-child")           返回所有的div元素的最后一个节点的数组 
:only-child 如果某个元素是它父元素中唯一的子元素,那么它将会被匹配 集合元素 $("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组

 

表单元素选择器:

选择器 描述 返回 实例
:input 选择所有的text input元素  集合元素  
:text 选择所有的表单输入元素 集合元素  
:password 选择所有的password input元素  集合元素  
:radio 选择所有的radio input元素  集合元素  
:checkbox  选择所有的checkbox input元素  集合元素  
:submit 选择所有的submit input元素  集合元素  
:image  选择所有的image input元素  集合元素  
:reset 选择所有的reset input元素  集合元素  
:button 选择所有的button input元素  集合元素  
:file 选择所有的file input元素  集合元素  
:hidden 选择所有类型为hidden的input元素或表单的隐藏域 集合元素  

 

          

表单元素过滤选择器:

选择器 描述 返回 实例
:enabled 选择所有的可操作的表单元素  集合元素  
:disabled   选择所有的不可操作的表单元素 集合元素  
:checked   选择所有的被checked的表单元素 集合元素 $("input :checked")
:selected 选取所有被选中的选项元素 集合元素 $("select option:selected") 选择所有的select 的子元素中被selected的元素

 

 

其他选择器

  待补充

 

 

 注意事项:

1.选择器中含有“。”、“#”、“(”、“]”等特殊字符

   转义:  例如: $("#id=\\#b")

2.属性选择器@符号问题

 jquery1.3.1版本中放弃了1.1.0版本遗留下来的@符号

3. 选择器中含有空格的注意事项

 待补充

 

 

 

css2 介绍参考:http://www.w3.org/TR/CSS2/selector.html

参考:http://www.cnblogs.com/hulang/archive/2011/01/12/1933771.html

 

分享到:
评论

相关推荐

    jQuery颜色选择器ColorPicker

    **jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...

    jquery周历选择器

    本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...

    jQuery时间选择器点击选择小时分钟代码

    在网页开发中,jQuery时间选择器是一个非常实用的工具,它允许用户通过点击来选取特定的小时和分钟,为表单输入提供了便利。这个“jQuery时间选择器点击选择小时分钟代码”很可能是一个实现这一功能的代码示例或者...

    一个简单的jQuery时间选择器

    【标题】"一个简单的jQuery时间选择器" 描述了如何使用jQuery库来创建一个用户友好的时间选择界面。在Web开发中,特别是涉及到用户输入时间的场景,如预订、会议安排等,拥有一个直观易用的时间选择器可以极大提升...

    基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器

    在提供的压缩包文件"lay-picker-master"中,我们可以推测这是一个基于jQuery的移动端选择器库,名为"lay-picker"。这个库可能包含了实现上述功能的源代码、示例、文档和其他资源。使用这个库,开发者可以快速集成到...

    jquery 城市选择器

    jQuery城市选择器就是解决这一需求的有效工具,它利用JavaScript和jQuery库,提供了一种便捷、高效的交互方式。本文将深入探讨jQuery城市选择器的实现原理、使用方法及其优势。 一、jQuery库基础 jQuery是一个轻量...

    jQuery基础选择器练习题

    在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。

    jquery日期选择器

    3. **初始化插件**:使用jQuery选择器选择该元素,然后调用日期选择器插件的初始化方法,例如`$(selector).dateInput(options);`,其中`options`是可选的配置对象。 4. **配置选项**:根据需求设置日期选择器的配置...

    jquery城市选择器

    jQuery城市选择器是一款基于JavaScript库jQuery的插件,其主要目的是简化用户在网页上进行城市选择的过程。它支持中文和拼音输入查询,提供标签页展示,极大地提升了用户体验。在"abcde"标签页的展示方式下,用户...

    JQuery选择器测试 离线版

    这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用,由一位国外专家创建,并进行了轻微的修改。** 在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性...

    jquery双向选择器代码

    首先,理解jQuery选择器的基本概念是关键。jQuery提供了多种内置的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(element)等,它们用于定位HTML文档中的特定元素。双向选择器则在此基础上增加了更...

    Jquery颜色选择器

    使用这个插件,你需要在HTML文件中引用jQuery库、ColorPicker插件的JS和CSS文件,然后在适当的地方通过jQuery选择器调用插件,并根据需要配置选项。 例如: ```html <!DOCTYPE html> <title>jQuery颜色选择器...

    jQuery选择器全解.

    本文将深入解析jQuery选择器的功能与使用方法,帮助读者掌握这一重要的前端技术。 #### 二、jQuery选择器概览 jQuery选择器主要分为两大类:“选择”和“过滤”。选择器用于指定目标元素,而过滤器则进一步细化...

    jquery样式选择器插件源码demo

    对于初学者,这是一个极好的学习资源,通过研究这个插件,可以加深对jQuery选择器的理解,并掌握编写高效JavaScript代码的技巧。而对于经验丰富的开发者,它提供了一个有趣的挑战,去挖掘和分析代码中的创新之处。

    jquery颜色选择器源码

    1. jQuery选择器和DOM操作:如何使用jQuery选择特定的HTML元素,如`.addClass()`, `.removeClass()`, `.val()`等方法来改变元素的样式和内容。 2. 事件处理:掌握`.on()`, `.click()`, `.change()`等事件监听器的...

    jQuery颜色选择器

    6. **使用示例**:在HTML中,你只需要创建一个`<div>`或其他元素作为颜色选择器的触发器,并通过jQuery选择器和`.colpick()`方法初始化插件。例如: ```javascript $('#colorPicker').colpick({ layout: 'hex', ...

    jquery 颜色选择器,使用简单

    jQuery,一个流行的JavaScript库,提供了许多插件来简化开发人员的工作,其中包括颜色选择器。本篇文章将深入探讨如何利用jQuery轻松实现颜色选择功能,以提高用户界面的交互性。 一、jQuery颜色选择器简介 jQuery...

    jQuery日期选择器插件

    **jQuery日期选择器插件**是一种广泛应用于网页开发中的组件,它允许用户通过交互式的日历界面方便地选择日期。这种插件极大地提高了用户在网页上输入日期的体验,尤其适用于需要用户输入生日、预约日期或者截止日期...

    城市选择器jquery

    jquery 城市选择器代码

    jQuery选择器的一个Bug

    然而,即便如此成熟的库,也难免存在一些已知的问题和限制,其中之一就是我们今天要探讨的"jQuery选择器的一个Bug"。 首先,我们要理解jQuery选择器的基本原理。jQuery基于CSS选择器,它允许开发者通过类似CSS的...

Global site tag (gtag.js) - Google Analytics