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