jQuery學習記錄四
元素的事件繫結
*如果是先建立元素,再為這個子元素繫結事件, 後面再建立的子元素,沒有事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 300px; height: 200px; background-color: green; } p{ width: 100px; height: 30px; background-color: red; cursor: pointer; } </style> <script src="jquery-1.12.1.js"></script> <script> //點選按鈕為div中新增一個子元素,並且子元素有點選的事件 $(function () { //第一個按鈕 $("#btn").click(function () { $("<p>這是一個p</p>").appendTo($("#dv")); //先建立,後繫結的事件是可以用的 // $("p").click(function () { // alert("哈哈"); // }); //同上 // $("p").bind("click",function () { // alert("哈哈"); // }); $("#dv").delegate("p","click",function () { alert("哈哈"); }); }); $("#btn2").click(function () { 後新增的----->沒有繫結效果的 $("<p>這是一個p2</p>").appendTo($("#dv")); }); }); </script> </head> <body> <input type="button" value="繫結事件" id="btn"/> <input type="button" value="繫結事件" id="btn2"/> <div id="dv"></div> </body> </html>
有一種繫結事件的方式:同delegate() 父元素點選,為子元素新增點選事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 300px; height: 200px; background-color: green; } p{ width: 100px; height: 30px; background-color: red; cursor: pointer; } </style> <script src="jquery-1.12.1.js"></script> <script> $(function () { //點選按鈕為div繫結事件 //此時on和delegate的作用是一樣的,但是引數的順序是不一樣 $("#btn").click(function () { $("<p>這是一個p</p>").appendTo($("#dv")); //和delegate是一樣,都是在為子元素繫結事件 $("#dv").on("click","p",function () { alert("p被點選了"); }); }); }); </script> </head> <body> <input type="button" value="繫結事件" id="btn"/> <input type="button" value="繫結事件" id="btn2"/> <div id="dv"></div> </body> </html>
不同繫結事件的區別
* 物件.事件名字(事件處理函式);--->普通的寫法
* 物件.bind(引數1,引數2);---->引數1:事件的名字,引數2:事件處理函式
* 前兩種方式只能為存在的元素繫結事件,後新增的元素沒有事件
*
* 下面的兩種方式,可以為存在的元素繫結事件,後新增的元素也有事件
* 物件.delegate("選擇器","事件名字",事件處理函式);
* 父級元素呼叫方法,代理子級元素繫結事件
* 物件.on("事件名字","選擇器",事件處理函式);
* 父級元素呼叫方法,代理子級元素繫結事件
*
* 因為delegate方法中是呼叫的on的方法
* 所以,以後直接用on就可以了
解除繫結的方法
//用什麼方式繫結事件,最好用對應的方式解綁事件
//bind括號中寫什麼事件的名字就會把這個事件解綁,會把這個元素的這個點選的多個事件都會解綁
//物件.click()這種方式新增的事件也可以使用unbind解綁
//括號中沒有任何引數,此時該元素的所有的事件全部解綁
//同時解綁多個事件---每個事件的名字中間用空格即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: green;
}
p{
width: 100px;
height: 30px;
background-color: red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//第一個按鈕為div繫結事件
$("#btn").click(function () {
// //div的點選事件
$("#dv").bind("click",function () {
console.log("div被點了");
}).bind("click",function () {
console.log("div點第二個點選");
});
//滑鼠進入
$("#dv").bind("mouseenter",function () {
$(this).css("backgroundColor","blue");
});
//滑鼠離開
$("#dv").bind("mouseleave",function () {
$(this).css("backgroundColor","yellow");
});
// $("#dv").click(function () {
// console.log("哈哈");
// });
});
//第二個按鈕為div解綁事件
$("#btn2").click(function () {
//解綁的是點選事件,所有的點選事件全部移除
//$("#dv").unbind("click");
//括號中沒有任何引數,此時該元素的所有的事件全部解綁
//$("#dv").unbind();
//同時解綁多個事件
//$("#dv").unbind("mouseenter mouseleave");
});
});
</script>
</head>
<body>
<input type="button" value="繫結事件" id="btn"/>
<input type="button" value="解綁事件" id="btn2"/>
<div id="dv"></div>
</body>
</html>
通過delegate()繫結事件的解綁方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: green;
}
p{
width: 100px;
height: 30px;
background-color: red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//delegate繫結事件對應的方式的解綁方式
//點選第一個按鈕,div有自己的點選事件,有滑鼠進入和滑鼠離開事件
//同時為p繫結點選事件
$("#btn").click(function () {
//為div繫結事件
$("#dv").click(function () {
console.log("div被點了");
}).mouseenter(function () {
console.log("滑鼠進來了");
}).mouseleave(function () {
console.log("滑鼠離開了");
});
//在div中建立一個p,同時繫結點選事件
$("<p>這是一個p</p>").appendTo($("#dv"));
//為p繫結事件
$("#dv").delegate("p","click",function () {
console.log("啊~p被點了");
});
$("#dv").delegate("p","mouseenter",function () {
console.log("p的滑鼠進入");
});
});
//第二個按鈕解綁事件
$("#btn2").click(function () {
//p的點選事件沒有了,移除了p的所有的事件
//$("#dv").undelegate();
//移除的是p的點選事件
$("#dv").undelegate("p","click");
//可以移除多個事件,但是每個事件之間用空格隔開
$("#dv").undelegate("p","click mouseenter");
});
});
</script>
</head>
<body>
<input type="button" value="繫結事件" id="btn"/>
<input type="button" value="解綁事件" id="btn2"/>
<div id="dv">
</div>
</body>
</html>
案例:為表格動態新增一行
*JavaScript程式碼都很簡單,尤其加了jQuery之後,HTML和CSS不熟看起來困難。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="checkDemo.css">
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
/*新增框的顯示與隱藏*/
$('#j_btnAddData').click(function () {
$('#j_formAdd').show();
$('#j_mask').show();
});
function closeKuang() {
$('#j_formAdd').hide();
$('#j_mask').hide();
}
$('#j_hideFormAdd').click(function () {
closeKuang();
});
/*新增行操作的實現*/
$('#j_btnAdd').click(function () {
var j_txtLesson=$('#j_txtLesson');
var j_txtBelSch=$('#j_txtBelSch');
$('<tr><td>'+j_txtLesson.val()+'</td><td>'+j_txtBelSch.val()+'</td><td><a href="#">GET</a></td></tr>').appendTo($('#j_tb'));
closeKuang();
j_txtLesson.val("");
j_txtBelSch.val("這就是命");
});
/*點選get移除一個*/
$('#j_tb').on('click','.get',function () {
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<div class="wrap">
<div>
<input type="button" value="新增資料" id="j_btnAddData" class="btnAdd">
</div>
<table>
<thead>
<tr>
<th>課程名稱</th>
<th>所屬學院</th>
<th>已學會</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>JavaScript</td>
<td>前端移動開發</td>
<td><a href="javascript:;" class="get">GET</a></td>
</tr>
...多個行...
</tbody>
</table>
</div>
<div id="j_mask" class="mask"></div>
<div id="j_formAdd" class="form-add">
<div class="form-add-title">
<span>新增資料</span>
<div id="j_hideFormAdd">x</div>
</div>
<div class="form-item">
<label class="lb" for="j_txtLesson">課程名稱:</label>
<input class="txt" type="text" id="j_txtLesson" placeholder="請輸入課程名稱">
</div>
<div class="form-item">
<label class="lb" for="j_txtBelSch">所屬學院:</label>
<input class="txt" type="text" id="j_txtBelSch" value="傳智播客-前端與移動開發學院">
</div>
<div class="form-submit">
<input type="button" value="新增" id="j_btnAdd">
</div>
</div>
</body>
</html>
事件冒泡現象,以及事件冒泡的阻止方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv1 {
width: 300px;
height: 200px;
background-color: red;
}
#dv2 {
width: 250px;
height: 150px;
background-color: green;
}
#dv3 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$("#dv1").click(function () {
//為什麼是undefined
//物件.id----->DOM中的
console.log($(this).attr("id"));
});
$("#dv2").click(function () {
console.log($(this).attr("id"));
});
$("#dv3").click(function () {
console.log($(this).attr("id"));
return false;
});
});
// document.getElementById("btn").onclick=function (e) {
// e.stopPropagation();
// window.event.cancelBubble=true;
// };
</script>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3">
</div>
</div>
</div>
</body>
</html>
時間的觸發
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//文字框新增獲取焦點的事件
$("#txt").focus(function () {
console.log("我的獲取焦點的事件觸發了");
//設定當前元素的下一個兄弟元素中顯示一個提示資訊
$(this).next("span").text("文字框獲取焦點了");
});
//按鈕的點及事件
$("#btn").click(function () {
//呼叫文字框的獲取焦點的事件---第一種方式讓別的元素的事件觸發
//物件.事件名字();
//$("#txt").focus();
//第二種觸發事件的方式
//$("#txt").trigger("focus");//觸發的意思
//這種方式可以觸發該事件,但是,不能觸發瀏覽器的預設的行為(就是文字無法獲得焦點)
$("#txt").triggerHandler("focus");
});
});
</script>
</head>
<body>
<input type="button" value="我也要觸發文字框的獲取焦點的事件" id="btn"/>
<input type="text" value="" id="txt" /><span id="sp"></span>
</body>
</html>
事件的引數物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//事件引數物件
$("#dv").mousedown(function (e) {
console.log(arguments.length); 1
console.log(e);
//獲取的是滑鼠的按鍵的值
console.log(e.button); 0
});
});
</script>
</head>
<body>
<div id="dv"></div>
</body>
</html>
鍵盤狀態的獲取
*注:先按下鍵盤在按滑鼠,不然事件觸發過早
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$(document).mousedown(function (e) {
//判斷使用者按下滑鼠的時候,有沒有按下alt鍵
//console.log(e.altKey);
if(e.altKey){
//使用者按下了alt鍵的同時也按下滑鼠了
console.log("按下了alt鍵,滑鼠也按下了");
}else if(e.shiftKey){
//使用者按下了shift鍵,同時按下滑鼠
console.log("按下了shift鍵,滑鼠也按下了");
}else if(e.ctrlKey){
//使用者按下了ctrl鍵,同時按下滑鼠
console.log("按下了ctrl鍵,滑鼠也按下了");
}else{
console.log("使用者按下了滑鼠");
}
});
});
</script>
</head>
<body>
<div id="dv"></div>
</body>
</html>
案例:點選鍵盤修改背景顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 800px;
height: 600px;
background-color: gray;
background-color: ;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//使用者在頁面按鍵,可以改變div的背景顏色
$(document).keydown(function (e) {
switch (e.keyCode){
case 65:$("#dv").css("backgroundColor","red");break;
case 66:$("#dv").css("backgroundColor","green");break;
case 67:$("#dv").css("backgroundColor","blue");break;
case 68:$("#dv").css("backgroundColor","orange");break;
case 69:$("#dv").css("backgroundColor","yellow");break;
case 70:$("#dv").css("backgroundColor","deeppink");break;
case 71:$("#dv").css("backgroundColor","hotpink");break;
case 72:$("#dv").css("backgroundColor","oranged");break;
case 73:$("#dv").css("backgroundColor","black");break;
case 74:$("#dv").css("backgroundColor","white");break;
case 75:$("#dv").css("backgroundColor","yellowgreen");break;
}
});
});
</script>
</head>
<body>
<div id="dv"></div>
</body>
</html>
鏈式程式設計的原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js">
</script>
<script>
// $(function () {
// //為按鈕註冊點選事件
// $("#btn").click(function () {
// //$(this).val("哈哈").val("嘎嘎");
// //console.log( );
//
// //物件.方法();呼叫,如果返回來的還是物件,那麼可以繼續的呼叫方法
// });
// });
function Person(age) {
this.age=age;
this.sayHi=function (txt) {
if(txt){
console.log("您好啊:"+txt);
return this;
}else{
console.log("您好啊");
}
};
this.eat=function () {
console.log("中午就吃了一個饅頭和鹹菜");
return this;
};
}
//物件
var per=new Person(10);
per.sayHi("嘎嘎").eat();
//per.sayHi().eat().sayHi().eat().eat().sayHi();
//console.log();
//方法();----獲取這個值,如果.方法(值)--->當前的物件
//val();---返回的是value屬性的值, val("fdds");---當前的物件
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
</body>
</html>
案例:評分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星評分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: yellow;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//獲取所有的li標籤
$(".comment>li").mouseenter(function () {//進入
//當前的li是實心的五角星,前面的li也都是實現的五角星,滑鼠後面的li是空心的五角星
$(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
}).click(function () {//點選
//做一個記錄
//點哪個li就為這個li新增一個自定義屬性,作為標識,但是其他的li中的這個自定義屬性要刪除
$(this).attr("index","1").siblings("li").removeAttr("index");
}).mouseleave(function () {//離開
//滑鼠離開的時候,獲取那個帶有index自定義屬性的li,然後,改變這個li中的五角星,同時前面的五角星也都是實心的,同時後面的五角星都是空心
//先幹掉所有的li中的實心的五角星
$(".comment>li").text("☆");
$(".comment>li[index=1]").text("★").prevAll("li").text("★");
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
each()的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
li{
width: 100px;
height: 100px;
background-color: green;
margin-right: 10px;
float: left;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//隱式迭代---內部幫助我們迴圈遍歷做操作
//每個元素做不同的操作的時候
//each方法,幫助我們遍歷jQuery的物件
$(function () {
//獲取所有的li,針對每個li的透明進行設定
$("#uu>li").each(function (index,ele) {
//引數1:索引,引數2:物件
//console.log(arguments[0]+"===="+arguments[1]);
//每個li的透明度不一樣
var opacity=(index+1)/10;
$(ele).css("opacity",opacity);
});
});
//each方法就是用來遍歷jQuery物件的,但是,裡面的每個物件最開始都是DOM物件,如果想要使用jQuery的方法,需要把DOM物件轉jQuery物件
</script>
</head>
<body>
<ul id="uu">
<li>1</li>
<li>2</li>
</ul>
</body>
</html>
自定義$與jQuery的$衝突問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//一個html檔案引入了多個的js檔案庫,每個js庫中的頂級物件可能都是$
//1.js $.eat();
//2.js $.sayHi();
</script>
<script src="jquery-1.12.1.js"></script>
<script>
// var $=10;//普通的變數,10
// console.log($);
// //頁面載入
// $(function () { $ is not a function
// $("#btn").click(function () {
// console.log("小蘇好猥瑣哦");
// });
// });
// /var $=10;//普通的變數,10
//console.log($); 打印出10
////頁面載入
//jQuery(function () { 只能通過這種方式進行呼叫
// jQuery("#btn").click(function () {
// console.log("小蘇好猥瑣哦");
// });
//});
var fdsfdsf = $.noConflict();//把$的權利給了xy了,$就可以作為其他的用法出現在程式碼中
var $ = 10;//普通的變數,10
console.log($);
//頁面載入
fdsfdsf(function () {
fdsfdsf("#btn").click(function () {
console.log("小蘇好猥瑣哦");
});
});
</script>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
</body>
</html>
包裝集:把很多的DOM的物件進行包裝或者是封裝---->jQuery物件
//jQuery物件---->DOM物件--->jQuery物件[0]--->獲取到這個物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
// $(function () {
// $("p")[0].innerText="哈哈";
// });
//包裝集 ----->length屬性
//jQuery中如何判斷這個元素是否存在,就是通過包裝集的length屬性來測試的
//是通過這個物件.length屬性不等於0的方式來判斷
// $(function () {
// if($("#btn").length!=0){
// console.log("存在");
// }else{
// console.log("不存在");
// }
// });
</script>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
</html>
案例:點選按鈕只建立一個p標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
if($("#p1").length==0){
//點選按鈕,只建立一個p標籤,在div中
$("<p id='p1'>這是一個p</p>").appendTo($("#dv"));
}
});
});
</script>
</head>
<body>
<input type="button" value="建立一個p" id="btn"/>
<div id="dv"></div>
</body>
</html>
幾個屬性介紹
//innerWidth()/innerHeight() 方法返回元素的寬度/高度(包括內邊距)。
//outerWidth()/outerHeight() 方法返回元素的寬度/高度(包括內邊距和邊框)。
//outerWidth(true)/outerHeight(true) 方法返回元素的寬度/高度(包括內邊距、邊框和外邊距)。
外掛的使用:別人寫好的拿來改改。。。
事件引數物件
//e.target這個屬性得到的是觸發該事件的目標物件,此時是一個DOM物件 //e.currentTarget這個屬性得到的是觸發該事件的當前的物件 //e.delegateTarget這個屬性得到的是代理的這個物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: yellow;
}
p{
width: 100px;
height: 30px;
background-color: pink;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//e.target這個屬性得到的是觸發該事件的目標物件,此時是一個DOM物件
//e.currentTarget這個屬性得到的是觸發該事件的當前的物件
//e.delegateTarget這個屬性得到的是代理的這個物件
// $(function () {
// //事件引數物件
// $("#dv").click(function (e) {
// //console.log("哈哈");
// //得到是觸發該事件的目標物件
// console.log("div被點了");
// //console.log($(e.target).attr("id"));
// });
//
// $("p").click(function (e) {
// console.log("p被點選了");
// //return false;
// });
// });
$(function () {
console.log(window);
$("#dv").click(function (e) {
console.log("div被點了");
//console.log($(e.currentTarget).attr("id"));
//console.log(e);
console.log(e.screenX+"===="+e.screenY);
});
$("p").click(function (e) {
console.log("p被點了");
});
});
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv">
<p id="p1">這是一個p</p>
</div>
</body>
</html>
jQuery UI的使用
前提:下載了jQuery UI,並將jquery-ui-1.12.1.custom這個資料夾複製到專案中,裡邊有一個index.html檔案有各種特效
//1.引入 jQuery UI 的css檔案
//2 引入jquery的js檔案
//3 引入jQuery UI 的js檔案
//4 查詢和複製UI 中的某個功能的所有的程式碼(html,css,js)
//5 測試和使用
比如:我想做一個tab特效,開啟index.html檔案找到對應的特效,F12→點選要檢視開發工具最左邊的框框箭頭→複製檢視的內容標題(有很多方式如類樣式...原始碼中一般通過註釋分開了,所以可以通過這種方式來找HTML原始碼,只要找到就可以了)如:tab→檢視網頁原始碼→ctrl+f,將標題內容複製進去進行查詢。將HTML和部分JavaScript複製到HTML檔案中。ok
*注:js程式碼一般要在$(function(){});之中