jQuery的语法和使用

jQuery的基本介绍

jQuery 是前端的一种类库

也就是前端函数方法中的一个函数库 - 本质就是一个外部的js文件，里面封装了很多js函数方法

加载导入这个js外部文件就可以调用其中的函数方法

返回的是伪数组

jQuery的网站

jQuery的官网 https://jquery.com/

jQuery的中文 https://jquery.cuishifeng.cn/

jQuery的基本语法

① 加载导入jQuery文件（引入jQuery文件可在官网上直接复制链接）

② 通过 $ 或者 jQuery 这两个关键词来调用外部文件中的函数方法

jQuery的本质

就是封装好的js函数程序

通过导入外部js文件使用关键词 $ 或者 jQuery 调用外部文件中的函数方法

操作设定 HTML标签对象

jQuery的优点

① 选择器

② 链式编程

③ 隐式迭代

jQuery获取选择器

① $( 'ul' ) --- 获取标签伪数组

② $( 'ul>li:first-child' ) 简写 $('ul>li:first') --- 获取第一个li

③ $( 'ul>li:last-child' ) 简写 $('ul>li:last') --- 获取第一个li

④ $( 'ul>li:nth-child(3)' ) --- 获取第三个li

⑤ $( 'ul>li:eq(2)' ) --- 获取索引下标是2的li

⑥ $( 'ul>li:nth-child(odd)' ) --- 获取第奇数个的li

⑦ $( 'ul>li:odd' ) --- 获取索引下标是奇数的li

⑧ $( 'ul>li:nth-child(even)' ) --- 获取第偶数个的li

⑦ $( 'ul>li:even' ) --- 获取索引下标是偶数的li

jQuery选择器支持的条件

支持所有html和css都支持的语法形式

也就是和 JavaScript 获取 querySelector('条件') 支持的语法形式完全相同

标签名称

#id选择器名称
.class选择器名称
[属性="属性值"]
ul>li
ul>li:first-child
.....

jQuery本身的语法形式

ul>li:first
ul>li:last
ul>li:odd
ul>li:even
ul>li:eq(索引下标)

注意:

JavaScript DOM操作获取的是独立的标签对象 / JavaScript标签对象伪数组
jQuery 获取的是 jQuery标签对象伪数组
DOM操作获取的不能使用 jQuery语法形式来操作
jQuery获取的伪数组也不能使用 js的语法形式来操作
DOM操作获取的一个独立的标签对象使用 $(标签对象) 的语法形式
可以转化为 jQuery伪数组可以使用 jQuery语法形式来操作
jQuery伪数组通过 []语法获取的是一个独立的 js标签对象