目录
- jQuery
- 官网下载与安装
- jQuery简介
- jQuery 内容
- jQuery语法
- jQuery对象
- 对比DOM对象和jQuery对象
- 对象之间的转换
- 选择器
- 基本选择器
- 组合选择器
- 属性选择器
- 基本筛选器
- 表单筛选器
- 表单对象属性
- 筛选器方法
- 案例：菜单栏
- 样式操作
- 位置操作
- 案例：返回顶部
- 获取尺寸
- 文本操作
- HTML代码
- 文本值
- 值
- 属性操作
- 文档处理
- 事件
- 事件绑定
- 移除事件
jQuery
jQuery封装了JS代码，使JS的编写更加简单，类似python的模块，在前端中叫
“类库”，同时也兼容多个浏览器，提供了更多的功能，写的更少，功能却更多(write less do more)
官网下载与安装
看到下载安装的小伙伴不要害怕，jQuery的下载与安装及其简单，安装的同时不影响你开法拉利，下面一个小demo你就明白~
- jQuery
- jQuery 教程 (w3school.com.cn)
- jQuery API 中文文档 | jQuery API 中文在线手册 )
- Ajax - jQuery API 中文文档 | jQuery 中文网 (jquery123.com)
# 本地版
'''
1. 打开第一个jQuery官网
2.点击Downloading jQuery
3.Download the compressed, production jQuery 3.6.0推荐下载压缩版本，加载比较快
4.通过点击打开，复制里面的内容保存到JS文件中
5.通过script标签的src引入文件
'''
# CDN版（CDN：Content Delivery Network，内容分发网络）
'''
如果能保持电脑一直有网络，可以选择这个版本
1.打开bootcdn:https://www.bootcdn.cn/jquery/3.4.1/
2.选择3.4左右版本的jQuery
3.https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js
4.3中给大家放好URL了，复制
5.通过script标签引入
'''
# 最终引入
# 本地
# CDN
jQuery简介
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
- jQuery 很容易学习。
前面总结了JS相关知识的文章，对元素进行添加，修改，获取···操作很繁琐，代码多，但是jQuery 库可以通过一行简单的标记被添加到网页中
jQuery 内容
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档处理
- 事件
- 动画效果
- 插件
- each、data、Ajax
jQuery语法
$符号事jQuery中的重要标识
//在JS中可以通过获取先获取标签，然后去使用对应的方法，在jQuery中一样，可以先筛选元素（标签），然后再对该元素做出动态操作
- 格式：
$(selector).action() selector：通过选择器获取元素action：获取元素后的动作行为
jQuery对象
JS中DOM获取到的元素是DOM对象，那么在jQuery中获取到的元素属于jQuery对象，两者之间方法有差别，虽然
jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也没不能使用jQuery里的方法
对比DOM对象和jQuery对象
- DOM对象：var variable = DOM对象
- jQuery对象：var $variable = jQuery对象
- 声明jQuery对象变量时候前面加‘$’
//获取id值为d1的元素的html
jQuery: $("#d1").html()
DOM: document.getElementById("d1").innerHTML
对象之间的转换
- DOM转jQuery：
$(DOM对象) - jQuery转DOM：
jQuery对象[索引]
Demo
var dEle = document.getElementById("d1").innerHTML
$(dEle) //DOM转jQuery
$("#d1")[0] //jQuery转DOM
选择器
基本选择器
| CSS选择器关键字 | jQuery | 说明 |
|---|---|---|
tagName |
$('tagName') |
标签选择器 |
. |
$('.className') |
类选择器 |
# |
$('#id') |
id选择器 |
* |
$('*') |
通用选择器 |
demo
Title
1
2
3
标签选择器
//获取p标签
$('p')
//获取div标签
$('div')
id选择器
//获取id为1的元素
$('#1')
类选择器
//获取类名为class3的元素
$('.class3')
通用选择器
//获取所有元素
$('*')
//k.fn.init(11) [html, head, meta, title, script, script, body, p#1.class1, p#2.class2, div#3.class3, script, prevObject: k.fn.init(1)]
组合选择器
a和b可以是任意选择器
| CSS选择器关键字 | jQuery | 说明 |
|---|---|---|
空格 |
$(a b) |
后代选择器 |
> |
$(a>b) |
儿子选择器 |
+ |
$(a+b) |
相邻选择器（紧挨着） |
~ |
$(a~b) |
弟弟选择器（不需要紧挨着） |
ps：相邻和弟弟选择器都是同级别的
demo
div1
div里的p
div里的p中的span
div2
后代选择器
//查找id='d1'，div元素的后代span元素
$('#d1 span' )
儿子选择器
//查找div元素class=d1的儿子id=p1
$('.d1 #p1')
相邻选择器
//查找id=d1的div元素的相邻元素
$('#d1+div')
弟弟选择器
//查找id=d1的div元素的弟弟元素div
$('#d1~#d2')
属性选择器
CSS 属性选择器通过已经存在的属性名或属性值匹配元素;
jQuery也可以通过属性选择器来进行操作；
| CSS选择器关键字 | jQuery | 说明 |
|---|---|---|
[attr] |
[attr] |
带有以 attr 命名的属性的元素 |
[attr=value] |
[attr=value] |
表示带有以 attr 命名的属性，且属性值为 value 的元素 |
[attr!=value] |
[attr!=value] |
表示带有以 attr 命名的属性，且属性值不为 value 的元素 |
选择器不会可以看：(CSS快速入门（一） - HammerZe - 博客园 (cnblogs.com))
// 示例
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
基本筛选器
可以对选择器获取到的元素进一步筛选
| 方法 | 说明 |
|---|---|
:first |
第一个 |
:last |
最后一个 |
:eq(index) |
索引等于index的那个元素 |
:even |
匹配所有索引值为偶数的元素，从 0 开始计数 |
:odd |
匹配所有索引值为奇数的元素，从 0 开始计数 |
:gt(index) |
匹配所有大于给定索引值的元素 |
:lt(index) |
匹配所有小于给定索引值的元素 |
:not(元素选择器) |
移除所有满足not条件的标签 |
:has(元素选择器) |
选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) |
ps:可以写括号内，也可以点出来
demo code
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
demo
//first
$('ul li:first()')
$('ul li:first()')[0].innerText //1
//last
$('ul li:last()')
$('ul li').last()
//eq
$('ul li:eq(1)')
//even
$('ul li:even()')
//odd
$('ul li:odd()')
//gt
$('ul li:gt(2)')
//lt
$('ul li:lt(2)')
//not
$('ul li:not(.l9)')
//has
$('ul li:has(.l9)')
练习，自定义模态框，实现弹出隐藏功能
自定义模态框
jQuery版自定义模态框
表单筛选器
表单忘记了可以看俺的笔记哦：HTML表单 - HammerZe - 博客园 (cnblogs.com)
:text //普通文本
:password //密文密码
:file //上传文件
:radio //选择
:checkbox //多选
:submit // 提交按钮
:reset //重置按钮
:button //普通按钮
可以针对表单进行筛选
'''通过属性选择器可以通过属性值来获得元素，在表单筛选器中对此进行了简写'''
# 属性筛选器获取type=text的input元素
$('input[type=text]')
#表单筛选器获取
$(':text')
# 表单筛选器的特例
$(':checked') # 找checked属性的input标签会连同option默认的selected一起找到，但是找selected属性的option标签不会输出input标签
表单对象属性
:enabled //可用的
:disabled //失效的
:checked //勾选的（input标签）
:selected //选择好的（option标签）
筛选器方法
| 方法 | 说明 |
|---|---|
| first() | 获取匹配的第一个元素 |
| last() | 获取匹配的最后一个元素 |
| not() | 从匹配元素的集合中删除与指定表达式匹配的元素 |
| has() | 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 |
| next() | 下一个元素 |
| nextAll() | 下面所有元素 |
| nextUntil("元素选择器") | 直到下面选择器获取的元素 |
| prev() | 上一个元素 |
| prevAll() | 上面所有元素 |
| prevUntil("元素选择器") | 直到上面选择器获取的元素 |
| parent() | 父元素 |
| parents() | 所有父元素 |
| parentsUntil(“元素选择器”) | 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止 |
| children() | 该元素的子元素 |
| siblings() | 该元素的兄弟元素 |
| find(‘元素选择器’) | 查找该元素的后代元素 |
| filter(‘元素选择器’) | 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式 |
demo
//next
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
//prev
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
//parent
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
//children siblings
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
//find 等价于$("div p")
$("div").find("p")
//filter
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
案例：菜单栏
左侧菜单示例
左侧菜单栏
样式操作
对比DOM
| DOM | jQuery | 说明 |
|---|---|---|
| add(class1, class2, …) | addClass() | 添加指定的CSS类名 |
| remove(class1, class2, …) | removeClass() | 移除指定的CSS类名 |
| contains(class) | hasClass() | 判断样式存不存在 |
| toggle(class, true|false) | toggleClass() | 切换CSS类名，如果有就移除，如果没有就添加。 |
$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置操作
DOM操作
| 方法 | 说明 |
|---|---|
| open() | 打开一个新的浏览器窗口 |
| alert() | 显示警告窗口 |
| close() | 关闭当前浏览器窗口 |
| scrollTo() | 可把内容滑动到指定坐标 |
| scrollBy() | 可将内容滑动指定的距离（相对于当前位置） |
| innerWidth | 返回窗口的网页显示区域宽度 |
| innerHeight | 返回窗口的网页显示区域高度 |
jQuery
| 方法 | 说明 |
|---|---|
| offset() | 获取匹配元素在当前窗口的相对偏移或设置元素位置 |
| position() | 获取匹配元素相对父元素的偏移 |
| scrollTop() | 获取匹配元素相对滚动条顶部的偏移 |
| scrollLeft() | 获取匹配元素相对滚动条左侧的偏移 |
ps:.offset()方法允许我们检索一个元素相对于文档（document）的当前位置，和 .position()的差别在于： .position()是相对于相对于父级元素的位移；
案例：返回顶部
位置相关示例之返回顶部
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
返回顶部示例
获取尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
//案例
$(window).height()
236
$(window).width()
1229
文本操作
方法括号内没有值就获取，有值就设置
HTML代码
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
值
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
demo code
篮球
足球
设置值
//将属性name=hobby的元素的值修，元素修改，效果勾选篮球足球
$("[name='hobby']").val(['basketball', 'football']);
//设置id为s1的值，效果选择1和2
$("#s1").val(["1", "2"])
获取被选中的checkbox或radio的值：
$("input[name='gender']:checked").val()
属性操作
用于ID等或自定义属性：
attr(attrName)// 返回第一个匹配元素的属性值 DOM:setAttribute(name,value)
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
示例
总结：
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop
- 通俗理解为：attr适用于属性为静态的情况(不经常修改动态变化的)，而prop用于动态变化的情况，尤其是选择类标签
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
替换
replaceWith()
replaceAll()
克隆
clone()// 参数
案例：
克隆
点击复制按钮
事件
click(function(){...}) //点击
hover(function(){...}) //悬浮
blur(function(){...}) //失去焦点
focus(function(){...}) //聚焦
change(function(){...}) //文本域
keyup(function(){...}) //任意按键
keydown和keyup事件组合示例：
Title
#
姓名
操作
Egon
Alex
Yuan
EvaJ
Gold
按住shift实现批量操作
hover事件示例：
Title
苍茫的天涯是我的哎，绵绵的青山脚下一片海！
hover事件
实时监听input输入值变化示例：
实时监听input输入值变化
input值变化事件
事件绑定
.on( events [, selector ],function(){})
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
移除事件
-
.off( events [, selector ][,function(){}]) -
off()方法移除用.on()绑定的事件处理程序。
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
【待续】