一、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元素中,选择索引号为偶数的元素 |