jquery事件與綁定事件
1.首先,我們來看一下經(jīng)常使用的添加事件的方式:
<input type="button" id="btn" value="click me!" onclick="shao();" /> <script type="text/javascript"> function shao() { alert("msg is showing!"); } </script>
我們最常用的是為元素添加onclick元素屬性的方式來添加事件
這種方法的弊端是:
只能為一個(gè)事件處理函數(shù),在事件處理函數(shù)方法中,獲取事件對(duì)象的方式不同.
jQuery中的事件
ready事件:
當(dāng)頁面加載完成后,來執(zhí)行function:
<script> $(document).ready(function(e){ alert(document.getElementById("aa").innerHTML); //若是要寫function方法,不可以在里面寫 }) //要在外面寫 </script>
這樣寫在哪里都可以調(diào)用到這個(gè)方法;
鼠標(biāo)事件:
<script> $("#aa").click(function(){ alert("點(diǎn)擊事件"); }) $("#aa").dblclick(function(){ alert("雙擊事件"); }) $("#aa").mouseover(function(){ alert("鼠標(biāo)移上") }); $("#aa").mouseout(function(){ alert("鼠標(biāo)離開"); }) $("#aa").mousemove(function(){ alert("鼠標(biāo)移動(dòng)"); }) $("#aa").mouseup(function(){ alert("鼠標(biāo)抬起"); }) $("#aa").mousedown(function(){ alert("鼠標(biāo)按下"); }) 鍵盤按鍵按下:給id加沒有作用,需要給整個(gè)頁面加所以用$(document) $(document).KeyEvent(function(){ alert("鼠標(biāo)離開"); }) </script>
表單元素事件:
<script> $("#shao").focus(function(){ alert("獲得焦點(diǎn)"); }) $("#shao").blur(function(){ alert("失去焦點(diǎn)"); }) $("#shao").change(function(){ alert("值發(fā)生變化,change事件"); }) $("#shao").keydown(function(){ alert("鍵盤按下"); }) </script>
2.綁定事件(掛事件):
可以動(dòng)態(tài)的改變按鈕的事件;
什么是動(dòng)態(tài)綁定?
動(dòng)態(tài)綁定是指動(dòng)態(tài)添加的DOM節(jié)點(diǎn)或者h(yuǎn)tml元素,他們最開始時(shí)運(yùn)行的時(shí)候是不存在的。如果要給這些動(dòng)態(tài)加入的節(jié)點(diǎn)增加事件,就必須要用jquery的on方法來綁定事件。
bind()向匹配元素添加一個(gè)或多個(gè)事件處理器。
使用方式:
$(selector).bind(event,data,function)
注:bind()函數(shù)只能針對(duì)已經(jīng)存在的元素進(jìn)行事件的設(shè)置
代碼:首先寫兩個(gè)按鈕:
<body> <div id="aa" style="width: 100px; height: 100px; background-color: blueviolet;">hello</div> <!--<input type="text" id="shao" />--> <input type="button" id="btn1" value="掛事件" /> <input type="button" id="btn2" value="移除事件" /> </body>
首先操作點(diǎn)擊掛上事件:
<script> //掛事件, $("#btn1").click(function(){ //點(diǎn)擊掛事件,給div綁定一個(gè)事件: $("#aa").bind("click",function(){ //bind綁定事件 alert("點(diǎn)擊"); }); //括號(hào)里兩個(gè)參數(shù),第一個(gè)是事件類型(事件名稱),第二個(gè)參數(shù)是要執(zhí)行的代碼 }) </script>
這樣的話點(diǎn)擊掛事件:
移除事件的按鈕:
<script> //移除事件; $("#aa").click(function(){ //點(diǎn)擊移除事件;把div里面的事件移除掉 $("#aa").unbind("click"); //unbind移除綁定,填一個(gè)參數(shù),要移除哪個(gè)事件 }) </script>
點(diǎn)擊移除,取消aa得點(diǎn)擊事件
3.事件數(shù)據(jù)
一般的事件包含事件源跟時(shí)間數(shù)據(jù):
事件數(shù)據(jù):出發(fā)這個(gè)時(shí)間,會(huì)傳過來那些數(shù)據(jù)
js簡(jiǎn)化,可以不寫事件源,因?yàn)榭梢匀〉?/p>
4.JSON語法:
JSON的結(jié)構(gòu):
json簡(jiǎn)單說就是javascript中的對(duì)象和數(shù)組,所以這兩種結(jié)構(gòu)就是對(duì)象和數(shù)組兩種結(jié)構(gòu),通過這兩種結(jié)構(gòu)可以表示各種復(fù)雜的結(jié)構(gòu)。
(1)對(duì)象:對(duì)象在js中表示為“{}”括起來的內(nèi)容,數(shù)據(jù)結(jié)構(gòu)為 {key:value,key:value,...}的鍵值對(duì)的結(jié)構(gòu),在面向?qū)ο蟮恼Z言中,key為對(duì)象的屬性,value為對(duì)應(yīng)的屬性值,所以很容易理解,取值方法為 對(duì)象.key 獲取屬性值,這個(gè)屬性值的類型可以是 數(shù)字、字符串、數(shù)組、對(duì)象幾種。
(2)數(shù)組:數(shù)組在js中是中括號(hào)“[]”括起來的內(nèi)容,數(shù)據(jù)結(jié)構(gòu)為 ["java","javascript","vb",...],取值方式和所有語言中一樣,使用索引獲取,字段值的類型可以是 數(shù)字、字符串、數(shù)組、對(duì)象幾種。
經(jīng)過對(duì)象、數(shù)組2種結(jié)構(gòu)就可以組合成復(fù)雜的數(shù)據(jù)結(jié)構(gòu)了。
json是一種輕量級(jí)的數(shù)據(jù)交換格式
全拼:
JavaScript Object Notation
定義語法:
var j = { "one":"111111", "two":"22222" };
取值方式:
取索引:
//數(shù)組的取值方式: alert(j["one"]);//直接取索引的方法
點(diǎn)語法:
//點(diǎn)語法: alert(j.one);
JSON也可以寸二維數(shù)組:
var j = { "one":"111111", "two":"22222", "three":{"aa":"33333"}, }; //數(shù)組的取值方式: //alert(j["one"]);//直接取索引的方法 //點(diǎn)語法: alert(j.one); alert(j.three.aa);
遍歷JSON數(shù)據(jù):
//遍歷 for(var v in j) { //定義一個(gè)變量v,把j拿到v里面,關(guān)鍵字不是”as“了,是”in“, alert(v); // 這樣便利的是索引 alert(j[v]); // 這樣是根據(jù)索引來取值 }
json不具有長(zhǎng)度的屬性,所以for循環(huán)不適應(yīng)于json
但是for-in同樣適應(yīng)于數(shù)組
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
jQuery實(shí)現(xiàn)統(tǒng)計(jì)輸入文字個(gè)數(shù)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)統(tǒng)計(jì)輸入文字個(gè)數(shù)的方法,涉及jQuery操作鼠標(biāo)事件及dom元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jquery動(dòng)態(tài)加載js/css文件方法(自寫小函數(shù))
jquery自帶的getSrcript文件只能動(dòng)態(tài)加載js代碼,但不能加載css,后來自己寫了一個(gè)可加載js與css的程序2014-10-10jQuery實(shí)現(xiàn)在下拉列表選擇時(shí)獲取json數(shù)據(jù)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)在下拉列表選擇時(shí)獲取json數(shù)據(jù)的方法,主要涉及jQuery中g(shù)etJSON方法的使用技巧,需要的朋友可以參考下2015-04-04jQuery ReferenceError: $ is not defined 錯(cuò)誤的處理辦法
今天開始要學(xué)習(xí)jQuery,寫第一個(gè)Hello Word時(shí),居然jQuery ReferenceError: $ is not defined2013-05-05jQuery實(shí)現(xiàn)的原圖對(duì)比窗簾效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的原圖對(duì)比窗簾效果,需要的朋友可以參考下2014-06-06