jquery事件：
常用事件：
focus ([[data],fn]) 获取焦点
blur ([[data],fn]) 失去焦点
例如：搜索框未获得焦点时里边会有默认值，获取焦点之后默认值清空，移除时再次得到默认值
change ([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子)
例如：select响应
click ([[data],fn]) 点击事件
dblclick ([[data],fn]) 鼠标双击事件
scroll([[data],fn]) 滚动
submit([[data],fn]) 提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="jquery-3.2.1.min.js"></script> </head> <body> <input type="text" value="一加五手机" ><button>搜索</button> <script> $("input").focus(function () { var data=$("input").val() $("input").val("") $(this).attr("data-show",data) }) $("input").blur(function () { $(this).val($(this).attr("data-show")) }) </script> </body> </html>
不怎么常用：
error([[data],fn]) focusin([data],fn) focusout([data],fn) keydown([[data],fn]) 按下 keypress([[data],fn]) 按 keyup([[data],fn]) 键松开 mousedown([[data],fn]) 鼠标按下 mouseenter([[data],fn]) 鼠标移进去 mouseleave([[data],fn]) 鼠标离开：只有鼠标离开被选元素的时候，才会触发mouseleave事件 mousemove([[data],fn]) 鼠标移动 mouseout([[data],fn]) 鼠标离开：无论鼠标离开被选元素还是任何子元素，都会触发mouseout事件 mouseover([[data],fn] 鼠标悬停 mouseup([[data],fn]) 鼠标弹起 resize([[data],fn]) 元素窗口发生变化 select([[data],fn]) unload([[data],fn]) 补充： 文档加载完之后才能绑定事件（大部分情况下） 简写： $(function($){ //绑定事件 })
jquery扩展：（自己写一个类似jquery的js文件）:
//扩展方法1：(给juquery添加扩展):$.xxx() $.extend({ "GDP":function () { console.log("戴帽子") } }); //扩展方法2：(给jquery对象添加扩展方法):$("").xxx() $.fn.extend({ "BJG":function(){ console.log("英语八级就是牛逼") } });
这样的话再定义一个func1方法，那在任意方法内都能调用到，可能会产生冲突，为了使func1不公共调用，加上匿名函数，将func1作为私有的方法：
匿名函数：func方法只想自己用，不想让别人调用 (function () { $.extend({ "GDP":function () { func1(); console.log("戴帽子") } }); function func1() { // 函数的内部可以调用，外部就不可以调用了 console.log("带啥色的帽子呢") } })(); (function () { $.fn.extend({ "BJG":function () { fyunc2(); console.log("英语八级就是牛逼") } }); function func2() { console.log("厉害了") } })();
实践证明：
如果既不可以让别人在外部随意调用，也可以避免别人修改$怎么办呢？
// 如果怕$被别人改，那么就传个参数进去 (function (jq) { jq.extend({ "GDP":function () { func1(); console.log("戴帽子") }, //可以扩展多个（加上逗号在写几个） "SGS":function () { console.log("你蛤蟆") } }); function func1() { console.log("带啥色的帽子啊") } })(jQuery); (function (jq) { jq.fn.extend({ "BJG":function () { func2(); console.log("英语八级就是牛逼") } }); function func2() { console.log("厉害了") } })(jQuery);
简单的登录验证：
需要实现的功能：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .error{ color:red; display: inline-block; width: 180px; } </style> <script src="jquery-3.2.1.min.js"></script> </head> <body> <div style="text-align:center;500px"> <form action="" style="text-align: right" > <p><label for="name">用户名</label> <input type="text" id="name" require="true" name="username"><span class="error"></span></p> <p><label for="pwd">密码</label> <input type="password" id="pwd" require="true" name="password"><span class="error"></span></p> <p><label for="phone">手机号</label> <input type="text" id="phone" required="true" name="phone"><span class="error"></span></p> </form><p><button id="submit">提交</button></p> </div> <script> $("#submit").click(function () { var eleinputs=$("input") eleinputs.each(function () { var v=$(this).val() var drrentE=$(this).attr("name") if(v.length==0){ $(this).next().text(drrentE+"不能为空") return false } if($(this).attr("type")==="password"){ if(v.length<6){ $(this).next().text(drrentE+"不能少于6位") return false } } if($(this).attr("name")==="phone"){ if (!/^1[34578]d{9}$/.test(v)){ // 不合法的手机号 // var currentLabel = $(this).prev().text(); $(this).next().text(drrentE+ "格式不正确"); return false; } } }) }) </script> </body> </html>
表格的增删改查：
需要实现的功能：
持续更新.....