用jQuery为页面添加活力
使用元素属性与特性
属性是javascript对象的内在性质,每个属性都包含名称和值。
特性用于描述DOM元素标记中设定的值
浏览器会读取并解析元素的标记,以便创建在DOM中表现此元素的javascript对象实例。特性被收集到一个列表中,这个列表保存在DOM元素实例中的attributes属性中。除了在列表中保存特性,每个DOM对象还被赋予了多个属性,包括一些描述元素标记中特性的属性。特性值不仅在attributes属性中,还存在于少数属性中。
操作元素属性
访问包装集单个元素的方法:
- 数组索引:$(something)[0]
- get(), toArray()
- each(), map()
- eq(), :eq过滤器
- 通过某些方法(比如not()和filter())的回调函数,包装集元素将作为回调函数的上下文。
$('*').each(function (n) { this.id = this.tagName + n})
获取特性值
attr(name)
自定义特性:html5将以data-开头的特性看作为自定义特性。
attr中特性的名称是不区分大小写的。
attr使用规范化的特性名称:cellspacing, class, colspan, cssFloat, float, for, frameborder, maxlength, readonly, rowspan, styleFloat, tabindex, usemap.
设置特性值
attr(name,value)
$('*').attr('title', function (index, previousValue) { return previousValue + ' I am element ' + index + ' and my name is ' + (this.id || 'unset')})
attr(attributes)
$('input').attr( { value: '', title: 'Please enter a value' } )
ie浏览器不允许修改input元素的name和type特性。
删除特性值
removeAttr(name)
有用的实例
- 强制在新窗口中打开链接
$('a[href^="http://"]').attr('target', '_blank')
- 解决可恶的双重提交
$('form').submit(function () { $(':submit', this).attr('disabled', 'disabled')})
disabled特性存在就表示此元素被设置为禁用状态,可以删除此特性,也可以使用attr函数设置disabled特性为false来启用此元素。
在元素上存储自定义数据
data(name, value)
data(name)
removeData(name)
改变元素样式
添加和删除类名
addClass(names)
removeClass(names)
toggleClass(names)
例子:在元素之间切换显示效果
function swapThem() { $('tr').toggleClass('striped')}$(function(){ $('table tr:nth-child(even)').addClass('striped') $('table').mouseover(swapThem).mouseout(swapThem)}
toggleClass(names,switch)
hasClass(name)
获取和设置样式
css(name,value)
$('div.expandable').css('width', function (i, width) { return width + 20 })
$('#opa').css('opacity', 0.5) //0.0 <= value && value <= 1.0
css(properties)
可以使用函数作为css属性的值,以确定将要应用的值。
css(name)
- 获取和设置尺寸
width(value); height(value)
width(); height()方法计算并返回元素的尺寸。
**innerHeight(); innerWidth(); outerHeight(margin); outerWidth(margin)
- 定位和滚动
offset()
position()
scrollLeft(); scrollLeft(value); scrollTop(); scrollTop(value)
设置元素内容
替换html或者文本内容
html(); html(content)
text(); text(content)
移动和复制元素
append(content)
prepend(content)
before(content)
after(content)
appendTo(targets)
prependTo(targets)
insertBefore(targets)
insertAfter(targets)
包裹与反包裹元素
删除元素
复制元素
替换元素
处理表单元素值
TAG: