用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)

有用的实例

1. 强制在新窗口中打开链接

   $('a[href^="http://"]').attr('target', '_blank')

2. 解决可恶的双重提交

   $('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)

1. 获取和设置尺寸

   width(value); height(value)

   width(); height()方法计算并返回元素的尺寸。

   **innerHeight(); innerWidth(); outerHeight(margin); outerWidth(margin)

2. 定位和滚动

   offset()

   position()

   scrollLeft(); scrollLeft(value); scrollTop(); scrollTop(value)

设置元素内容

替换html或者文本内容

html(); html(content)

text(); text(content)

移动和复制元素

append(content)

$('p').append('<b>some text</b>')
$('p.appendToMe').append($('.appendMe'))

prepend(content)

before(content)

after(content)

appendTo(targets)

prependTo(targets)

insertBefore(targets)

insertAfter(targets)

包裹与反包裹元素

wrap(wrapper)

wrapAll(wrapper)

wrapInner(wrapper)

unwrap()

删除元素

remove(selector)

detach(selector)

empty()

复制元素

clone(copyHandlers)

$('img').clone().appendTo('fieldset.photo')
$('ul').clone().insertBefore('#here')
$('ul').clone().insertBefore('#here').end().hide()

替换元素

replaceWith(content)

$('img[alt]').each(function () {
    $(this).replaceWith('<span>' + $(this).attr('alt') + '</span>')
})

replaceAll(selector)

处理表单元素值

表单元素指的是出现在表单内部的元素，拥有name和value特性，并且在提交表单时，他们的值会作为http请求参数发送到服务器。典型的表单元素如：input, select, textarea

val()

$('[name="radioGroup"]:checked').val()

var checkboxValues = $('[name="checkboxGroup"]:checked').map(
    function () { return $(this).va() }
).toArray()

val(valve)

val(values)

$('input,select').val(['one', 'two', 'three'])