jQuery自学笔记
一、概述
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。
jQuery 库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
- 【提示： 除此之外，jQuery 还提供了大量的插件。】
1.1 jQuery安装
网页中添加 jQuery可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：
- 从 jquery.com 下载 jQuery 库
- 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
1.1.1 从 jquery.com 下载 jQuery 库
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
1.1.2 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
//百度 CDN
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
//又拍云 CDN:
<head>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>
二、jQuery基础语法
2.1. 核心语法格式
jQuery的核心语法遵循固定范式，通过选择器定位元素，再调用方法执行操作，基础格式如下：
$(selector).action();
// 拆解：
// $：jQuery的别名，等同于jQuery关键字，是调用jQuery的入口
// selector：选择器，用于精准定位HTML DOM元素
// action()：jQuery方法，执行元素操作、事件绑定、样式修改等动作
2.2. 入口函数（必备）
入口函数的作用是等待DOM文档加载完成后，再执行jQuery代码，避免因DOM未渲染完成，导致选择器找不到元素、代码失效的问题，是jQuery代码的必备载体。
// 标准完整写法
$(document).ready(function(){
// 所有jQuery业务代码写在此处
});
// 极简简写写法（开发最常用）
$(function(){
// 核心业务代码
});
关键注意事项：原生JS的window.onload会等待图片、样式等所有资源加载完成，而jQuery入口函数只等待DOM结构加载完成，执行速度更快，且同一页面可写多个，不会覆盖。
2.3. jQuery对象与DOM对象转换
jQuery选择器获取的是jQuery对象，原生JS获取的是DOM对象，二者方法不能混用，需通过以下方式转换：
-
DOM对象 → jQuery对象：用 ( ) 包裹 D O M 对象即可，例： ()包裹DOM对象即可，例： ()包裹DOM对象即可，例：(document.getElementById(‘box’))
-
jQuery对象 → DOM对象：通过索引[0]或get(0)方法，例：$(‘#box’)[0] 或 $(‘#box’).get(0)
2.4. 链式编程
jQuery支持链式调用，对同一个元素连续执行多个操作，简化代码结构，减少重复选择器：
// 链式编程示例
$('#box').css('color','red').slideDown(500).click(function(){ alert('点击成功'); });
三、jQuery选择器（核心重点）
jQuery选择器完全兼容CSS3选择器语法，同时新增专属过滤选择器，定位元素精准灵活，是jQuery的核心基础，分为六大常用类别，搭配示例方便理解。
3.1. 基本选择器（最常用）
匹配页面元素的基础方式，执行效率高，优先使用ID选择器。
| 选择器格式 | 作用 | 示例 |
|---|---|---|
| #id | 根据ID匹配唯一元素 | $(‘#container’) |
| .class | 根据类名匹配元素 | $(‘.item’) |
| 标签名 | 根据HTML标签匹配元素 | ( ′ d i v ′ ) 、 ('div')、 (′div′)、(‘p’) |
| * | 匹配页面所有元素 | $(‘*’) |
| selector1,selector2 | 并集选择器，匹配多个选择器的元素 | $(‘div,.box,p’) |
3.2. 层级选择器
根据元素之间的父子、兄弟层级关系定位元素，适用于嵌套结构。
-
后代选择器：$(‘div p’) → 匹配div内部所有p元素（包含子元素、孙元素）
-
子选择器：$(‘div>p’) → 仅匹配div直接子级p元素，不包含深层后代
-
相邻兄弟选择器：$(‘div+p’) → 匹配div后面紧邻的第一个p元素
-
通用兄弟选择器：$(‘div~p’) → 匹配div后面所有同级p元素
3.3. 基本过滤选择器
基于元素索引、状态过滤筛选，搭配标签选择器使用，索引从0开始计数。
-
$(‘li:first’) → 匹配第一个li元素
-
$(‘li:last’) → 匹配最后一个li元素
-
$(‘li:eq(2)’) → 匹配索引等于2的li元素
-
$(‘li:gt(2)’) → 匹配索引大于2的li元素
-
$(‘li:lt(2)’) → 匹配索引小于2的li元素
-
$(‘li:even’) → 匹配偶数索引元素（0、2、4…），常用于表格隔行变色
-
$(‘li:odd’) → 匹配奇数索引元素（1、3、5…）
-
$(‘div:not(.active)’) → 排除类名为active的div元素
3.4. 属性选择器
根据元素的属性、属性值匹配元素，适用于自定义属性场景。
-
$(‘[id]’) → 匹配包含id属性的所有元素
-
$(‘[type=“text”]’) → 匹配type属性值为text的元素
-
$(‘[type!=“text”]’) → 匹配type属性值不是text的元素
-
$(‘[href^=“http”]’) → 匹配href属性以http开头的元素
-
( ′ [ s r c ('[src (′[src=“.jpg”]') → 匹配src属性以.jpg结尾的元素
-
$(‘[class*=“btn”]’) → 匹配class属性包含btn字符的元素
3.5. 可见性过滤选择器
-
$(‘:hidden’) → 匹配所有隐藏元素（display:none、type="hidden"等）
-
$(‘:visible’) → 匹配所有可见元素
3.6. 表单选择器
专门用于快速定位表单元素，简化表单操作，适配input、select、textarea等标签。
-
$(‘:input’) → 匹配所有表单元素（input、select、button、textarea）
-
$(‘:text’) → 匹配单行文本框
-
$(‘:password’) → 匹配密码框
-
$(‘:radio’) → 匹配单选按钮
-
$(‘:checkbox’) → 匹配复选框
-
$(‘:checked’) → 匹配选中的单选框、复选框
-
$(‘:selected’) → 匹配下拉框中选中的option元素
-
$(‘:enabled’) → 匹配可用的表单元素
-
$(‘:disabled’) → 匹配禁用的表单元素
选择器注意事项：1. 选择器语法越简单，执行效率越高，优先ID选择器，避免多层嵌套复杂选择器；2. 特殊字符（如.、#、[]）在属性或id中时，需用转义符\处理；3. 选择器区分大小写，书写时需与HTML结构一致。
四、jQuery事件处理
jQuery事件简化了原生JS的事件绑定，支持多种绑定方式，兼容不同浏览器，涵盖页面交互的常用场景，分为常用事件类型、绑定方法、事件操作三大板块。
4.1. 常用DOM事件类型
日常开发高频使用的事件，分为鼠标事件、键盘事件、表单事件、文档窗口事件四大类。
（1）鼠标事件
-
click() → 鼠标单击事件
-
dblclick() → 鼠标双击事件
-
mouseenter() → 鼠标移入事件（不冒泡，推荐使用）
-
mouseleave() → 鼠标移出事件（不冒泡，推荐使用）
-
mouseover() → 鼠标移入（冒泡，子元素触发会影响父元素）
-
mouseout() → 鼠标移出（冒泡，子元素触发会影响父元素）
-
hover() → 同时绑定移入移出，语法：hover(enterFn,leaveFn)
（2）键盘事件
-
keydown() → 键盘按键按下
-
keyup() → 键盘按键抬起（常用，获取输入值）
-
keypress() → 键盘按键按压（区分大小写，不识别功能键）
（3）表单事件
-
focus() → 元素获取焦点
-
blur() → 元素失去焦点
-
change() → 元素值发生改变（input、select、textarea）
-
submit() → 表单提交事件（绑定form元素）
（4）文档/窗口事件
-
ready() → DOM加载完成（入口函数）
-
resize() → 窗口大小改变
-
scroll() → 滚动条滚动
4.2. 事件绑定与解绑方法
（1）on()方法（推荐，通用绑定）
on()是jQuery官方推荐的事件绑定方法，支持绑定单个/多个事件，支持动态生成元素的事件委托，适配所有版本。
// 绑定单个事件
$('.btn').on('click',function(){
alert('单击触发');
});
// 绑定多个事件（同一处理函数）
$('.box').on('mouseenter mouseleave',function(){
$(this).toggleClass('active');
});
// 绑定多个事件，不同处理函数
$('.input').on({
focus:function(){ $(this).css('border','1px solid blue'); },
blur:function(){ $(this).css('border','1px solid #ccc'); }
});
（2）off()方法：事件解绑
移除元素绑定的事件，避免事件重复触发、内存泄漏。
// 移除指定事件
$('.btn').off('click');
// 移除所有事件
$('.btn').off();
（3）one()方法：一次性事件
绑定的事件仅触发一次，触发后自动解绑。
$('.btn').one('click',function(){ alert('仅触发一次'); });
4.3. 事件委托（重点）
事件委托利用事件冒泡原理，将子元素的事件绑定到父元素上，解决动态生成元素无法绑定事件的问题，同时提升性能。
// 语法：$(父元素).on('事件','子元素选择器',回调函数)
// 示例：给动态生成的li绑定点击事件
$('ul').on('click','li',function(){
$(this).css('color','red');
});
4.4. 事件对象与阻止默认行为
事件触发时会自动传递事件对象event，包含事件相关信息，可用于阻止默认行为、阻止事件冒泡。
-
阻止默认行为（如表单提交、a标签跳转）：event.preventDefault()
-
阻止事件冒泡：event.stopPropagation()
-
同时阻止默认行为和冒泡：return false
// 阻止a标签默认跳转
$('a').click(function(event){
event.preventDefault();
alert('阻止跳转成功');
});
事件注意事项：1. 避免重复绑定事件，绑定前可先用off()解绑；2. 动态元素必须用事件委托，直接绑定无效；3. mouseenter/mouseleave不会冒泡，优先使用，避免鼠标事件反复触发。
扫一扫
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
