============回車實現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);
結果：
