你不知道的jQuery

VEIGHTZ 發布于2019-08-01 15:46 / 1216人閱讀

摘要：不要恨我這個標題黨，且看下面的分享。字符串函數數組字符串函數數組為所匹配到的表單元素賦值。函數返回值作為當前元素要設置的值。你好如果是沒有屬性的對象，則返回，否則返回，這里的屬性包括從繼承下來的屬性。說明返回的不是數組，這我們早就知道。

不要恨我這個標題黨，且看下面的分享。
最近做業務發現jquery的一些方法有其他的用法，可以幫助我解決一些問題，下面我就說說吧。大家共同進步，歡迎大家斧正錯誤哦。

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

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

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

執行完上面代碼后

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

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

var value = [1,208,182];

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

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

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

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

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

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

在這里我在提幾個大家能用的著的而用到時有不一定能想起來的幾個函數

inArray(value,array):返回傳入值第一次在改數組中出現的下標。如果沒有查到返回-1。在項目中我們經常會遇到判斷一個值是否在某個數組中存在（不考慮重復值，多個也是存在）我們可以使用這個函數

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

好了，剛開始寫東西，大家給點鼓勵，謝謝。

GPU云服務器云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50103.html

你不知道的Chrome DevTools（4）：推薦幾款DevTools插件

摘要：下面推薦幾款插件，有些是博主親自試用過的，希望對大家的開發調試有幫助。這有點類似前面說過的插件。類似的針對不同框架的調試工具還有最后介紹的不是的插件，而是主題。總結好的，這次的插件就推薦了這幾個。 Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔壁的產品小哥都知道打開F12改一下頁面元素的...

svtter 2019-08-21 12:17 評論0 收藏0
你不知道的jQuery

摘要：不要恨我這個標題黨，且看下面的分享。字符串函數數組字符串函數數組為所匹配到的表單元素賦值。函數返回值作為當前元素要設置的值。你好如果是沒有屬性的對象，則返回，否則返回，這里的屬性包括從繼承下來的屬性。說明返回的不是數組，這我們早就知道。不要恨我這個標題黨，且看下面的分享。最近做業務發現jquery的一些方法有其他的用法，可以幫助我解決一些問題，下面我就說說吧。大家共同進步，歡迎大家斧...

Jochen 2019-08-29 11:23 評論0 收藏0
你不知道的jQuery

摘要：不要恨我這個標題黨，且看下面的分享。字符串函數數組字符串函數數組為所匹配到的表單元素賦值。函數返回值作為當前元素要設置的值。你好如果是沒有屬性的對象，則返回，否則返回，這里的屬性包括從繼承下來的屬性。說明返回的不是數組，這我們早就知道。不要恨我這個標題黨，且看下面的分享。最近做業務發現jquery的一些方法有其他的用法，可以幫助我解決一些問題，下面我就說說吧。大家共同進步，歡迎大家斧...

jubincn 2019-08-20 11:24 評論0 收藏0
你不知道的Chrome DevTools（2）：那些debug的技巧

摘要：我打算把一些上使用的高級技巧寫成你不知道的這一系列的博文，希望大家一起學習學習。然而，這還不是最嚴重的，因為的語法比較寬松和隨意，所以同一功能多種寫法，各種奇葩都有。總結前端在調試代碼的時候，知道開發工具上的小技巧，可以提高查找問題的效率。 Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔...

warnerwu 2019-08-19 14:38 評論0 收藏0