jquery使用小技巧

jquery的誕生方便了我們前端小菜鳥對web互動的操作。

今天為大家帶來jquery使用部分小技巧。

jquery阻止瀏覽器預設行為，如超連結。

$("a").click(function(event){
  event.preventDefault();
});

Jquery觸發回車事件

 $(function () {
    $('#target').bind('keyup', function (event) {
       if (event.keyCode == 13) {
          alert("Hello~");
       }
   });
});

取得select 的值

jquery可以像取得textbox值一樣取得select的值：$('select').val(); .setData('text', text); 

可以將text文字放到系統剪貼簿中，實現文字的複製功能。但是，這個方法只被IE所支持。

Google Chrome 和Foxfire都不支援。所以，在使用時應先判斷瀏覽器是否支援：

if (window.clipboardData) {  window.clipboardData.setData('text', text); }

選擇文字

對於input或textarea的文字選擇，jquery提供了一個簡單的函數完成：select()，在呼叫它的時候，需要確保文字框可見，並且已經獲得焦點。

$("#txtSample").focus().select();　　//现货的焦点，然后选择文本

滑鼠事件

mouseover 和mouseout、 mouseenter 和 mouseleave；這兩組事件都是滑鼠移入和移出元素時觸發的，

他們的最大區別是： mouseover 和mouseout是冒泡的，如果滑鼠移動到它們的子元素，同樣會觸發該事件，

而mouseenter 和 mouseleave是不會冒泡的。   　　

這個差別很重要！

jQuery物件的擴充

    $.extend(target,prop1,propN)：

用一個或多個其他物件來擴充一個對象，傳回這個被擴充的物件。這是jquery實作的繼承方式。例如：

    $.extend(settings, options);

合併settings和options，並將合併結果傳回settings中，相當於options繼承setting並將繼承結果保存在 setting中。

    var settings = $.extend({}, defaults, options);

合併defaults和options，並將合併結果傳回setting而不覆蓋default內容。可以有多個參數（合併多項並回傳）

jQuery刪除數組中的項

如Tip7所說，使用$.grep()方法刪除數組中的元素。

var array = ['a', 'b', 'c']; 
$.grap(array, function(value, index){return value=='b';}, true);

上面的程式碼將刪除數組array中的元素'b'。

jQuery數組的處理

$.each(obj, fn);

　　對obj進行遍歷，obj為要遍歷的數組或物件；fn為處理函數，可選的參數為索引和內容，例如var fn = function(index, content){}；如果需要結束遍歷，請傳回false，其它的回傳值將會被忽略。

　　此方法可以用來處理JSON資料物件。

$.inArray(obj, array);

　　判斷數組array中是否包含obj對象，如果存在，返回對應的下標，如果不存在，返回-1；

$.map(array, fn);

　　將一個數組中的元素轉換到另一個數組中。 array為需要轉換的數組，fn為處理函數；這個方法的回傳值是一個經過處理後的新數組。

$.merge(array1, array2);

　　合併兩個陣列；將陣列array2中的內容複製到array1中，並將結果傳回。 merge法不會去除重複，需要使用 $.unique()去除重複。

$.unique(array);

　　移除數組array中的重複項。

$.grep(array, fn, [invert]);

　　過濾數組中的元素；此方法對數組array中的每個物件都呼叫fn方法；

　　invert 可選參數；如果"invert" 為false 或未設置，則將過濾函數返回數組中由函數返回數組中由函數返回數組中由函數返回數組中由函數返回數組中由函數返回數組true 的元素，當"invert" 為true，則傳回過濾函數中傳回false 的元素集。

　　該方法常用來刪除數組中的元素

去除string開頭和結尾的空格

js中沒有提供trim函數供我們去掉字符串兩段的空字符，jQuery中擴展了這一功能：

$ .trim(str)：刪除字串兩端的空白字元。

如：$.trim(" hello, how are you? "); //返回"hello,how are you? "

添加事件和移除事件

為一個jQuery對象添加事件是很方便的事情：

$('#btn').click(fn);
$('#btn').bind('click', fn);

jQuery提供了為一個物件的事件提供多個處理函數的機制，我們新增了一個click事件處理方法後，還可以繼續添加，而不會覆蓋先前的處理方法。

當呼叫unbind方法時移除綁定的事件訂閱：

$('#btn').unbind();　　　　//将会移除所有的事件订阅
$('#btn').unbind('click')　　//将会移除click事件的订阅

取得jQuery物件集合中的一項

　對於取得的元素集合，取得其中的某一項（透過索引指定）可以使用eq或get (n)方法或索引號獲取，要注意，eq返回的是jquery對象，而get(n)和索引返回的是dom元素對象。對於jquery物件只能使用jquery的方法，而dom物件只能使用dom的方法，如要取得第三個

元素的內容。有以下兩種方法：　

$("div").eq(2).html(); 　　　　 //调用jquery对象的方法
$("div").get(2).innerHTML; 　　//调用dom的方法属性

jQuery物件和Dom的轉換

Dom物件可以透過$(dom)轉換為jQuery物件；例如：

　　$(document.getElementById('I

　『$(document.getElementById('QumyDiv'))🎟本身就是一個索引，可以透過下標得到Dom物件；也可以使用方法get()取得Dom物件；例如：

$("div")[0];　　　　//获取第一个Dom对象
$("div").get(0);　　//同样获取第一个Dom对象

在獨立的js檔案中智慧感知

在js檔案的開頭加上：///

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn