1. jQuery文档操作
-
添加元素
-
外部添加(添加子标签)：
-
指定标签前添加：
-
$(A).prepend(B)：把B插入到A的子标签最前面
-
$(A).prependTo(B)：把A插入到B的子标签最前面
-
指定标签后添加：
-
$(A).append(B)：把B追加到A的子标签最后面
-
$(A).appendTo(B)：把A追加到B的子标签最后
-
内部添加(添加兄弟标签)：
-
指定标签前添加：
-
$(A).before(B)：在A标签之前插入B标签
-
$(A).insertBefore(B)：把A标签插入到B标签之前
-
指定标签后添加：
-
$(A).after(B)：在A标签之后插入B标签
-
$(A).insertAfter(B)：把A标签插入到B标签之后
-
替换元素
-
$(A).replaceWith(B)：把A标签替换成B标签
-
$(A).replaceAll(B)：把所有的B标签替换成A标签
-
删除元素
-
清空元素
-
empty()：清空指定标签，只清空子标签，保留当前空标签
-
文档操作示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>day56</title>
</head>
<body>
<div id="number">
<div id="i1">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
<hr>
<div class="letter">
<div class="c1">
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>
var prependEle = document.createElement("div")
$(prependEle).text("111")
$("#i1").prepend($(prependEle))
$("#i1").html()
// <div>111</div><div>222</div>
//
var prependToEle = document.createElement("p")
$(prependToEle).text("aaa")
$(prependToEle).prependTo($(".c1"))
$(".c1").html()
// <p>aaa</p><p>bbb</p>
//
var appendEle = document.createElement("div")
$(appendEle).text("333")
$("#i1").append($(appendEle))
$("#i1").html()
// <div>000</div><div>111</div><div>222</div>
//
var appendToEle = document.createElement("p")
$(appendToEle).text("ccc")
$(appendToEle).appendTo($(".c1"))
$(".c1").html()
// <p>aaa</p><p>bbb</p><p>ccc</p>
//
var beforeEle = document.createElement("div")
$(beforeEle).text("number:")
$("#i1").before($(beforeEle))
$("#i1").parent().html()
// <div>number:</div><div id="i1"><div>111</div><div>222</div><div>333</div></div>
//
var insertBeforeEle = document.createElement("div")
$(insertBeforeEle).text("letter:")
$(insertBeforeEle).insertBefore($(".c1"))
$(".c1").parent().html()
// <div>letter:</div><div class="c1"><p>aaa</p><p>bbb</p><p>ccc</p></div>
//
var afterEle = document.createElement("div")
$(afterEle).text("123")
$("#i1").after($(afterEle))
$("#i1").parent().html()
// <div>number:</div><div id="i1"><div>111</div><div>222</div><div>333</div></div><div>123</div>
//
var insertAfterEle = document.createElement("div")
$(insertAfterEle).text("abc")
$(insertAfterEle).insertAfter($(".c1"))
$(".c1").parent().html()
// <div>letter:</div><div class="c1"><p>aaa</p><p>bbb</p><p>ccc</p></div><div>abc</div>
//
var replaceWithEle = document.createElement("span")
$(replaceWithEle).text("span-123")
$("#i1").replaceWith($(replaceWithEle))
$("#number").children().html()
// <span>span-123</span>
//
var replaceAllEle = document.createElement("span")
$(replaceAllEle).text("span-abc")
$(replaceAllEle).replaceAll($(".c1"))
// <span>span-abc</span>
//
$(".c1").remove()
// [div.c1, prevObject: r.fn.init(1)]
$(".c1").html()
// undefined
//
$("#i1").empty()
// [div#i1]
$("#i1").html()
// ""
-
克隆元素
-
clone()：克隆标签，但是不克隆事件
-
clone(true)：标签和事件都复制
-
克隆元素示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>day56</title>
<style>
#cp1 {
font-size: 20px;
color: #FFFFFF;
background-color: deeppink;
width: 200px;
height: 50px;
text-align: center;
}
#cp2 {
font-size: 20px;
color: #FFFFFF;
background-color: darkgreen;
width: 200px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>
<input type="button" value="click1" id="cp1">
</div>
<hr>
<div>
<input type="button" value="click2" id="cp2">
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 克隆click1按钮，只克隆标签，不克隆事件
$("#cp1").on("click",function () {
$(this).clone().insertAfter($(this));
$(this).clone().insertAfter($(this));
$(this).clone().insertAfter($(this));
$(this).clone().insertAfter($(this));
$(this).clone().insertAfter($(this));
});
// 克隆click2按钮，即克隆标签，也克隆事件
$("#cp2").on("click",function () {
$(this).clone(true).insertAfter($(this));
$(this).clone(true).insertAfter($(this));
$(this).clone(true).insertAfter($(this));
$(this).clone(true).insertAfter($(this));
$(this).clone(true).insertAfter($(this));
})
</script>
</body>
</html>
2. jQuery事件
常用事件
-
鼠标事件：
-
.on("click",function(){...})：鼠标点击事件
-
.on("dblclick",function(){...})：鼠标双击事件
-
.on("mouseenter",function(){...})：鼠标指针穿过的事件
-
.on("mouseleave",function(){...})：鼠标指针离开的事件
-
.on("mousedown",function(){...})：按下鼠标按钮的事件
-
.on("mouseup",function(){...})：松开鼠标按钮的事件
-
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>day56</title>
<style>
#i1 {
background-color: deeppink;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="i1"></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
function yy() {
var $i1Ele = $("#i1");
$i1Ele.on("click", function(){
$i1Ele.css("background-color","green");
});
$i1Ele.on("dblclick", function(){
$i1Ele.css("background-color","blue");
});
$i1Ele.on("mouseenter",function () {
$i1Ele.css("background-color","yellow");
});
$i1Ele.on("mouseleave",function () {
$i1Ele.css("background-color","red");
});
$i1Ele.on("mousedown",function () {
$i1Ele.css("background-color","grey");
});
$i1Ele.on("mouseup",function () {
$i1Ele.css("background-color","black");
})
}
$(function () {
yy();
})
</script>
</body>
</html>
-
键盘事件：
-
.on("keydown",function(){...})：按下键盘按键的事件
-
.on("keyup",function(){...})：松开键盘按键的事件
-
.on("keypress",function(){...})：键盘按键被按下并被释放的事件
-
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>day56</title>
</head>
<body>
<div><input type="text" id="i1"></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
function yy() {
var $i1Ele = $("#i1");
$i1Ele.on("keydown",function () {
$i1Ele.css("background-color", "red")
});
$i1Ele.on("keyup",function () {
$i1Ele.css("background-color", "yellow")
});
$i1Ele.on("keypress",function () {
$i1Ele.css("background-color", "green")
})
}
$(function () {
yy();
})
</script>
</body>
</html>
-
表单事件：
-
.on("focus",function(){...})：获取焦点的事件
-
.on("blur",function(){...})：失去焦点的事件
-
.on("change",function(){...})：元素值被修改的事件
-
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>day56</title>
<style>
.set {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div><input type="text" id="i1"></div>
<div id="i2">
<input type="checkbox" class="c1">
<input type="checkbox" class="c1">
<input type="checkbox" class="c1">
<input type="checkbox" class="c1">
<input type="checkbox" class="c1">
<input type="checkbox" class="c1">
</div>
<div id="i3">
<input type="radio" class="c2" name="radio">
<input type="radio" class="c2" name="radio">
</div>
<div id="i4">
<select id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<br>
<div class="set"></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
function yy() {
var $i1Ele = $("#i1");
var $setEle = $(".set");
$i1Ele.on("focus",function () {
$setEle.css("background-color", "yellow")
});
$i1Ele.on("blur",function () {
$setEle.css("background-color", "blue")
});
$("#i2").on("change",function () {
$setEle.css("background-color", "green")
});
$("#i3").on("change",function () {
$setEle.css("background-color", "red")
});
$("#i4").on("change",function () {
$setEle.css("background-color", "pink")
})
}
$(function () {
yy();
})
</script>
</body>
</html>
绑定事件
-
语法格式：.on(events [,selector],function(...){})
-
语法说明：
-
events：事件
-
selector：选择器(可选项)
-
function：事件触发的函数
移除事件
-
语法格式：.off(events [,selector],function(...){})
-
语法说明：
-
events：事件
-
selector：选择器(可选项)
-
function：事件触发的函数
终止事件触发的后续动作
-
说明：事件触发默认返回为true，会一直触发动作(return true)
-
语法格式：return false
-
常见应用：阻止表单提交等
页面载入
事件委托
-
描述：事件委托是通过事件冒泡的原理，利用父标签去触发子标签的事件。当指定的标签不存在时，会往子层级、孙子层级等查找，直到找到为止。常用于给未加载事件的标签绑定事件
-
语法格式：$("选择器").on(事件,子孙后代选择器,function(){事件触发的函数})
事件切换
-
描述：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态
-
语法格式：.hover(function(){...})：鼠标指针停止位置的事件
3. jQuery动画效果
-
显示与隐藏
-
show([s],[e],[f])：显示元素
-
hide([s],[e],[f])：隐藏元素
-
toggle([s],[e],[f])：切换元素
-
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>day56</title>
<style>
#i1 {
font-size: 30px;
color: #FFFFFF;
background-color: deeppink;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
#show {
position: fixed;
top: 220px;
left: 20px;
}
#hide {
position: fixed;
top: 220px;
left: 90px;
}
#toggle {
position: fixed;
top: 220px;
left: 160px;
}
</style>
</head>
<body>
<div id="i1">显示/隐藏</div>
<br>
<div>
<input type="button" value="显示" id="show">
<input type="button" value="隐藏" id="hide">
<input type="button" value="切换" id="toggle">
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
function yy() {
var $i1Ele = $("#i1");
$("#show").on("click", function(){
$i1Ele.show("fast")
});
$("#hide").on("click", function(){
$i1Ele.hide("slow")
});
$("#toggle").on("click", function(){
$i1Ele.toggle(3000)
})
}
$(function () {
yy();
})
</script>
</body>
</html>
-
滑动
-
slideDown([s],[e],[f])：向下滑动元素
-
slideUp([s],[e],[f])：向上滑动元素
-
slideToggle([s],[e],[f])：切换滑动元素
-
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>day56</title>
<style>
#i1 {
font-size: 50px;
color: #FFFFFF;
background-color: deeppink;
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
}
#down {
position: fixed;
top: 320px;
left: 20px;
}
#up {
position: fixed;
top: 320px;
left: 110px;
}
#toggle {
position: fixed;
top: 320px;
left: 200px;
}
</style>
</head>
<body>
<div id="i1">上下滑动</div>
<br>
<div>
<input type="button" value="向下滑动" id="down">
<input type="button" value="向上滑动" id="up">
<input type="button" value="上下切换滑动" id="toggle">
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
function yy() {
var $i1Ele = $("#i1");
$("#down").on("click", function(){
$i1Ele.slideDown("fast")
});
$("#up").on("click", function(){
$i1Ele.slideUp("slow")
});
$("#toggle").on("click", function(){
$i1Ele.slideToggle(3000)
})
}
$(function () {
yy();
})
</script>
</body>
</html>
-
淡入淡出
-
fadeIn([s],[e],[f])：淡入已隐藏的元素
-
fadeOut([s],[e],[f])：淡出可见的元素
-
fadeToggle([s],[e],[f])：切换淡入淡出的元素
-
fadeTo([s],o,[e],[f])：渐变为指定的不透明度
-
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>day56</title>
<style>
#i1 {
font-size: 50px;
color: #FFFFFF;
background-color: deeppink;
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
}
#in {
position: fixed;
top: 320px;
left: 10px;
}
#out {
position: fixed;
top: 320px;
left: 85px;
}
#toggle {
position: fixed;
top: 320px;
left: 160px;
}
#to {
position: fixed;
top: 320px;
left: 260px;
}
</style>
</head>
<body>
<div id="i1">淡入淡出</div>
<br>
<div>
<input type="button" value="淡入效果" id="in">
<input type="button" value="淡出效果" id="out">
<input type="button" value="切换淡入淡出" id="toggle">
<input type="button" value="透明度" id="to">
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
function yy() {
var $i1Ele = $("#i1");
$("#in").on("click", function(){
$i1Ele.fadeIn("fast")
});
$("#out").on("click", function(){
$i1Ele.fadeOut("slow")
});
$("#toggle").on("click", function(){
$i1Ele.fadeToggle(3000)
})
$("#to").on("click", function(){
$i1Ele.fadeTo(1000,0.2)
})
}
$(function () {
yy();
})
</script>
</body>
</html>
-
自定义动画
-
参数说明：
-
p(params)：指定自定义动画的参数，包含作为动画属性和终值的样式属性和及其值的集合
-
o(opacity)：设置透明度，取值范围是0~1之间的数字
-
s(speed)：设置动画效果的速度，可以使用三个预定速度，也可以手动设置毫秒值
-
slow：慢速
-
normal：普通
-
fast：快速
-
e(easing)：指定切换效果 ，默认是"swing"，可用参数"linear"
-
f(function)：动画完成时执行的函数，每个元素都会执行一次
4. jQuery的each循环
-
方式一：jQuery.each(collection,function(indexInArray,valueOfElement){...})
-
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代
-
说明：
-
collection：数组对象
-
indexInArray：数组元素的索引
-
valueOfElement：数组元素值
-
方式二：.each(function(index,Element){...})
-
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
-
说明：
-
index：循环对象的元素索引
-
Element：循环对象的元素值
-
描述：用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字this总是指向这个元素
-
注意：jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程
-
终止each循环：return false;
-
跳出本地循环，进行下一次循环：return;
-
return在each中的用法总结：
-
return(或return任意一个非false的值)：只跳出本次循环，类似于python中的continue
-
return false(return false是js中规定死的一种语法)：跳出整个循环(终止循环)，类似于python中的break
-
示例：
var arr = [11,22,33,44,55,66];
console.log(arr)
// (6) [11, 22, 33, 44, 55, 66]
jQuery.each(arr, function(i,v){
console.log(i,v);
})
// 0 11
// 1 22
// 2 33
// 3 44
// 4 55
// 5 66
// (6) [11, 22, 33, 44, 55, 66]
$(arr).each(function(i,v){
console.log(i,v);
})
// 0 11
// 1 22
// 2 33
// 3 44
// 4 55
// 5 66
// (6) [11, 22, 33, 44, 55, 66]
$(arr).each(function(i,v){
if (i === 3){
return;
}
console.log(i,v);
})
// 0 11
// 1 22
// 2 33
// 4 55
// 5 66
// (6) [11, 22, 33, 44, 55, 66]
//
$(arr).each(function(i,v){
if (i === 3){
return false;
}
console.log(i,v);
})
// 0 11
// 1 22
// 2 33
// (6) [11, 22, 33, 44, 55, 66]