目录
3.2将原生JavaScript对象转换为jQuery对象：
3.3从jQuery对象转换到原生JavaScript对象：
7.2.2removeClass("className")：
7.2.3toggleClass("className")：
9. 动画效果jQuery提供了一系列简单易用的动画效果方法。
前言:
在前面我们已经学习了很多关于,前端方面的知识了,现在我们开始学习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); // 输出对象的键和对应的值
});结语:
今天我们就先学习到这里,这些都是我个人的一些学习的成果,欢迎大家的指正.
扫一扫
1157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
