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

结果：