jQuery 基础学习

jQuery 学习

这篇文章主要讲了 jQuery 的基本使用 (包括入口函数，原生对象和 jQuery 对象的差别和转化) jQuery 常用的 选择器 隐式迭代 样式操作 和 自带或者自定义的动画效果，jQuery 对属性的操作，元素内容的文本值进行操作，和对元素的操作

• pink老师最后一个部分的前端课程, 且行且珍惜
• jQuery 是 JavaScript 的一个库 (library: 对JavaScript 的代码进行封装)
• jQuery 推荐使用双引号

write Less, Do more

jQuery 基本使用

• jQuery 1.x 的版本兼容 IE 678 低版本浏览器，但是官网不再更新支持

• 同样分为开发版(development)和压缩版(production)，使用时推荐压缩版

• 当在把代码复制到文件中时可能会出现复制不全的错误，这时只需要打开 F12 中的 network 选择把那个 js 文件保存到本地就可以了

• 使用 <script src="jquery-3.5.1.min.js"></script> 引入 jQuery

• 元素隐藏：用来测试是否引入成功

$('div').hide();

jQuery 的入口函数

• 入口函数是指等待页面全部加载完毕才执行的函数

• 在 jQuery 中有两种写法

• 等 DOM 元素加载完毕再去执行 js 代码：

$(document).ready(function(){
   
    // 要执行的代码
})

• 或者

$(function() {
   
    // 要执行的代码
})

jQuery 顶级对象 $

• $ 符号和 jQuery 是通用的，也就是可以写成：

$(function() {
   
    console.log('hello jQuery');
});
// 也可以写成
jQuery(function() {
   
    console.log('hello jQuery');
});

• $ 是 jQuery 的顶级对象，相当于 window，可以调用 jQuery 中的方法

DOM 中的对象和 jQuery 中的对象

• 通过原生 js 获取的对象是 DOM 对象
• jQuery 对象是用 $('div') 获取的
• jQuery 对象本质是 $ 对 DOM 对象包装后产生的对象 (使用伪数组的方式储存)
• jQuary 对象不能使用原生 js 中的方法

jQuary 对象和 DOM 对象之间的转化

• 有些时候 jQuery 对象没有原生 DOM 对象的一些方法 (例如给视频播放的 play 方法是原生方法，在 jQuery 中没有)

• DOM 对象转化为 jQuery 对象：$(DOM对象)

• jQuery 对象转化为 DOM 对象：$('div')[index] 或者 $('div').get(index)

• 例如我们想让一个 jQuery 对象的视频播放：

$('video').get(0).play();
// 或者
$('video')[0].play();

jQuery 常用 API

jQuery 选择器

• jQuery 给复杂的原生选择器进行了封装

$("选择器");

• 里面的选择器和 CSS 中的选择器是一样的

层级选择器	用法	描述
子代选择器	$("ul>li")	获取子层级的元素，注意，不会获取孙子层级的元素
后代选择器	$("ul li")	使用空格，可以选取后代所有的元素，包括孙子级元素

jQuery 筛选选择器

筛选选择器	用法	描述
:first	$("li:first")	获取第一个 li 元素
:last	$("li:last")	获取最后一个 li 元素
:eq(index)	$("li:eq(2)")	获取第 index 个元素，索引号从 0 开始
:odd	$("li:odd")	获取索引号为奇数的元素
:even	$("li:even")	获取索引号为偶数的元素

jQuery 隐式迭代

• jQuery 设置属性值：

$('div').