为元素绑定多个相同事件 绑定事件的另一种方式 复习 介绍 元素的事件绑定
生活随笔
收集整理的這篇文章主要介紹了
为元素绑定多个相同事件 绑定事件的另一种方式 复习 介绍 元素的事件绑定
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
為元素綁定多個(gè)相同事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>$(function(){// 為按鈕綁定多個(gè)相同事件// $("#btn").click(function(){// console.log("小蘇好猥瑣哦");// }).click(function(){// console.log("小蘇好美哦");// }).click(function(){// console.log("天冷了,注意身體");// });// $("#btn").bind("click",function(){// console.log("啊哈哈,我又變帥了");// }).bind("click",function(){// console.log("我輕輕的來(lái),揮一揮手");// });// bind方法綁定多個(gè)相同事件的時(shí)候,如果使用的是鍵值對(duì)的方式,只能執(zhí)行// 最后一個(gè)$("#btn").bind({"click":function(){console.log("如果有一天我邪惡了");},"click":function(){console.log("請(qǐng)記住,我曾純潔過");}});});</script> </head> <body> <input type="button" value="顯示效果" id="btn"></body> </html>綁定事件的另一種方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 100px;border: 2px solid green;}p {width: 150px;height: 50px;border: 1px solid red;cursor: pointer;}</style><script src="jquery-1.12.1.js"></script><script>// 點(diǎn)擊按鈕為div中的p標(biāo)簽綁定事件$(function(){$("#btn").click(function(){// 為父級(jí)元素綁定事件,父級(jí)元素代替子級(jí)元素綁定事件// 子級(jí)元素委托父級(jí)元素綁定事件// 父級(jí)元素調(diào)用方法,為子級(jí)元素綁定事件$("#dv").delegate("p","click",function(){alert("被點(diǎn)了");});});});// 為元素綁定事件的三種方式/*** 對(duì)象.事件名字(事件處理函數(shù));$("#btn").click(function(){})* 對(duì)象.bind("事件名字",事件處理函數(shù));----$("#btn").bind("click",function(){});* 父級(jí)對(duì)象.delegate("子級(jí)元素","事件名字",事件處理函數(shù));* -->$("#dv").delegate("p","click",function(){});* */</script> </head> <body> <input type="button" value="為div綁定事件" id="btn"> <div id="dv"><p>這是p</p> </div></body> </html>復(fù)習(xí)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>/*** 復(fù)習(xí):** 元素的創(chuàng)建* 1.* $("html代碼及內(nèi)容")* 對(duì)象.html("html代碼及內(nèi)容");* * 元素的添加* 子級(jí)元素.append(子級(jí)元素);* 子級(jí)元素.appendTo(父級(jí)元素);** 父級(jí)元素.prepend(子級(jí)元素);加到第一個(gè)子級(jí)元素的前面* 子級(jí)元素.prependTo(父級(jí)元素):加到第一個(gè)子級(jí)元素的前面* 父級(jí)元素.after(元素),當(dāng)前父級(jí)元素后面的第一個(gè)兄弟元素的位置* 父級(jí)元素.before(元素);當(dāng)前父級(jí)元素前面的第一個(gè)兄弟元素的位置** 如何移除父級(jí)元素中的子級(jí)元素* 父級(jí)元素.html("");* 父級(jí)元素.empty();清空* 父級(jí)元素:remove();---->自殺,自己被刪除** val()方法的使用,可以設(shè)置表單的value屬性值* val()方法也可以設(shè)置下拉框某個(gè)option選中** 自定義屬性的操作* attr("屬性","值");* removeAttr("屬性");移除這個(gè)自定義屬性* attr("屬性");獲取該屬性的值** 元素選中操作* prop()方法* prop("checked");---->布爾類型* prop("checked",布爾類型的值);** 元素樣式的操作** 設(shè)置或者獲取元素的寬和高* .width()---->獲取 .width(值);---->設(shè)置寬度* .height();---->獲取 .height(值);---->設(shè)置高度** 獲取或者是設(shè)置元素的left和top* .offset()---->返回的是一個(gè)對(duì)象,該對(duì)象中兩個(gè)屬性,left和top* 在offset()方法獲取left或者是top的時(shí)候包括margin的值* .offset({"left":"值","top":"值"});---->設(shè)置* .scrollLeft() ----> 向左卷曲出去的距離* .scrollTop() ----> 向上卷曲出去的距離** 事件的綁定* 元素.事件名字(事件處理函數(shù));* 元素.bind("事件名字",事件處理函數(shù));* 元素.bind({"事件名字":"事件處理函數(shù)"});* 父元素.delegate("子元素的選擇器","事件名字","事件處理函數(shù)");* 最終事件是在子元素上*/</script> </head> <body></body> </html>介紹
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>/*** 元素的事件綁定* 事件綁定的區(qū)別* 元素的綁定的方式中哪一個(gè)是重點(diǎn)* 案例---->用到事件的綁定,體現(xiàn)出事件不同的綁定方式的區(qū)別* 元素的事件解綁的不同的方式,注意問題,重點(diǎn)的解綁的方式* 按鍵改變?cè)氐谋尘邦伾? 事件的參數(shù)* 事件的觸發(fā)* 鏈?zhǔn)骄幊痰脑? each方法的使用* 包裝集* 多庫(kù)共存* 插件的使用* 自己做插件* UI的使用** 擴(kuò)展幾個(gè)知識(shí)點(diǎn)----屬性* 例子* */</script> </head> <body></body> </html>元素的事件綁定
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;background-color: green;}p {width: 100px;height: 20px;background-color: red;cursor: pointer;}</style><script src="jquery-1.12.1.js"></script><script>// 如果是先創(chuàng)建元素,再為這個(gè)子元素綁定事件(對(duì)象.事件名字(事件處理函數(shù)))// 后面再創(chuàng)建的子元素,沒有事件// 點(diǎn)擊按鈕為div中添加一個(gè)子元素,并且子元素有點(diǎn)擊的事件$(function(){// 第一個(gè)按鈕$("#btn").click(function(){$("<p>這是一個(gè)p</p>").appendTo($("#dv"));// 先創(chuàng)建,后綁定的事件是可以用的// $("p").click(function(){// alert("哈哈");// });// 同上// $("p").bind("click",function(){// alert("哈哈");// });$("#dv").delegate("p","click",function(){alert("哈哈");});});$("#btn2").click(function(){// 后添加的$("<p>這是一個(gè)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>?
總結(jié)
以上是生活随笔為你收集整理的为元素绑定多个相同事件 绑定事件的另一种方式 复习 介绍 元素的事件绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 设置元素的宽和高 元素的left和top
- 下一篇： 另一个绑定事件的方式 为元素绑定事件的区