锐客网

  1. 首页 > it技术 > >

jQuery之jQuery扩展和事件

一、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($){
// 绑定事件的代码
....
});
事件练习

jQuery之jQuery扩展和事件
文章图片
jQuery之jQuery扩展和事件
文章图片
1 2 3 4 5常用事件 - 锐客网 6 7 8 9 10 11 12 13 14 15 16 17 18 38 39

focus和blur练习 jQuery之jQuery扩展和事件
文章图片
jQuery之jQuery扩展和事件
文章图片
1 2 3 4 5onmouse事件 - 锐客网 6 7.box{ 8width: 300%; 9height: 200px; 10} 11.title{ 12background: steelblue; 13line-height: 40px; 14} 15.con{ 16background: slategray; 17line-height: 30px; 18} 19.hide{ 20display: none; 21} 22 23 24 25 26onmouse 27 28你好吗？ 29我好啊 30好就好呗 31 32 33 55 56

mouseleave和mouseout练习 二、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文件
jQuery之jQuery扩展和事件
文章图片


jQuery之jQuery扩展和事件
文章图片

3、具体示例练习（登录校验）
login.html文件
jQuery之jQuery扩展和事件
文章图片
jQuery之jQuery扩展和事件
文章图片
1 2 3 4 5作业1 - 锐客网 6 7 8.container { 9margin-top: 50px; 10} 11 12 13 14 15 16 17
18 19 20 21 22 23 24 25 26 27 28 29
30 31 32 33 34 35 36 55 56

View Code 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);

jQuery之jQuery扩展和事件
文章图片

jQuery之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
三、表格的添加 | 删除 | 编辑示例
第一种：点击编辑没有模态框，是input框编辑修改
jQuery之jQuery扩展和事件
文章图片
jQuery之jQuery扩展和事件
文章图片
1 2 3 4 5增删改 - 锐客网 6 7 8.addBtn { 9margin-top: 30px; 10margin-bottom: 15px; 11} 12 13 14 15 16 17 18 19 22 23 24 25 26 27 28 29 30 31六点 3223 33女 34 38 39 40 41 42 43 47 48 49 50 51 52 56 57 58
姓名年龄性别操作
35 36 37
时时彩24女 44 45 46
刚强13男 53 54 55
59 60 61 62 63 64 65 66 67 68 69 71Modal title 72 73 74
75 76 77 78 79 80 81 82 83 84 85 86 87
88 89 90 91 92 93 94 95 96 97 98 155 156

增删改1 第二种：点击编辑有模态框
jQuery之jQuery扩展和事件
文章图片
jQuery之jQuery扩展和事件
文章图片
1 2 3 4 5 6 7 8 9 10 11 12 13 14Dashboard Template for Bootstrap - 锐客网 15 16 17 18 19 20 21 22 23 24 25 26 28 29 30 31 37 38 39 40.menu { 41margin: 0 -20px; 42border-bottom: 1px solid #336699; 43} 44 45.head { 46padding: 15px; 47} 48 49.my-table-tool { 50margin-bottom: 15px; 51} 52 53.menu .nav-sidebar > li > a { 54padding-right: 40px; 55padding-left: 40px; 56} 57 58 59 60 61 62 63 88 89 90 91 92 93 94菜单一 95
    96
  • Overview97class="sr-only">(current) 98
    • 99
  • Reports
    • 100
  • Analytics
    • 101
  • Export
    • 102
103 104 105 106菜单二 107
    108
  • Nav item
    • 109
  • Nav item again
    • 110
  • One more nav
    • 111
  • Another nav item
    • 112
  • More navigation
    • 113
114 115 116 117菜单三 118
    119
  • Nav item again
    • 120
  • One more nav
    • 121
  • Another nav item
    • 122
123 124 125 126 127 128 129 130 131 132 135 136 137 138 139 140 141 142 143 144 145 146 1471 148李欣 14923 150女 151 155 156 157 158 159 160 161 165 166 167 168 169 170 171 175 176 177 178 179 180 181 185 186 187
学号姓名年龄性别操作
152 153 154
2时时彩24女 162 163 164
3刚强13男 172 173 174
4杜康25男 182 183 184
188 189 190 191 192 193 194 195 196 198学生信息 199 200 201
202 203 204 205 206 207 208 209 210 211 212 213 214
215 216 217 218 219 220 221 222 223 225 226 227 228 229 230 231 232 233 234 235 236 314 315

增删改2 补充一个知识点 data
jQuery之jQuery扩展和事件
文章图片

- .data()
- .data("key", value) 保存值，value可以是字符串，也可以是数组，也可以是jquery对象
- .data("key") 获取值（没有值就返回undefined）
- .removeData() 删除所有

- .removeData("key") 删除key对应的value


【jQuery之jQuery扩展和事件】转载于:https://www.cnblogs.com/haiyan123/p/7684553.html

    推荐阅读


    上一篇：“为了报复前男友，我比小三更绿茶。”|“为了报复前男友，我比小三更绿茶。”|女生狠起来都是茶艺大师

    下一篇：C语言打印某一年中某月的日历