jQuery事件--change([[data],fn])、on(events,[selector],[data],fn)和hover([over,]out)
阿新 • • 發佈：2018-12-04
change([[data],fn])
概述
當元素的值發生改變時，會發生 change 事件。
該事件僅適用於文字域（text field），以及 textarea 和 select 元素。當用於 select 元素時，change 事件會在選擇某個選項時發生。當用於 text field 或 text area 時，該事件會在元素失去焦點時發生
引數
fn 在每一個匹配元素的change事件中繫結的處理函式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("input").change(function() { var reg = /^[a-zA-Z]+$/; var textValue = $(this).val(); if(!reg.test(textValue)) { $("#error").html("<h5 style='color:red'>只能輸入字母！<h5>"); } }); $("#select").change(function() { $("#error").html($("#select option:selected").text()); }); }) </script> </head> <body> <div> <span>字母：</span> <input id="input" type="text" style="width: 150px;" /> <br /> <span>語言：</span> <select id="select" style="width: 150px;"> <option>Java</option> <option>C#</option> </select> </div> <div id="error"></div> </body> </html>
on(events,[selector],[data],fn)
概述
在選擇元素上繫結一個或多個事件的事件處理函式。on()方法繫結事件處理程式到當前選定的jQuery物件中的元素
引數
events,[selector],[data],fn
- events:一個或多個用空格分隔的事件型別和可選的名稱空間，如"click"或"keydown.myPlugin"；
- selector:一個選擇器字串用於過濾器的觸發事件的選擇器元素的後代。如果選擇的< null或省略，當它到達選定的元素，事件總是觸發；
- data:當一個事件被觸發時要傳遞event.data給事件處理函式；
- fn:該事件被觸發時執行的函式。 false 值也可以做一個函式的簡寫，返回false
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title></title> <style type="text/css"> div { width: 60px; height: 60px; border: 1px solid green; font-size: 12px; } </style> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var newtext = "這是新文字" $("div").on("click", { "mytext": newtext }, function(e) { $(this).text(e.data.mytext); }) }) </script> </head> <body> <div>原來內容</div> </body> </html>
events-map,[selector],[data]
- events-map:個用字串表示的，一個或多個空格分隔的事件型別和可選的名稱空間，值表示事件繫結的處理函式；
- selector:一個選擇器字串過濾選定的元素，該選擇器的後裔元素將呼叫處理程式。如果選擇是空或被忽略，當它到達選定的元素，事件總是觸發；
- data:當一個事件被觸發時要傳遞event.data給事件處理函式
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title></title> <style type="text/css"> div { width: 160px; height: 160px; border: 1px solid green; font-size: 12px; } </style> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var newtext = "這是新文字" $("div").on({ click: function(e) { $(this).text(e.data.mytext); } }, { "mytext": newtext }) }) </script> </head> <body> <div>原來內容</div> </body> </html>
hover([over,]out)
概述
一個模仿懸停事件（滑鼠移動到一個物件上面及移出這個物件）的方法。這是一個自定義的方法，它為頻繁使用的任務提供了一種“保持在其中”的狀態。
當滑鼠移動到一個匹配的元素上面時，會觸發指定的第一個函式。當滑鼠移出這個元素時，會觸發指定的第二個函式
引數
over,out over:滑鼠移到元素上要觸發的函式；out:滑鼠移出元素要觸發的函式
out 當滑鼠移到元素上或移出元素時觸發執行的事件函式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#button").hover(function() { $("div").css("background", "red"); }, function() { $("div").css("background", "green"); }) }) </script> </head> <body> <div style="background-color: red;width: 120px;height: 120px;"> <button id='button'>點我測試</button> </div> </body> </html>