1、經常使用事件
click(function(){...}) // 點擊時觸發
focus(function(){...}) // 得到焦點觸發
blur(function(){...}) // 失去焦點觸發
change(function(){...}) // 內容改變後觸發
keyup(function(){...}) // 鍵盤按下後觸發
keydown(function(){...}) // 鍵盤放開後觸發
hover(function(){...},function(){...}) // 鼠標移上去觸發第一個函數，移開時觸發第二個函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
// 按鍵被按下
$(window).keydown(function (event) {
// 每一個按鍵都有一個屬於本身的代碼編號，打印下哪一個按鍵被按下
console.log(event.keyCode);
if (event.keyCode === 16){
console.log('shift被按下了');
}
});
// 按鍵被放開的事件
$(window).keyup(function (event) {
console.log(event.keyCode);
if (event.keyCode === 16){
console.log('shift被放開了');
}
})
</script>
</body>
</html>
鍵盤按鍵示例
2、事件綁定
一、 jQuery綁定事件的方式
1.on( events [, selector ],function(){})
events： 事件
selector: 選擇器（可選的）
function: 事件處理函數
例如：
$('div').on('click', function(){})
$('div').on('click','.c1',function(){})
2. events(function(){})
events： 事件
function: 事件處理函數
例如：
$('div').click(function(){})
方式一：在標籤中寫屬性的方式綁定
<div id="d1" onclick="changeColor(this);">點我改變背景顏色</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
注意：
this是實參，表示觸發事件的當前元素。
函數定義過程當中的ths爲形參。
方式二：經過JS代碼綁定
<div id="d2">點我有驚喜</div>
<script>
var divEle = document.getElementById("d2");
divEle.onclick=function () {
alert("驚不驚喜，刺不刺激！");
}
</script>
原生JS綁定方式
二、示例
1.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: 0;
padding: 0;
}
.nav {
height: 40px;
width: 100%;
background-color: #3d3d3d;
position: fixed;
top: 0;
}
.nav ul {
list-style-type: none;
line-height: 40px;
}
.nav li {
float: left;
padding: 0 10px;
color: #999999;
position: relative;
}
.nav li:hover {
background-color: #0f0f0f;
color: white;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.son {
position: absolute;
top: 40px;
right: 0;
height: 50px;
width: 100px;
background-color: #00a9ff;
}
.hide {
display: none;
}
</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://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(".nav li").hover(
function () {
$(this).find(".son").removeClass("hide");
},
function () {
$(this).find(".son").addClass("hide");
}
);
</script>
</body>
</html>
hover
2.實時監聽input輸入值變化示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>input事件</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="text" id="i1">
<script>
/*
* oninput是HTML5的標準事件
* 可以檢測textarea,input:text,input:password和input:search這幾個元素的內容變化，
* 在內容修改後當即被觸發，不像onchange事件須要失去焦點才觸發
* oninput事件在IE9如下版本不支持，須要使用IE特有的onpropertychange事件替代
* 使用jQuery庫的話直接使用on同時綁定這兩個事件便可。
* */
$("#i1").on("input propertychange", function () {
console.log($(this).val());
})
</script>
</body>
</html>
input
3、移除事件
.off( events [, selector ][,function(){}])
.off() 方法移除用 .on()綁定的事件處理程序。
events： 事件
selector: 選擇器（可選的）
function: 事件處理函數
4、阻止後續事件執行
一、return false;
二、e.preventDefault();
三、阻止的是有關聯的事件，好比阻止表單提交，阻止冒泡事件等
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>阻止後續事件發生</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<form action="">
<input type="text" name="name" id="t">
<input type="submit" value="提交" id="sub">
</form>
<script>
/*表單的submit會把表單內容提交到action指向的鏈接
*若是沒有設置action的值，則會刷新本頁面，即你如今點擊提交，會刷新你如今的頁面
*也就是說submit是自帶了一個事件的，用於表單的提交，
*如今我再給submit綁定一個點擊事件，判斷表單是否爲空，若是爲空，則阻止提交(阻止submit自帶的事件)，
*即值爲空的時候頁面不會刷新
* */
$("#sub").on('click', function (e) {
var value = $("#t").val().trim();
if (!value) {
// 阻止表單的提交
// 阻止後面的事件執行
// e.preventDefault();
return false;
}
})
</script>
</body>
</html>
例子
5、冒泡事件
事件冒泡：當一個元素接收到事件的時候 會把他接收到的事件傳給本身的父級，一直到window 。
注意這裏傳遞的僅僅是事件，並不傳遞所綁定的事件函數。因此若是父級沒有綁定事件函數，就算傳遞了事件也不會有什麼表現，但事件確實傳遞了。
很難理解嗎？那看看例子吧
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
</head>
<body>
<div>
<p>
<button id="b1">點我</button>
</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('div').click(function () {
alert('我是div標籤');
console.log(this);
});
$('p').click(function () {
alert('我是一個p標籤');
console.log(this);
});
$('#b1').click(function () {
alert('我是那個按鈕！');
console.log(this);
});
</script>
</body>
</html>
冒泡事件例子
解釋：此時會彈出三個警告框，由於點擊按鈕的時候，會把點擊事件也傳給它的父標籤，
一直傳到window，而此時父標籤p和div也綁定了點擊事件，所以也會觸發。
那麼要想阻止冒泡事件，有兩種方式：
一、使用return false，阻止後續事件發生、
二、使用事件的event.stopPropagation()方法，阻止事件冒泡
即在按鈕那個事件裏面設置：
$('#b1').click(function (e) {
// e在此處是一個形參，表示事件自己，也能夠寫成eve或者even等
alert('我是那個按鈕！');
console.log(this);
e.stopPropagation();
// 阻止後續事件發生也能夠達到相同的效果
// return false;
});
6、頁面載入
若是你的JS代碼寫在head標籤中，由於瀏覽器是從上到下執行的，那麼你的JS代碼就不會生效了，
由於你的JS代碼是操做你body裏面的標籤的，而瀏覽器讀到head的時候已經把JS代碼讀取了，
可是此時HTML代碼還沒讀取，也就是說，此時你JS代碼操做的標籤根本就不存在，所以JS代碼不會生效。
可是若是我就想把JS代碼寫在head呢，能夠，有兩種方式：
一、DOM方法
1.語法
window.onload = function(){你的JS代碼}
2. 存在的問題
會等到頁面上的文檔、圖片、視頻等全部資源都加載完纔會觸發
存在覆蓋聲明的問題
二、jQuery幫咱們封裝的一個事件
1. 語法
1. $(document).ready(function(){你的JS代碼})
2. $(function(){綁定事件的操做...})
2. 優點：
1. 只要文檔加載完就會觸發
2. 不存在覆蓋聲明的問題
7、事件委託
事件委託是經過事件冒泡的原理，利用父標籤去捕獲子標籤的事件。
語法：
$("table").on("click", "button", function () {
// JS代碼
})
解釋：給table綁定一個點擊事件，可是是經過button觸發的。
注意事項1：
像click、keydown等DOM中定義的事件，咱們均可以使用`.on()`方法來綁定事件，可是`hover`這種jQuery中定義的事件就不能用`.on()`方法來綁定了，
也就是說hover()方法不能直接使用事件委託，想使用事件委託的方式綁定hover事件處理函數，能夠參照以下代碼分兩步綁定事件：
$('ul').on('mouseenter', 'li', function() {//綁定鼠標進入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//綁定鼠標劃出事件
$(this).removeClass('hover');
});
注意事項2
關於this：誰觸發這個事件，this就指向誰。
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div">
<p id="p">
<input type="button" value="點我" id="btn">
</p>
</div>
<script type="text/javascript">
$("#div").click(function () {
//點擊按鈕，通過事件冒泡，觸發這個事件
//此時this是表明div的，雖然點擊的是那個按鈕
//可是其實是通過冒泡後，div本身觸發的這個事件，全部this是div
console.log(this);
});
//任意註釋一個script標籤測試另外一個標籤
$("#div").on("click", "#btn", function () {
//事件委託，給div綁定了一個事件，點擊按鈕觸發這個事件
//此時this是表明按鈕btn的，雖然綁定的事件是div
//可是觸發這個事件的是btn，因此this是btn
console.log(this);
})
</script>
</body>
</html>
this指向問題
8、動畫效果
// 基本
s是毫秒
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">
<title>點贊動畫示例</title>
<style>
div {
position: relative;
display: inline-block;
cursor: pointer;
}
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://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
// 在1秒內透明度變成0
opacity: 0
}, 1000)
})
</script>
</body>
</html>
點贊示例
9、拓展
一、each
方式一：循環可迭代對象
jQuery.each(collection, callback(indexInArray, valueOfElement))
jQuery.each(可迭代對象, 函數(索引, 值)) -->相似於python內置函數sorted那種類型
描述：一個通用的迭代函數，它能夠用來無縫迭代對象和數組。
數組和相似數組的對象經過一個長度屬性（如一個函數的參數對象）來迭代數字索引，從0到length - 1。其餘對象經過其屬性名進行迭代。
例如：
li =["a","b","c","d"]
$.each(li,function(i, v){
console.log(i, v);//i是索引，v是每次循環的具體元素。
})
輸出：
0"a"
1"b"
2"c"
3"d"
li =["a","b","c","d"]
$.each(li,function(i, v){
if (i === 2){
return false; // 至關於break
}
console.log(i, v);
})
輸出：
0"a"
1"b"
li =["a","b","c","d"]
$.each(li,function(i, v){
if (i === 2){
return; // 至關於continue
}
console.log(i, v);
})
輸出：
0"a"
1"b"
3"d"
方式二：循環節點
somenode.each(function(index, Element))
描述：遍歷一個jQuery對象，爲每一個匹配元素執行一個函數。
.each() 方法用來迭代jQuery對象中的每個DOM元素。每次回調函數執行時，會傳遞當前循環次數做爲參數(從0開始計數)。
因爲回調函數是在當前DOM元素爲上下文的語境中觸發的，因此關鍵字 this 老是指向這個元素。
例如：
// 爲每個li標籤添加一個樣式
$("li").each(function(){
$(this).addClass("c1");
});
注意:
jQuery的方法返回一個jQuery對象，遍歷jQuery集合中的元素 - 被稱爲隱式迭代的過程。當這種狀況發生時，它一般不須要顯式地循環的 .each()方法
也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就能夠了：
$("li").addClass("c1"); // 對全部標籤作統一操做
二、data
在匹配的元素集合中的全部元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。
1.設置數據(能夠存儲任意的值，包括對象)
somenode.data(key, value):
描述：在匹配的元素上存儲任意相關數據。
$("div").data("age",100); //給全部div標籤都保存一個數據，名爲age，值爲100
2.取值
somenode.data(key)
描述: 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值
$("div").data("k"); //返回第一個div標籤中保存的"k"的值
$("div").data(); //返回div標籤中保存的全部的值
3.刪除值
somenode.removeData(key):
描述：移除存放在元素上的數據，不加key參數表示移除全部保存的數據。
$("div").removeData("k"); //移除元素上存放k對應的數據
三、插件
語法：jQuery.extend(object)
給jQuery添加自定義的方法(擴展後jQuery就擁有了此方法)：
$.extend({
nb:function(){
console.log("RNG牛逼！")
}
});
$.nb();
給jQuery對象添加自定義的方法(擴展後全部對象都能用此方法)：
$.fn.extend({
znb:function(){
console.log("RNG真牛逼！")
}
});
$("div").znb();
10、示例
一、表格的新增和刪除(事件委託)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 99;
}
.modal {
width: 300px;
height: 200px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>愛好</th>
<th>操做</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小明</td>
<td>開車</td>
<td>
<button class="fire">開除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小紅</td>
<td>化妝</td>
<td>
<button class="fire">開除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小東</td>
<td>吃吃吃</td>
<td>
<button class="fire">開除</button>
</td>
</tr>
</tbody>
</table>
<div class="cover hide"></div>
<div class="modal hide">
<div>
<label>姓名：
<input type="text" id="name">
</label>
</div>
<div>
<label>愛好：
<input type="text" id="hobby">
</label>
</div>
<button id="cancel" type="button">取消</button>
<button id="submit" type="button">提交</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
// 定義一個清空輸入框而且隱藏模態框的方法
function hideModal(){
// 1. 清空input的值
$("#name,#hobby").val('');
// 2. 隱藏起來
$(".cover,.modal").addClass('hide');
}
// 開除按鈕的功能(事件委託)
$("table").on('click', '.fire', function () {
// 點擊開除按鈕要作的事兒
// 把當前行移除掉
//this --> 觸發當前點擊事件的DOM對象
$(this).parent().parent().remove(); // 鏈式操做
});
// 新增按鈕的功能
$("#add").click(function () {
// 點擊新增按鈕要作的事兒
// 1. 移除cover和modal的hide樣式
$(".cover,.modal").removeClass('hide');
});
// 點擊modal中的cancel按鈕
$("#cancel").click(function () {
hideModal();
});
// 點擊modal中的submit按鈕
$("#submit").click(function () {
// 1. 獲取用戶輸入的值
var name = $("#name").val();
var hobby = $("#hobby").val();
// 2. 隱藏模態框，清空輸入框
hideModal();
// 3. 建立一個tr標籤，把數據添加進去
var trEle = document.createElement("tr");
// 直接append HTML內容
$(trEle).append('<td><input type="checkbox"></td>');
$(trEle).append('<td>' + name + '</td>');
// 建立td標籤
var tdTmp = document.createElement('td');
// 設置td標籤的文本內容
tdTmp.innerText = hobby;
// 把建立的td標籤追加到tr裏面
$(trEle).append(tdTmp);
// 直接append HTML內容
$(trEle).append('<td><button class="fire">開除</button></td>')
// 4. 把上一步的tr追加到表格的tbody後面
$('tbody').append(trEle);
});
</script>
</body>
</html>
事件委託
二、批量操做示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<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>小明</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>小紅</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>小白</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>小花</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>小狗</td>
<td>
<select>
<option value="1">上線</option>
<option value="2">下線</option>
<option value="3">隱身</option>
</select>
</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var flag = false;
// shift被按下，就將全局的flag置爲true
$(window).keydown(function (e) {
// shift鍵的代碼編號是16
if (e.keyCode === 16){
flag = true;
}
});
// shift鍵被放開的時候，就將全局的flag置爲false
$(window).keyup(function (e) {
if (e.keyCode === 16){
flag = false;
}
});
// 按下shift鍵，進入批量編輯模式，且操做的是被選中的項
// 給select標籤綁定change事件
$('td>select').change(function () {
// 判斷是否進入批量編輯模式
// 判斷checkbox的狀態
var isChecked = $(this).parent().prev().prev().find(':checkbox').prop('checked');
// flag爲true且checkbox是被選中的狀態
if ( flag && isChecked){
// 1. 取到當前select選中的值
var checkedValue = $(this).val();
// 2. 找到全部被選中的行
// 3. 把選中行的select置爲同樣的值
$('tr:has(input:checked)').find('select').val(checkedValue);
}
})
</script>
</body>
</html>
批量操做