jQuery中attr(),和prop()的区别

    prop()是jQuery 1.6中新出的一个方法,其用法和attr类似,因此也就引起了质疑,为什么attr()已经存在还要引入prop()呢?两者有什么区别?

根据官方的建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()


来看一段代码:

一个复选框

html:

<label for="iii"><input type="checkbox" id="iii">选</label>

jQuery:

console.log($("#iii").prop("checked"),$("#iii").attr("checked"))

浏览器中显示如下:


可以看出prop()输出结果为 false ;attr() 结果为 undefined

input节点checked属性为 false。


结论先不说。。继续看下面的图。

接着用attr()设置checked属性

$("#iii").attr({
        checked: 'checked'
    })

浏览器中显示如下:


可以看出,浏览器说显示的DOM节点中添加了属性节点checked

而prop()结果为true;attr() 结果为 checked。

input节点checked属性为 true。


下面换 prop()设置checked属性

$("#iii").prop({
        checked: 'checked'
    })

浏览器中显示如下:



与attr()添加结果对比可以看出,浏览器说显示的DOM节点中并没有属性节点checked

而prop()结果为true;attr() 结果为 undefined。

input节点checked属性为 true。


由以上三个结果对比可以推测出:

attr()操作的是元素属性节点,元素节点上没有属性节点checked时,返回的必然是undefined;

prop()操作的是元素节点的 节点属性 checked的值


或者直接分析jQuery该方法源码,推荐:https://www.cnblogs.com/zhwl/p/3520162.html

猜你喜欢

转载自blog.csdn.net/zsy_snake/article/details/80804119