建议学习时长： 60分钟
学习方式：深入
学习目标
- 知道如何获取和设置元素的属性，样式，尺寸，位置，内容。
- 知道如何获取和设置表单元素的值。
- 知道如何控制元素的显示和隐藏。
详细介绍
属性
- .attr('属性名' [,值] )
- .prop('属性名' [,值] )
- removeAttr('属性名') 删除属性
attr 和 prop 的区别是： attr 在 DOM 中, 如 $('a').attr('title'), DOM: <a title="aaa"></a>)，prop 不一定在 DOM 中, $('a').attr('tagName'),但 a 没有 tagName 这个属性。
用 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: 返回元素相对于其定位父元素（position为relative，absolute和fixed）的位置。包括属性left和top。
- offset: 返回元素相对于浏览器窗口的位置。包括属性left和top。
- .offset(坐标/返回坐标的函数)：设置元素相对于浏览器窗口的位置。
注意：jQuery获得不了隐藏元素的position
是否满足某个条件
.is。如是否可见
$(selector).is(':visible')
元素的innerHTML
- .html()
- .html(html)
$(selector).html()
获取元素的标签名
$(selector).prop("tagName").toLowerCase()
$(selector).prop("tagName")返回的为全大写的
获取元素的outerHTML
$(selector).prop('outerHTML')
获取元素的文本内容
$(selector).text()
删除元素
$(selector).remove()
删除元素的内容
$(selector).empty()
数据
.data
元素的显示隐藏
- .show
- .hide
- .toggle 切换显示，隐藏的状态
- 以动画的方式，显示隐藏
- fadeIn, fadeOut, fadeToggle
- slideUp, slideDown, slideToggle
