IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    jquery prop()和attr()的用法区别

    phpvar发表于 2016-09-30 10:37:04
    love 0
    在“怎样用jQuery来获取outerHTML属性?”这篇文章中我们有用到jQuery里面的prop()方法,现在我们来说下jquery prop()和attr()的用法区别。 Attributes vs. Properties attributes(属性)和properties(特性)之间的差异在特定情况下是很重要,它们对应的jquery方法是attr()和prop()。 jQuery 1.6之前 ,.attr()方法在取某些 attribute 的值时,会返回 property 的值,这就导致了取值结果的不一致。从 jQuery 1.6 开始, .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。 就拿复选框checkbox来说:attr()实际对应的是defaultChecked属性(attributes属性),而且仅用于设置复选框最初的值,attr()值(attributes属性)不会因为复选框的状态而改变,而prop()(property特性)会因为复选框的状态而改变。因此,  跨浏览器兼容的方法来确定一个复选框是否被选中,该使用prop()(property特性)。 上代码,看实例就明白啦 ↓ [runcode]



    [/runcode] 从上面代码的运行结果可看出:.attr()方法在取input元素checked状态时,会返回checked 和 undefined 2种状态,而不是我们想要的checked属性布尔值(true & false);而.prop()方法运行结果才是我们想要的! 也就是说: .prop()方法设置元素特性值非常方便,当设置selectedIndex, outerHTML, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 或 defaultSelected必须使用这个方法,如设置input元素的 disabled 和 checked 属性等; .attr()方法仅用于设置HTML标签的attribute属性值,如存取input元素的 value 属性值。 我们可以这样查看元素所有的properties(特性)值: console.log($(ele)[0]),如图: 20160930183027 看到这里,这就很好的解释了为什么我们能用$(ele).prop("outerHTML")、$(ele).prop("innerHTML")、$(ele).prop("className","test abc");这样的写法去获取html标签元素啦!!


沪ICP备19023445号-2号
友情链接