建議學(xué)習(xí)時(shí)長(zhǎng)： 60分鐘
學(xué)習(xí)方式：深入
學(xué)習(xí)目標(biāo)
- 知道如何獲取和設(shè)置元素的屬性，樣式，尺寸，位置，內(nèi)容。
- 知道如何獲取和設(shè)置表單元素的值。
- 知道如何控制元素的顯示和隱藏。
詳細(xì)介紹
屬性
- .attr('屬性名' [,值] )
- .prop('屬性名' [,值] )
- removeAttr('屬性名') 刪除屬性
attr 和 prop 的區(qū)別是： attr 在 DOM 中, 如 $('a').attr('title'), DOM: <a title="aaa"></a>)，prop 不一定在 DOM 中, $('a').attr('tagName'),但 a 沒有 tagName 這個(gè)屬性。
用 prop 的屬性用
- checked
- outerHTML
- tagName
樣式
.css
$el.css('color')
$el.css('color', 'red')
$el.css({
'font-size': '16px',
'border': 'none'
})
尺寸
- .height
- .innerHeight: height + 垂直方向的padding
- .outerHeight( [includeMargin ]): height + 垂直方向的 padding，border + 可選的 margin
- .width
- .innerWidth
- .outerWidth
位置
- position: 返回元素相對(duì)于其定位父元素（position為relative，absolute和fixed）的位置。包括屬性left和top。
- offset: 返回元素相對(duì)于瀏覽器窗口的位置。包括屬性left和top。
- .offset(坐標(biāo)/返回坐標(biāo)的函數(shù))：設(shè)置元素相對(duì)于瀏覽器窗口的位置。
注意：jQuery獲得不了隱藏元素的position
是否滿足某個(gè)條件
.is。如是否可見
$(selector).is(':visible')
元素的innerHTML
- .html()
- .html(html)
$(selector).html()
獲取元素的標(biāo)簽名
$(selector).prop("tagName").toLowerCase()
$(selector).prop("tagName")返回的為全大寫的
獲取元素的outerHTML
$(selector).prop('outerHTML')
獲取元素的文本內(nèi)容
$(selector).text()
刪除元素
$(selector).remove()
刪除元素的內(nèi)容
$(selector).empty()
數(shù)據(jù)
.data
元素的顯示隱藏
- .show
- .hide
- .toggle 切換顯示，隱藏的狀態(tài)
- 以動(dòng)畫的方式，顯示隱藏
- fadeIn, fadeOut, fadeToggle
- slideUp, slideDown, slideToggle
