1
jQuery语法
基础语法：$(selector).action()
1.美元符号$定义jQuery
2.选择符（selector）‘查询’和‘查找’HTML元素
3.jQuery的action（）执行对元素的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script src="app.js"></script>
<style>
p{
background-color: aliceblue;
}
</style>
</head>
<body>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
</body>
</html>
jQuery语法
基础语法：$(selector).action()
1.美元符号$定义jQuery
2.选择符（selector）‘查询’和‘查找’HTML元素
3.jQuery的action（）执行对元素的操作
2
选择器：
基础选择器：
1.All Selector（'*'）
2.Class Selector('.class')
3.Element Selector('element)
4.ID Selector('#id')
5.Multiple Selector('selector1,selector2,selector3')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<span class="s"></span>
<p></p>
<label id="asd"></label>
</div>
<script>
$(function () {
$('div *').html('盒子')
$('.s').html('132')
$('p').html('19548')
$('#asd').html('11111111')
$("div p,.s,#asd").html('22222222')
})
</script>
</body>
</html>
基础选择器：
1.All Selector（'*'）
2.Class Selector('.class')
3.Element Selector('element)
4.ID Selector('#id')
5.Multiple Selector('selector1,selector2,selector3')
属性选择器
1.$('[attribute|="value"]') 指定属性值以value为前缀例如：man-news就是可以使value=man
2.$('[attribute*="value"]') 指定属性值中包含value
3.$('[attribute~="value"]') 指定属性用空格分割的值中包含给定的元素
4.$('[attribute="value"]') 指定属性为指定值的元素
5.$('[attribute!="value"]') 指定属性不存在或者指定属性的值不等于指定的元素
6.$('[attribute$="value"]') 指定属性是以指定元素结尾，区分大小写
7.$('[attribute^="value"]') 指定属性是以指定元素开始
8.$('[attribute]') 指定属性存在
9.$('[attribute1][attribute2][attribute3]') 筛选符合所有限定条件的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<a href="#" hreflang="en">英文</a>
<a href="#" hreflang="zh">中文</a>
<input name="man-news">
<input name="man news">
<input name="letternew">
<input name="mannews">
<script>
$(function () {
$("[hreflang=en]").css("color","red");
$('[name|="man"]').val('1111111')
$('[name*="letter"]').val('333333333');
$('[name~="man"]').val('22222222')
$('[name$="new"]').val('233333')
})
</script>
</body>
</html>
属性选择器
1.$('[attribute|="value"]') 指定属性值以value为前缀例如：man-news就是可以使value=man
2.$('[attribute*="value"]') 指定属性值中包含value
3.$('[attribute~="value"]') 指定属性用空格分割的值中包含给定的元素
4.$('[attribute="value"]') 指定属性为指定值的元素
5.$('[attribute!="value"]') 指定属性不存在或者指定属性的值不等于指定的元素
6.$('[attribute$="value"]') 指定属性是以指定元素结尾，区分大小写
7.$('[attribute^="value"]') 指定属性是以指定元素开始
8.$('[attribute]') 指定属性存在
9.$('[attribute1][attribute2][attribute3]') 筛选符合所有限定条件的
过滤：
基础过滤：
1 $(":animated") 选择所有正在执行动画效果的元素
2 $(":eq(index)") index是要匹配元素的索引值（从0开始计数）
$(":ed(-index)") -index 是要匹配元素的索引值（从0开始计数）,从最后一个元素开始倒计数
3 $(":even") 选择索引值是偶数的元素，从0开始计数（注意，索引从0开始）
$(":odd") 奇数
4 $(":first") 选择第一个匹配的元素
5 $(":focus") 选择当前获取焦点的元素
6 $(":header") 选择所有的标题元素，如h1,h2等
7 $(":last") 选择最后一个匹配的元素
8 $(":gt(index)")或$(":gt(-index)") 选择匹配集合中所有大于给定index（索引值）的元素
9 $(":lt(index)")或$(":lt(-index)") 选择匹配集合中所有小于给定index（索引值）的元素
10 $(":not(selector)") 选择所有元素去除不匹配给定的选择器的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
100px;
height: 100px;
background-color: aqua;
float: left;
border: 1px solid yellow;
margin: 0px 5px;
}
.colored{
background-color: red;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="run">run</button>
<div></div>
<div id="move"></div>
<div></div>
<script>
$(function () {
$('#run').click(function () {
$("div:animated").toggleClass("colored")
});
function animatedIt() {
$("#move").slideToggle("slow",animatedIt);
}
animatedIt()
})
</script>
</body>
</html>
基础过滤：
1 $(":animated") 选择所有正在执行动画效果的元素
2 $(":eq(index)") index是要匹配元素的索引值（从0开始计数）
$(":ed(-index)") -index 是要匹配元素的索引值（从0开始计数）,从最后一个元素开始倒计数
3 $(":even") 选择索引值是偶数的元素，从0开始计数（注意，索引从0开始）
$(":odd") 奇数
4 $(":first") 选择第一个匹配的元素
5 $(":focus") 选择当前获取焦点的元素
6 $(":header") 选择所有的标题元素，如h1,h2等
7 $(":last") 选择最后一个匹配的元素
8 $(":gt(index)")或$(":gt(-index)") 选择匹配集合中所有大于给定index（索引值）的元素
9 $(":lt(index)")或$(":lt(-index)") 选择匹配集合中所有小于给定index（索引值）的元素
10 $(":not(selector)") 选择所有元素去除不匹配给定的选择器的元素
子元素过滤：
1.$(":first-child") 选择所有父级元素下的第一个子元素
2.$(":last-child") 选择所有父级元素下的最后一个子元素
3.$(":first-of-type") 选择所有相同的元素名称的第一个兄弟元素
4.$(":last-of-type") 选择所有元素之间具有相同元素名称的最后一个兄弟元素
5.$(":nth-child(index/even/odd/equation)") 选择他们所有父级元素的第n个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
.sogreen{
background-color: green;
}
</style>
</head>
<body>
<div>
<span>s1</span>
<span>s1</span>
<span>s1</span>
</div>
<div>
<span>s1</span>
<span>s1</span>
<span>s1</span>
</div>
<div>
<span>s1</span>
<span>s1</span>
<span>s1</span>
</div>
<script>
$(function () {
$("div span:nth-child(1)").css('text-decoration','underline').hover(function () {
$(this).addClass('sogreen');
},function () {
$(this).removeClass('sogreen')
}
);
})
</script>
</body>
</html>
子元素过滤：
1.$(":first-child") 选择所有父级元素下的第一个子元素
2.$(":last-child") 选择所有父级元素下的最后一个子元素
3.$(":first-of-type") 选择所有相同的元素名称的第一个兄弟元素
4.$(":last-of-type") 选择所有元素之间具有相同元素名称的最后一个兄弟元素
5.$(":nth-child(index/even/odd/equation)") 选择他们所有父级元素的第n个子元素
内容过滤：
1. $(":contains(text)") 选择所有包含指定文本的元素
2. $(":empty") 选择所有没有子元素的元素（包括文本节点）
3. $(":has(selector)") 选择元素其中至少包含指定选择区匹配的一种元素
4. $(":parent") 包含所有含有子元素或者文本的父级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
</div>
<table border="1">
<tr><td>td</td><td></td></tr>
<tr><td>td</td><td></td></tr>
<tr><td>td</td></tr>
</table>
<script>
$(function () {
$("td:empty").text('111').css("background","green");
})
</script>
</body>
</html>
内容过滤：
1. $(":contains(text)") 选择所有包含指定文本的元素
2. $(":empty") 选择所有没有子元素的元素（包括文本节点）
3. $(":has(selector)") 选择元素其中至少包含指定选择区匹配的一种元素
4. $(":parent") 包含所有含有子元素或者文本的父级元素
表单过滤：
1. $(":button") 选择所有按钮和类型为按钮的元素
2. $(":checkbox") 选择所有类型为复选框的元素
3. $(":checked") 选择所有勾选的元素
4. $(":disabled") 选择所有被禁用的元素
5. $(":enabled") 选择所有可用的元素
6. $(":file") 选择所有类型为文件的元素
7. $(":focus") 选择当前获取焦点的元素
8. $(":image") 选择所有图像类型的元素
9. $(":input") 选择所有input,textarera,select和button元素
10. $(":password") 选择所有类型为密码的元素
11. $(":radio") 选择所有类型为单选框的元素
12. $(":submit") 选择所有类型为提交的元素
层级过滤：
1.$("parent>child") 选择parent中符合child的直接子元素
2.$("ancestor descendant") 选择ancestor中符合descendant的后代元素
3.$("prev+next") 选择紧接着prev元素后的符合next的同级元素
4.$("prev~siblings") 选择prev后所有符合siblings的同级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js">
</script>
<style>
textarea{
height: 35px;
}
div{
color: red;
}
fieldset{
margin: 0px;
padding: 0px;
border- 0px;
}
.marked{
background-color: yellow;
border:3px solid red;
}
</style>
</head>
<body>
<form>
<fieldset>
<input type="button" value="Input Button">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="image">
<input type="password">
<input type="radio">
<input type="reset">
<input type="submit">
<input type="text">
<select>
<option>option</option>
</select>
<textarea></textarea>
<button>button</button>
</fieldset>
<input name="email" disabled="disabled">
</form>
<div></div>
<script>
$(function () {
var input=$(":image").addClass("marked");
})
</script>
</body>
</html>
表单过滤：
1. $(":button") 选择所有按钮和类型为按钮的元素
2. $(":checkbox") 选择所有类型为复选框的元素
3. $(":checked") 选择所有勾选的元素
4. $(":disabled") 选择所有被禁用的元素
5. $(":enabled") 选择所有可用的元素
6. $(":file") 选择所有类型为文件的元素
7. $(":focus") 选择当前获取焦点的元素
8. $(":image") 选择所有图像类型的元素
9. $(":input") 选择所有input,textarera,select和button元素
10. $(":password") 选择所有类型为密码的元素
11. $(":radio") 选择所有类型为单选框的元素
12. $(":submit") 选择所有类型为提交的元素
层级过滤：
1.$("parent>child") 选择parent中符合child的直接子元素
2.$("ancestor descendant") 选择ancestor中符合descendant的后代元素
3.$("prev+next") 选择紧接着prev元素后的符合next的同级元素
4.$("prev~siblings") 选择prev后所有符合siblings的同级元素
可见性过滤：
1. $(":hidden") 选择所有隐藏的元素
可以看做被隐藏的情况：
1.他们的css display的值是none
2.他们是type="hidden"的表单元素
3.他们的宽度与高度都是0
4.它的祖先元素是隐藏的，因此该元素是不会在页面上显示
2.$(":visible") 选择所有隐藏的元素
当元素占据文档的一定空间时，元素被认为是可见的，可见元素的宽度或高度是大于0的
所以，当元素的visibility:hidden或opacity:0都被认为是可见的，因此他们任然会占用空间布局。
不在文档中的元素被认为是隐藏的。
隐藏元素上做动画，元素被认为是可见的，直到动画结束。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
.outer{
200px;
height: 200px;
background-color: aqua;
}
.inner{
100px;
height: 100px;
background-color: green;
display: none;
}
</style>
</head>
<body>
<table border="1">
<tr><td>0</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
<div class="outer">
<div class="inner">hidder</div>
</div>
<script>
$(function () {
$("table tr:even").css("background","red")
$(".outer .inner:hidden").css("display","block")
})
</script>
</body>
</html>
可见性过滤：
1. $(":hidden") 选择所有隐藏的元素
可以看做被隐藏的情况：
1.他们的css display的值是none
2.他们是type="hidden"的表单元素
3.他们的宽度与高度都是0
4.它的祖先元素是隐藏的，因此该元素是不会在页面上显示
2.$(":visible") 选择所有隐藏的元素
当元素占据文档的一定空间时，元素被认为是可见的，可见元素的宽度或高度是大于0的
所以，当元素的visibility:hidden或opacity:0都被认为是可见的，因此他们任然会占用空间布局。
不在文档中的元素被认为是隐藏的。
隐藏元素上做动画，元素被认为是可见的，直到动画结束。
3
事件：
鼠标事件：
1..click() 单击
2..dblclick() 双击
3..hover() 鼠标悬停与离开
4..mousedown() 鼠标按下
5..mouseup() 鼠标按键被释放
6..mouseenter() 鼠标进入元素
7..mouseleave() 鼠标离开元素
8..mousemove() 鼠标在元素内移动
9..mouseout() 鼠标离开元素（支持事件冒泡）
10..mouseover() 鼠标进入元素（支持事件冒泡）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
p{
300px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<p>ppppp1</p>
<p>ppppp2</p>
<p>ppppp3</p>
<script>
// var p=document.getElementsByTagName("p");
// for(var i=0;i<p.length;i++){
// p[i].onclick=function () {
// alert(this.innerHTML)
// }
// }
$(function () {
$("p").click(function () {
alert($(this).html())
}
)
$("p").mouseenter(function () {
$(this).css("background","red")
})
$("p").mouseleave(function () {
$(this).css("background","yellow")
})
})
</script>
</body>
</html>
鼠标事件：
1..click() 单击
2..dblclick() 双击
3..hover() 鼠标悬停与离开
4..mousedown() 鼠标按下
5..mouseup() 鼠标按键被释放
6..mouseenter() 鼠标进入元素
7..mouseleave() 鼠标离开元素
8..mousemove() 鼠标在元素内移动
9..mouseout() 鼠标离开元素（支持事件冒泡）
10..mouseover() 鼠标进入元素（支持事件冒泡）
键盘事件：
keydown
keypress
keyup
注意，keyup仅在前两个事件不存在的情况下才会触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).keydown(function (event) {
alert("keydown")
})
$(document).keypress(function (event) {
alert("keypress")
})
$(document).keyup(function (event) {
alert(event.keyCode)
})
</script>
</body>
</html>
键盘事件：
keydown
keypress
keyup
注意，keyup仅在前两个事件不存在的情况下才会触发
浏览器事件：
.error() 出错事件
.resize() 窗口大小改变时（仅用在window）
.scroll() 滚动滚动条时
文档加载事件：
ready事件：在DOM结构绘制完成之后就会执行，这样确保就算大量媒体文件没加载出来JS代码一样可以执行
常用的写法
$().ready(function(){})
$(documnent).ready(function(){})
$(function(){})
load事件：load事件必须等网页中所有内容都加载完毕后才被执行
文档加载过程：
1.解析HTML结构
2.加载外部脚本和样式表文件
3.解析并执行脚本代码//ready
4.构造HTML DOM模型。
5.加载图片等外部文件
6.页面加载完毕//load
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
div{
100%;
height: 2000px;
}
</style>
</head>
<body>
<div>111</div>
<img src="asd">
<script>
$(window).scroll((function () {
alert("555555")
}))
</script>
</body>
</html>
浏览器事件：
.error() 出错事件
.resize() 窗口大小改变时（仅用在window）
.scroll() 滚动滚动条时
文档加载事件：
ready事件：在DOM结构绘制完成之后就会执行，这样确保就算大量媒体文件没加载出来JS代码一样可以执行
常用的写法
$().ready(function(){})
$(documnent).ready(function(){})
$(function(){})
load事件：load事件必须等网页中所有内容都加载完毕后才被执行
文档加载过程：
1.解析HTML结构
2.加载外部脚本和样式表文件
3.解析并执行脚本代码//ready
4.构造HTML DOM模型。
5.加载图片等外部文件
6.页面加载完毕//load
利用on可以进行绑定事件与委托事件
利用off可以取消绑定事件与委托事件
利用one可以让事件只进行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="btn"> 按钮</button>
<script>
$(function () {
$("#btn").bind("click mouseover",function () {
alert("1111")
})
// $("#btn").bind({
// click:function () {
// alert("click")
// },
// mouseover:function () {
// alert("mouseover")
// }
// })
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<p>click me</p>
</div>
<script>
$(function(){
$("div").on("click","p",function (e) {
console.log($(this).html());
($(e.delegateTarget)).css("border","1px solid red");
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<button>按钮</button>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
<script>
$(function () {
$("button").on("click",function () {
alert("hh")
})
$("ul").on("click","li",function () {
alert($(this).html())
})
})
</script>
</body>
</html>
利用on可以进行绑定事件与委托事件
利用off可以取消绑定事件与委托事件
利用one可以让事件只进行一次
表单事件：
focus 获得焦点
blur 失去焦点
change 改变元素的值
select 当用户进行文本选择时，就会触发
submit 当表单提交时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<form>
<input id="target" type="text" value="field 1">
<input type="text" value="field 2">
</form>
<script>
$(function () {
$("#target").focus(function () {
alert("获得焦点")
})
$("#target").change(function () {
alert("内容改变")
})//change只能绑定input，textarea，select
$("#target").select(function () {
alert("选中")
})//select只能绑定input，type="text",textarea
//submit只能绑定form
//focus，blur 所有元素
})
</script>
</body>
</html>
表单事件：
focus 获得焦点
blur 失去焦点
change 改变元素的值
select 当用户进行文本选择时，就会触发
submit 当表单提交时
事件对象：
1. event.currentTarget 事件的监听者
2. event.target 事件的目标
3. event.delegateTarget 当前事件的委托者
4. event.pageX 鼠标相对于document左边缘的位置
5. event.pageY 鼠标相对于document上边缘的位置
6. event.type 获取当前的时间类型
7. event.preventDefault() 阻止当前事件的发生
8 event.stopPropagation() 阻止冒泡事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<p>click me</p>
</div>
<script>
$(function () {
$("div").on("click",function (e) {
console.log($(e.currentTarget));//事件的监听者
console.log($(e.target))//事件的目标
})
})
</script>
</body>
</html>
事件对象：
1. event.currentTarget 事件的监听者
2. event.target 事件的目标
3. event.delegateTarget 当前事件的委托者
4. event.pageX 鼠标相对于document左边缘的位置
5. event.pageY 鼠标相对于document上边缘的位置
6. event.type 获取当前的时间类型
7. event.preventDefault() 阻止当前事件的发生
8 event.stopPropagation() 阻止冒泡事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<p>click me</p>
</div>
<script>
$(function(){
$("div").on("click","p",function (e) {
console.log($(this).html());
($(e.delegateTarget)).css("border","1px solid red");
})
})
</script>
</body>
</html>
4
DOM操作
DOM属性：
1. .addClass(className) 为每个匹配的元素添加指定的样式类名
2. .attr(attributeName) 获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或者多个属性
3. .hasClass(className) 确定任何一个匹配元素是否有被分配给定的类
4. .html() 获取集合中的第一个匹配的HTML内容，设置每一个匹配元素的html内容
5. .prop(propertyName) 获取匹配的元素集中第一个元素的属性值为匹配的元素设置一个或者多个属性（properties）--获取已有的默认属性
6. .removeAttr(attributeName) 为匹配的元素集合中的每个元素中移除一个属性（attribute）
7. .removeClass([className]) 移除集合中每个匹配元素上一个，多个或全部样式
8. .removeProp(propertyName) 为集合中匹配的元素删除一个属性（property）
9. .toggleClass() 在匹配的元素集合中的每一个元素上添加或者删除一个或多个样式类，取决于这个样式类是否存在或者值切换属性。如果存在就删除，不存在就添加
10. .val() 获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值
CDN
DOM插入并包裹现有内容:
1. .wrap(wrappingElement) 在每个匹配的元素外层包上一个html元素
2. .unwrap() 将匹配元素集合的父级元素删除，保留自身以及兄弟元素在原来的位置
3. .wrapAll(wrappingElement) 在所有匹配元素外面包一层HTML结构。
4. .wrapInner(wrappingElement) 在匹配元素里的内容外包一层结构
DOM插入现有元素内：
1. .append() 在每个匹配的元素后面加上参数内容
2. .appendTo() 在每个匹配的元素的内部最后加上参数内容
3. .prepend() 将参数内容插入到每个匹配元素的前面
4. .prependTo() 将所有元素插入到每个匹配元素内部的最前面
5. .html() 获取集合中第一个匹配元素的HTMl内容或者设置每一个匹配的html内容
6. .text() 得到匹配元素集合中每一个元素的合并文本，包括他们后代设置匹配元素集合中每个元素的文本内容为指定的文本内容
DOM移除与DOM替换:
1. .detach() 从DOM中去掉所有匹配的元素
2. .empty() 从DOM中去掉所有匹配的元素的所有子节点
3. .remove() 将匹配元素集合从DOM中删除。（同时删除了元素上的事件以及jQuery数据）
4. .unwrap（）将匹配元素集合的父级元素删除，保留自身以及兄弟元素在原来的位置
1. .replaceAll() 用集合的匹配符元素替换每个目标元素
2. .replaceWith() 用提供的内容替换集合中所有匹配的元素并且返回被删除的元素的集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<a>hh</a>
<p id="hh">哈哈</p>
<div>12222222222222</div>
<p id="hs">哈哈</p>
<h1 class="aa">qweqwe</h1>
<script>
$(document).ready(function(){
$("p").addClass("PC");
$("a").attr("href","http://www.baidu.com");
var name = $("p").attr("id");
console.log($("h1").hasClass("aa"));
$("a").html("11111");
$("p").wrap("<div></div>");
$("p").unwrap();
$("p").wrapAll("<div></div>");
$("p").wrapInner("<div></div>");
$("p").append("<p>hhhhhhhh</p>")
$("p").append($("a"))
$("p").appendTo("<p class='123'>hhhhhhhh</p>")
$("p").detach(".123")
})
</script>
</body>
</html>
DOM属性：
1. .addClass(className) 为每个匹配的元素添加指定的样式类名
2. .attr(attributeName) 获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或者多个属性
3. .hasClass(className) 确定任何一个匹配元素是否有被分配给定的类
4. .html() 获取集合中的第一个匹配的HTML内容，设置每一个匹配元素的html内容
5. .prop(propertyName) 获取匹配的元素集中第一个元素的属性值为匹配的元素设置一个或者多个属性（properties）--获取已有的默认属性
6. .removeAttr(attributeName) 为匹配的元素集合中的每个元素中移除一个属性（attribute）
7. .removeClass([className]) 移除集合中每个匹配元素上一个，多个或全部样式
8. .removeProp(propertyName) 为集合中匹配的元素删除一个属性（property）
9. .toggleClass() 在匹配的元素集合中的每一个元素上添加或者删除一个或多个样式类，取决于这个样式类是否存在或者值切换属性。如果存在就删除，不存在就添加
10. .val() 获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值
CDN
DOM插入并包裹现有内容:
1. .wrap(wrappingElement) 在每个匹配的元素外层包上一个html元素
2. .unwrap() 将匹配元素集合的父级元素删除，保留自身以及兄弟元素在原来的位置
3. .wrapAll(wrappingElement) 在所有匹配元素外面包一层HTML结构。
4. .wrapInner(wrappingElement) 在匹配元素里的内容外包一层结构
DOM插入现有元素内：
1. .append() 在每个匹配的元素后面加上参数内容
2. .appendTo() 在每个匹配的元素的内部最后加上参数内容
3. .prepend() 将参数内容插入到每个匹配元素的前面
4. .prependTo() 将所有元素插入到每个匹配元素内部的最前面
5. .html() 获取集合中第一个匹配元素的HTMl内容或者设置每一个匹配的html内容
6. .text() 得到匹配元素集合中每一个元素的合并文本，包括他们后代设置匹配元素集合中每个元素的文本内容为指定的文本内容
DOM移除与DOM替换:
1. .detach() 从DOM中去掉所有匹配的元素
2. .empty() 从DOM中去掉所有匹配的元素的所有子节点
3. .remove() 将匹配元素集合从DOM中删除。（同时删除了元素上的事件以及jQuery数据）
4. .unwrap（）将匹配元素集合的父级元素删除，保留自身以及兄弟元素在原来的位置
1. .replaceAll() 用集合的匹配符元素替换每个目标元素
2. .replaceWith() 用提供的内容替换集合中所有匹配的元素并且返回被删除的元素的集合
对于CSS属性的操作：
1. .css() 获取匹配集合中第一个元素的样式属性的值，或者设置每个匹配元素的一个或者多个css属性值
2. .height() 获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。
3. .width() 获取匹配元素集合中的第一个元素的当前计算宽度值。设置每一个匹配元素的宽度值。
4. .innerHeight() 获取匹配元素集合中的第一个元素的当前计算高度值，包括padding，但不包括border
5. .innerWidth() 获取匹配元素集合中的第一个元素的当前计算宽度值，包括padding，但不包括border
6. .offset() 在匹配的元素集合中，获取第一个元素的当前坐标，坐标相对于文档。或者设置匹配的元素集合中每一个元素的坐标，坐标相对于文档
7. .outerHeight() 获取匹配元素集合中的第一个元素的当前计算高度值，包括padding，border和选择性的margin（参数为true，则带margin，参数为false则不带），若在空集合上调用，返回null
8. .outerWidth() 获取匹配元素集合中的第一个元素的当前计算宽度值，包括padding，border和选择性的margin（参数为true，则带margin，参数为false则不带），若在空集合上调用，返回null
9. .position() 获取匹配元素中第一个元素的当前坐标（相对于offset parent的坐标，即离带元素最近而且被定位过的祖先元素）
10. .scrollLeft() 获取当前匹配的元素集合中第一个元素的当前水平滚动条的位置，或者设置每个匹配元素的水平滚动条的位置
10. .scrollTop() 获取当前匹配的元素集合中第一个元素的当前垂直滚动条的位置，或者设置每个匹配元素的垂直滚动条的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div border>我是一个div</div>
<script>
$(function () {
$("div").css("color","red");
var divcolor = $("div").css("color")
$("div").html("我的颜色是"+divcolor)
$("div").height(100)
$("div").width(100)
console.log($('div').innerWidth())
console.log($('div').innerHeight())
var zuobiao={
top:300,left:500
}
$("div").offset(zuobiao)
var po = $("div").position();
console.log(po)
})
</script>
</body>
</html>
对于CSS属性的操作：
1. .css() 获取匹配集合中第一个元素的样式属性的值，或者设置每个匹配元素的一个或者多个css属性值
2. .height() 获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。
3. .width() 获取匹配元素集合中的第一个元素的当前计算宽度值。设置每一个匹配元素的宽度值。
4. .innerHeight() 获取匹配元素集合中的第一个元素的当前计算高度值，包括padding，但不包括border
5. .innerWidth() 获取匹配元素集合中的第一个元素的当前计算宽度值，包括padding，但不包括border
6. .offset() 在匹配的元素集合中，获取第一个元素的当前坐标，坐标相对于文档。或者设置匹配的元素集合中每一个元素的坐标，坐标相对于文档
7. .outerHeight() 获取匹配元素集合中的第一个元素的当前计算高度值，包括padding，border和选择性的margin（参数为true，则带margin，参数为false则不带），若在空集合上调用，返回null
8. .outerWidth() 获取匹配元素集合中的第一个元素的当前计算宽度值，包括padding，border和选择性的margin（参数为true，则带margin，参数为false则不带），若在空集合上调用，返回null
9. .position() 获取匹配元素中第一个元素的当前坐标（相对于offset parent的坐标，即离带元素最近而且被定位过的祖先元素）
10. .scrollLeft() 获取当前匹配的元素集合中第一个元素的当前水平滚动条的位置，或者设置每个匹配元素的水平滚动条的位置
10. .scrollTop() 获取当前匹配的元素集合中第一个元素的当前垂直滚动条的位置，或者设置每个匹配元素的垂直滚动条的位置
5
遍历：
过滤：
1. .eq() 指定索引对应的集合中的元素
2. .filter() 筛选元素集合中匹配表达式的元素集合，或者通过传递函数测试的元素集合
3. .first() 获取匹配元素集合中的第一个元素
4. .last() 获取匹配元素集合中的最后一个元素
5. .has() 筛选匹配元素集合中有那些相匹配的选择器或DOM元素的后代元素
6. .is() 判断当前匹配的元素集合中的元素是否为一个选择器，DOM对象，或者jQuery对象，如果这些元素至少有一个匹配给定的参数，那么返回true
7. .not() 从匹配的元素集合中移除指定的元素
8. .map() 通过一个函数匹配当前集合中的每一个元素，产生一个包含新的jQuery对象
9. .slice() 根据指定的下标范围，过滤匹配的元素集合，并产生新的jQuery对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.3.1.min.js"></script>
</head>
<body>
<ul>
<li>LI 1</li>
<li class="2">LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>
<strong>item 1</strong>
</li>
</ul>
<script>
$(function () {
// $("li").eq(1).css("background-color","red")
// $("li").filter(".2").css("color","blue")
// $('li').first().css("color","red")
// $('li').last().css("color","red")
// $('li').has("strong").css("border","1px solid red")
// $("ul").click(function (e) {
// var target = $(e.target);
// if(target.is("li")){
// target.css("color","red")
// }
// })
// $("li").not(":odd").css("color","red")
// $("li").map(function () {
// console.log(this.id)
// })
$("li").slice(1,3).css("color","red");//包括1，不包括3
})
</script>
</body>
</html>
过滤：
1. .eq() 指定索引对应的集合中的元素
2. .filter() 筛选元素集合中匹配表达式的元素集合，或者通过传递函数测试的元素集合
3. .first() 获取匹配元素集合中的第一个元素
4. .last() 获取匹配元素集合中的最后一个元素
5. .has() 筛选匹配元素集合中有那些相匹配的选择器或DOM元素的后代元素
6. .is() 判断当前匹配的元素集合中的元素是否为一个选择器，DOM对象，或者jQuery对象，如果这些元素至少有一个匹配给定的参数，那么返回true
7. .not() 从匹配的元素集合中移除指定的元素
8. .map() 通过一个函数匹配当前集合中的每一个元素，产生一个包含新的jQuery对象
9. .slice() 根据指定的下标范围，过滤匹配的元素集合，并产生新的jQuery对象
其他遍历：
1. .add() 添加元素到当前匹配的元素集合中
2. .contents() 获得匹配元素集合中每一个元素的子元素，包括文字和注释节点
3. .end() 阻止当前链的最新过滤操作，并返回匹配元素以前的状态（即，返回到为筛选之前的状态）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
div,p{
200px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<!--<div></div>-->
<!--<div></div>-->
<!--<div></div>-->
<!--<div></div>-->
<!--<div></div>-->
<!--<p>1111111111111</p>-->
<!--<p>hello<a href="#">jhon</a>,how do you dong? </p>-->
<ul>
<li class="foo"> li 1</li>
<li > li 2</li>
<li class="bar"> li 3</li>
</ul>
<script>
// $(function () {
// $("div").css("border","5px solid blue").add("p").css("background-color","red")
// })
// $("p").contents().filter(function () {
// return this.nodeType!=1;
// }).wrap("<b></b>")
$("ul").find(".foo").css("background-color","red").end().find(".bar").css("background-color","yellow")
</script>
</body>
</html>
其他遍历：
1. .add() 添加元素到当前匹配的元素集合中
2. .contents() 获得匹配元素集合中每一个元素的子元素，包括文字和注释节点
3. .end() 阻止当前链的最新过滤操作，并返回匹配元素以前的状态（即，返回到为筛选之前的状态）
树遍历：
1. .children() 获得匹配元素集合中每一个元素的直接子元素，选择器选择性筛选
2. .closest() 从元素本身开始，在DOM树上逐级向上级元素匹配，并返回最先匹配选择器的祖先元素
3. .find() 通过一个选择器，jQuery对象，或者元素过滤，得到当前匹配的元素集合中每个元素的后代
4. .next() 获得元素集合中的元素的相邻，在后面的，满足选择器同级元素（必须相邻且在后面的同级元素）
5. .nextAll() 获得元素集合中的元素的在后面，满足选择器的同级元素
6. .nextUntil() 获得元素集合中的元素之后的所有兄弟元
7. .parent() 获得元素集合中的每个元素的父元素，可以提供一个选择器
8. .parents() 获得元素集合中每个元素的祖先元素，可以提供一个选择器
9. .offsetParent() 获得元素集合中的每个元素最近的含有定位信息的祖先元素（祖先元素的position属性是relative，absolute,fixed）
10. .parentsUntil() 获得当前元素的所有前辈元素，直到遇到选择器，DOM节点或jQuery对象匹配为止但不包括这些元素
11. .prev() 获得元素集合中的元素的相邻，在前面的，满足选择器同级元素（必须相邻且在前面的同级元素）
12. .prevAll() 获得元素集合中的元素的在前面，满足选择器的同级元素
13. .prevUntil() 获得元素集合中的元素之前的所有兄弟元素，直到遇到选择器，DOM节点或jQuery对象匹配为止，但不包括匹配的元素
14. .siblings() 获得元素集合中的每个元素的所有兄弟元素，可以提供一个可选的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<ul>
<li>1111</li>
<li class="selected">1111</li>
<li>1111</li>
<li>1111</li>
</ul>
<ul class="one">
<li> li 1</li>
<li class="two">
li 2
<ul class="three">
<li>item1</li>
<li class="inner">item2</li>
<li>item3</li>
</ul>
</li>
<li>1111</li>
<li>1111</li>
<li class="item1">1111</li>
<li>1111</li>
</ul>
<script>
$(function () {
// $("ul").children(".selected").css("border","1px solid blue")
// console.log($(".inner").closest("li"))//会从本身开始查找，如果本身满足，就会选择本身
// $(".one").find("li").css("border","1px solid blue")
// $(".two").next().css("border","1px solid blue")
// $(".two").nextAll().css("border","1px solid blue")
$(".two").nextUntil(".item1").css("border","1px solid blue")
})
</script>
</body>
</html>
树遍历：
1. .children() 获得匹配元素集合中每一个元素的直接子元素，选择器选择性筛选
2. .closest() 从元素本身开始，在DOM树上逐级向上级元素匹配，并返回最先匹配选择器的祖先元素
3. .find() 通过一个选择器，jQuery对象，或者元素过滤，得到当前匹配的元素集合中每个元素的后代
4. .next() 获得元素集合中的元素的相邻，在后面的，满足选择器同级元素（必须相邻且在后面的同级元素）
5. .nextAll() 获得元素集合中的元素的在后面，满足选择器的同级元素
6. .nextUntil() 获得元素集合中的元素之后的所有兄弟元
7. .parent() 获得元素集合中的每个元素的父元素，可以提供一个选择器
8. .parents() 获得元素集合中每个元素的祖先元素，可以提供一个选择器
9. .offsetParent() 获得元素集合中的每个元素最近的含有定位信息的祖先元素（祖先元素的position属性是relative，absolute,fixed）
10. .parentsUntil() 获得当前元素的所有前辈元素，直到遇到选择器，DOM节点或jQuery对象匹配为止但不包括这些元素
11. .prev() 获得元素集合中的元素的相邻，在前面的，满足选择器同级元素（必须相邻且在前面的同级元素）
12. .prevAll() 获得元素集合中的元素的在前面，满足选择器的同级元素
13. .prevUntil() 获得元素集合中的元素之前的所有兄弟元素，直到遇到选择器，DOM节点或jQuery对象匹配为止，但不包括匹配的元素
14. .siblings() 获得元素集合中的每个元素的所有兄弟元素，可以提供一个可选的选择器
6
特效：
1.隐藏与显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>
<script>
$(function () {
$("#hide").click(function () {
$("p").hide(1000)
})
$("#show").click(function () {
$('p').show(1000)
})
$("#toggle").click(function () {
$("p").toggle(1000)
})
})
</script>
</body>
</html>
2.淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1" style=" 80px;height: 80px;display: none;background-color: aqua"></div>
<div id="div2" style=" 80px;height: 80px;display: none;background-color: aqua"></div>
<div id="div3" style=" 80px;height: 80px;display: none;background-color: aqua"></div>
<button id="in">fade in</button>
<button id="out">fade out</button>
<button id="toggle">fade toggle</button>
<button id="to">fade to</button>
<script>
$(function () {
$("#in").on("click",function () {
$('#div1').fadeIn(10)
$('#div2').fadeIn(100)
$('#div3').fadeIn(1000)
})
$("#out").on("click",function () {
$('#div1').fadeOut(10)
$('#div2').fadeOut(100)
$('#div3').fadeOut(1000)
})
$("#toggle").on("click",function () {
$('#div1').fadeToggle(10)
$('#div2').fadeToggle(100)
$('#div3').fadeToggle(1000)
})
$("#to").on("click",function () {
$('#div1').fadeTo(10,1)
$('#div2').fadeTo(100,0.5)
$('#div3').fadeTo(1000,0)
})
})
</script>
</body>
</html>
3.滑动，回调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
#content{
display: none;
}
div{
padding: 5px;
text-align: center;
background-color: aqua;
height: 200px;
200px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="flipshow">点击显示</div>
<div id="fliphide">点击隐藏</div>
<div id="fliptoggle">点击显示/隐藏</div>
<div id="content">Helloween </div>
<script>
$(function () {
$("#flipshow").click(function () {
$("#content").slideDown(1000)
})
$("#fliphide").click(function () {
$("#content").slideUp(1000)
})
$("#fliptoggle").click(function () {
$("#content").slideToggle(1000)
},function () {
alert("按钮事件生效")
})
})
</script>
</body>
</html>
特效：
隐藏显示
淡入淡出
滑动
回调：即事件发生结束后发生的事情
可以在一个jQuery对象上发生多个动画效果，但有时间顺序
4，
自定义：
animate 一组css
clearQueue 清除接下来的动画队列
delay 将动画延迟执行
finish 结束当前动画，清除接下来的动画队列，将元素变成执行了最后一个动画效果后的属性
stop 停止当前动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
div{
100px;
height: 100px;
background-color: aqua;
position: absolute;
}
</style>
</head>
<body>
<button id="clearQueue">改变</button>
<button id="finish">改变</button>
<button id="stop">改变</button>
<div></div>
<script>
$(function () {
$("div").click(function () {
$(this).animate({
opacity: 0.2, 400, left: 100
},6000, "swing").delay(5000)
$(this).animate({
opacity: 1, 100, left: 100
}, 6000 , "swing")
})
$("#clearQueue").click(function () {
$('div').clearQueue()//可添加动画名称为参数
})
$("#finish").click(function () {
$('div').finish()
})
$("#stop").click(function () {
$('div').stop()
})
})
</script>
</body>
</html>
自定义：
animate 一组css
clearQueue 清除接下来的动画队列
delay 将动画延迟执行
finish 结束当前动画，清除接下来的动画队列，将元素变成执行了最后一个动画效果后的属性
stop 停止当前动画
7.两个小例子
1.幽灵按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
<div class="box">
<div class="link link-miss" >
<span class="icon"></span>
<a href="#" class="button"data-text="My moission isc lear">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
MISSION
</a>
</div>
<div class="link link-play" >
<span class="icon"></span>
<a href="#" class="button" data-text="This is my playground">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
PLAY
</a>
</div>
<div class="link link-touch">
<span class="icon"></span>
<a href="#" class="button" data-text="Lets do something together">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
TOUCH
</a>
</div>
<div class="toolTip">
<em></em>
<span></span>
</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function () {
$(".button").hover(function () {
var titleText = $(this).attr("data-text")
$(".toolTip em").text(titleText)//动态获取按钮内容
var leftLoc = $(this).offset().left
$('.toolTip').css(
{left:leftLoc,
top:140
}).animate({
top:195,
opacity:1
})
})
})
</script>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #333333;
}
.box{
1000px;
height: 220px;
margin: 50px auto;
}
.box .link{
float: left;
margin: 0 20px;
205px;
height: 280px;
position: relative;
}
.link-miss .icon{
background-image: url("u=981610073,3882681051&fm=11&gp=0.jpg");
background-position: center center;
background-repeat: no-repeat;
}
.link-play .icon{
background-image: url("u=1746843353,2834840402&fm=11&gp=0.jpg");
background-position: center center;
background-repeat: no-repeat;
}
.link-touch .icon{
background-image: url("u=1952303966,4055821390&fm=27&gp=0.jpg");
background-position: center center;
background-repeat: no-repeat;
}
.box .link .icon{
display: inline-block;
100%;
height: 190px;
transition: 0.2s linear
}
.box .link .icon:hover{
transform: rotate(360deg) scale(1.2);
-webkit-transform: rotate(360deg) scale(1.2);
}
.box .link .button{
display: block;
180px;
height: 50px;
border: 2px solid rgba(255,255,255,0.8);
line-height: 50px;
color: #2dcb70;
font-size: 18px;
font-weight: 700;
padding: 0 0 0 20px;
box-sizing: border-box;
margin: auto;
background: url("u=170606464,1046410765&fm=27&gp=0.jpg") no-repeat 130px center ;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
position: relative;
}
.box .link .button:hover{
background-position: 140px center ;
border-color: rgba(255,255,255,1);
}
.box .link .button .line{
position: absolute;
display: block;
background: none;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}
.box .link .button .line-top{
left: -100%;
top: -2px;
0;
height: 2px;
}
.box .link .button:hover .line-top{
180px;
background-color: #ffffff;
position: absolute;
left: -2px;
top: -2px;
}
.box .link .button .line-left{
2px;
height: 0px;
bottom: -100%;
left: -2px;
}
.box .link .button:hover .line-left{
height: 50px;
background-color: #ffffff;
position: absolute;
left: -2px;
bottom: -2px;
}
.box .link .button .line-right{
2px;
height: 0px;
top: -100%;
right: -2px;
}
.box .link .button:hover .line-right{
height: 50px;
background-color: white;
top: -2px;
right: -2px;
}
.box .link .button .line-bottom{
right: -100%;
bottom: -2px;
0;
height: 2px;
}
.box .link .button:hover .line-bottom{
180px;
background-color: #ffffff;
position: absolute;
right: -2px;
bottom: -2px;
}
.box .toolTip{
position: absolute;
padding: 0 15px;
height: 35px;
background-color: #2dcb70;
border-radius: 5px;
line-height: 35px;
margin: 0px auto;
color: white;
font-size: 18px;
font-weight: 700;
opacity: 0;
}
.box .toolTip span{
position: absolute;
0;
height: 0;
border: 8px solid transparent;
border-top-color: #2dcb70;
left: 50%;
margin-left: -4px ;
}
2.瀑布流
瀑布流效果：
每个图片宽相等，高不等
计算出当前列高度最小的哪一个，在下面继续放置图片
当前页面内容不够显示时，继续加载新的图片