投稿    登录
  博主录制的Python3爬虫视频教程已发布!详情请戳Python3爬虫视频教程!希望大家支持!非常感谢!

jQuery易忽略的知识点总结

JavaScript 崔庆才 2734浏览 1评论

前言

之前在用jQuery,不过有时候用着用着一些用法发现并没有用到过,比较陌生,现在重新梳理一下,把易忽略的知识点总结一下,长期更新。

参考梳理来源:

慕课网

sele1,sele2,seleN选择器

有时需要精确的选择任意多个指定的元素,类似于从文具盒中挑选出多根自已喜欢的笔,就需要调用sele1,sele2,seleN选择器,它的调用格式如下:

$(“sele1,sele2,seleN”)

其中参数sele1、sele2到seleN为有效选择器,每个选择器之间用“,”号隔开,它们可以是之前提及的各种类型选择器,如$(“#id”)、$(“.class”)、$(“selector”)选择器等。

例如,通过选择器获取其中的任意两个元素,并将它们显示的内容设为相同,如图所示:

在浏览器中显示的效果:

虽然页面中添加了三个元素,但是通过使用$(“div,p”)选择器方式获取了其中的<div>和<p>元素,并设置它们显示的内容。

prev + next选择器

俗话说“远亲不如近邻”,而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素,格式如下:

$(“prev + next”)

其中参数prev为任何有效的选择器,参数“next”为另外一个有效选择器,它们之间的“+”表示一种上下的层次关系,也就是说,“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。

例如,使用prev + next选择器,获取<p>元素最近邻的下一个元素,如下图所示:

在浏览器中显示的效果:

prev ~ siblings选择器

与上一节中介绍的prev + next层次选择器相同,prev ~ siblings选择器也是查找prev 元素之后的相邻元素,但前者只获取第一个相邻的元素,而后者则获取prev 元素后面全部相邻的元素,它的调用格式如下:

$(“prev ~ siblings”)

其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系,表明siblings选择器获取的元素都是prev元素之后的同辈元素。

例如,使用prev ~ next选择器,获取<p>元素后面相邻的全部元素,并设置它们在页面中显示的内容,如下图所示:

在浏览器中显示的效果:

可以看出,调用$("p~span")选择器代码,获取了<p>元素下面两个(全部)的<span>元素,该元素不包含<p>元素上面的元素和不属于同辈范围的元素。

:contains(text)过滤选择器

与上一节介绍的:eq(index)选择器按索引查找元素相比,有时候我们可能希望按照文本内容来查找一个或多个元素,那么使用:contains(text)选择器会更加方便, 它的功能是选择包含指定字符串的全部元素,它通常与其他元素结合使用,获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。

例如:

在浏览器中显示的效果:

从图中可以看出,调用li:contains('土豪')代码,可以很方便地获取<li>中包含‘土豪’字符内容的全部元素,并且只要与选择的元素中或子元素中包含该字符内容,就可以被选中。

注意:li:contains('土豪') 土豪为什么必须加单引号呢?因为它是一个字符串,而不是一个变量,所以不加单或双引号的话是会报错的。

:has(selector)过滤选择器

除了在上一小节介绍的使用包含的字符串内容过滤元素之外,还可以使用包含的元素名称来过滤,:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素,其中selector参数就是包含的元素名称,是被包含元素。

例如:获取指定包含某个元素名的全部<li>元素,并改变它们显示文字的颜色,如下图所示:

在浏览器中显示的效果:

可以看出,通过使用$("li:has('p')")选择器代码,获取了包含<p>元素的全部<li>元素,并通过css方法改变了这些元素在页面中显示的文字样式。

:hidden过滤选择器

:hidden过滤选择器的功能是获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden的元素。

例如,调用:hidden选择器获取不可见的<p>元素,并将该元素的内容显示在<div>元素中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,先调用$("p:hidden")代码获取隐藏的<p>元素,并调用该元素的html()方法获取该元素中的内容,最后将该内容显示在<div>元素中。

:visible过滤选择器

与上一节的:hidden过滤选择器相反,:visible过滤选择器获取的是全部可见的元素,也就是说,只要不将元素的display属性值设置为“none”,那么,都可以通过该选择器获取。

例如,使用:visible选择器获取可见的<p>元素,并将该元素的内容显示在<div>元素中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,调用$("p:visible")选择器代码,获取那个可见的<p>元素,并调用html()方法获取该元素的内容,最后将该内容显示在<div>元素中。

:input表单选择器

如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea>、<select> 和 <button>标记的表单元素,因此,它选择的表单元素是最广的。

如下图所示,使用:input表单选择器获取表单元素,并向这些元素增加一个CSS样式类别,修改它们在页面中显示的边框颜色。

在浏览器中显示的效果:

可以看出,通过调用$(“#frmTest :input”)表单选择器代码获取了表单中的全部元素,并使用addClass()方法修改它们在页面中显示的边框颜色。addClass()方法的功能是为元素添加指定的样式类别名称,它的更多使用将会在后续章节中进行详细介绍。

:text表单文本选择器

:text表单文本选择器可以获取表单中全部单行的文本输入框元素,单行的文本输入框就像一个不换行的字条工具,使用非常广泛。

例如,在表单中添加多个元素,使用:text选择器获取单行的文本输入框元素,并修改字的边框颜色,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过:text表单选择器只获取单行的文本输入框元素,对于<textarea>区域文本、按钮元素无效。

:password表单密码选择器

如果想要获取密码输入文本框,可以使用:password选择器,它的功能是获取表单中全部的密码输入文本框元素。

例如,在表单中添加多个输入框元素,使用:password获取密码输入文本框元素,并修改它的边框颜色,如下图所示:

在浏览器中显示的效果:

从图中可以看出,在多个文本输入框中,使用:password选择器只能获取表单中的密码输入文本框,并使用addClass()方法改变它的边框颜色。

:radio单选按钮选择器

表单中的单选按钮常用于多项数据中仅选择其一,而使用:radio选择器可轻松获取表单中的全部单选按钮元素。

例如,在表单中添加多种类型的表单元素,使用:radio选择器获取并隐藏这些元素中的全部单选按钮元素,如下图所示:

hide()方法的功能是隐藏指定的元素。

在浏览器中显示的效果:

以上是:radio选择器的效果。

:checkbox复选框选择器

表单中的复选框常用于多项数据的选择,使用:checkbox选择器可以快速定位并获取表单中的复选框元素。

例如,在表单中增加多个不同类型的元素,使用:checkbox选择器获取其中的全部复选框元素,并将它们全部设为选中状态,如下图所示:

在浏览器中显示的效果:

这样便实现了选中 checkbox 的效果,做全选的时候比较方便。

:submit提交按钮选择器

通常情况下,一个表单中只允许有一个“type”属性值为“submit”的提交按钮,使用:submit选择器可获取表单中的这个提交按钮元素。

例如,在表单中添加多个不同类型的按钮,使用:submit选择器获取其中的提交按钮,并使用attr()方法修改按钮显示的文本内容,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用:submit选择器从三种类型按钮中获取了提交按钮,并使用attr()方法将该按钮显示的文字修改为“点我就提交了”。

:button表单按钮选择器

表单中包含许多类型的按钮,而使用:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。

例如,在表单中添加多种类型的按钮元素,使用:button选择器获取其中的普通按钮元素,并修改它们的边框色,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用:button选择器只能获取两种类型的普通按钮,且修改了它们的边框颜色,并未获取表单中的“提交按钮”。

:checked选中状态选择器

有一些元素存在选中状态,如复选框、单选按钮元素,选中时“checked”属性值为“checked”,调用:checked可以获取处于选中状态的全部元素。

例如,在表单中添加多个复选框和单选按钮,其中有一些元素处于选中状态,使用:checked获取隐藏处于选中状态的元素,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用:checked选择器可以获取处于选中状态的元素,并调用hide()方法将它们进行隐藏。

:selected选中状态选择器

:checked选择器相比,:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。

例如,在一个添加多个<option>选项的下拉列表框中,使用:selected选择器修改处于选中状态的内容值,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用:selected选择器获取处于选中状态的<option>元素,并调用text()方法修改这些选中状态元素显示的内容。text()方法的功能是获取或设置元素的文本内容,该方法在后续将有详细的介绍。

:first-child子元素过滤选择器

通过上面章节的学习,我们知道使用:first过滤选择器可以获取指定父元素中的首个子元素,但该选择器返回的只有一个元素,并不是一个集合,而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素,它是一个集合,常用多个集合数据的选择处理。

如下图,如果想把页面中每个ul中的第一个li获取到,并改变其颜色。则可以使用

: first-child

在浏览器中显示的效果:

通过$("li:first-child")选择器代码,获取了两个<ul>父元素中的第一个<li>元素,并使用css()方法修改了它们在页面中显示的文字颜色。

替换内容

replaceWith()replaceAll()方法都可以用于替换元素或元素中的内容,但它们调用时,内容和被替换元素所在的位置不同,分别为如下所示:

$(selector).replaceWith(content)$(content).replaceAll(selector)

参数selector为被替换的元素,content为替换的内容。

例如,调用replaceWith()方法将页面中<span>元素替换成一段HTML字符串,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用replaceWith()方法替换类别名为“green”的<span>元素,替换之后,旧元素完全由新替换的元素所取代。

使用wrap()和wrapInner()方法包裹元素和内容

wrap()wrapInner()方法都可以进行元素的包裹,但前者用于包裹元素本身,后者则用于包裹元素中的内容,它们的调用格式分别为:

$(selector).wrap(wrapper)$(selector).wrapInner(wrapper)

参数selector为被包裹的元素,wrapper参数为包裹元素的格式。

例如,调用wrap()方法,将<span>用<div>元素包裹起来,如下图所示:

在浏览器中显示的效果:

从图中可以看出,红色区域的<span>元素被蓝色边框的<div>元素通过wrap()方法包裹起来

使用remove()和empty()方法删除元素

remove()方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()方法则只删除所选元素的子元素。

例如,调用remove()方法删除<span>元素中类别名为“red”的,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用remove(".red")方法只是把<span>元素中类别名为“red”的这部分元素给删除了。

使用hover()方法切换事件

hover()方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切实效果,调用格式如下:

$(selector).hover(overout);

over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。

例如,当鼠标移到<div>元素上时,元素中的字体变成金黄色,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用hover()方法执行两个函数,当鼠标移在元素上时调用addClass()方法增加一个样式,移出时,调用removeClass()方法移除该样式。

使用toggle()方法绑定多个函数

toggle()方法可以在元素的click事件中绑定两个或两个以上的函数,同时,它还可以实现元素的隐藏与显示的切换,绑定多个函数的调用格式如下:

$(selector).toggle(fun1(),fun2(),funN(),...)

其中,fun1,fun2就是多个函数的名称

例如,使用toggle()方法,当每次点击<div>元素时,显示不同内容,如下图所示:

在浏览器中显示的效果:

从图中可以看出,每次点击<div>元素时,都依次执行toggle()方法绑定的函数,当执行到最后一个函数时,再次点击将又返回执行第一个函数。

注意:toggle()方法支持目前主流稳定的jQuery版本1.8.2,在1.9.0之后的版本是不支持的。

使用one()方法绑定元素的一次性事件

one()方法可以绑定元素任何有效的事件,但这种方法绑定的事件只会触发一次,它的调用格式如下:

$(selector).one(event,[data],fun)

参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。

例如,使用one方法绑定<div>元素的单击事件,在事件执行的函数中,累计执行的次数,并将该次数显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于使用了one()方法绑定<div>元素的单击事件,因为事件函数只能执行一次,执行完成后,无论如何单击,都不再触发。

调用animate()方法制作移动位置的动画

调用animate()方法不仅可以制作简单渐渐变大的动画效果,而且还能制作移动位置的动画,在移动位置之前,必须将被移元素的“position”属性值设为“absolute”或“relative”,否则,该元素移动不了。

例如,调用animate()方法先将图片向右移动90px,然后,再将图片宽度与高度分别增加30px,如下图所示:

在浏览器中显示的效果:

从图中可以看出,图片先向右移动了“90px”,然后,移动成功后,再在原来的基础之上以动画的效果增大30px,增加成功后,显示“执行完成!”的字样。

s

转载请注明:静觅 » jQuery易忽略的知识点总结

喜欢 (11)or分享 (0)

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的

想结交更多的朋友吗?

来进击的Coder瞧瞧吧

进击的Coder

QQ群号 99350970 立即加入

进击的Coder灌水太多?

这里是纯粹的技术领地

激进的Coder

QQ群号 627725766 立即加入

想找人聊天解闷?想要学习干货?

微信公众号进击的Coder为你打造

进击的Coder

微信公众号 扫一扫关注