本文详细介绍了jQuery的基本使用，包括入口函数、顶级对象和jQuery对象与DOM对象的区别。重点讲解了jQuery的选择器、样式修改、动画效果和事件处理，如基础选择器、链式编程、滑动效果、动画队列停止和事件注册。此外，还涉及属性操作、内容文本管理和元素操作的相关方法。
视频教程：https://www.bilibili.com/video/BV1a4411w7Gx/?spm_id_from=333.788.videocard.1
jQuery
基本使用
入口函数
实现当页面主要元素加载完成后，再执行后续代码：
原生语句：
document.addEventListener('DOMContentLoaded', function() { })
or
window.onload = function() { }
jQuery实现：
$(document).ready(function() { })
or
$(function() { })——最常用最简洁
以上两种方法都相当于原生语句的第一种方法，即页面主要DOM元素加载完成后就可以执行函数体内部，无需等待外部js、css引用，图片等执行完毕。
顶级对象$
① $ 是jQuery的别名，在代码中两者可以相互代替，一般为了方便，直接使用$。
$(function() { }) == jQuery(function() { })
② $ 是jQuery的顶级对象，可以当作一个JavaScript对象来使用
$('div').hide()
jQuery对象和DOM对象
- 使用原生JS获取到的对象就是DOM对象
var dom1 = document.querySelector('div') - jQuery获取到的对象就是Jquery对象
$('div') - jQuery对象的本质：利用$ 对 DOM对象包装后产生的一个对象（伪数组形式存储）
- jQuery对象只能使用jQuery方法，DOM对象则只能使用原生的Javascript属性和方法
DOM对象和jQuery对象可以相互转换。
因为原生js的DOM对象比jQuery对象更大，原生的部分属性和方法在jQuery中并没有被封装，因此有时需要把jQuery对象转换为DOM对象。
转换
DOM对象 --> jQuery对象
var dom1 = document.querySelector('div');
var j_dom1 = $(dom1);
jQuery对象 --> DOM对象
var j1 = $('div')
// 方法一
var dom1 = $('div')[0]
// 方法二
var dom2 = $('div').get(0)
常用API
选择器
基础选择器
原生JS中获取元素的方式很多很杂，且各个方法兼容性不一致，而jQuery对其进行了封装，可以直接使用。
$('选择器') // 内部直接写类似CSS选择器即可
层级选择器
子代：只获取儿子一级的元素；
后代：获取所有的子元素，儿子、孙子都获得。
隐式迭代
遍历内部DOM元素（伪数组形式存储的）的过程就是隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们自己写循环，简化操作。
<body>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
// 1. 获取四个div元素
console.log($("div"));
// 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
$("div").css("background", "pink");
// 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
$("ul li").css("color", "red");
</script>
</body>
筛选选择器
可以在多个元素中指定选择某几个元素。
筛选方法
排他思想的jQuery实现
实现思路：
假设要给一组元素实现点击后变色，其他元素的颜色复原：
- 隐式迭代 给该组元素绑定点击事件
- 在事件处理函数中，将当前元素的颜色改变
- 在事件处理函数中，将其他兄弟元素的颜色复原（利用了隐式迭代）
代码如下：
<body>
<button>快速</button>
<button>快速</button>
最低0.47元/天 解锁文章
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
