前言
之前在用jQuery,不过有时候用着用着一些用法发现并没有用到过,比较陌生,现在重新梳理一下,把易忽略的知识点总结一下,长期更新。 参考梳理来源: 慕课网
sele1,sele2,seleN选择器
有时需要精确的选择任意多个指定的元素,类似于从文具盒中挑选出多根自已喜欢的笔,就需要调用sele1,sele2,seleN选择器,它的调用格式如下: $(“sele1,sele2,seleN”)
其中参数sele1、sele2到seleN为有效选择器,每个选择器之间用“,”号隔开,它们可以是之前提及的各种类型选择器,如$(“#id”)、$(“.class”)、$(“selector”)
选择器等。 例如,通过选择器获取其中的任意两个元素,并将它们显示的内容设为相同,如图所示: 在浏览器中显示的效果: 虽然页面中添加了三个元素,但是通过使用$(“div,p”)
选择器方式获取了其中的
元素,并设置它们显示的内容。
prev + next选择器
俗话说“远亲不如近邻”,而通过prev + next
选择器就可以查找与“prev”元素紧邻的下一个“next”元素,格式如下: $(“prev + next”)
其中参数prev为任何有效的选择器,参数“next”为另外一个有效选择器,它们之间的“+”表示一种上下的层次关系,也就是说,“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。 例如,使用prev + next
选择器,获取
元素最近邻的下一个元素,如下图所示: 在浏览器中显示的效果:
prev ~ siblings选择器
与上一节中介绍的prev + next
层次选择器相同,prev ~ siblings
选择器也是查找prev 元素之后的相邻元素,但前者只获取第一个相邻的元素,而后者则获取prev 元素后面全部相邻的元素,它的调用格式如下: $(“prev ~ siblings”)
其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系,表明siblings选择器获取的元素都是prev元素之后的同辈元素。 例如,使用prev ~ next
选择器,获取
元素后面相邻的全部元素,并设置它们在页面中显示的内容,如下图所示: 在浏览器中显示的效果: 可以看出,调用$("p~span")
选择器代码,获取了
元素下面两个(全部)的元素,该元素不包含 元素上面的元素和不属于同辈范围的元素。 与上一节介绍的:eq(index)选择器按索引查找元素相比,有时候我们可能希望按照文本内容来查找一个或多个元素,那么使用:contains(text)过滤选择器
:contains(text)
选择器会更加方便, 它的功能是选择包含指定字符串的全部元素,它通常与其他元素结合使用,获取包含“text”字符串内容的全部元素对象。其中参数text
表示页面中的文字。 例如: 在浏览器中显示的效果: 从图中可以看出,调用li:contains('土豪')
代码,可以很方便地获取li:contains('土豪')
土豪为什么必须加单引号呢?因为它是一个字符串,而不是一个变量,所以不加单或双引号的话是会报错的。
:has(selector)过滤选择器
除了在上一小节介绍的使用包含的字符串内容过滤元素之外,还可以使用包含的元素名称来过滤,:has(selector)
过滤选择器的功能是获取选择器中包含指定元素名称的全部元素,其中selector
参数就是包含的元素名称,是被包含元素。 例如:获取指定包含某个元素名的全部
$("li:has('p')")
选择器代码,获取了包含元素的全部
:hidden过滤选择器
:hidden
过滤选择器的功能是获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden的元素。 例如,调用:hidden
选择器获取不可见的
元素,并将该元素的内容显示在
$("p:hidden")
代码获取隐藏的元素,并调用该元素的html()方法获取该元素中的内容,最后将该内容显示在
:visible过滤选择器
与上一节的:hidden
过滤选择器相反,:visible
过滤选择器获取的是全部可见的元素,也就是说,只要不将元素的display属性值设置为“none”,那么,都可以通过该选择器获取。 例如,使用:visible
选择器获取可见的
元素,并将该元素的内容显示在
$("p:visible")
选择器代码,获取那个可见的元素,并调用html()
方法获取该元素的内容,最后将该内容显示在
:input表单选择器
如何获取表单全部元素?:input
表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有标记的表单元素,而且还包括
:text表单文本选择器
:text
表单文本选择器可以获取表单中全部单行的文本输入框元素,单行的文本输入框就像一个不换行的字条工具,使用非常广泛。 例如,在表单中添加多个元素,使用:text
选择器获取单行的文本输入框元素,并修改字的边框颜色,如下图所示: 在浏览器中显示的效果: 从图中可以看出,通过:text
表单选择器只获取单行的文本输入框元素,对于
: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”的和
:checked选中状态选择器
有一些元素存在选中状态,如复选框、单选按钮元素,选中时“checked”属性值为“checked”,调用:checked可以获取处于选中状态的全部元素。 例如,在表单中添加多个复选框和单选按钮,其中有一些元素处于选中状态,使用:checked
获取并隐藏处于选中状态的元素,如下图所示: 在浏览器中显示的效果: 从图中可以看出,使用:checked
选择器可以获取处于选中状态的元素,并调用hide()
方法将它们进行隐藏。
:selected选中状态选择器
与:checked
选择器相比,:selected
选择器只能获取
:first-child子元素过滤选择器
通过上面章节的学习,我们知道使用:first
过滤选择器可以获取指定父元素中的首个子元素,但该选择器返回的只有一个元素,并不是一个集合,而使用:first-child
子元素过滤选择器则可以获取每个父元素中返回的首个子元素,它是一个集合,常用多个集合数据的选择处理。 如下图,如果想把页面中每个ul中的第一个li获取到,并改变其颜色。则可以使用 : first-child
在浏览器中显示的效果: 通过$("li:first-child")
选择器代码,获取了两个
- 父元素中的第一个
- 元素,并使用
css()
方法修改了它们在页面中显示的文字颜色。替换内容
replaceWith()
和replaceAll()
方法都可以用于替换元素或元素中的内容,但它们调用时,内容和被替换元素所在的位置不同,分别为如下所示:**$(selector).replaceWith(content)**
和**$(content).replaceAll(selector)**
参数selector为被替换的元素,content为替换的内容。 例如,调用replaceWith()
方法将页面中元素替换成一段HTML字符串,如下图所示: 在浏览器中显示的效果: 从图中可以看出,使用replaceWith()
方法替换类别名为“green”的元素,替换之后,旧元素完全由新替换的元素所取代。使用wrap()和wrapInner()方法包裹元素和内容
wrap()
和wrapInner()
方法都可以进行元素的包裹,但前者用于包裹元素本身,后者则用于包裹元素中的内容,它们的调用格式分别为:**$(selector).wrap(wrapper)**
和**$(selector).wrapInner(wrapper)**
参数selector为被包裹的元素,wrapper参数为包裹元素的格式。 例如,调用wrap()
方法,将用元素包裹起来,如下图所示: 在浏览器中显示的效果: 从图中可以看出,红色区域的元素被蓝色边框的元素通过wrap()
方法包裹起来使用remove()和empty()方法删除元素
remove()
方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()
方法则只删除所选元素的子元素。 例如,调用remove()
方法删除元素中类别名为“red”的,如下图所示: 在浏览器中显示的效果: 从图中可以看出,使用remove(".red")
方法只是把元素中类别名为“red”的这部分元素给删除了。使用hover()方法切换事件
hover()
方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切实效果,调用格式如下:**$(selector).hover(over****,****out);**
over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。 例如,当鼠标移到元素上时,元素中的字体变成金黄色,如下图所示: 在浏览器中显示的效果: 从图中可以看出,使用hover()
方法执行两个函数,当鼠标移在元素上时调用addClass()
方法增加一个样式,移出时,调用removeClass()
方法移除该样式。使用toggle()方法绑定多个函数
toggle()
方法可以在元素的click事件中绑定两个或两个以上的函数,同时,它还可以实现元素的隐藏与显示的切换,绑定多个函数的调用格式如下:**$(selector).toggle(fun1(),fun2(),funN(),...)**
其中,fun1,fun2就是多个函数的名称 例如,使用toggle()
方法,当每次点击元素时,显示不同内容,如下图所示: 在浏览器中显示的效果: 从图中可以看出,每次点击元素时,都依次执行toggle()
方法绑定的函数,当执行到最后一个函数时,再次点击将又返回执行第一个函数。 注意:toggle()方法支持目前主流稳定的jQuery版本1.8.2,在1.9.0之后的版本是不支持的。使用one()方法绑定元素的一次性事件
one()
方法可以绑定元素任何有效的事件,但这种方法绑定的事件只会触发一次,它的调用格式如下:**$(selector).one(event,[data],fun)**
参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。 例如,使用one方法绑定元素的单击事件,在事件执行的函数中,累计执行的次数,并将该次数显示在页面中,如下图所示: 在浏览器中显示的效果: 从图中可以看出,由于使用了one()
方法绑定元素的单击事件,因为事件函数只能执行一次,执行完成后,无论如何单击,都不再触发。调用animate()方法制作移动位置的动画
调用
animate()
方法不仅可以制作简单渐渐变大的动画效果,而且还能制作移动位置的动画,在移动位置之前,必须将被移元素的“position”属性值设为“absolute”或“relative”,否则,该元素移动不了。 例如,调用animate()
方法先将图片向右移动90px,然后,再将图片宽度与高度分别增加30px,如下图所示: 在浏览器中显示的效果: 从图中可以看出,图片先向右移动了“90px”,然后,移动成功后,再在原来的基础之上以动画的效果增大30px,增加成功后,显示“执行完成!”的字样。s