jQuery入门&以及选择器

一、jQuery基本介绍

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

1.1 什么是jQuery

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

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

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

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

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

一个优秀的 JS 函数库

Write Less，Do More！！！

1.2 使用 jQuery

在页面中引入 jQuery 库

<!-- 服务器本地库 -->
<script src="./jquery-3.6.0.js"></script>
<!--
CDN远程库
  项目上线时，一般使用比较靠谱的CDN资源库，减轻服务器负担
  [https://www.bootcdn.cn/](https://www.bootcdn.cn/)：搜索`jQuery`，复制`<script>`标签到项目中即可使用
-->

jQuery 核心函数

简称：jQuery函数（$/jQuery），jQuery库向外直接暴露的就是$/jQuery

引入jQuery库后，直接使用即可

• 当函数用：$(xxx)
  
• 当对象用：$.xxx()
  

// jQuery函数：直接可用
console.log($, typeof $);  // ƒ ( selector, context ) {}    function
console.log(jQuery === $); // true

jQuery 核心对象

简称：jQuery对象

得到jQuery对象：执行jQuery函数返回的就是jQuery对象

使用jQuery对象：$obj.xxx()

// jQuery对象：执行jQuery函数得到它
console.log($(), typeof $(), $() instanceof Object); // jQuery.fn.init {} "object" true

1.3 入口函数

一般代码写在页面底部，等元素加载完，才能执行 jQuery 代码，或者可以使用下方入口函数解决

<script src="./jquery-3.6.0.js"></script>
<script>
    $(document).ready(function () {
        //
    });
</script>

二、选择器

jQuery 选择器是 jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素

2.1 基本选择器

注意：jQuery选择器返回的是jQuery对象。

3.2 层级选择器

3.3 过滤选择器

这类选择器都带冒号: