目录
前言:
1.jQuery介绍
2.引入jQuery
3.工厂函数$()
3.1使用CSS选择器获取元素:
3.2将原生JavaScript对象转换为jQuery对象:
3.3从jQuery对象转换到原生JavaScript对象:
4. jQuery获取元素
4.1基础选择器
4.1.1标签选择器:
4.1.2ID选择器:
4.1.3类选择器:
4.1.4群组选择器:
4.2层级选择器
4.2.1后代选择器:
4.2.2子代选择器:
4.2.3相邻兄弟选择器:
4.2.4通用兄弟选择器:
4.3过滤选择器
5. 操作元素内容:
5.1html():
5.2text():
5.3val():
6. 操作标签属性
6.1attr("attrName", "value"):
6.2prop("attrName", "value"):
6.3removeAttr("attrName"):
7. 操作标签样式
7.1为元素添加id/class属性:
7.2操作class属性值的方法:
7.2.1addClass("className"):
7.2.2removeClass("className"):
7.2.3toggleClass("className"):
8. 元素的创建、添加、删除
8.1创建元素:
8.2添加元素:
8.3删除元素:
9. 动画效果jQuery提供了一系列简单易用的动画效果方法。
9.1显示和隐藏:
9.2下拉和上推效果:
9.3淡入淡出效果:
10. 数据与对象遍历
10.1. $(selector).each()
10.2. $.each()
前言:
在前面我们已经学习了很多关于,前端方面的知识了,现在我们开始学习jQuery方面的知识,jQuery其实就是是JavaScript的工具库,对原生JavaScript中的DOM操作、事件处理、数据处理等进行封装,提供更便捷的方法。
1.jQuery介绍
jQuery是一个快速、小巧且功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画制作以及Ajax开发变得简单易行。jQuery极大地简化了JavaScript编程,使得开发者能够用更少的代码完成更多的功能。
2.引入jQuery
在使用jQuery之前,你需要在HTML文档中引入jQuery库。这可以通过在<head>
标签内添加<script>
标签,并设置其src
属性为jQuery库的URL来实现。你提供的两个网址是常用的jQuery库CDN链接,开发者可以从这些链接中获取最新或特定版本的jQuery库。
3.工厂函数$()
$()
函数是jQuery的核心功能之一,它允许开发者以多种方式选择和操作DOM元素。这个函数非常灵活,可以接受多种类型的参数,如CSS选择器、HTML元素、jQuery对象或DOM元素等。
3.1使用CSS选择器获取元素:
$("选择器")
可以用来获取匹配选择器的所有DOM元素,并返回一个包含这些元素的jQuery对象。例如,$("p")
会选择页面上的所有<p>
元素。
3.2将原生JavaScript对象转换为jQuery对象:
如果你已经有一个原生JavaScript DOM元素,你可以通过将其传递给$()
函数来将其转换为jQuery对象。例如,如果elem
是一个原生DOM元素,那么$(elem)
会返回一个包含该元素的jQuery对象。
3.3从jQuery对象转换到原生JavaScript对象:
有两种主要方法可以从jQuery对象中获取原生DOM元素。第一种是使用数组索引,如$("div")[0]
会返回第一个<div>
元素作为原生DOM对象。第二种方法是使用.get(index)
方法,如$("div").get(0)
也会返回第一个<div>
元素作为原生DOM对象。
4. jQuery获取元素
4.1基础选择器
4.1.1标签选择器:
通过HTML标签名选择元素,例如$("div")
会选择所有的<div>
元素。
4.1.2ID选择器:
通过元素的ID选择元素,例如$("#d1")
会选择ID为d1
的元素。
4.1.3类选择器:
通过元素的类名选择元素,例如$(".c1")
会选择所有类名为c1
的元素。
4.1.4群组选择器:
通过逗号分隔的多个选择器选择元素,例如$("body,p,h1")
会选择<body>
、<p>
和<h1>
元素。
4.2层级选择器
4.2.1后代选择器:
选择特定元素的后代元素,例如$("div .c1")
会选择所有<div>
元素内部类名为c1
的元素。
4.2.2子代选择器:
选择特定元素的直接子元素,例如$("div>span")
会选择所有<div>
元素的直接<span>
子元素。
4.2.3相邻兄弟选择器:
选择紧接在另一元素后的元素,且满足第二个选择器的条件,例如$("h1+p")
会选择每个<h1>
元素后面的第一个<p>
元素。
4.2.4通用兄弟选择器:
选择特定元素后面所有满足选择器的兄弟元素,例如$("h1~h2")
会选择每个<h1>
元素后面的所有<h2>
兄弟元素。
4.3过滤选择器
这些选择器用于进一步过滤已选择的元素集,例如:
$("p:first")
选择第一个<p>
元素。$("p:last")
选择最后一个<p>
元素。$("tr:odd")
和$("tr:even")
分别选择奇数行和偶数行的<tr>
元素。$("li:eq(2)")
选择第三个<li>
元素(下标从0开始)。$("li:lt(3)")
选择下标小于3的<li>
元素。$("li:gt(1)")
选择下标大于1的<li>
元素。$("div:not(.c1)")
选择所有不包含类名c1
的<div>
元素。
5. 操作元素内容:
5.1html():
这个方法用于获取或设置选定元素的内容。当用于获取内容时,它返回第一个匹配元素的HTML内容;当用于设置内容时,它为所有选定元素设置HTML内容。它等价于原生的innerHTML
属性。
5.2text():
这个方法用于获取或设置选定元素的文本内容。与html()
方法类似,但text()
方法不能识别HTML标签,只会将其视为普通文本。它等价于原生的innerText
属性(尽管行为上可能有所不同,因为jQuery会确保跨浏览器的兼容性)。
5.3val():
这个方法用于获取或设置表单元素(如输入框)的值。它等价于原生的value
属性。例如,$("input").val()
会返回第一个输入元素的当前值,而$("input").val("new value")
会为所有选定的输入元素设置新值。
6. 操作标签属性
在jQuery中,你可以使用attr()
、prop()
和removeAttr()
方法来操作元素的属性。
6.1attr("attrName", "value"):
这个方法用于获取或设置元素的属性值。当你传递两个参数时,它设置指定属性的值;当你只传递一个参数时,它获取该属性的当前值。
6.2prop("attrName", "value"):
这个方法与attr()
类似,用于获取或设置元素的属性值。不过,在处理布尔属性(如checked
、selected
、disabled
等)时,prop()
方法更加可靠,因为它会根据元素的当前状态来设置或获取属性值,而不仅仅是查看HTML标签上的属性。
6.3removeAttr("attrName"):
这个方法用于从元素中移除指定的属性。
7. 操作标签样式
在jQuery中,你可以通过多种方式来操作元素的样式。
7.1为元素添加id/class属性:
你可以通过attr()
或prop()
方法为元素添加或修改id
和class
属性,从而改变元素的样式。这通常与CSS选择器结合使用,以便为具有特定id
或class
的元素应用样式。
7.2操作class属性值的方法:
7.2.1addClass("className"):
为元素添加一个或多个类名。如果添加的类名已经存在,则该方法不会有任何效果。
7.2.2removeClass("className"):
从元素中移除一个或多个类名。如果不传递参数,则会移除元素上的所有类名。
7.2.3toggleClass("className"):
切换元素的类名。如果元素已经包含指定的类名,则将其移除;如果元素不包含指定的类名,则将其添加。
7.3操作行内样式:
7.3.1css("属性名", "属性值"):
设置元素的行内样式。你可以传递两个参数来设置特定的CSS属性,或者传递一个对象来设置多个CSS属性。例如,$("#element").css("color", "red")
会将元素的文本颜色设置为红色。
8. 元素的创建、添加、删除
在jQuery中,你可以动态地创建、添加和删除HTML元素。
8.1创建元素:
你可以使用$("<标签语法>")
来创建一个新的HTML元素。这个方法会返回一个jQuery对象,代表新创建的元素。之后,你可以链式调用其他jQuery方法来设置元素的内容、属性和样式。
8.2添加元素:
- 作为子元素添加:使用
.append()
或.prepend()
方法可以将新元素添加到现有元素内部。.append()
将新元素添加到父元素的末尾,而.prepend()
则将新元素添加到父元素的开头。 - 作为兄弟元素添加:使用
.after()
或.before()
方法可以在现有元素之后或之前添加新元素。
8.3删除元素:
- 使用
.remove()
方法可以移除选定的HTML元素。
9. 动画效果
jQuery提供了一系列简单易用的动画效果方法。
9.1显示和隐藏:
.show(speed, callback)
方法可以使元素逐渐显示出来。你可以指定显示的速度(如"slow"、"fast"或毫秒数)和一个可选的回调函数,该函数在动画完成后执行。.hide(speed, callback)
方法则用于逐渐隐藏元素。
9.2下拉和上推效果:
.slideDown(speed, callback)
方法通过向下滑动的方式逐渐显示被隐藏的元素。这个方法特别适用于块级元素,如<div>
。.slideUp(speed, callback)
方法则通过向上滑动的方式逐渐隐藏元素。
9.3淡入淡出效果:
.fadeOut(speed, callback)
方法通过逐渐降低元素的透明度来隐藏元素,直到元素完全透明。.fadeIn(speed, callback)
方法则通过逐渐增加元素的透明度来显示元素,直到元素完全不透明。
10. 数据与对象遍历
在jQuery中,遍历数据和对象主要有两种方式:$(selector).each()
和 $.each()
。
10.1. $(selector).each()
这个方法主要用于遍历匹配的DOM元素,并对每个元素执行一个函数。这个函数接收两个参数:元素的索引(index)和元素本身(element)。
示例:
$("div").each(function(index, element) {
// 在这里,'this' 关键字也指向当前元素
$(this).css("backgroundColor", "yellow"); // 将每个div的背景色设置为黄色
console.log(index, element); // 输出当前元素的索引和DOM对象
});
10.2. $.each()
这个方法是一个更通用的遍历工具,可以用于遍历数组或对象的属性。它也接收一个函数作为参数,这个函数同样接收两个参数:键(key)或索引(index)和对应的值(value)。
遍历数组示例:
var array = [ "Apple", "Banana", "Cherry" ];
$.each(array, function(index, value) {
console.log(index + ": " + value); // 输出数组的索引和对应的值
});
遍历对象示例:
var object = { name: "John", age: 30, city: "New York" };
$.each(object, function(key, value) {
console.log(key + ": " + value); // 输出对象的键和对应的值
});
结语:
今天我们就先学习到这里,这些都是我个人的一些学习的成果,欢迎大家的指正.