web前端之jQuery補充
阿新 • • 發佈：2018-03-27
jQuery html一、文檔操作
1、文檔操作示例
<!DOCTYPE html>
<html>
<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>
<button id="b1">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>愛好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>爬山</td>
<td>
<button>刪除</button>
<button>編輯</button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// 找到新增按鈕
$("#b1").click(function () {
// 生成一條數據
var newTrEle = document.createElement("tr");
$(newTrEle).html("<td>2</td> <td>Yuan</td> <td>遊泳</td> <td><button>刪除</button> <button>編輯</button></td>");
// 把新創建的tr追加到tbody的最後
$("tbody").append(newTrEle);
});
// 使用on方法做事件委派，否則新的數據刪除操作不能成功
$("tbody").on("click", ".delete", function () {
// this指向的是實際觸發事件的元素，刪除按鈕當前行數據
$(this).parent().parent().remove();
})
</script>
</body>
</html>2、批量操作示例
<!DOCTYPE html>
<html>
<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>
</tbody>
</table>
<input type="button" id="b1" value="全選">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反選">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var flag = false;
$(window).keydown(function (event) { // shift按鍵按下的時候 把flag 設置 true
if (event.keyCode === 16){
flag = true;
}
});
$(window).keyup(function (event) { // shift按鍵擡起來的時候 把flag設置成 false
if (event.keyCode === 16 ){
flag = false;
}
});
$("select").change(function () { // 給 select 綁定 change 示例
// 判斷當前select 這一行的 checkbox有沒有被選中
var currentCheckbox = $(this).parent().parent().find(":checkbox").prop("checked");
if (flag && currentCheckbox){ // 只有在批量操作模式下才進行後續操作
var selectValue = $(this).val(); // 取到當前select被選中的值
$("input[type='checkbox']:checked").parent().parent().find("select").val(selectValue); // 把所有checkbox被選中的那些行的select設置成相同值
}
});
//全選
$("#b1").click(function(){
$("input[type='checkbox']").prop("checked",true);
})
//取消
$("#b2").click(function () {
$("input[type='checkbox']").prop("checked", false);
});
// 反選
$("#b3").click(function(){
$("input[type='checkbox']").each(function(){
if ($(this).prop("checked")) {
$(this).prop("checked",false);
}else {
$(this).prop("checked",true);
}
})
})
</script>
</body>
</html>
3、hover事件示例
<!DOCTYPE html>
<html>
<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: 0;
padding: 0;
}
.nav {
background-color: #4d4d4d;
height: 50px;
}
.nav ul {
list-style-type: none;
float: right;
}
.nav li {
line-height: 50px;
float: left;
padding: 0 10px;
color: white;
position: relative;
}
.son {
height: 100px;
width: 200px;
background-color: blue;
position: absolute;
top: 50px;
right: 0;
display: none;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.hover .son {
display: block;
}
</style>
</head>
<body>
<div class="nav clearfix">
<ul>
<li>登錄</li>
<li>註冊</li>
<li>購物車
<p>空空如也~</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>效果圖：
二、jQuery動畫效果
1、用法
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]]) //$("#i1").slideUp(2000) 2秒滑動到屏幕頂部消失
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn]) //$("#i1").fadeOut(2000) 2秒淡出屏幕
fadeTo([[s],o,[e],[fn]]) //$("#i1").fadeTo(2000,0.5) 2秒從當前狀態到0.5的透明度狀態
fadeToggle([s,[e],[fn]])
// 自定義（了解即可）
animate(p,[s],[e],[fn]) //$("#i1").animate({width:"800px"},2000) 2秒把元素變成寬度為800px大小2、點贊動畫示例
<!DOCTYPE html>
<html>
<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: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">點贊</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>三、each和data
1、.each()
.each(function(index, Element))：
描述：遍歷一個jQuery對象，為每個匹配元素執行一個函數。
.each() 方法用來叠代jQuery對象中的每一個DOM元素。每次回調函數執行時，會傳遞當前循環次數作為參數(從0開始計數)。關鍵字 this 總是指向當前DOM元素。
// 為每一個li標簽添加foo
$("li").each(function(){
$(this).addClass("c1");
});
註意: jQuery的方法返回一個jQuery對象，遍歷jQuery集合中的元素 - 被稱為隱式叠代的過程。當這種情況發生時，它通常不需要顯式地循環的 .each()方法：
也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就可以了：
$("li").addClass("c1"); // 對所有標簽做統一操作
在遍歷過程中可以使用 return false提前結束each循環。
<!DOCTYPE html>
<html>
<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>each循環示例</title>
<style>
.c1 {
height: 100px;
background-color: red;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div>111</div>
<div>222</div>
<div>333</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
var $divEles = $("div");
$divEles.each(function(){
console.log(this);
})
$("div").each(function(){
console.log(this);
})
顯示結果：
<div>111</div>
<div>222</div>
<div>333</div>2、.data()
在匹配的元素集合中的所有元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。
.data(key, value):
$("div").data("k",100); //給所有div標簽都保存一個名為k，值為100
$("div").data("k"); //返回第一個div標簽中保存的"k"的值
$("div").removeData("k"); //移除元素上存放k對應的數據web前端之jQuery補充