一、总结
本章讲解了jQuery最重要的选择器部分的知识。 借助jQuery的选择器,我们几乎可以获取页面上的任何对象或一组对象,这可以显着减少开发人员的工作量。
2. 前言
要编写任何JavaScript程序,我们首先需要获取对象。 jQuery选择器可以彻底改变我们平时获取对象的方式。 它可以获取几乎任何语义的对象,例如“具有标题属性且值包含test的元素”。 要完成这项工作,只需要编译一个 jQuery 选择器字符串。 学习jQuery选择器是学习jQuery最重要的一步。
3.Dom对象和jQuery包装器集
无论我们是写程序还是看API文档,都要时刻注意区分Dom对象和jQuery包装集。
1.Dom对象
传统的javascript开发中,我们首先获取Dom对象,如:
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
我们经常使用 document.getElementById 方法通过 id 获取单个 Dom 对象,或者使用 document.getElementsByTagName 方法通过 HTML 标签名称获取 Dom 对象的集合。
另外,在storm函数中jquery同级元素选择器,可以在方法函数中使用this来引用风暴触发对象(但多播风暴函数中IE6有问题),或者使用target(FF)或srcElement(iIE6)事件对象的属性来获取引发风暴Dom对象的事件。
注意,我们这里得到的都是Dom对象,而Dom对象也有input、div、span等不同的类型。Dom对象只有有限的属性和方法:
2. jQuery 包装器集
jQuery的包装集可以说是Dom对象的扩展。 在 jQuery 世界中,所有对象,无论是一个还是一组,都被包装成一个 jQuery 包装集,比如获取一个包含某个元素的 jQuery 包装集:
var jQueryObject = $("#testDiv");
jQuery 包装器作为一个对象一起调用。 jQuery 包装器具有丰富的属性和方法,这是 jQuery 所独有的:
3、Dom对象与jQuery对象的转换(1)Dom到jQuery的包装集
如果要使用jQuery提供的功能,首先必须构建jQuery包装集。 我们可以使用本文官方介绍的jQuery选择器来直接构造jQuery包装集,例如:
$("#testDiv");
上面这句话构造的包装集合只包含一个id为testDiv的元素。
或者我们已经获得了一个Dom元素,如:
var div = document.getElementById("testDiv");
上面代码中的div是一个Dom元素,我们可以将Dom元素转换成一个jQuery封装集合:
var domToJQueryObject = $(div);
Tips:因为有了Intellisense,我们可以通过Intellisense的列表来判断一个对象是Dom对象还是jQuery包集。
(2) jQuery包装设置为Dom对象
jQuery 包装器是一个集合,因此我们可以通过索引器访问其元素之一:
var domObject = $("#testDiv")[0];
请注意,索引器返回的不再是 jQuery 包装器,而是 Dom 对象!
jQuery包集合的各个遍历方法,如each(),都可以传入一个遍历函数jquery同级元素选择器,而遍历函数中的this也是一个Dom元素,如:
$("#testDiv").each(function()
{ alert(this) })
如果我们想使用 jQuery 来操作 Dom 对象怎么办? 使用前面介绍的转换方法即可:
$("#testDiv").each(function()
{
$(this).html("修改内容")
})
总结:首先让大家理清Dom对象和jQuery包装集的概念,这将大大促进我们的学习速度。 我在学习jQuery的过程中花了很长时间没有意识到两者的具体区别,因为书上我没有具体解释两者的区别,所以我经常被诸如“为什么不能这个指针调用 jQuery 方法”。 直到有一天,我突然意识到,只要能区分这三者,写程序的时候就能清晰吗? 清楚地。
4.什么是 jQuery 选择器
在Dom编程中,我们只能使用有限的函数根据id或者TagName来获取Dom对象。
在 jQuery 中,情况完全不同。 jQuery提供了非常强大的选择器来帮助我们获取页面上的对象,并以jQuery包装集的形式返回对象。
首先让我们看看什么是选择器:
//根据ID获取jQuery包装集
var jQueryObject = $("#testDiv");
上面的例子中,ID选择器用于选择id为testDiv的Dom对象并加载到jQuery包装集中,最后作为jQuery包装集返回。
“$”符号代表了jQuery中对jQuery对象的引用,“jQuery”是核心对象,它包含以下方法:
jQuery(表达式,上下文)
返回:jQuery
该函数采用 CSS 选择器字符串,并使用该字符串来匹配一组元素。
该函数接受包含 CSS 选择器的字符串,然后使用该选择器来匹配一组元素。
jQuery( html、所有者文档)
返回:jQuery
从 HTML 原始字符串动态创建 Dom 元素。
从提供的原始 HTML 字符串即时创建 DOM 元素。
jQuery(元素)
返回:jQuery
用jQuery函数功能封装一个或多个Dom对象(即封装为一个jQuery包集)
将 jQuery 功能包装在单个或多个 DOM 元素周围。
jQuery(回调)
返回:jQuery
$(document).ready() 的缩写形式
$(document) 的简写。 准备好()。
以上摘自jQuery官方指南。 Returns的类型是jQuery,表示返回的是jQuery包集。 第一种方法存在一些问题。 官方socket写的是CSS选择器,但实际上这个方法不仅支持CSS选择器,还支持所有jQuery支持的选择器,有的甚至是jQuery自定义选择器(CSS标准中不存在的选择器)。 为了让大家更清楚的理解,我将方式改成如下:
jQuery(选择器、上下文)
返回: jQuery 包装器集
根据选择器选择匹配的对象,并将其作为 jQuery 包装集返回。 上下文可以是 Dom 对象集或 jQuery 包装器集。 如果传入,则表示从上下文中选择匹配的对象。 如果不传入,则表示范围是文档对象(即页面上的所有对象)。
上述方法是我们选择器使用的核心技术。 可以使用“$”代替jQuery,使句子更加简洁。 例如,下面的两句话具有相同的效果:
//根据ID获取jQuery包装集
var jQueryObject = $("#testDiv");
//$是jQuery对象的引用:
var jQueryObject = jQuery("#testDiv");
接下来,我们系统地学习一下jQuery选择器。
五。 jQuery 选择器完整解决方案
通俗地说,Selector选择器就是“表达特殊语义的字符串”。 只要将选择器字符串传入方法内部,就可以选择不同的Dom对象,并以jQuery包集合的形式返回。
但是如何对 jQuery 选择器进行分类却让我担心。 因为书中的分类与jQuery官方的分类完全不同。 最终我决定以实用为主,暂时不去了解CSS3选择器标准,而是按照jQuery官方的分类来讲解。
jQuery 的选择器支持 CSS3 选择器标准。 以下是 W3C 最新的 CSS3 选择器标准:
所有标准选择器都可以在 jQuery 中使用。
jQuery选择器按照功能主要分为“选择”和“过滤”。 它们一起使用。 它们可以同时组合成一个选择器字符串。 主要区别在于,“过滤”选择器是从后面指定要匹配的条件,要从“过滤”选择器的内容中过滤,也可以单独使用,即从所有“*”中过滤。 例如:
$(":[标题]")
相当于:
$("*:[标题]")
“select”函数的选择器不会有默认范围,因为该函数是“select”而不是“filter”。
在下面的选择器类别中,带有“filter”的类别表示是“过滤”选择器,否则是具有“选择”功能的选择器。
jQuery 选择器分为以下几类:
[阐明]
1.点击“名称”跳转到该方法的jQuery官方文档。
2. 您可以在下一节的 jQuery 选择器实验室中测试各种选择器
1. 基本选择器基础知识
姓名
阐明
例子
#ID
按元素 ID 选择
$("divId") 选择 ID 作为 divI
d 的元素
元素
根据元素的名称进行选择,
$("a") 选择所有元素
。班级
根据元素的 css 类进行选择
$(".bgRed") 选择全部
对 bgRed 使用 CSS 类
元素
选择所有元素
$("*") 选择页面上的所有元素
选择器1,
选择器2,
选择器N
多个选择器可以用“,”分隔,然后组合成一个选择器字符串。 这些选择器匹配的内容将同时被选择。
$("#divId, a, .bgRed")
【学习建议】:你可以暂时记住基本的选择器,可以直接跳到下一节“jQuery选择器实验室”进行动手练习,然后再回去逐步学习所有选择器,或者使用它们当你需要它们时。 回去询问一下。
2. 层次结构
姓名
阐明
例子
祖先后代
使用“表单输入”选择表单中的所有输入元素。 即祖先(ancestor)是来自,后代(descendant)是输入。
$(".bgRed div")
选择 CSS 类作为 bgRed
全部在元素中
元素。
父母 > 孩子
选择父节点的直接子节点。 子元素必须包含在父元素中,并且父元素是父元素。
$(".myList>li") 选择 CSS 类作为 myList
直接在元素中
子节点对象。
上一个 + 下一个
prev 和 next 是同一级别的两个元素。 选择上一个元素前面的下一个元素。
$("#hibiscus+img") 选择id为hibiscus的元素
元素旁边的 img 对象。
上一页 ~ 兄弟姐妹
选择由 prev 旁边的同级过滤的元素
注意:兄弟姐妹是过滤器
$("#someDiv~[title]") 选择id为someDiv
所有在对象前面带有 title 属性的元素
3. 基本过滤器
姓名
阐明
例子
:第一的
匹配找到的第一个元素
查找表的第一行:$("tr:first")
:最后的
匹配找到的最后一个元素
查找表的最后一行:$("tr:last")
:不是(选择器)
删除与给定选择器匹配的所有元素
查找所有未选中的输入元素:$("input:not(:checked)")
:甚至
匹配所有索引值为素数的元素,从0开始计数
查找表的第 1、3、5...行:$("tr:even")
: 奇怪的
匹配所有索引值为素数的元素,从0开始计数
查找表的第 2、4 和 6 行:$("tr:odd")
:eq(索引)
匹配给定索引处的元素
注:索引从0开始计数
找到第二行:$("tr:eq(1)")
:gt(索引)
匹配所有小于给定索引值的元素
注:索引从0开始计数
找到第二行和第三行,即索引值为1和2
,大于 0:$("tr:gt(0)")
:lt(索引)
选择结果集中索引大于N的元素
注:索引从0开始计数
找到第一行和第二行,即索引值为0和1
,小于 2:$("tr:lt(2)")
:标题
选择所有标题标签,例如 h1、h2、h3。
为页面中的所有标题添加背景颜色: $(":header").css("background", "#EEE");
:动画
匹配所有正在执行动画效果的元素
只适用于不执行动画效果的元素
执行动画特效:
$("#run").click(函数(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
4. 内容过滤器
姓名
阐明
例子
:包含(文本)
匹配包含给定文本的元素
查找所有包含“John”的 div 元素:$("div:contains('John')")
:空的
匹配所有不包含子元素或文本的空元素
查找所有不包含子元素或文本的空元素:$("td:empty")
:有(选择器)
匹配由选择器匹配的元素丰富的元素
为所有包含 p 元素的 div 元素添加文本类: $("div:has(p)").addClass("test");
:父级
匹配富含子元素或文本的元素
查找所有具有丰富子元素或文本的 td 元素:$("td:parent")
5. 可见性过滤器 可见性过滤器
姓名
阐明
例子
:隐
匹配所有不可见元素
注意:在1.3.2版本中,hidden匹配其自身或父类不占用文档空间的元素。 如果你使用CSS的visibility属性使其不可见并占用空间,那么就不要输入hidden。
查找所有不可见的 tr 元素:$("tr:hidden")
:可见的
匹配所有可见元素
查找所有可见的 tr 元素:$("tr:visible")
6. 属性过滤器 属性过滤器
姓名
阐明
例子
[属性]
匹配包含给定属性的元素
查找所有具有丰富id属性的div元素:
$("div[id]")
[属性=值]
匹配给定属性为特定值的元素
查找名称属性为 newsletter 的所有输入元素:
$("input[name='newsletter']").attr("已检查", true);
[属性!=值]
匹配给定属性是不包含某个值的元素
查找名称属性不是新闻通讯的所有输入元素:
$("输入[名称!='新闻通讯']")
.attr("已检查", true);
[属性^=值]
匹配给定属性以单个值开头的元素
$("输入[姓名^='新闻']")
[属性$=值]
匹配给定属性以单个值结尾的元素
查找所有以“字母”开头的名字
结束输入元素:
$("输入[名称$='字母']")
[属性*=值]
将给定属性与包含单个值的元素相匹配
查找所有包含以下内容的名称
“man”的输入元素:
$("输入[姓名*='男人']")
[属性过滤器1][属性过滤器2][属性过滤器N]
复合属性选择器,当需要同时满足多个条件时使用。
查找所有 Rich id 属性,以及
它的名字属性是 man
结尾为:
$("输入[id][姓名$='man']")
7. 子过滤器
姓名
阐明
例子
:nth-child(索引/偶数/奇数/方程)
匹配其父元素下的第 N 个子元素或奇偶元素
':eq(index)' 仅匹配一个元素,而该元素将匹配每个父元素及其子元素。 :nth-child 从 1 开始,而 :eq() 从 0 开始!
可以使用:
第 n 个孩子(偶数)
:第n个孩子(奇数)
:第n个孩子(3n)
:第n个孩子(2)
:第n个孩子(3n+1)
:第n个孩子(3n+2)
找到每个 ul 中的第二个 li:
$("ul li:nth-child(2)")
:第一个孩子
匹配第一个子元素
':first' 仅匹配一个元素,而此选择器将匹配每个父元素的一个子元素
找到每个 ul 中的第一个 li:
$("ul li:第一个孩子")
:最后一个孩子
匹配最后一个子元素
':last' 仅匹配一个元素,而此选择器将为每个父元素匹配一个子元素
找到每个 ul 中的最后一个 li:
$("ul li:最后一个孩子")
:唯一的孩子
如果某个元素是父元素的唯一子元素,则会匹配该元素
如果父元素丰富了其他元素,则不会匹配。
找到 ul 中唯一的子元素 li:
$("ul li:独生子女")
8. 表单选择器
姓名
阐明
解释
:输入
匹配所有输入、文本区域、选择和按钮元素
查找所有输入元素:
$(":输入")
:文本
匹配所有文本框
查找所有文本框:
$(":文本")
:密码
匹配所有密码框
查找所有密码框:
$(":密码")
:收音机
匹配所有单选按钮
查找所有单选按钮
:复选框
匹配所有复选框
找到所有复选框:
$(":复选框")
:提交
匹配所有提交键
查找所有提交按钮:
$(":提交")
:图像
匹配所有图像域
匹配所有图像域:
$(":图像")
:重置
匹配所有重置按钮
找到所有重置按钮:
$(":重置")
:按钮
匹配所有键
查找所有键:
$(":按钮")
:文件
匹配所有文件域
查找所有文件域:
$(":文件")
9. 表单过滤器 表单过滤器
姓名
阐明
解释
:启用
匹配所有可用元素
查找所有可用的输入元素:
$("输入:启用")
:禁用
匹配所有不可用的元素
查找所有不可用的输入元素:
$("输入:禁用")
:检查过
匹配所有选定的选定元素(复选框、单选框等,不包括 select 中的选项)
查找所有选中的复选框元素:
$("输入:已选中")
:已选择
匹配所有选定的选项元素
查找所有选定的选项元素:
$("选择选项:已选择")
6.jQuery 选择器实验室
jQuery 选择器实验室使用了《JQuery in Action》一书中的代码,这对于学习选择器非常有帮助。
我们的实验对象是一个包含很多元素的页面:
在实验页面的“选择器”输入框中输入 jQuery 选择器表达式,所有与该表达式匹配的元素都会显示一个红色框:
如上图所示,输入“.myList”后点击“应用”,下面的输出框会显示运行结果,右侧红框中会显示选中的元素。
该代码可在本章末尾下载。
7.API文档
jQuery 官方 API:
中文在线API:
中文jQuery指南下载:
八、总结
本章讲解的jQuery仍然属于基础支持,所以应用示例并不多。 虽然很基础,很难一下子记住,但是 jQuery 选择器可以说是最考验一个人 jQuery 功底的地方。 在下一章中,我们将解释如何操作 jQuery 包装器集和动态创建新元素。
本章代码下载:
本节结束
相关文章
发表评论