前言
jQuery学习笔记
jQuery基础
下载的版本
开发工具
预加载函数
- 写在
<script></script>标签内，如果写在<head></head>标签内需要预加载函数
第一种写法
1
2
3
4
5
6
7
8
| <head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
jQuery(document).ready(function(){
...
})
</script>
</head>
|
第二种写法
1
2
3
4
5
6
7
8
| <head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
...
})
</script>
</head>
|
第三种写法
1
2
3
4
5
6
7
8
| <head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
jQuery(function(){
...
})
</script>
</head>
|
第四种写法
1
2
3
4
5
6
7
8
| <head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
...
})
</script>
</head>
|
Dom对象和jquery对象的转换
1
2
| jquery对象[0]
jquery对象.get(0)
|
jQuery选择器*
基本选择器
标签选择器
类选择器（.）
id选择器（#）
并集选择器（,）
交集选择器（相连）
全局选择器（*）
层次选择器
相邻选择器（+）
同辈选择器（~）
后代选择器（空格）
子代选择器（>）
兄弟选择器
选中后面紧邻的兄弟元素
1
| $("#example").next("span")
|
选中前面紧邻的兄弟元素
1
| $("#example").prev("span")
|
选中所有后面的兄弟元素
1
| $("#example").nextAll("span")
|
选中所有前面的兄弟元素
1
| $("#example").prevAll("span")
|
选中所有前后的兄弟元素
1
| $("#example").siblings("span")
|
属性选择器（[…]）
<key>：属性名
<value>：属性值
选中有指定属性名的元素
选中有指定属性名和指定属性值的元素
选中有指定属性名但没有指定属性值的元素
- 选中有指定属性名但没有指定属性值的元素
- 选中没有制定属性名的元素
选中制定属性名有以指定关键字开头的元素
选中制定属性名有以指定关键字结尾的元素
选中制定属性名有包含指定关键字的元素
过滤选择器（:）
最开头那一个
最后那一个
偶数
奇数
第index个
大于index的全部元素
小于index的全部元素
除了…以外的
选中所有的标题元素
获取当前焦点的元素
可见性选择器
表单选择器
匹配所有”input”、”textarea”、”select”、”button”
1
2
3
4
5
6
| :input
$(":input").each(function(index, elemet){
if(index==0){
}else if(index==1){
}
})
|
匹配所有单行文本框
匹配所有密码框
匹配所有单选按钮
匹配所有复选框
匹配所有提交按钮
匹配所有图像
匹配所有重置按钮
匹配所有按钮
匹配所有文件域
匹配所有不可见元素
jQuery事件
1
2
3
4
5
| $(document).ready(function(){
$(选择器).事件类型(function(){
...
})
})
|
绑定事件与移除事件
1
2
| $(...).bind("事件名", [数据], 函数)
$(...).unbind("事件名")
|
批量绑定
1
2
3
4
5
| $(...).bind({
"事件名":函数,
"事件名":函数,
...
})
|
windows事件
鼠标事件
单击事件
鼠标移动
移入和移出
1
2
| mouseenter()
mouseleave()
|
悬浮和离开
键盘事件
按压、按到底、松开
1
2
3
| keydown()
keypress()
keyup()
|
通过event.keyCode指定具体的按键
1
2
3
4
5
| $("body").keydown(function(event){
if(event.keyCode == 13){
alert("回车")
}
})
|
表单事件
获取焦点和失去焦点
拖动条事件
下拉列表框选中项改变事件
复合事件
切换使用mouseover()和mouseout()
1
| hover(function1, function2)
|
多个click()事件
1
| toggle(function1, function2, ...)
|
toggle()还有其他含义（隐藏与显示）
显示和隐藏
<num>：执行时间
function() {}：特效执行后立即执行函数（可以省略）
1
2
| slideUp(<num>, function() {})
slideDown(<num>, function() {})
|
切换显示和隐藏
淡入和淡出
1
2
| fadeIn(<num>, function() {})
fadeOut(<num>, function() {})
|
操作DOM
CSS
设置css()
1
2
3
4
5
6
| jquery对象.css("属性名", "属性值")
jquery对象.css({
"属性名":"属性值",
"属性名":"属性值",
...
})
|
追加或移除样式class
1
2
3
4
| addClass("x")
addClass("x x x")
removeClass(x)
removeClass(x x)
|
移除全部
切换移出和追加
内容操作
获取和修改值
获取和修改值
获取和修改value属性值
节点操作
查询节点
创建节点
插入节点
内部插入
将B追加到A中（首）
1
2
| $(A).append(B)
$(B).appendTo(A)
|
将B追加到A中（尾）
1
2
| $(A).prepend(B)
$(B).prependTo(A)
|
外部插入
将B插入到A后
1
2
| $(A).after(B)
$(B).insertAfter(A)
|
将B插入到A前
1
2
| $(A).before(B)
$(B).insertBefore(A)
|
替换节点
1
2
| $A.replaceWith($B)
$B.replaceAll($A)
|
删除节点
删除节点
彻底删除
只删除内容
克隆节点
克隆节点和相关事件
只克隆节点，不克隆事件
属性操作
获取属性值
设置属性值
1
2
3
4
5
6
| attr("属性名", "属性值")
attr({
"属性名":"属性值",
"属性名":"属性值",
...
})
|
删除属性值
jquery1.6新特性
获取属性值
修改或设置属性值
1
2
3
4
5
6
| prop("属性名", "属性值")
prop({
"属性名":"属性值",
"属性名":"属性值",
...
})
|
attr()和prop()的区别
attr()函数在jquery1.6之前就有，对自定义属性的操作，使用attr()函数prop()函数在query1.6之后新引进，对固有属性的操作，使用prop()函数
绑定数据
新增或修改绑定的数据
<key>：绑定的数据名
<value>：绑定的数据值
1
| $(...).data(<key>,<value>)
|
查看绑定的数据
删除所有绑定的数据
获取集合与遍历集合
子节点集合
1
2
| $(...).children(...)
$(...).children()
|
后代集合
1
2
| $(...).find(...)
$(...).find()
|
同辈集合
前辈集合
过滤集合
遍历集合
1
2
3
| $(...).each(function(index, element){
...
})
|
CSS-Dom操作
高
宽
偏移量
1
2
3
4
5
6
| offset()
offset(function(index, oldOffset){
var newOffset.left = new Object()
newOffset.left = oldOffset.left+100
newOffset.right = oldOffset.right+100
}
|
获取已定位的最近的祖先元素
滚动条水平定位
滚动条垂直定位
表单校验
通过返回的布尔值，告知程序是否校验成功，决定表单是否跳转
返回布尔值
完成
参考文献
哔哩哔哩——DT课堂原名颜群
脚本之家
哔哩哔哩——web前端小清风