站長(zhǎng)資訊網(wǎng)
onclick不是jquery事件，而是JavaScript中的，該事件會(huì)在元素被點(diǎn)擊時(shí)發(fā)生；在jquery中與onclick關(guān)聯(lián)的是click()方法，該方法的主要作用是使執(zhí)行了該方法的元素觸發(fā)onclick事件。
本教程操作環(huán)境：windows10系統(tǒng)、jquery3.2.1版本、Dell G3電腦。
onclick是不是jquery事件
1.onclick是綁定的事件(它是一個(gè)事件)
注意該事件綁定只是JacaScript中有，Jquery中并沒(méi)有此事件，告訴瀏覽器在鼠標(biāo)點(diǎn)擊時(shí)候要做什么
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title>測(cè)試onclick事件</title> <script type="text/javascript"> function mouse(){ alert('我是一張圖片!!!'); } </script> </head> <body> <img src="../1.jpg" alt="圖片" οnclick="mouse()"/> </body> </html>
2.click方法(jquery中的)
作用是觸發(fā)onclick事件，只要執(zhí)行了元素的click()方法，就會(huì)觸發(fā)onclick事件。
click()方法的主要作用是觸發(fā)調(diào)用click方法元素onclick事件,實(shí)際上是模擬了鼠標(biāo)的點(diǎn)擊動(dòng)作。此外，如果在click括號(hào)內(nèi)定義了其他可執(zhí)行語(yǔ)句，則click方法會(huì)在執(zhí)行完onclick事件之后執(zhí)行括號(hào)內(nèi)部的語(yǔ)句。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>測(cè)試Jquery中的click方法(表單選擇器)</title> <!-- 引入jQuery --> <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ //alert($("#form1 :input").size()); //alert($("#form1 :input").length); alert($("#form1 input").size()); }); }); </script> </head> <body> <input type="button" value="選取所有的表單子元素" id="btn1"/><br /> <form id="form1" action="#"> <input type="button" value="Button"/><br/> <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/> <input type="file" /><br/> <input type="hidden" /><br/> <input type="image" src="1.jpg"/><br/> <input type="password" /><br/> <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/> <input type="reset" /><br/> <input type="submit" value="提交"/><br/> <input type="text" /><br/> <select><option>Option</option></select><br/> <textarea rows="5" cols="20"></textarea><br/> <button>Button</button><br/> </form> <div></div> </body> </html>
擴(kuò)展知識(shí)
3. on方法（jQuery中的)
on()方法綁定事件處理程序到當(dāng)前選定的jQuery對(duì)象中的元素。在jQuery 1.7中，.on()方法提供綁定事件處理程序所需的所有功能。(動(dòng)態(tài)綁定事件處理函數(shù))
該方法的參數(shù)有兩種(參數(shù)中帶中括號(hào)的參數(shù)可有可無(wú)，根據(jù)實(shí)際的需求去選擇)
1).on(events,[selector],[data],fn)
events:一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
selector:一個(gè)選擇器字符串用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。如果選擇的< null或省略，當(dāng)它到達(dá)選定的元素，事件總是觸發(fā)。
data:當(dāng)一個(gè)事件被觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)。
fn:該事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。 false 值也可以做一個(gè)函數(shù)的簡(jiǎn)寫，返回false。
2).on(events-map,[selector],[data])
events-map:個(gè)用字符串表示的，一個(gè)或多個(gè)空格分隔的事件類型和可選的命名空間，值表示事件綁定的處理函數(shù)。
selector:一個(gè)選擇器字符串過(guò)濾選定的元素，該選擇器的后裔元素將調(diào)用處理程序。如果選擇是空或被忽略，當(dāng)它到達(dá)選定的元素，事件總是觸發(fā)。
data:當(dāng)一個(gè)事件被觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)。
on方法是為匹配選擇器的元素(現(xiàn)在匹配或者將來(lái)匹配)定義事件的處理函數(shù)
視頻教程推薦：jQuery視頻教程
