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") |
分享到:
相关推荐
Java电商系统+Java学习资料+Java教程第23节+23-jquery对象与dom对象之间相互转化。
1.2.1 jQuery访问DOM对象/7 1.2.2 jQuery控制DOM对象/7 1.2.3 jQuery控制页面CSS /9 1.3 本章小结/11 第2章 jQuery 选择器/12 2.1 jQuery选择器概述/13 2.1.1 什么是选择器/13 2.1.2 选择器的优势/13 2.2 ...
1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系. DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery...
尚硅谷关于jQuery学习的教学课件,有需要的可以下载参考(*^▽^*)
刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换。
刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换 这几天会将jQuery的一些使用方法总结一下,希望能...
7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择器 4 3. 层次选择器 4 4. 过滤选择器 5 5. 内容过滤选择器 5 6. 可见性过滤选择器 5 7. 属性过滤选择器 6 8. 子元素过滤选择器 6 9. ...
DOM对象和jQuery对象的操作时很重要的,是jquery与页面元素互动的基础。
jquery学习笔记,很全面的介绍jquery的用法。 存在的html片段)包装成jQuery对象。 $()方法里面支持的语法又包括3大类,分别是表达式(包括类表达式.,id表达式#,元素表达式等)、符号(包括后代符号space,next符号+...
•只有 jQuery 对象才能使用 jQuery 的方法,在 jQuery 对象中无法使用 DOM 对象的任何方法,反之 DOM 对象也无法使用任何 jQuery 的方法。 •约定:如果获取的是 jQuery 对象,那么要在变量前面加上 $ •jQuery ...
使用jQuery选择器选择页面元素,目的是为了生成jQuery对象,语法相当简单:$(selector)。...从上面的例子也可以看出,jQuery对象可以视为是一个DOM对象数组,因此转换成DOM对象可使用get(index)方法或者
学习jQuery其实还是在学DOM。 (3). 极简化: jQuery是对传统DOM操作的终极简化。jQuery是对DOM的每一步操作都进行了终极的简化。但是,步骤并没有减少。 (4). 函数库: jQuery中一切都是函数,没有属性。 2. 为什么:...
三.Dom对象和jQuery包装集 9 四. 什么是jQuery选择器 11 五.jQuery选择器全解 13 六 jQuery选择器实验室 19 七.API文档 20 八.总结 20 从零开始学习jQuery (三) 管理jQuery包装集 21 一.摘要 21 二.前言 21 三.动态...
在第一次学习jquery中,常常会不能分辨DOM对象和Jquery对象,下面我们就简诉一下它们之间的关系和区别 1.DOM对象(Document Object Model) 文档对象模型,每一份DOM都可表示为一棵树,例如下面是一个简单的网页...
jQuery AJAX框架-查询DOM对象,简洁,现成控件较少 ExtJS extjs.com 比较全面的AJAX框架 树,菜单,表格编辑器(Grid)学习比较困难 -->显示公告(页面内弹出窗口) 1. 导入CSS和EXT的JS 2. 写Ext.onRead 3. 写入功能...
例如:使用DOM Core来获取表单对象的方法: document.getElementsByTagName(“form”); 2,HTML-DOM. 在使用JavaScript和DOM为HTML文件编写脚本的时候.有许多专属于HTML-DOM的属性.HTML-DOM的出现甚至比DOM Core还要早...
JQuery对象和DOM对象的相互转换 3.1 DOM 对象转化JQuery对象 3.2 JQuery对象转化DOM 对象 三.$()选择器 1.$()选择的结果是一个类数组 2.使用方法(引号问题) 3.文档加载 3.1 [removed]()函数和$(document).re
线框目标学习目标完成这项任务后,你应该…… 了解什么是文档对象模型以及它与 javascript 的关系。 了解使用 jQuery 或原生 DOM api 的 DOM 遍历和操作对事件的基本理解。绩效目标完成此作业后,您将能够有效地使用...
关于jQuery的DOM操作面试问题其实有很多,下面这篇文章主要给大家介绍了jQuery常见面试题之DOM操作的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。