一、jQuery事件
常用事件
blur([[data],fn]) 失去焦点
focus([[data],fn]) 获取焦点（ 搜索框例子）
change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子)
click([[data],fn]) 点击
dblclick([[data],fn]) 双击
scroll([[data],fn]) 滚动
submit([[data],fn]) 提交
不常用事件
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])
补充：
文档树加载完之后绑定事件（绝大多数情况下）
第一种：吧script放在后面。
第二种：
$(document).ready(function(){
// 绑定事件的代码
....
})
简写：
$(function($){
// 绑定事件的代码
....
});
事件练习
1 2 3 4 5常用事件 6 7 8 9 10 17 18 38 39
1 2 3 4 5onmouse事件 6 23 24 252633 55 56onmouse27 32
二、jQuery扩展（很重要！！）
1、jQuery扩展语法
把扩展的内容就可以写到xxxx.js文件了，在主文件中直接导入就行了。
用法1、$.xxx()
$.extend({
"GDP": function () {
console.log("戴小红花");
}
});
- 给jQuery添加扩展
- $.GDP()
用法2、$("").xxx()
$.fn.extend({
"BJG": function () {
console.log("英语八级就是好！");
}
})
- 给jQuery对象添加扩展
- $(":input").BJG()
2、练习1
第一步：不完美
extend.js文件
$.extend({ "GDP":function () { foo(); console.log("带小红花") } }); 那么如果这样定义一个函数，其他的扩展都可以调用这个函数了 这个函数只想在自己调用。不想让它公共的调用，不让他起冲突 那么定义一个私有的。用一个匿名函数 function foo() { console.log("英语八级就是牛") } $.fn.extend({ "BJG":function () { foo() console.log("就这样吧") } });
继续第二步：加上匿名函数
匿名函数：foo方法只想自己用，不想让别人调用 (function () { $.extend({ "GDP":function () { foo(); console.log("带小红花") } }); function foo() { 函数的内部可以调用，外部就不可以调用了 console.log("英语八级就是牛") } })(); (function () { $.fn.extend({ "BJG":function () { foo2(); console.log("就这样吧") } }); function foo2() { console.log("哎哎呀") } })();
第三步、越趋于完美：既不可以让别人在外部随意调用，也可以避免别人修改$
// 如果怕$被别人改，那么就传个参数进去 (function (jq) { jq.extend({ "GDP":function () { foo(); console.log("带小红花") }, //可以扩展多个（加上逗号在写几个） "SGS":function () { console.log("你蛤蟆") } }); function foo() { console.log("英语八级就是牛") } })(jQuery); (function (jq) { jq.fn.extend({ "BJG":function () { foo2(); console.log("就这样吧") } }); function foo2() { console.log("哎哎呀") } })(jQuery);
extend.html文件
3、具体示例练习（登录校验）
login.html文件
1 2 3 4 5作业1 6 7 12 13 141533 34 35 36 55 56163217 3031
loginextend.js 文件
// 匿名函数 (function (jq) { //jq就相当于$ jq.extend({ "myValidate": function (form) { var formObj = jq(form) ;//赋一个变量，因为我们经常用到
这里的form参数就指的是在html文件里面传进去的"#login"，也就是找到的form标签
formObj.find(":submit").on("click", function () {
//先清空状态
formObj.find(".form-group").removeClass("has-error");
formObj.find("span").text("");
formObj.find(":input").each(function () {
if ($(this).val().length === 0) {
var name = $(this).prev().text();
$(this).parent().addClass("has-error");
$(this).next().text(name + "不能为空");
return false
}
});
return false
});
}
})
})(jQuery);
loginextend2.js 文件
/** * Created by Administrator on 2017/10/17. */ // 匿名函数 (function (jq) { jq.fn.extend({ "myValidate": function (arg) { console.log(this); //就是当前的.前面的jQuery对象 $("#login") ----->也就是[form#login] var formObj = this;//赋一个变量，因为我们经常用到 formObj.find(":submit").on("click", function () { // this --->提交的submit //先清空状态 formObj.find(".form-group").removeClass("has-error"); formObj.find("span").text(""); //each循环 var flag = true; //设置一个标志位 // 找到input的属性[required=true]的，然后设置相关的操作 formObj.find("input[required=true]").each(function () { var inputID = jq(this).attr("id"); //获取input的id属性值 "username" var minlength = arg[inputID]["min-length"]; //arg[inputID]["min-length"]--->arg["username"]["min-length"]--->得到6 if ($(this).val().length === 0) { //而这里的this是当前的input框，和上面的不是同一个 var name = $(this).prev().text(); $(this).parent().addClass("has-error"); $(this).next().text(name + "不能为空"); flag = false; return flag } if (minlength!==undefined){ if (jq(this).val().length<minlength){ var name = $(this).prev().text(); $(this).parent().addClass("has-error"); $(this).next().text(name + "长度太短"); flag = false; return flag } } }); return flag }); } }) })(jQuery);
三、表格的添加 | 删除 | 编辑示例
第一种：点击编辑没有模态框，是input框编辑修改
1 2 3 4 5增删改 6 7 13 14 151662 63 64 65176118 19 226023 24
5925 30姓名 26年龄 27性别 28操作 2931 39六点 3223 33女 3435 36 37 3840 48时时彩 4124 42女 4344 45 46 4749 57 58刚强 5013 51男 5253 54 55 566696 97 98 155 15667 9495
第二种：点击编辑有模态框
1 2 3 4 5 6 7 8 9 10 11 12 13 14Dashboard Template <span style="color:#0000ff;">for</span> Bootstrap 15 16 17 18 19 20 21 22 23 24 25 26 28 29 30 31 37 38 39 58 59 60 61 62 63 6465 75 8687 88 8990127 12891 125126129191 192130190131 132 133 添加学生的信息 134 135189136 137
188138 144 145 146学号 139姓名 140年龄 141性别 142操作 143147 1561 148李欣 14923 150女 151152 153 154 155157 1662 158时时彩 15924 160女 161162 163 164 165167 1763 168刚强 16913 170男 171172 173 174 175177 186 1874 178杜康 17925 180男 181182 183 184 185193223 225 226 227 228 229 230 231 232 233 234 235 236 314 315194 221222
补充一个知识点 data
- .data()
- .data("key", value) 保存值，value可以是字符串，也可以是数组，也可以是jquery对象
- .data("key") 获取值（没有值就返回undefined）
- .removeData() 删除所有
- .removeData("key") 删除key对应的value