初始jQuery

前言:

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); // 输出对象的键和对应的值  
});

结语:

今天我们就先学习到这里,这些都是我个人的一些学习的成果,欢迎大家的指正.