您的位置：首页 > Web前端 > jquery > 正文

jquery中prop和attr的区别

更多时间：2014-3-4 类别：Web前端浏览量：1125

jquery中prop和attr的区别

jquery中prop和attr的区别

一、jquery attr()方法有4个表达式

1. attr(属性名)

获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）

2. attr(属性名, 属性值)

设置属性的值（为所有匹配的元素设置一个属性值。）

3. attr(属性名,函数值)

设置属性的函数值（为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。）

4.attr(properties)

给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)

二、jquery中attr方法代码

JScript 代码复制



attr: function( elem, name, value, pass ) ...{
    var ret, hooks, notxml,
        nType = elem.nodeType;

    // don't get/set attributes on text, comment and attribute nodes
    if ( !elem || nType === 3 || nType === 8 || nType === 2 ) ...{
        return;
    }

    if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) ...{
        return jQuery( elem )[ name ]( value );
    }

    // Fallback to prop when attributes are not supported
    if ( typeof elem.getAttribute === "undefined" ) ...{
        return jQuery.prop( elem, name, value );
    }

    notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

    // All attributes are lowercase
    // Grab necessary hook if one is defined
    if ( notxml ) ...{
        name = name.toLowerCase();
        hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
    }

    if ( value !== undefined ) ...{

        if ( value === null ) ...{
            jQuery.removeAttr( elem, name );
            return;

        } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) ...{
            return ret;

        } else ...{
            elem.setAttribute( name, value + "" );
            return value;
        }

    } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) ...{
        return ret;

    } else ...{

        ret = elem.getAttribute( name );

        // Non-existent attributes return null, we normalize to undefined
        return ret === null ?
            undefined :
            ret;
    }
}

三、jquery中.prop()

1、.prop( propertyName )

获取匹配集合中第一个元素的Property的值

2、

.prop( propertyName, value )

.prop( map )

.prop( propertyName, function(index, oldPropertyValue) )

给匹配元素集合设定一个或多个属性

四、jquery中prop方法代码

JScript 代码复制


prop: function( elem, name, value ) ...{
    var ret, hooks, notxml,
        nType = elem.nodeType;

    // don't get/set properties on text, comment and attribute nodes
    if ( !elem || nType === 3 || nType === 8 || nType === 2 ) ...{
        return;
    }

    notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

    if ( notxml ) ...{
        // Fix name and attach hooks
        name = jQuery.propFix[ name ] || name;
        hooks = jQuery.propHooks[ name ];
    }

    if ( value !== undefined ) ...{
        if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) ...{
            return ret;

        } else ...{
            return ( elem[ name ] = value );
        }

    } else ...{
        if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) ...{
            return ret;

        } else ...{
            return elem[ name ];
        }
    }
}

attr方法里面，最关键的两行代码，elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name )，很明显的看出来，使用的DOM的API setAttribute和getAttribute方法操作的属性元素节点。

prop方法里面，最关键的两行代码，return ( elem[ name ] = value )和return elem[ name ]，你可以理解成这样document.getElementById(el)[name] = value，这是转化成JS对象的一个属性。

五. 特性（properties）和属性（attributes）有何区别？

DOM对象大部分的property都有对应的attribute，名字也基本一样（也有例外，如“class”这个attribute对应的property名字为“className”），这些property也和其对应的attribute保持一样的状态或值。但一些Boolean类型的属性(如checked, selected, disabled等)有些特殊，其attribute只保留初始值(默认值), property才是当前最新的状态或值。如一个默认勾选的checkbox，当你在页面去除勾选的时候，checked这个property已由true变为false，而checked这个attribute仍然保持“checked”这个初始值。由此可见attribute和property完全不是同一个东西，但“通用”的attr方法似乎在某种程度上模糊了这个区别。

六. attr()和prop()有何区别？

使用prop的时候，返回值是标准属性，true/false，比如$('#checkbox').prop('disabled')，不会返回“disabled”或者“”，只会是true/false。当然赋值的时候也是如此。使用attr,如disabled='disabled'时,为true,没有选中时,则为undefined。如此，我们便统一了所有操作，无论是从语法上还是语义上。

.prop()方法应该被用来处理boolean attributes/properties以及在html(比如：window.location)中不存在的properties。其他所有的attributes可以而且应该继续使用.attr()方法来进行操作。

七、什么时候使用attr()，什么时候使用prop()？

1、添加属性名称该属性就会生效应该使用prop();
2、是有true,false两个属性使用prop();
3、其他则使用attr();

4、简单的说，那些只添加属性名不添加属性值就会生效，或者是，只存在true/false的属性就需要使用prop()方法，比如selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected。

标签：jquery prop attr

上一篇：mvc中@helper的用法

下一篇：JQuery中extend的用法

您可能感兴趣

jquery中prop和attr的区别

jquery中prop和attr的区别

热门推荐

排行榜