1,文檔處理
添加到指定元素内部的後面
$(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()
克隆
克隆示例:
<!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>克隆</title>
<style>
#b1 {
background-color: deeppink;
padding: px;
color: white;
margin: px;
}
#b2 {
background-color: dodgerblue;
padding: px;
color: white;
margin: px;
}
</style>
</head>
<body>
<button id="b1">屠龍寶刀,點選就送</button>
<hr>
<button id="b2">屠龍寶刀,點選就送</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
// clone方法不加參數true,克隆标簽但不克隆标簽帶的事件
$("#b1").on("click", function () {
$(this).clone().insertAfter(this);
});
// clone方法加參數true,克隆标簽并且克隆标簽帶的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
2,事件
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
keydown和keyup事件組合示例:
<!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>鍵盤事件示例</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>
<select>
<option value="1">上線</option>
<option value="2">下線</option>
<option value="3">停職</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>
<select>
<option value="1">上線</option>
<option value="2">下線</option>
<option value="3">停職</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>
<select>
<option value="1">上線</option>
<option value="2">下線</option>
<option value="3">停職</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>EvaJ</td>
<td>
<select>
<option value="1">上線</option>
<option value="2">下線</option>
<option value="3">停職</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Gold</td>
<td>
<select>
<option value="1">上線</option>
<option value="2">下線</option>
<option value="3">停職</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="b1" value="全選">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反選">
<script src="jquery-3.2.1.min.js"></script>
<script>
// 全選
$("#b1").on("click", function () {
$(":checkbox").prop("checked", true);
});
// 取消
$("#b2").on("click", function () {
$(":checkbox").prop("checked", false);
});
// 反選
$("#b3").on("click", function () {
$(":checkbox").each(function () {
var flag = $(this).prop("checked");
$(this).prop("checked", !flag);
})
});
// 按住shift鍵,批量操作
// 定義全局變量
var flag = false;
// 全局事件,監聽鍵盤shift按鍵是否被按下
$(window).on("keydown", function (e) {
// alert(e.keyCode);
if (e.keyCode === ){
flag = true;
}
});
// 全局事件,shift按鍵擡起時将全局變量置為false
$(window).on("keyup", function (e) {
if (e.keyCode === ){
flag = false;
}
});
// select綁定change事件
$("table select").on("change", function () {
// 是否為批量操作模式
if (flag) {
var selectValue = $(this).val();
// 找到所有被選中的那一行的select,選中指定值
$("input:checked").parent().parent().find("select").val(selectValue);
}
})
</script>
</body>
</html>
hover事件示例:
<!DOCTYPE html>
<html lang="en">
<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>hover示例</title>
<style>
* {
margin: ;
padding: ;
}
.nav {
height: px;
width: %;
background-color: #3d3d3d;
position: fixed;
top: ;
}
.nav ul {
list-style-type: none;
line-height: px;
}
.nav li {
float: left;
padding: px;
color: #999999;
position: relative;
}
.nav li:hover {
background-color: #0f0f0f;
color: white;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.son {
position: absolute;
top: px;
right: ;
height: px;
width: px;
background-color: #00a9ff;
display: none;
}
.hover .son {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li>登入</li>
<li>注冊</li>
<li>購物車
<p class="son hide">
空空如也...
</p>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(".nav li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
</script>
</body>
</html>
實時監聽input輸入值變化示例:
<!DOCTYPE html>
<html lang="en">
<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>實時監聽input輸入值變化</title>
</head>
<body>
<input type="text" id="i1">
<script src="jquery-3.2.1.min.js"></script>
<script>
/*
* oninput是HTML5的标準事件
* 能夠檢測textarea,input:text,input:password和input:search這幾個元素的内容變化,
* 在内容修改後立即被觸發,不像onchange事件需要失去焦點才觸發
* oninput事件在IE9以下版本不支援,需要使用IE特有的onpropertychange事件替代
* 使用jQuery庫的話直接使用on同時綁定這兩個事件即可。
* */
$("#i1").on("input propertychange", function () {
alert($(this).val());
})
</script>
</body>
</html>
事件綁定
.on( events [, selector ],function(){})
events: 事件
selector: 選擇器(可選的)
function: 事件處理函數
移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()綁定的事件處理程式。
events: 事件
selector: 選擇器(可選的)
function: 事件處理函數
阻止後續事件執行
return false; // 常見阻止表單送出等
e.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止預設事件</title>
</head>
<body>
<form action="">
<button id="b1">點我</button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function (e) {
alert();
//return false;
e.preventDefault();
});
</script>
</body>
</html>
注意:
像click、keydown等DOM中定義的事件,我們都可以使用
.on()
方法來綁定事件,但是
hover
這種jQuery中定義的事件就不能用
.on()
方法來綁定了。
想使用事件委托的方式綁定hover事件處理函數,可以參照如下代碼分兩步綁定事件:
$('ul').on('mouseenter', 'li', function() {//綁定滑鼠進入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//綁定滑鼠劃出事件
$(this).removeClass('hover');
});
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
</head>
<body>
<div>
<p>
<span>點我</span>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("span").click(function (e) {
alert("span");
e.stopPropagation();
});
$("p").click(function () {
alert("p");
});
$("div").click(function () {
alert("div");
})
</script>
</body>
</html>
頁面載入
當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。這是事件子產品中最重要的一個函數,因為它可以極大地提高web應用程式的響應速度。
兩種寫法:
$(document).ready(function(){
// 在這裡寫你的JS代碼...
})
簡寫:
$(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>登入注冊示例</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">姓名</label>
<input type="text" id="name">
<span class="error"></span>
<label for="passwd">密碼</label>
<input type="password" id="passwd">
<span class="error"></span>
<input type="submit" id="modal-submit" value="登入">
</form>
<script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script>
function myValidation() {
// 多次用到的jQuery對象存儲到一個變量,避免重複查詢文檔樹
var $myForm = $("#myForm");
$myForm.find(":submit").on("click", function () {
// 定義一個标志位,記錄表單填寫是否正常
var flag = true;
$myForm.find(":text, :password").each(function () {
var val = $(this).val();
if (val.length <= ){
var labelName = $(this).prev("label").text();
$(this).next("span").text(labelName + "不能為空");
flag = false;
}
});
// 表單填寫有誤就會傳回false,阻止submit按鈕預設的送出表單事件
return flag;
});
// input輸入框擷取焦點後移除之前的錯誤提示資訊
$myForm.find("input[type!='submit']").on("focus", function () {
$(this).next(".error").text("");
})
}
// 文檔樹就緒後執行
$(document).ready(function () {
myValidation();
});
</script>
</body>
</html>
事件委托
事件委托是通過事件冒泡的原理,利用父标簽去捕獲子标簽的事件。
示例:
表格中每一行的編輯和删除按鈕都能觸發相應的事件。
$("table").on("click", ".delete", function () {
// 删除按鈕綁定的事件
})
3,動畫效果
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定義(了解即可)
animate(p,[s],[e],[fn])
自定義動畫示例:
<!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>點贊動畫示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -px;
top: -px;
opacity: ;
}
</style>
</head>
<body>
<div id="d1">點贊</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity:
}, )
})
</script>
</body>
</html>
4,補充
each
jQuery.each(collection, callback(indexInArray, valueOfElement)):
描述:一個通用的疊代函數,它可以用來無縫疊代對象和數組。數組和類似數組的對象通過一個長度屬性(如一個函數的參數對象)來疊代數字索引,從0到length - 1。其他對象通過其屬性名進行疊代。
li =[,,,]
$.each(li,function(i, v){
console.log(i, v);//index是索引,ele是每次循環的具體元素。
})
輸出:
010
120
230
340
.each(function(index, Element)):
描述:周遊一個jQuery對象,為每個比對元素執行一個函數。
.each() 方法用來疊代jQuery對象中的每一個DOM元素。每次回調函數執行時,會傳遞目前循環次數作為參數(從0開始計數)。由于回調函數是在目前DOM元素為上下文的語境中觸發的,是以關鍵字 this 總是指向這個元素。
// 為每一個li标簽添加foo
$("li").each(function(){
$(this).addClass("c1");
});
注意: jQuery的方法傳回一個jQuery對象,周遊jQuery集合中的元素 - 被稱為隐式疊代的過程。當這種情況發生時,它通常不需要顯式地循環的 .each()方法:
也就是說,上面的例子沒有必要使用each()方法,直接像下面這樣寫就可以了:
$("li").addClass("c1"); // 對所有标簽做統一操作
注意:
在周遊過程中可以使用 return false提前結束each循環。
終止each循環
return false;
伏筆…
.data()
在比對的元素集合中的所有元素上存儲任意相關資料或傳回比對的元素集合中的第一個元素的給定名稱的資料存儲的值。
.data(key, value):
描述:在比對的元素上存儲任意相關資料。
$("div").data("k",);//給所有div标簽都儲存一個名為k,值為
.data(key):
描述: 傳回比對的元素集合中的第一個元素的給定名稱的資料存儲的值—通過 .data(name, value)或 HTML5 data-*屬性設定。
$("div").data("k");//傳回第一個div标簽中儲存的"k"的值
重點内容.removeData(key):
描述:移除存放在元素上的資料,不加key參數表示移除所有儲存的資料。
$("div").removeData("k"); //移除元素上存放k對應的資料