位置: 编程技术 - 正文
jQuery获取attr()与prop()属性值的方法及区别介绍(jquery获取outerhtml)
编辑：rootadmin推荐整理分享jQuery获取attr()与prop()属性值的方法及区别介绍(jquery获取outerhtml)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery attr获取属性值,jquery获取a的href,jquery获取tr下的td值,jquery获取td,jquery获取tr下的td值,jquery获取tr的个数,jquery获取tr的个数,jquery获取attr属性,内容如对您有帮助，希望把文章链接给更多的朋友！
今天在项目中使用<select></select>下拉菜单时，使用juery操作，使页面加载完菜单默认选中的值为2,我一开始的操作如下：
咋一看好完美，木问题，但是我发现在Safari浏览器中，根本不起作用！！仔细查看一番发现,在Safari浏览器中，属性确实是设置成功了，既value=2的那一项确实是<option value="2" selected="selected">2</option>。那问题出在哪呢？冷静，不要方，万能的stack说只要把attr改成prop就行了，卧槽还真行了，这是啥诡异事件。好吧，我们需要来研究研究了,不用想，肯定是需要祭出官方文档了。
1.attr() ： 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。 &#;.attr( attributeName ) &#;.attr( attributeName )
&#;.attr( attributeName, value ) &#;.attr( attributeName, value )&#;.attr( attributes )&#;.attr( attributeName, function(index, attr) )
2.prop() ： 获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。 &#;.prop( propertyName ) &#;.prop( propertyName )
&#;.prop( propertyName, value ) &#;.prop( propertyName, value )&#;.prop( properties )&#;.prop( propertyName, function(index, oldPropertyValue) )
看出区别了吗，没错，是参数有区别，attr()传入的是attributeName，而prop()传入的是propertyName,现在我们的问题转移了，我们需要研究的是attributeName和propertyName之间的区别了。
Attributes vs. Properties
在这里，我们可以将attribute理解为“特性”，property理解为为“属性”从而来区分俩者的差异。如果把DOM元素看成是一个普通的Object对象，这个对象在其定义时就具有一些属性（property），比如把select的option当做一个对象：
现在，我们一目了然了，attribute是一个特性节点，每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点，它是一个类数组的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。而property就是一个属性，是一个以名值对(name=”value”)的形式存放在Object中的属性。
回到一开始的问题，根据W3C的表单规范 ，在selected属性（property）是一个布尔属性， 这意味着,如果这个特性（attribute）存在， 即使该特性没有对应的值，或者被设置为空字符串值，或甚至是"false"，相应的属性（property）都还是为true。 selected特性（attribute）值不会因为复选框的状态而改变，而selected属性（property）会因为复选框的状态而改变。因此，跨浏览器兼容的检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态，请使用.prop()方法。
jquery中attr和prop的区别介绍
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。
关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：
&#;对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
&#;对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
上面的描述也许有点模糊，举几个例子就知道了。
这个例子里<a>元素的DOM属性有“href、target和class"，这些属性就是<a>元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。
这个例子里<a>元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。
再举一个例子：
像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
如果上面使用attr方法，则会出现：
jQuery实现下拉菜单（内容为时间）的实时更新及图表的随动更新的方法 工程分享：模块1：下拉菜单的实时显示最近一周时间：//显示日期下拉选框for(vari=0;i7;i++){$("#choose1option:eq("+i+")").html(GetDateStr(-i));$("#choose1option:eq("+i+")").a
内容滑动切换效果jquery.hwSlide.js插件封装 经过前两部分的讲解，我们大概知道内容滑动切换的基本开发思路和技巧，现在我们在第三部分将前面两部分的代码进行优化，封装成一个jQuery插件：jq
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果 Flexslider是一款基于的jQuery内容滚动插件。它能让你轻松的创建内容滚动的效果，具有非常高的可定制性。开发者可以使用Flexslider轻松创建各种图片轮播
