change([[data],fn])
概述
当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生
参数
fn 在每一个匹配元素的change事件中绑定的处理函数
[data],fn data:change([Data], fn) 可传入data供函数fn处理；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=" 150px;" /> <br /> <span>语言：</span> <select id="select" style=" 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; 120px;height: 120px;"> <button id='button'>点我测试</button> </div> </body> </html>