jQuery 绑定事件
事件1：
// 鼠标点击出发事件
$('#id').click()
// * 委托、外部创建新的标签，自动将id标签下的a标签做绑定事件
$('#id').delegate('a','click',functon (){
})
$('#id').undelegate('a','click',functon (){
})
$('#id').bind('click',functon (){
})
$('#id').unbind('click',functon (){
})
$('#id').on('click',functon (){
})
$('#id').off('click',functon (){
})
事件2：
注：a标签与onclick事件执行 自定义事件优先级高。
阻止事件发生：
$('#id').click(function (){
alert(xxx);
// 阻止后续事件发生
return false;
// 允许后续事件发生
return true;
})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--添加提交表单跳转文件--> <form action="s5.html" method="POST"> <input type="text"/> <input type="submit" value="提交"/> </form> <script src="jquery-1.12.4.js"></script> <script> $(':submit').click(function () { var v = $(this).prev().val(); // 判断input内容是否为空 if (v.length > 0) { // 不为空允许后续事件执行 return true; } else { alert('请输出内容'); // 终端后续发生事件 return false } }); </script> </body> </html>
事件3：
页面加载完毕自动执行：
// 当页面框架加载完毕之后，自动执行
$(function(){
})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*添加样式*/ .error { color: red; } </style> </head> <body> <!--添加提交表单跳转文件--> <form id='f1' action="s5.html" method="POST"> <div><input name="n1" type="text"/></div> <div><input name="n2" type="password"/></div> <div><input name="n3" type="text"/></div> <div><input name="n4" type="text"/></div> <div><input name="n5" type="text"/></div> <!--提交按钮--> <input type="submit" value="提交"/> </form> <script src="jquery-1.12.4.js"></script> <script> // 当页面框架加载完毕之后，自动执行 $(function () { // 按钮触发事件 $(':submit').click(function () { // 删除.error样式的标签 $('.error').remove(); // 设置值 var flag = true; // 取出input下的相应内容,并循环 $('#f1').find('input[type="text"],input[type="password"]').each(function () { // 取出input内容下面内容 var v = $(this).val(); // 判断input内容是否为0 if (v.length <= 0) { // 如果为0设置false flag = false; // 创建span标签 var tag = document.createElement('span'); // 添加样式 tag.className = 'error'; // 添加内容 tag.innerHTML = " * 必填"; // 添加span标签到指定下个一位置 $(this).after(tag); // return false; } }); return flag; }); }); </script> </body> </html>