jQuery属性选择器.attr()和.prop()两种方法

在判断表单单选框是否被选中时,通常会想到使用$(‘#checkbox‘).attr(‘checked‘)来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined

原来jQuery在1.6版本以后对属性选择器做了一些调整,分为.attr().prop()两种方法。为的是区分元素attributes和properties之间模棱两可的东西。

那么它们之间有什么区别呢?

官方的解释是:

Attributes vs. Properties

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

其实也就是对DOM元素中的特性(attribute)和属性(property)做了明确的区分。

所以判断checkbox是否被选中,正确的方法应该是:

 $(‘#checkbox‘).prop(‘checked‘); // jQuery 1.6+
 $(‘#checkbox‘).attr(‘checked‘); // 在 1.6.1 和 <=1.5 中使用,但不包括 1.6 的版本
 $(‘#checkbox‘).is(‘:checked‘); // 所有版本
 $("#ck:checked").length==1; // 所有版本
网友的百度问答:
prop()获取匹配的元素的属性值。这个方法是jquery1.6以后出来的,用来区别之前的.attr()方法.

区别最大的一点就是:布尔型的属性,1.6以后都是用.prop()方法就好了。这个布尔型的属性,再解释一下,是属性值只有true|false的属性。还有种情况就是只添加属性名,不需要写属性值的就可以生效的也同样使用.prop()方法。比如:checked、disable这样的,其实它们说到底还是属于布尔型的属性。

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

<参考:http://www.vipaq.com/Article/View/blog/356.html>

时间: 2024-12-09 19:50:15

jQuery属性选择器.attr()和.prop()两种方法的相关文章

jQuery事件函数位置放置的两种方法

jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法. 通常会把 jQuery 代码放到 <head>部分的事件处理方法中: 实例 1 <html> 2 <head> 3 <script type="text/javascript" src="jquery.js"></script> 4 <script typ

【Jquery】jQuery获取URL參数的两种方法

jQuery获取URL參数的关键是获取到URL,然后对URL进行过滤处理,取出參数. location.href是取得URL.location.search是取得URL"?"之后的字符串,也就是说參数部分. 方法一: function request(paras){ var url = location.href; var paraString = url.substring(url.indexOf("?")+1,url.length).split("&a

关于jquery无间隙水平滚动的两种方法

1.利用scrollLeft方法 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content="&q

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

jquery获取自定义属性(attr和prop)实例介绍

jquery获取自定义属性(attr和prop)实例介绍 作者: 字体:[增加 减小] 类型:转载 jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式 $("form").attr("check"); $("form").prop("check"); 两种都可以,不过新版jquery推荐第二种,两个在其他

Js类的静态方法与实例方法区分以及jQuery如何拓展两种方法

上学时C#老师讲到对象有两类方法,静态方法(Static)和实例方法(非Static),当时不理解静态是为何意,只是强记. 后来从事了前端的工作,一直在对类(即对象,Js中严格来说没有类的定义,虽众所周知,这里还是赘述一番,以免产生歧义)的操作上,严重缺乏整体概念,最近看extetnd中再次提到拓展静态方法与实例方法,故而再次百度,才幡然领悟,其实一直有用,只是不知其专业术语呀,哈哈~ 静态方法,属于类的方法,即类可以直接调用的方法.为类所有实例化对象所共用(但不能用实例对象之间调用),所以静态

jQuery返回顶部的两种方法(包括go-top.js)

jQuery实现网页"返回顶部"的功能,相信见到这种效果已经不稀奇了吧;那究竟如何实现呢?方法还是挺多了,先介绍两种简单的: 第一种,只使用jquery插件来实现,下面是一个完整的代码例子,有兴趣的自己摸索吧:前端UI分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

积跬步,聚小流------实例分析jquery开发插件两种方法的区别

1.简介 jquery为开发插件提供了两个方法: *  jquery.extend(object);   为jquery类本身添加新的方法 *  jquery.fn.extend(object);  用来为jquery对象添加新的方法 2.理论介绍 分析这两个方法,不同点就在于中间多了一个.fn,那么这个.fn又是什么意思呢? $.fn是指jquery的命名空间,加了fn的方法和属性,会对jquery的每一个实例有效. 换种说法来解释的话: jquery本身是一个类,有它的属性和方法,赤裸裸的"

div随页面滚动遇顶固定的两种方法(js&amp;jQuery)

一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫"层的智能浮动效果".目前我们在国内的商业网站上就常常看到这样的效果了.例如淘宝网的搜索结果页的排序水平条,在默认状态时,该工具条是跟随页面滚动的,如下图: 而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当我们下拉屏