jQ的dom属性操作
发布在# 菜鸟解读 jQuery #2014年5月27日view:4579
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

本篇介绍 $().prop()
prop是针对dom属性进行操作的api,
和attr不同的是,attr是用来操作html属性,也就是直接写在html标签上的key,value
而prop是通过js获取dom元素后,对dom对象进行操作的一些属性,典型的就是"selectedIndex"
"selectedIndex" 可以通过, js的dom属性访问, 进行获取, 意思是获取选中项的索引

jQuery.fn.extend({
    prop: function( name, value ) {
        return jQuery.access( this, jQuery.prop, name, value, arguments.length > 1 );
    },
    removeProp: function( name ) {
        name = jQuery.propFix[ name ] || name;
        return this.each(function() {
            try {
                this[ name ] = undefined;
                // ie在删除某些属性的时候将会抛出异常,所以在删除前先将其设置为 undefined
                // 比如移除ie的window上的属性
                delete this[ name ];
            } catch( e ) {}
        });
    }
});
jQuery.extend({
    //...
    propFix: {
        tabindex: "tabIndex",
        readonly: "readOnly",
        "for": "htmlFor",
        "class": "className",
        maxlength: "maxLength",
        cellspacing: "cellSpacing",
        cellpadding: "cellPadding",
        rowspan: "rowSpan",
        colspan: "colSpan",
        usemap: "useMap",
        frameborder: "frameBorder",
        contenteditable: "contentEditable"
    },
    prop: function( elem, name, value ) {
        var ret, hooks, notxml,
            nType = elem.nodeType;
        // 文本节点 || 注释节点 || 属性节点
        if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
            return;
        }
        //不是xml对象
        notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

        if ( notxml ) {
            name = jQuery.propFix[ name ] || name;
            //同attr应用的的修正方法
            hooks = jQuery.propHooks[ name ];
        }
        //下面的就同attr一样的逻辑了
        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 ];
            }
        }
    },
    propHooks: {
        tabIndex: {
            get: function( elem ) {
                //在获取tabindex属性时,tabIndex不总是返回正确的值,
                //所以这里通过属性节点来进行值的获取
                var attributeNode = elem.getAttributeNode("tabindex");
                //属性节点存在 && 被设置过 ? 返回值 : 
                //rfocusable = /^(?:button|input|object|select|textarea)$/i 
                //rclickable = /^a(?:rea)?$/i
                return attributeNode && attributeNode.specified ?
                    parseInt( attributeNode.value, 10 ) :
                    rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ?
                    0 :
                    undefined;
            }
        }
    }
});
if ( !jQuery.support.optSelected ) {
    jQuery.propHooks.selected = jQuery.extend( jQuery.propHooks.selected, {
        get: function( elem ) {
            var parent = elem.parentNode;
            if ( parent ) {
                //读取父亲元素的selectedIndex来触发修正option元素的选中状态;
                parent.selectedIndex;
                // http://www.w3school.com.cn/tags/tag_optgroup.asp,
                // select>optgroup*2>option*3
                if ( parent.parentNode ) {
                    parent.parentNode.selectedIndex;
                }
            }
            //这里只是做了修正,依旧返回null
            return null;
        }
    });
}

prop的hooks不多,代码逻辑也较为好理解;

感谢您的阅读,欢迎留言:提问,交流,斧正

评论
发表评论
暂无评论
WRITTEN BY
前端狮子
JS前端开发工程师 :喜欢研究js,nodejs,html5; 希望结交更多朋友~
TA的新浪微博
PUBLISHED IN
# 菜鸟解读 jQuery #

本栏解读的jQ为1.7.2版本。 本人也是刚开始读起源码,在这里分享下成长的心得。 本人能力有限,也是接触JS不久的初学者,定会有不少解析不全不够明朗【甚至BUG】的地方, 希望各位牛牛多多留言斧正 感谢阅读 ps:由于工作不定时繁忙,本人也无法定期更新,但是会尽量抽时间学习,分享给大家

我的收藏