什么是jQuery
- jQuery 是对javascript的一种封装–js的函数库。
- 用于客户端的开发，由美国人在2001年1月推出。
jQuery与javascript的区别
- 本质上的区别：jQuery 是一个函数库，基于 js 语言编写出来的框架，实质上还是属于 js。
- 代码书写不同，jq 更简单。
- 使用方法不同：使用 jQuery 和 javascript 分别加载 DOM，
js 只执行一次，jq 可以执行多次。 - 获取 class 的方法不同。js 没有默认的获取方式，jq 可以通过
.$(".类名")来获取。
jQuery的优势
- 轻量级
- 对浏览器的兼容性好
- 强大的选择器
- 完善的 ajax
- 丰富的 API 文档和插件等
熟悉使用jQuery
- 获取相关的js文件
- jquery-xxx.js 与 jquery-xxx.min.js 区别：
- jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
- jquery-xxx.min.js：生产版本。没有缩进。体积小一些。程序加载更快
- 引用 在页面上引用js文件
- 基本使用语法：
$("选择器名").操作 - jQuery的文档就绪(加载)三种写法：
/* 方法1 */
$(document).ready(() => {
选择对象进行操作
})
/* 方法2 */
$().ready(() => {
选择对象进行操作
})
/* 方法3 */
$(() => { // 此方法最简洁
选择对象进行操作
})
window.onload 和 $(function) 的区别
- window.onload 只能定义一次，如果定义多次，后边的会将前边的覆盖掉。
- $(function) 可以定义多次的。
jQuery 对象与 DOM 对象的异同
什么是jQuery对象?
通过jQuery包装DOM(文档)对象后产生的对象，凡是在$(“”)中的都属于jQuery对象。
什么是DOM对象？
页面中元素的集合就是文档对象。
注意 🐟
- jQuery 对象与文档对象不能混合使用。
- jQuery 对象不能使用文档对象的属性及方法，同理文档对象也是。
注意 🐱
DOM(文档)对象与 jQuery 对象是可以相互转换的
- js 转 jq：在 dom 对象的最外层用
$()进行包裹即可。 - jq 转 js：先获取 jq 对象:
var jq = jq = jq = ("选择器名"); $jq.get(索引);
jQuery库与其他库出现冲突问题(释放$的控制权)
- 方法一：在代码的第一行加入:
jQuery.noConflict();释放了 jQuery 的含义，如果仍需使用，需把含义改为 jQuery。 - 方法二
const $jq = jQuery.noConflict() /* 赋值为一个变量 */
$jq(() => {
正常使用
})
jQuery 选择器
jQuery选择器与CSS选择器的区别
- jQuery 与 CSS 是两种不同的语言，jQuery 是一个 js 框架，CSS 是层叠样式表，所以两者本质上是不同的。
- 两者有一定交集，都是被网页或浏览器解析的语言，而 jQuery 可以通过修改浏览器的 dom 对象来实现对 CSS 的修改或控制。
总结，jQuery 选择器应用于 js 中，CSS 选择器用于 CSS 中，只是两者有时使用相同的 id 标识来选择对象。jQuery 选择器包含了 CSS 1, CSS 2, CSS 3 中的绝大多数选择器。
jQuery选择器的优点
- 写法简洁
- 继承了 CSS 选择器的风格，支持 CSS1–CSS3 选择器
- 完善的处理机制可以避免浏览器报错，比单纯的 CSS 功能更强大，还可兼容不同的浏览器。
jQuery选择器的分类
- 基本选择器
- 层次选择器
- 过滤选择器
- 表单选择器
基本选择器
| 选择器名 | 描述 | 示例 |
|---|---|---|
| id选择器： #id | 根据id获取元素 | $(“#test”)\ |
| 类选择器： .class | 根据类名获取元素 | $(“.test”)\ |
| 元素选择器: element | 根据元素名称获取元素 | $(“p”)\ |
| 所有元素选择器： * | 获取所有元素 | $(“*”)\ |
| 并集选择器： s1,s2… | 将选择的所有元素合并 | $(“div, span”)\ |
jQuery 的层次选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 后代选择器 | $("A B ") | 选择A元素内部的所有B元素 |
| 子选择器 | $("A > B") | 选择A元素内部的所有B子元素 |
jQuery 的属性选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 属性名称选择器 | $(“A[属性名]”) | 包含指定属性的选择器 |
| 属性选择器 | $(“A[属性名=‘值’]”) | 包含指定属性等于指定值的选择器 |
| 复合属性选择器 | $(“A[属性名=‘值’][]…”) | 包含多个属性条件的选择器 |
jQuery 过滤选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 首元素选择器 | 获得选择的元素中的第一个元素 | |
| 尾元素选择器 | 获得选择的元素中的最后一个元素 | |
| 非元素选择器 | 不包括指定内容的元素 | |
| 偶数选择器 | 偶数，从 0 开始计数 | |
| 奇数选择器 | 奇数，从 0 开始计数 | |
| 等于索引选择器 | 指定索引元素 | |
| 大于索引选择器 | 大于指定索引元素 | |
| 小于索引选择器 | 小于指定索引元素 | |
| 标题选择器 | 获得标题（h1~h6）元素，固定写法 |
jquery 表单过滤选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 可用元素选择器 | 获得可用元素 | |
| 不可用元素选择器 | 获得不可用元素 | |
| 单选/复选框选中选择器 | 获得单选/复选框选中的元素 | |
| 下拉框选中选择器 | 获得下拉框选中的元素 |
jQuery表单选择器
| 语法 | 描述 |
|---|---|
| $(“:input”) | 选取所有的<input>,<textarea>,<select>,<button>元素 |
| $(“:text”) | 选取所有的单行文本框 |
| $(“:password”) | 选取所有的密码框 |
| $(“:radio”) | 选取所有的单选框 |
| $(“:checkbox”) | 选取所有的多选框 |
| $(“:submit”) | 选取所有的提交按钮 |
| $(“:button”) | 选取所有的按钮 |
| $(“:hidden”) | 选取所有的不可见元素 |
jQuery DOM操作
jQuery节点添加与删除
| 语法 | 示例 | 描述 |
|---|---|---|
| append() | 对象1.append(对象2) | 将对象2添加到对象1元素内部，并且在末尾 |
| appendTo() | 对象1.appendTo(对象2): | 将对象1添加到对象2内部，并且在末尾 |
| prepend() | 对象1.prepend(对象2): | 将对象2添加到对象1元素内部，并且在开头 |
| prependTo() | 对象1.prependTo(对象2): | 将对象1添加到对象2内部，并且在开头 |
| empty() | 对象.empty(): | 将对象的后代元素全部清空，但是保留当前对象以及其属性节点 |
| after() | 对象1.after(对象2) | 将对象2添加到对象1后边。对象1和对象2是兄弟关系 |
| before() | 对象1.before(对象2) | 将对象2添加到对象1前边。对象1和对象2是兄弟关系 |
| insertAfter() | 对象1.insertAfter(对象2) | 将对象1添加到对象2后边。对象1和对象2是兄弟关系 |
| insertBefore() | 对象1.insertBefore(对象2) | 将对象1添加到对象2前边。对象1和对象2是兄弟关系 |
| remove() | 对象.remove() | 将对象删除掉 |
jQuery节点的复制、替换、包裹
| 示例 | 描述 |
|---|---|
| 对象A.clone() | 复制A对象 |
| 对象A.replaceWith(对象B) | 把"A对象"替换为"B对象" |
| 对象A.replaceAll(对象B) | 使用"A对象"替换"B对象" |
| 标签A.wrap(标签B) | B标签分别包裹住每一个A标签 |
| 标签A.wrapAll(标签B) | B标签包裹住所有A标签 |
| 标签A.wrapInner(标签B) | B标签分别包裹住A标签内的所有文本内容 |
jQuery 节点属性操作
| 示例 | 描述 |
|---|---|
| attr(“属性名”) | 获取属性值 |
| attr(“属性名”,“属性值”) | 设置属性值 |
| removeAttr(“属性名”) | 移除属性 |
jQuery 节点样式操作
| 示例 | 描述 |
|---|---|
| addClass(样式名) | 添加样式 |
| removeClass(样式名) | 删除样式 |
| toggleClass(样式名) | 切换样式 |
| css(“样式名”,“属性”) | 添加单个样式 |
| css({“样式名1”:“属性1” , “样式名2”:“属性2”…}) | 添加多个样式 |
| hasClass(样式名) | 判断样式是否存在 |
jQuery html(), text(), val()方法
| 示例 | 描述 |
|---|---|
| html()方法 | 用于设置或获取某个元素中的html内容 |
| text()方法 | 用于设置或获取某个元素中的文本内容 |
| val()方法 | 用于设置或获取某个元素的值 |
遍历节点
| 示例 | 描述 |
|---|---|
| children() | 获取当前的元素的子元素集合(父亲找儿子) |
| find() | 获取当前的元素的所有后代元素集合(祖宗找后代) |
| parent() | 获取当前元素的父元素集合(儿子找父亲) |
| parents() | 获取当前元素的所有前辈元素集合(后辈找前辈) |
| siblings() | 获取当前元素的所有同级元素集合(同辈找同辈) |
| next() | 获取当前元素的下一个同级元素 |
| prev() | 获取当前元素的上一个同级元素 |
jQuery CSS的DOM操作
| 示例 | 描述 |
|---|---|
| css()方法 | 设置或获取元素的样式属性 |
| height(),width() | 设置或获取高度、宽度属性 |
jQuery中的事件与动画
jQuery中的遍历补充
- jQuery 对象.each(callback)
语法：jQuery 对象.each(function(index,element){});
- index:就是元素在集合中的索引
- element：就是集合中的每一个元素对象
- this：获取到的当前元素对象
- callback：回调函数
$.each(object, [callback])- for…of:
for(元素对象 of 容器对象)
jQuery中的事件绑定
- jQuery 的标准绑定方式
- jQuery 对象.事件方法(回调函数)；
- 注意：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
- 补充： 表单对象.submit();//让表单提交
- on()或者bind()绑定事件和off()或者unbind()解除绑定
- jQuery 对象.on(“事件名称”,回调函数)
- jQuery 对象.off(“事件名称”)
- 如果 off 方法不传递任何参数，则将组件上的所有事件全部解绑
- 事件切换1：toggle(fn1,fn2,…)方法：模拟鼠标连续点击事件，对里面的函数进行切换。
- jQuery 对象.toggle(fn1,fn2…)
- 当单击 jQuery 对象对应的组件后，会执行 fn1。第二次点击会执行 fn2…
- 注意：1.9 版本之后 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
- 事件切换2：hover(enter,leave)方法：模拟鼠标悬停事件，鼠标移到元素上触发第一个 enter() 函数，鼠标移除触发 leave() 函数
jQuery中的动画
- 显示/隐藏：show() / hide() 组合方法：toggle()
- 淡入/淡出：fadeIn() / fadeOut() 组合方法：fadeToggle()
- 滑入/滑出：slideUp() / slideDown()组合方法：slideToggle()
- 自定义动画：animate()