2012年6月29日星期五

用jQuery为页面添加活力

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

    prepend(content)

    before(content)

    after(content)

    appendTo(targets)

    prependTo(targets)

    insertBefore(targets)

    insertAfter(targets)

    包裹与反包裹元素

     

    删除元素

     

    复制元素

     

    替换元素

     

    处理表单元素值


    TAG:
发帖者 时间：