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 基本选择器

名称	用法	描述
ID选择器	$('#id');	获取指定ID的元素
类选择器	$('.class');	获取同一类class的元素
标签选择器	$('div');	获取同一类标签的所有元素
并集选择器	$('div,p,li');	使用逗号分隔，只要符合条件之一就可。
交集选择器	$('div.redClass');	获取class为redClass的div元素
属性选择器	$('input[name=username]')	获取 input 标签中 name 属性为 username 的元素

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

3.2 层级选择器

名称	用法	描述
子代选择器	$('ul > li');	使用 > 号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$('ul li');	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

3.3 过滤选择器

这类选择器都带冒号:

名称	用法	描述
:eq（index）	$('li:eq(2)').css('color', 'red');	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$('li:odd').css('color', 'red');	获取到的li元素中，选择索引号为奇数的元素
:even	$('li:even').css('color', 'red');	获取到的li元素中，选择索引号为偶数的元素