jQuery - 變更及取得內容

變更及取得內容

jQuery 變更與取得元素的內容是非常容易的事情：

• 變更內容：$(選擇器).html(變更的內容)
• 取得內容：$(選擇器).html()

需要注意的是 jQuery 物件與正常的 DOM 物件不同，使用者不能夠為 jQuery 物件呼叫 DOM 屬性或方法，也不能夠為 DOM 物件呼叫 jQuery 的方法和屬性。因此須知道當下操縱的是 DOM 物件，還是 jQuery 物件，這樣才能正確使用各自物件的方法、屬性。

---

text()、html() 取得與設定元素內容

text() 與 html()方法用來查詢與設定一或多個元素的純文字或 HTML 內容。
text() 不帶引數呼叫時，回傳所有符合元素裡面的所有純文字內容。等同於 JavaScript 的 textContent 與 innerText。
html() 不帶引數呼叫時，回傳第一個符合元素的 HTML 內容。等同於 JavaScript 的 innerHTML。

可以使用回呼函式

做到讀取與寫入的功能，此時 index 為符合 selector 的 text 或 html 索引值, oldcontent 為原內容，可以在返回時用 return “新內容” 取代原內容。

$(selector).text(function(index, oldContent))
$(selector).html(function(index, oldContent))

var txt = $('.card').text()
var html = $('card').html()

$('.card-body p').text(function (idx, oldContent) {
  return `第${idx + 1}個：${oldContent}`
})

---

val() 取得與設定 HTML 表單值

val() 是用來設定與查詢 HTML 表單元素 value 屬性的方法，也可用來查詢與設定 checkboxs（多選鈕）、radio buttons（單選鈕）及 select 元素的選取狀態。它等同於 javascript 的 value。

$(selector).val()
$(selector).val(function(index, oldValue){…})

$('select#foo option:checked').val()
$('select#foo').val()

$('input[type=text].tags').val(function (index, oldValue) {
  return oldValue.trim()
})

可以使用回呼函式

$(selector).val(function(index, oldvalue))

---

操作 HTML 標籤上的屬性

獲取匹配元素集中第一個元素的屬性值，或者為每個匹配元素設置一個或多個屬性。
.attr() 方法僅獲取匹配集中第一個元素的屬性值。要單獨獲取每個元素的值，請使用循環結構，例如 jQuery 的 .each() 或 .map() 方法。

$(selector).attr( attributeName )

$('img').attr('width') // 取得屬性值
$('img').attr('width', '500') // 設定屬性值

$('a').attr('target', function () {
  // 本地連結在原處載入，他站連結則在新視窗載入
  if (this.host == location.host) return '_self'
  else return '_blank'
})

使用物件設定多屬性

$('#banner').attr({
  src: 'banner.gif',
  alt: '廣告',
  width: 720,
  height: 64
})

使用回呼函式

$(selector).attr(attribute,function(index,currentValue){…})

$('.box').attr('title', function (index, current) {
  if (current === '天氣') {
    return '太棒了'
  }
})

移除屬性

$(selector).removeAttr( attributeName )

// 需指定屬性
$('a').removeAttr('target') // 移除掉所有連結的 target，原視窗載入

---

操作 DOM 物件的 prop 特性

.prop()

$(selector).prop( propertyName )
$(selector).prop( propertyName, value )
$(selector).prop( plainObject )
$(selector).prop( propertyName, function(index, oldProp){ … } )

const elm = document.querySelector('input')
elm.checked // true
$(elm).prop('checked') // true
$(elm).attr('checked') // 'checked'，不會返回 boolean，須注意

.removeProp()

$(selector).removeProp(propertyName_string)

---

操作 CSS 類別

jQuery 定義了以下方法處理 class 屬性：

方法	說明
addClass()	為指定的對象增加類別，增加類別可複數
removeClass()	為指定的對象移除類別 移除類別可複數
toggleClass()	為指定的對象切換類別
hasClass()	測試指定的類別存在與否

addClass()

新增一個或多個類別（不會覆蓋移除原有的 class），只做添加類別，新增多個類別使用空格分隔類別。

$(selector).addClass(‘string’)
$(selector).addClass([‘selector1’, ‘selector2’])
$(selector).addClass(function(index, currentClass){ … })

PS：currentClass 為目前元素上所有的 class

removeClass()

僅移除類別（保留其他 class），多類別使用空格分隔類別，如果沒有參數，則該方法將從被選元素中刪除所有類。

$(selector).removeClass(className_string)
$(selector).removeClass(Array)
$(selector).removeClass( function(index, oldclass) )

toggleClass()

對設置或移除被選元素的一個或多個類進行切換。該方法檢查每個元素中指定的類。如果不存在則添加類，如果已設置則刪除之。這就是所謂的切換效果。
不過，通過使用”switch” 參數，您能夠規定只刪除或只添加類。

$(selector).toggleClass( className )
$(selector).toggleClass( className, state ) => state 為 boolean，true 為 added，false 為 removed
$(selector).toggleClass( Array )
$(selector).toggleClass( Array, state )
$(selector).toggleClass( function(index, class , state){ … } )

hasClass()

測試指定的類別存在與否。
hasClass 方法的彈性比 addClass、removeClass()、toggleClass 還要低，hasClass()只能處理單一個類別名稱，而且不支援函式引數。在相比之下，is()比較有彈性。
這些 jQuery 方法就像 classList 方法，但這些 jQuery 方法能夠在所有的瀏覽器運作，不限於那些支援 HTML5 classList 屬性的瀏覽器。jQuery 方法還可以作用於多個元素上，並且可以鏈串。

// addClass
$('h1').addClass('box') // 為所有 h1 新增一個類別 box
$('h1+p').addClass('box border') // 為相鄰h1後的p元素，新增兩個類別
$('div').addClass(function (idx) {
  // 為所有 section 傳入一個函式，該函式會帶入索引值參數，並回傳一個值
  return 'section' + idx
})

// removeClass
$('p').removeClass('box')
$('p').removeClass('box border')
$('div').removeClass(function (idx) {
  return 'section' + idx
})
$('div').removeClass() // 為所有 div 移除全部類別

// toggleClass
$('p').toggleClass('box') // 切換 box 類別
$('p').toggleClass('box border') // 一次切換兩個類別
$('p').toggleClass(function (idx) {
  return 'big bold h1-' + idx
})
$('p').toggleClass('box', true) // 等同於使用 addClass
$('p').toggleClass('box', false) // 等同於使用 removeClass

// hasClass
$('p').hasClass('first') // p元素是否有 first 類別
$('p').is('.first') // 也是做同樣的事情，is()注意要有.
$('p').is('.first.title') // is()比 hasClass() 更具彈性

操作 CSS 屬性

$(selector).css( propertyName_String )
$(selector).css( [ propertyName_string1, propertyName_string2 ] )
$(selector).css( propertyName, value )
$(selector).css( propertyName, function(index, oldValue){…} )
$(selector).css( plainObject )

• 允許使用連字號的 css 樣式名稱，例如：’background-color’。
• 或是駝峰式（Camel case），例如：’backgroundColor’，養成習慣使用駝峰式寫法。
• 查詢樣式值時，如果選擇目標為複數集合，它會傳回第一個，除非指定目標。
• 查詢樣式值時，css()會把數值以字串形式回傳，包括後綴的單位。再設定的時候，它會將數字轉為字串並在必用時為它們加上一個’px’。
• 設定單值時，可以只寫數字，jQuery 會將數字轉成字串加上 px，例如：20、’20px’、’20’，都是一樣。
• 也可以設定回呼函式，第一個參數為 index，第二個參數為屬性值。

$('h1').css('font-weight') // 取值，連字號 font-weight
$('h1').css('fontWeight') // 取值，駝峰式寫法也可以使用

$('h1').css('font-variant', 'smallcaps') // 設定所有 h1 的 font-variant
$('div.note').css('border', '2px solid black') // 設定複合屬性值

$('.red').css(['backgroundColor', 'font-size']) // 陣列取值，{ backgroundColor: "rgb(255, 0, 0)", font-size: "32px" }

• 多屬性可使用選項物件（PlainObject）

設定 CSS 屬性時，應該使用選項物件。

$('h1').css({
  backgroundColor: 'black',
  color: 'white',
  padding: '10px',
  border: '5px dotted black'
})

注意的是 css()會忽略 !important，建議改用 CSS class 類別，否則就得使用 jQuery 套件。

$('p').css('color', 'red !important') // 不會有作用