你不知道的jQuery

不要恨我這個標題黨,且看下面的分享。
最近作業務發現jquery的一些方法有其餘的用法,能夠幫助我解決一些問題,下面我就說說吧。你們共同進步,歡迎你們斧正錯誤哦。css

val(字符串|函數|數組)

val(字符串|函數|數組):爲所匹配到的表單元素賦值。
這個函數咱們最經常使用的是參數傳入字符串,並且用的不亦樂乎。下面咱們來看看餘下的兩種吧
假設咱們這作的項目有不少這樣的需求:批量處理一些數據而後提交,好比是按金額每一個寶貝的價格上調1元。html

圖片描述

var price = Number($('.J_money').val()),
    $spanPrice = $('.trade-body [data-column="price"]');
    $spanPrice.val(function(index,value){
        return (+value + price) ;
    });

執行完上面代碼後jquery

圖片描述

這次調用val() 傳入一個函數,此函數有兩個參數:調用者的元素下標和元素當前值。函數返回值做爲當前元素要設置的值。
這樣咱們就能夠批量修改一些東西了,很棒吧 ^v^數組

接下來咱們來看看第三種用法吧(選中複選框、單選按鈕或者下拉框select),這種方法但是讓個人心情激動好久呢。下面我來舉個荔枝^v^
事情是這樣的:咱們有不少這樣的業務需求,好比記錄下咱們的操做或者初始化一些東西。函數

var value = [1,208,182];

$('.group-list input[type="checkbox"]').val(value);

圖片描述

是否是很爽呢,以前的作法須要遍歷、比較、選中這些繁瑣的過程都沒有了。spa

還有radio、select的我就不舉栗子了,你們能夠本身試試!prototype

其實jquery函數裏不少都是能夠傳函數做爲參數的,而用法大體相同。已函數做爲參數爲例,假如咱們的目標元素們不是表單元素而是普通的像span這樣的元素,咱們又想批量處理怎麼辦呢,咱們應該想到了html()或者text()這兩個函數了,拿text()爲例3d

圖片描述

var price = Number($('.J_money').val()),
    $spanPrice = $('.trade-body [data-column="price"]');
$spanPrice.text(function(index,text){
    return (+text+ price) ;
});

圖片描述

你們能夠去jQuery官網去看下文檔大部分咱們平時用到的函數都用這樣的用法,如:attr()、css()...因此函數就在那裏,用法也在那裏,若是你get到了那就用到你的項目中去吧。code

在這裏我在提幾個你們能用的着的而用到時有不必定能想起來的幾個函數

inArray(value,array):返回傳入值第一次在改數組中出現的下標。若是沒有查到返回-1。 在項目中咱們常常會遇到判斷一個值是否在某個數組中存在(不考慮重複值,多個也是存在)咱們能夠使用這個函數htm

var index = $.inArray('hello', ['hi','hello','你好']),
    index2 = $.inArray('some other', ['hi','hello','你好']);
console.log(index);
console.log(index2);

圖片描述

isArray(o): 若是o是JavaScript數組,則返回true,若是o是類數組對象,則返回false。

var isArray = $.isArray(['hi','hello','你好']),
    isArray2 = $.isArray($('div'));
console.log(isArray);
console.log(isArray2);

圖片描述

isEmptyObject(o): 若是o是沒有屬性的JavaScript對象,則返回true,不然返回false,這裏的屬性包括從prototype繼承下來的屬性。咱們能夠用它來作空對象判斷。

var isEmptyObject = $.isEmptyObject({}),
    isEmptyObject2 = $.isEmptyObject({'a':1});
console.log(isEmptyObject);
console.log(isEmptyObject2);

圖片描述

類數組轉換

上面 $.isArray($('div'));返回false。說明$('div')返回的不是數組,這咱們早就知道。若是想讓它變成數組呢?get()、toArray()都能作到。

var isArray = $.isArray($('div')),
    isArray2 = $.isArray($('div').get()),
    isArray3 = $.isArray($('div').toArray());
console.log(isArray);
console.log(isArray2);
console.log(isArray3);

圖片描述

好了,剛開始寫東西,你們給點鼓勵,謝謝。

相關文章
相關標籤/搜索