jQuery 基础语法

jQuery 基础语法

一、 jQuery 概述

1、 JS 库

仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以了

JS 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数里面，比如动画 animate、hide、show，比如获取元素等

简单理解：就是 JS 文件，里面对我们原生 JS 代码进行了存储，存放到里面。这样我们可以快速高效的使用这些封装好的函数

比如 jQuery，就是为了快速方便的操作 DOM，里面基本都是函数（方法）

2、 jQuery 概念

jQuery 是一个快速、简洁的 JS 库，其设计的宗旨是 “writeLessDoMore” ，即倡导写更少的代码，做更少的代码

j 就是 JS；Query 查询；意思就是查询 JS，把 JS 中的 DOM 操作做了封装，我们可以快速的查询使用里面的功能

jQuery 封装了 JS 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互

学习 jQuery 本质就是学习调用这些函数（方法）

jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率

3、 jQuery 优点

jQuery在线手册

• 轻量级，核心文件才 几十kb，不会影响页面加载速度
• 跨浏览器兼容，基本兼容了现在主流的浏览器
• 链式编程，隐式迭代
• 对事件、样式、动画支持，大大简化了 DOM 操作
• 支持插件扩展开发，有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等
• 免费、开源

二、 jQuery 基本使用

1、 jQuery 使用步骤

1. 引入 jQuery文件

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   

2. 然后直接使用即可

2、 jQuery 入口函数

$ (function () {
   
    ··· // 此处是页面 DOM 元素加载完成的入口
})
$ (document).ready(function () {
   
    ···  // 此处是页面 DOM 加载完成的入口
})

3、 jQuery 顶级对象

1. $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $
2. $ 是 jQuery 的顶级对象，相当于原生 JS 中的 window。把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法

4、 jQuery 对象和 DOM 对象

1. 用原生 JS 获取来的对象就是 DOM 对象
2. 用 jQuery 方法获取的元素就是 jQuery 对象
3. jQuery 对象的本质是：利用 $ 对 DOM 对象包装后产生的对象（伪数组形式存储）

• jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JS 属性和方法

这两个对象是可以相互转换的

因为原生 JS 比 jQuery 更大，原生一些属性和方法 jQuery 没有给我们封装，要像是用这些属性和方法需要把 jQuery 对象转换为 DOM 对象才能使用

1. DOM 对象转换为 jQuery 对象

   $(DOM 对象);
   

2. jQuery 对象转换为 DOM 对象

   $("div")[index];  // index 是索引号
   $("div").get(index);  // index 是索引号
   // 该对象以伪数组的形式存储
   

<div></div>
<script>
    // DOM 对象
    var div = document.querySelector("div");
	$(div);  // 转换成 jQuery 对象
	// jQuery 对象
	$("div");
	$("div")[0];  // 转换成 DOM 对象
</script>

三、 jQuery 常用 API

1、 jQuery 选择器

原生 JS 获取元素方式很多、很杂，而且兼容性情况不一致，因此 jQuery 给我们提供了封装，是获取元素同一标准

$("选择器")  // 里面选择器直接写成 CSS 选择器即可，但是要加引号

2、 隐式迭代

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们在进行循环，简化我们的操作，方便我们调用

3、 jQuery 筛选选择器

4、 jQuery 筛选方法

index(): 获取索引号

parents(“选择器”)：选择符合条件的祖先元素

5、 jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式

$(function () {
   
    // 隐式迭代，给所有的按钮都绑定了点击事件
    $("li").click(function () {
   
        // 当前的元素样式改变
        $(this).css("background", "pink");
        // 其余兄弟去掉背景颜色
        $(this).siblings("li").css("background", "");
    });
});

6、 链式编程

链式编程是为了节省代码量，看起来更优雅

$(function () {
   
    $("li").click(function () {
   
        $(this).css("background", "pink").siblings().css("background", "");
    });
});

即重复的代码可以省略，直接写在第一行代码后面

四、 jQuery 样式操作

1、 操作 CSS 方法

jQuery 可以使用 CSS 方法来修改简单元素样式；也可以操作类，修改多个样式

1. 参数只写属性名，则是返回属性值

   $(this).css("color");
   

2. 参数是 (属性名, 属性值) 中间用逗号分割，是设置一组样式，属性必须加引号，值如果是数字可以不用加单位和引号

   $("div").css