jQuery--bind()、hover()、toggle()
阿新 • • 發佈：2017-05-18
char har show leave one order line charset script
1、事件綁定
bind()方法調用格式：bind(type,[data],fn)
第一個參數：事件類型，例如：click，blur，focus，mouseover，mouseout等
第二個參數：可選參數，作為event.data屬性值傳遞給事件對象的額外數據對象
第三個參數：綁定處理函數
bind()實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <styletype="text/css"> #panel1{ width: 400px; background: #CBC9C9; border:1px solid black; } .content{ display: none; } .head{ margin: 0px; height: 30px; line-height: 30px; } </style> <script type="text/javascript" src=‘jquery-3.2.1.min.js‘></script> <script type="text/javascript"> $(function(){ $(‘#panel1 h5.head‘).bind(‘click‘,function(){ if($(this).next(‘div.content‘).is(‘:visible‘)){ $(this).css(‘background‘,‘none‘).next(‘div.content‘).hide(); }else{ $(this).css(‘background‘,‘yellow‘).next(‘div.content‘).show(); } }); }); </script> </head> <body> <div id="panel1"> <h5 class="head">什麽是jQuery？</h5> <div class="content"> jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由JohnResig創建於2006年1月的開源項目。jQuery憑借見解的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式 </div> </div> </body> </html>
2、合成事件
1）、hover()--hover(enter,leave)方法用於模擬光標懸停事件,當光標移動到元素時，會觸發指定的第一個函數（enter）；當光標移出這個元素的時候，會觸發指定的第2個函數(leave)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #panel1{ width: 400px; background: #CBC9C9; border:1px solid black; } .content{ display: none; } .head{ margin: 0px; height: 30px; line-height: 30px; } </style> <script type="text/javascript" src=‘jquery-3.2.1.min.js‘></script> <script type="text/javascript"> $(function(){ $(‘#panel1 h5.head‘).hover(function(){ $(this).css(‘background‘,‘yellow‘).next(‘div.content‘).show(); },function(){ $(this).css(‘background‘,‘none‘).next(‘div.content‘).hide(); }); }); </script> </head> <body> <div id="panel1"> <h5 class="head">什麽是jQuery？</h5> <div class="content"> jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由JohnResig創建於2006年1月的開源項目。jQuery憑借見解的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式 </div> </div> </body> </html>
2）、toggle()--toggle(fn1,fn2....fnN)該方法用於模擬鼠標連續點擊事件,第1次單擊元素，觸發指定的第1個函數（fn1）；當再次單擊同一個元素時，則觸發指定的第2個函數（fn2）；如果有更多的函數，則依次觸發，直到最後一個。隨後的每次單擊都重復對這幾個函數的輪番調用。
jQuery--bind()、hover()、toggle()