jQuery选择器
示例1 、为超链接增加不同的样式:
<script type="text/javascript" src="jquery/jquery-1.3.2.js" ></script>
<script type="text/javascript">
$(document).ready(function() {//增加不同的样式
$("a[href ^= 'mailto:']").addClass("mailto"); //href以mailto开头的
$("a[href $= '.pdf']").addClass('pdflink'); //href以.pdf开头的
$("a[href *= 'mysite']").addClass("mysite"); //href包含mysite的
});
1. 基础选择器 Basics
名称 |
说明 |
举例 |
#id |
根据元素Id选择 |
$("divId") 选择ID为divId的元素 |
element |
根据元素的名称选择, |
$("a") 选择所有<a>元素 |
.class |
根据元素的css类选择 |
$(".bgRed") 选择所用CSS类为bgRed的元素 |
* |
选择所有元素 |
$("*")选择页面所有元素 |
selector1, selector2, selectorN |
可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. |
$("#divId, a, .bgRed") |
2.层次选择器 Hierarchy
名称 |
说明 |
举例 |
ancestor descendant |
使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input. |
$(".bgRed div") 选择CSS类为bgRed的元素中的所有<div>元素. |
parent > child |
选择parent的直接子节点child. child必须包含在parent中并且父类是parent元素. |
$(".myList>li") 选择CSS类为myList元素中的直接子节点<li>对象. |
prev + next |
prev和next是两个同级别的元素. 选中在prev元素后面的next元素. |
$("#hibiscus+img")选在id为hibiscus元素后面的img对象. |
prev ~ siblings |
选择prev后面的根据siblings过滤的元素 注:siblings是过滤器 |
$("#someDiv~[title]")选择id为someDiv的对象后面所有带有title属性的元素 |
3.基本过滤器 Basic Filters
名称 |
说明 |
举例 |
:first |
匹配找到的第一个元素 |
查找表格的第一行:$("tr:first") |
:last |
匹配找到的最后一个元素 |
查找表格的最后一行:$("tr:last") |
:not(selector) |
去除所有与给定选择器匹配的元素 |
查找所有未选中的 input 元素: $("input:not(:checked)") |
:even |
匹配所有索引值为偶数的元素,从 0 开始计数 |
查找表格的1、3、5...行:$("tr:even") |
:odd |
匹配所有索引值为奇数的元素,从 0 开始计数 |
查找表格的2、4、6行:$("tr:odd") |
:eq(index) |
匹配一个给定索引值的元素 注:index从 0 开始计数 |
查找第二行:$("tr:eq(1)") |
:gt(index) |
匹配所有大于给定索引值的元素 注:index从 0 开始计数 |
查找第二第三行,即索引值是1和2,也就是比0大:$("tr:gt(0)") |
:lt(index) |
选择结果集中索引小于 N 的 elements 注:index从 0 开始计数 |
查找第一第二行,即索引值是0和1,也就是比2小:$("tr:lt(2)") |
:header |
选择所有h1,h2,h3一类的header标签. |
给页面内所有标题加上背景色: $(":header").css("background", "#EEE"); |
:animated |
匹配所有正在执行动画效果的元素 |
只有对不在执行动画效果的元素执行一个动画特效:
$("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20" }, 1000); });
|
4. 内容过滤器 Content Filters
名称 |
说明 |
举例 |
:contains(text) |
匹配包含给定文本的元素 |
查找所有包含 "John" 的 div 元素:$("div:contains('John')") |
:empty |
匹配所有不包含子元素或者文本的空元素 |
查找所有不包含子元素或者文本的空元素:$("td:empty") |
:has(selector) |
匹配含有选择器所匹配的元素的元素 |
给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test"); |
:parent |
匹配含有子元素或者文本的元素 |
查找所有含有子元素或者文本的 td 元素:$("td:parent") |
5.可见性过滤器 Visibility Filters
名称 |
说明 |
举例 |
:hidden
|
匹配所有的不可见元素
注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden.
|
查找所有不可见的 tr 元素:$("tr:hidden") |
:visible |
匹配所有的可见元素 |
查找所有可见的 tr 元素:$("tr:visible") |
6.属性过滤器 Attribute Filters
7.子元素过滤器 Child Filters
名称 |
说明 |
举例 |
:nth-child(index/even/odd/equation) |
匹配其父元素下的第N个子或奇偶元素
':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!
可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)
|
在每个 ul 查找第 2 个li: $("ul li:nth-child(2)") |
:first-child |
匹配第一个子元素
':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
|
在每个 ul 中查找第一个 li: $("ul li:first-child") |
:last-child |
匹配最后一个子元素
':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
|
在每个 ul 中查找最后一个 li: $("ul li:last-child") |
:only-child |
如果某个元素是父元素中唯一的子元素,那将会被匹配
如果父元素中含有其他元素,那将不会被匹配。
|
在 ul 中查找是唯一子元素的 li: $("ul li:only-child") |
8.表单选择器 Forms
名称 |
说明 |
解释 |
:input |
匹配所有 input, textarea, select 和 button 元素 |
查找所有的input元素: $(":input") |
:text |
匹配所有的文本框 |
查找所有文本框: $(":text") |
:password |
匹配所有密码框 |
查找所有密码框: $(":password") |
:radio |
匹配所有单选按钮 |
查找所有单选按钮 |
:checkbox |
匹配所有复选框 |
查找所有复选框: $(":checkbox") |
:submit |
匹配所有提交按钮 |
查找所有提交按钮: $(":submit") |
:image |
匹配所有图像域
|
匹配所有图像域: $(":image") |
:reset |
匹配所有重置按钮 |
查找所有重置按钮: $(":reset") |
:button |
匹配所有按钮 |
查找所有按钮: $(":button") |
:file |
匹配所有文件域 |
查找所有文件域: $(":file") |
9.表单过滤器 Form Filters
名称 |
说明 |
解释 |
:enabled |
匹配所有可用元素
|
查找所有可用的input元素: $("input:enabled") |
:disabled |
匹配所有不可用元素 |
查找所有不可用的input元素: $("input:disabled") |
:checked |
匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option) |
查找所有选中的复选框元素: $("input:checked") |
:selected |
匹配所有选中的option元素 |
查找所有选中的选项元素: $("select option:selected") |
分享到:
相关推荐
- **jQuery对象转DOM对象**: 可以通过`[0]`索引或`get()`方法获取DOM对象。 ```javascript var $h = $('#hello'); var h1 = $h[0]; var h2 = $h.get(0); ``` - **DOM对象转换成jQuery对象**: 可以通过`$(DOM...
1. **DOM操作**:jQuery 提供了简单易用的API来操作DOM(文档对象模型),如选择元素、添加/删除类、插入/移除元素等,大大简化了JavaScript中的DOM操作。 2. **事件处理**:jQuery 的事件处理函数如 `.on()` 和 `....
2. `jquery.min-3.3.1.js`:这是一个经过压缩和优化的版本,目的是为了减少文件大小,提高页面加载速度。通过删除不必要的空格、换行和注释,以及对变量名进行混淆,这个版本的文件体积大大减小,对于生产环境是首选...
2. **jquery-1.6.2-min.js**:这是JQuery库的压缩和优化版本,适用于生产环境。通过删除注释、合并函数和最小化变量名,该文件大大减小了体积,提高了页面加载速度。然而,由于经过压缩,其中的函数和变量名变得难以...
**jQuery学习笔记--1** jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本篇笔记将深入探讨jQuery的基础知识,包括其核心概念、选择器、DOM操作、事件...
1. `$()`:这是jQuery的入口函数,用于选取DOM元素或创建新的jQuery对象。 2. `.each()`:遍历jQuery对象集合,执行指定函数。 3. `.css()`:设置或获取元素的CSS属性。 4. `.attr()`/`.removeAttr()`:获取或设置...
在压缩包中的"jQuery API 中文文档3.2.1",为开发者提供了详细的API文档,帮助理解每个方法的用途、参数和返回值,是学习和使用jQuery的宝贵资源。确保查阅这些文档,以便更好地理解和应用jQuery 3.2.1的新特性。 ...
总结来说,"jQuery学习案例-购物车"是一个综合性的练习,涵盖了jQuery的DOM操作、事件处理,以及localStorage在前端数据持久化中的应用。通过实践这个案例,开发者不仅可以提升jQuery的运用技巧,还能加深对HTML5新...
7. **源码分析**:深入学习这个插件,还可以了解如何利用JavaScript和jQuery的特性来实现这样的功能,包括事件委托、DOM元素的属性访问和修改,以及如何实现高效的事件监听。 总的来说,“jquery.ba-resize.js”是...
2. **DOM 操作(DOM Manipulation)**:jQuery 提供了简洁的API来操作DOM,包括添加、删除、替换和查找元素。例如,`$("p").append("附加文本</span>")`可以在每个段落末尾添加文本。 3. **事件处理(Events)**:...
在本篇博客“jQuery学习记录----股票信息实时显示(七)”中,作者分享了如何使用jQuery技术来实现股票信息的实时更新展示。这涉及到Web开发中的动态数据获取和前端界面交互,是JavaScript库jQuery的一个实际应用...
在实际开发中,我们可以通过使用`$.fn.extend()`扩展jQuery对象,自定义插件和方法,以满足特定需求。同时,利用$.ajax()进行异步数据请求,实现动态交互。另外,jQuery的动画效果如`.fadeIn()`和`.slideUp()`等,...
在本篇博客“jQuery学习记录----仿GoogleSuggest自动提示(八)”中,作者分享了如何使用jQuery实现一个类似于Google搜索框中的自动提示功能。这个功能是许多网站上常见的用户体验提升工具,它允许用户在输入关键词...
**jQuery学习资料详解** jQuery,一个轻量级、高性能的JavaScript库,自2006年发布以来,因其简洁易用的API接口和强大的功能,迅速成为开发者们首选的前端工具之一。本资料旨在深入浅出地介绍jQuery的核心概念、...
2. **缓存DOM元素**:避免频繁的DOM查询,提高代码执行效率。 3. **利用CSS3动画**:使用硬件加速的CSS3动画代替JavaScript动画,提升过渡效果的流畅性。 总结,jQuery KinSlideshow-1.2是一款强大的焦点图轮播工具...
- **$.extend()**:合并两个或更多对象的属性,创建新的jQuery对象或扩展现有对象。 7. **兼容性** jQuery 1.2致力于跨浏览器兼容性,确保在多种浏览器环境下运行良好,包括IE6+,Firefox,Chrome,Safari和Opera...
本篇文章将深入探讨jQuery的基本概念、使用方法以及DOM对象与jQuery对象之间的转换与区别。 首先,我们从jQuery的简介开始。jQuery是由John Resig于2006年创建的,其目标是“write less, do more”。jQuery的核心...
这本书可能涵盖了JavaScript的核心语法、对象、函数、DOM操作等,有助于理解jQuery的工作原理。 6. **CSS2.0 DOC.chm** CSS2.0是网页样式的重要规范,这个CHM文件提供了详细的CSS2.0参考,包括选择器、属性和值,...
2. **链式操作增强**:jQuery 1.4改进了链式调用,允许在返回的对象上连续调用多个方法,提高代码的简洁性和可读性。 3. **动画效果**:此版本增强了动画效果的灵活性,添加了更多自定义选项,如缓动函数(easing)...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念,通过实例代码来加强理解和应用。 1. **jQuery选择器**:...