jQuery实现回车绑定Tab事件、jQuery.extend方法、jQuery.fn.extend方法
============回车实现Tab事件==========
有时候我们希望回车事件绑定的是键盘的Tab事件。我的第一思路就是切换事件的keyCode，比如键盘事件按下的keyCode如果是13，我们将keyCode改为9。但是在实际编程中却未能实现此效果。于是只能自己通过手写JS脚本来调用input元素的focus()事件。
1.原来的一个普通的表单
<form id="tttttttttttt" action="xxxx.html"> <input type="hidden" name="" id="" value="" /> <br /> <input type="text" name="" id="" value="" /> <br /> <input type="text" name="" id="" value="" /> <br /> <input type="text" name="" id="" value="" /> <br /> <input type="button" id="button" value="第一个按钮" /> <input type="submit" name="" id="" value="提交按钮" /> <button>按鈕</button> </form>
我们发现当我们按下回车的时候会提交表单，触发表单的submit()事件。原因是有一个按钮的类型是submit。所以点击回车的时候触发了回车事件。
于是将上面的submit按钮改为button，在其click事件中提交表单。
<form id="tttttttttttt" action="xxxx.html"> <input type="hidden" name="" id="" value="" /> <br /> <input type="text" name="" id="" value="" /> <br /> <input type="text" name="" id="" value="" /> <br /> <input type="text" name="" id="" value="" /> <br /> <input type="button" id="button" value="第一个按钮" /> <input type="button" name="" id="" value="提交按钮" onclick="$('#tttttttttttt').submit();" /> <button>按鈕</button> </form>
我们发现当我们按下回车的时候会提交表单，触发表单的submit()事件。原因是有一个button，button默认的类型也是submit，所以也会触发表单提交。
将button的类型改为button。
<form id="tttttttttttt" action="xxxx.html"> <input type="hidden" name="" id="" value="" /> <br /> <input type="text" name="" id="" value="" /> <br /> <input type="text" name="" id="" value="" /> <br /> <input type="text" name="" id="" value="" /> <br /> <input type="button" id="button" value="第一个按钮" /> <input type="button" name="" id="" value="提交按钮" onclick="$('#tttttttttttt').submit();" /> <button type="button">按鈕</button> </form>
这次再按下回车终于不是表单提交了。
2.jQuery 设置回车切换input的focus
前提是表单中没有submit类型的按钮。针对下面的表单元素进行切换:
<form id="tttttttttttt" action="xxxx.html"> <input type="hidden" name="" id="" value="" /> <br /> <input type="text" name="" id="" value="" /> <br /> <input type="text" name="" id="" value="" /> <br /> <input type="text" name="" id="" value="" /> <br /> <input type="button" id="button" value="第一个按钮" /> <input type="button" name="" id="" value="提交按钮" onclick="$('#tttttttttttt').submit();" /> <button type="button">按鈕</button> </form>
脚本如下:
思路:键盘中判断是否按下的是回车键，如果是回车键，获取表单下的所有的需要切换的input元素，然后与当前元素进行对比，如果相等，就将数组中的下一个元素聚焦(当然如果是最后一个元素的话将第一个元素聚焦)
$(function(){ $("input").keydown(function(){ if(13 == event.keyCode){ var form = $("#tttttttttttt"); var inputEles = form.find("input:visible"); console.log("inputEles -> "+inputEles.length); //5 for(var i=0;i<inputEles.length;i++){ if($(inputEles[i]).is($(this))){//判断两个jQuery对象是否相等用is if(i == inputEles.length-1){ $(inputEles[0]).focus(); }else{ $(inputEles[i+1]).focus(); } } } } }); })
总结:
jQuery判断两个元素是否相等用 ele1.is(ele2)
button的默认类型是submit(会触发表单的提交)
=========jQuery.extend和jQuery.fn.extend=======
1. 我们先看jqueryAPI对两个函数的解释：
1. jQuery.fn.extend(object) 返回值:jQuery
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
参数object用来扩充 jQuery 对象。
例如：增加两个插件方法。
jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } });
使用：
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
2. jQuery.extend(object) 返回值:jQuery
扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。
参数object用以扩展 jQuery 对象
例如：在jQuery命名空间上增加两个函数。
// 扩展函数 jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } });
调用：
alert($.min(5, 6));
2. 自己的理解
jQuery的API手册中，extend方法挂载在jQuery和jQuery.fn两个不同对象上方法，但在jQuery内部代码实现的是相同的，只是功能却不太一样；
且看官方给出解释：
jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中)；
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法)
1. jQuery.fn.extend()
这个拓展的是jQuery.fn的方法。
jQuery.fn = jQuery.prototype = { init:funtion(selector,context){ //..... } }
所以jQuery.fn.extend拓展的是jQuery对象（原型的）的方法啊！
也就是只能在jQuery对象才能使用的方法，例如： $("#abc") ，$(div)。
也就是说，jQuery.fn.extend拓展的方法，你得用在jQuery对象上面才行啊！说白了就是得这么用（假设xyz()是拓展的方法）：
$('selector').xyz();
2. jQuery.extend()
语法：
$.extend( target [, object1 ] [, objectN ] )
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
注意：
1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。
(1)用法一：指定一个参数扩展jQuery函数已经在上面测试过
// 扩展jQuery类自身 jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); alert($.max(5, 6));
(2)合并多个对象的属性：
var var1 = { name: 'var1', age: 2, sex: '男', address: 'var1 address', speak: function() { alert("var1 speak");} } var var2 = { name: 'var2', age: 2, sex: '女', speak: function() { alert("var2 speak");} } // 将var2的属性合并到var1 jQuery.extend(var1, var2); console.log(var1); var1.speak();
结果：
补充：当然可以用一个变量接收合并后的结果：
var var1 = { name: 'var1', age: 2, sex: '男', address: 'var1 address', speak: function() { alert("var1 speak");} } var var2 = { name: 'var2', age: 2, sex: '女', speak: function() { alert("var2 speak");} } // 将var2的属性合并到var1 var var3 = jQuery.extend(var1, var2); console.log(var1); console.log(var3); var1.speak();
结果:
补充：如果是用null或者undefined合并到target上，不会影响原target；可以将对象合并到null或undefined对象上，如下：
var var1 = { name: 'var1', age: 2, sex: '男', address: 'var1 address', speak: function() { alert("var1 speak");} } var var3 = jQuery.extend(var1, undefined); console.log(var1); console.log(var3); var var4 = jQuery.extend(var1, undefined); console.log("=============="); console.log(var1); console.log(var4); var var2 = { name: 'var2', age: 2, sex: '女', speak: function() { alert("var2 speak");} } var var5 = jQuery.extend(null, var2); console.log("=============="); console.log(var5);
结果：
