jQuery - 通用方法

發表於 2020-10-16 更新於 2021-07-18

迭代工具

.each()

如果想要逐一查用 jQuery 物件中所有的元素，可以呼叫 each()方法，而不用撰寫 for 迴圈，$().each() 是 jQuery 的 for 迴圈。each()類似 ECMAScript 5 的 forEach()陣列方法。預期一個回呼函式作為唯一的引數，並為 jQuery 物件中每個元素呼叫一次那個 callback 函式（以文件順序）。

jQuery 的 each()方法有個特色與 JavaScript 的 forEach()相當不同：只要 callback 對任何一個元素回傳 false，迭代動作就會止於那個元素（這就像是在正常的迴圈中使用 break 關鍵字）。

each() 會依選擇對象，逐一去執行程式，以迴圈繞行符合選擇器的每一個元素，就像組裝線上的機器一個接著一個的處理元素，當函式放在 each() 裡頭時，程式碼增添強大的威力，該函式隨著 each() 處理每個元素的同時對該元素做某事，在 function(index)的第一參數索引值，追蹤紀錄該函式正在處理那個元素編號，第二參數為 html 元素，而不是 jQuery 物件。另外，請注意函式裡面 this 的使用。

$(selector).each(function(index,element){…})

$('span').each(function (index, element) {
  // index 從 0 開始，element 為該 html element，而不是 jQuery 物件
  console.log(index, element)
  // this.id 為獲取 Html element 元素的 id 屬性值
  console.log(this.id)
  // $(this) 將 Html element 轉成 jQuery 物件參照，此時才可以使用 jQ 的 attr 方法
  console.log($(this).attr('id'))
})

$().each() 與 $.each(object, callback) 並不相同。

$.each()

可以對 jQuery 物件或 JS 任何物件進行迭代。

const obj = {
  name: 'Kaifu',
  age: 18,
  job: 'FrontEnd Designer'
}
$.each(obj, function (key, value) {
  console.log(key, value)
})

const arr = [1, 2, 3, 4, 5]
$.each(arr, function (key, value) {
  console.log(key, value)
})

const jq = $('#menu li')
$.each(jq, function (key, value) {
  console.log(key, value)
})

.map()

jQuery 方法 map() 運作的方式很像 Array.map() 方法，它接受一個 callback 函式作為它的引數，並為 jQuery 物件中的每一個元素呼叫一次這個函式，收集這些呼叫傳回的值，return 一個新的 jQuery 物件，它包含一個陣列，可以呼叫 .get() 去取得。如果 callback 函式回傳 null 或 undefined，這個值會被忽略，該次呼叫不會有任何東西被加到新的 jQuery 物件中。

$(selector).map(function(index,element){})

const map = $('#menu li').map(function (index, elem) {
  return elem.tagName
})

如果要處理一般陣列或 JS 物件，請改用 $.map()，與 .map() 不同喔。

$.map()

將陣列或物件中的所有項目轉換為新的項目陣列。

$.map( array, callback )
$.map( object, callback )

const newOne = $.map([0, 1, 2], function (n) {
  return n + 4
})

const dimensions = { width: 10, height: 15, length: 20 }
const newOne = $.map(dimensions, function (value, index) {
  return value * 2
})

.get()

可以將 jQuery 物件轉成一般陣列。

$('#menu li').get() // 一般陣列

$.makeArray()

將類陣列轉換為真正的 JavaScript 陣列。

$.makeArray(obj)

$.makeArray($('#menu li'))

// 物件
var fakeArray = { length: 2, 0: 'Addy', 1: 'Subtracty' }
// 轉成陣列
var realArray = $.makeArray(fakeArray)
// 現在它可以可靠地與 $.map() 一起使用
$.map(realArray, function (val, i) {
  // Do something
})

$.trim()

刪除字符串開頭和結尾的空格。

let str = '  Hello World   '
$.trim(str) // 'Hello World'

$.contains()

檢查一個 DOM 元素是否是另一個 DOM 元素的後代。

$.contains(document.documentElement, document.body) // true
$.contains(document.body, document.documentElement) // false

$.data()

存儲與指定元素關聯的任意資料和/或返回設置的值。

$.data( element, key, value )
$.data( element, key )

$.data(document.body, 'foo', 52)
$.data(document.body, 'bar', 'test')

$.merge()

將兩個數組的內容合併到第一個數組中。

$.merge( first, second )

$.merge([0, 1, 2], [2, 3, 4]) // [ 0, 1, 2, 2, 3, 4 ]

$.extend()

將兩個或多個物件的內容合併到第一個物件中。

$.extend( target, object1 [, objectN ] )
$.extend( [deep ], target, object1 [, objectN ] )

// 淺拷貝
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
}
var object2 = {
  banana: { price: 200 },
  durian: 100
}

// Merge object2 into object1
$.extend(object1, object2)

// Assuming JSON.stringify - not available in IE<8
$('#log').append(JSON.stringify(object1))

// 深拷貝
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
}
var object2 = {
  banana: { price: 200 },
  durian: 100
}

// Merge object2 into object1, recursively
$.extend(true, object1, object2)

// Assuming JSON.stringify - not available in IE<8
$('#log').append(JSON.stringify(object1))

$.fn.extend()

將物件的內容合併到 jQuery 原型上以提供新的 jQuery 實體方法。

// 替 jQuery 物件新增方法
jQuery.fn.extend({
  check: function () {
    return this.each(function () {
      this.checked = true
    })
  },
  uncheck: function () {
    return this.each(function () {
      this.checked = false
    })
  }
})

// Use the newly created .check() method
$("input[type='checkbox']").check()

$.grep()

查找滿足過濾器函數的陣列元素。原陣列不受影響。

$.grep( array, function(element,index){…}, invert )

// [1, 2]
$.grep([0, 1, 2], function (elm, index) {
  return elm > 0
})
// [0]
$.grep(
  [0, 1, 2],
  function (elm, index) {
    return elm > 0
  },
  true
)

.index()

除了 each()、map()之外，另一個基本 jQuery 方法是 index()。這個方法預期一個 element 作為它的引數，然後回傳那個元素在 jQuery 物件中的索引（index），從 0 開始，或在找不到那個元素時回傳 -1。

index()

沒有傳入任何引數，index()會回傳 jQuery 物件第一個元素在其兄弟元素中的索引位置。

.index( element or jQuery )

傳入一個 element 或 jQuery 物件作為引數，index()會搜尋那個物件中的第一個元素的索引值。

.index( selector )

傳入一個字串，index()會把它作為一個 CSS 選擇器，並回傳 jQuery 物件中第一個符合的元素的索引值。

$.now()

棄用，請使用 Date.now() 替代，返回一個代表當前時間的數字。

$.now()

檢查工具

$.inArray()

在陣列中搜索指定值並返回其索引（如果未找到，則返回 -1）。

$.inArray( value, array [, fromIndex ] )

$.inArray('帥', ['我', '是', '大', '帥', '哥']) // 3

$.isArray()

確定參數是否為陣列。

$.isArray( obj )

$.isArray([])

$.isPlainObject()

檢查物件是否為普通物件（使用’{}’或’新物件’創建）

$.isPlainObject(object)

$.isPlainObject({}) // true
$.isPlainObject('test') // false

$.isEmptyObject()

檢查物件是否為空（不包含可枚舉的屬性）。

$.isEmptyObject(object)

$.isEmptyObject({}) // true
$.isEmptyObject({ foo: 'bar' }) // false

$.isFunction()

確定其參數是否可作為函數調用。

$.isFunction( value )

const foo = function () {}
$.isFunction(foo) // true

$.isNumeric()

$.isNumeric(value)

確定其參數是否表示 JavaScript 數字。

$.isNumeric(100) // true

$.isWindow()

確定參數是否是一個 window。

$.isWindow(obj)

$.isWindow(window) // true

$(this) 與 this

$(this)

指的是 DOM 元素的 jQuery 包裝集，可以使用 jQuery 指向當前動作的元素去執行程式，若要存取屬性須配合 jQuery 的方法。例如：

<script>
  $(this).attr('id', 'one')
  alert($(this).attr('id'))
</script>

this

指的是該 HTML DOM 元素物件，可直接存取屬性與值。例如：

this.id = 'one'
alert(this.id)

請盡量使用 $(this)，這樣還可以搭配 jQuery 的方法去遍歷走訪 DOM。
this 非常適合配合使用 each() 函式時，自然會需要存取每個元素的屬性。要在每一輪執行中存取目前的元素時，可使用稱為 this 的特殊關鍵字。
this 關鍵字指向呼叫不具名函式的元素。因此在 jQuery 自動迴圈第一輪中，this 指向 jQuery 選取結果的第一個元素，第二次就是第二個… 以此類推。

例子：將頁面連結在列表 #bibList 顯示

<script>
  $('a[href^=http://]').each(function () {
    var extlink = $(this).attr('href')
    $('#bibList').append('<li>' + extLink + '</li>')
  })
</script>

$(this) 的奧妙之處

透過 this 可以讓各元素單獨執行其觸發的事件內容，此功能對於打造各種用於 Web 網站組件有很大的幫助。

$(function () {
  $('header,#typo,footer').on('mouseover', function () {
    // 此時 this 可以單獨觸發對應的元素，如果使用原來的 'header,#typo,footer'，則會一起觸發
    $(this).css(('background-color': '#333'))
  })
})

常被誤會的 jQuery 與 JavaScript

以下 value、val() 回傳的資料是 String，千萬不要以為$開頭就誤以為一直是 jQuery 的物件，經過每一層的運算回傳後，資料型態可能會被改變。

document.getElementById('demo1').value.substr(0, 1) //正確
$('#demo1').val().substr(0, 1) //正確

以下 this 皆指向不同元素，
只有 this 表示是 DOM 的物件，因此可以使用 value 屬性。
$(this)，把 this 放進 $() 函式則變成 jQuery 物件，因此可以使用

$('input').each(function () {
  this.value //正確，因為 this 是 DOM 的物件，擁有 value 這個屬性
  $(this).val() //正確，因為 $(this) 是 JQuery 的物件，可使用 val()
})

index 不要搞混了

jQuery 的回呼函式第一參數都是 index，常常會與 JavaScript 的回呼函式搞混，例如 jQuery 的 .each() 與 JavaScript 的 .forEach()。

// jQuery
$(selector).each(function(index,element))

// JavaScript
arr.forEach(function(value[, index[, array]]) {
}[, thisArg]);

jQuery 物件轉成真正陣列

如果需要將一個 jQuery 物件轉為真正的陣列，可呼叫 toArray()方法，將 jQuery 類陣列轉為陣列。除了 length 屬性，另外還有一個 jquery 屬性是所有 jQuery 物件所有的屬性，該屬性值可回傳 jQuery 版本號碼。

$().jquery // 回傳版本
$().jquery.__proto__ // 回傳 jQuery(回傳版本) 此物件的所有方法屬性，此物件並不是指整個 jQuery
$().__proto__ // 回傳 jQuery 函式工廠所有方法與屬性