你不知道的jQuery

jubincn 發(fā)布于2019-08-20 11:24 / 1304人閱讀

摘要：不要恨我這個(gè)標(biāo)題黨，且看下面的分享。字符串函數(shù)數(shù)組字符串函數(shù)數(shù)組為所匹配到的表單元素賦值。函數(shù)返回值作為當(dāng)前元素要設(shè)置的值。你好如果是沒(méi)有屬性的對(duì)象，則返回，否則返回，這里的屬性包括從繼承下來(lái)的屬性。說(shuō)明返回的不是數(shù)組，這我們?cè)缇椭馈?/p>

不要恨我這個(gè)標(biāo)題黨，且看下面的分享。
最近做業(yè)務(wù)發(fā)現(xiàn)jquery的一些方法有其他的用法，可以幫助我解決一些問(wèn)題，下面我就說(shuō)說(shuō)吧。大家共同進(jìn)步，歡迎大家斧正錯(cuò)誤哦。

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

val(字符串|函數(shù)|數(shù)組):為所匹配到的表單元素賦值。
這個(gè)函數(shù)我們最常用的是參數(shù)傳入字符串，而且用的不亦樂(lè)乎。下面我們來(lái)看看余下的兩種吧
假設(shè)我們這做的項(xiàng)目有很多這樣的需求：批量處理一些數(shù)據(jù)然后提交，比如是按金額每個(gè)寶貝的價(jià)格上調(diào)1元。

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

執(zhí)行完上面代碼后

此次調(diào)用val() 傳入一個(gè)函數(shù)，此函數(shù)有兩個(gè)參數(shù)：調(diào)用者的元素下標(biāo)和元素當(dāng)前值。函數(shù)返回值作為當(dāng)前元素要設(shè)置的值。
這樣我們就可以批量修改一些東西了，很棒吧 ^v^

接下來(lái)我們來(lái)看看第三種用法吧（選中復(fù)選框、單選按鈕或者下拉框select），這種方法可是讓我的心情激動(dòng)很久呢。下面我來(lái)舉個(gè)荔枝^v^
事情是這樣的：我們有很多這樣的業(yè)務(wù)需求，比如記錄下我們的操作或者初始化一些東西。

var value = [1,208,182];

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

是不是很爽呢，之前的做法需要遍歷、比較、選中這些繁瑣的過(guò)程都沒(méi)有了。

還有radio、select的我就不舉栗子了，大家可以自己試試！

其實(shí)jquery函數(shù)里很多都是可以傳函數(shù)作為參數(shù)的，而用法大致相同。已函數(shù)作為參數(shù)為例，假如我們的目標(biāo)元素們不是表單元素而是普通的像span這樣的元素，我們又想批量處理怎么辦呢，我們應(yīng)該想到了html()或者text()這兩個(gè)函數(shù)了，拿text()為例

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

大家可以去jQuery官網(wǎng)去看下文檔大部分我們平時(shí)用到的函數(shù)都用這樣的用法，如：attr()、css()...所以函數(shù)就在那里，用法也在那里，如果你get到了那就用到你的項(xiàng)目中去吧。

在這里我在提幾個(gè)大家能用的著的而用到時(shí)有不一定能想起來(lái)的幾個(gè)函數(shù)

inArray(value,array):返回傳入值第一次在改數(shù)組中出現(xiàn)的下標(biāo)。如果沒(méi)有查到返回-1。在項(xiàng)目中我們經(jīng)常會(huì)遇到判斷一個(gè)值是否在某個(gè)數(shù)組中存在（不考慮重復(fù)值，多個(gè)也是存在）我們可以使用這個(gè)函數(shù)

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

isArray(o): 如果o是JavaScript數(shù)組，則返回true，如果o是類數(shù)組對(duì)象，則返回false。

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

isEmptyObject(o): 如果o是沒(méi)有屬性的JavaScript對(duì)象，則返回true，否則返回false，這里的屬性包括從prototype繼承下來(lái)的屬性。我們可以用它來(lái)做空對(duì)象判斷。

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

類數(shù)組轉(zhuǎn)換

上面 $.isArray($("div"));返回false。說(shuō)明$("div")返回的不是數(shù)組，這我們?cè)缇椭馈Ｈ绻胱屗兂蓴?shù)組呢？get()、toArray()都能做到。

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

好了，剛開(kāi)始寫東西，大家給點(diǎn)鼓勵(lì)，謝謝。