jQuery中attr()和prop()函数用法示例的详细说明(有用法差异)

本文说明了attr()和prop()函数在jQuery中的用法。分享给大家参考，如下：

1.jQuery的attr()方法。

在jquery中使用Attr()方法来获取和设置元素属性。attr是attribute的缩写。在jQuery DOM操作中经常用到attr()，attr()有四个表达式。

1.attr(属性名)//获取属性的值(获取第一个匹配元素的属性值。这个方法可以很容易地从第一个匹配的元素中获取属性值。如果元素没有相应的属性，它将返回undefined。)

2.attr(属性名，属性值)//设置属性的值(为所有匹配的元素设置一个属性值。)

3.attr(属性名，函数值)//设置属性的函数值(为所有匹配的元素设置一个计算属性值。不是提供一个值，而是提供一个函数，由这个函数计算的值被用作属性值。)

4.attr(properties) //为指定元素设置多个属性值，即：{属性名1 :“属性值1”，属性名2 :“属性值2”，}.(这是在所有匹配元素中批量设置许多属性的最佳方式。请注意，如果要设置对象的类属性，必须使用“类名”作为属性名。也可以直接用‘class’或‘id’。)

示例代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title jquery/title script src=' http : js/jquery-1 . 4 . 2 . min . js ' language=' JAVAScript ' type=' text/JAVAScript '/script style p { color 3360 red } Li { color : }中的Attr()方法。}.丽丽{ font-weight : bold；color:red} # Lili { font-weight : bold；color:red}/style/head dyp title='你最喜欢的水果是什么'你最喜欢的水果是什么？/pulli title='苹果汁' apple /lili title='橙汁' alt='123' orange /lili title='菠萝汁'菠萝/Li/ulscript./script/body html 1 . attr(name)//获取属性的值。

1.1使用attr(名称)获取标题值：

scriptalert($('ul li:eq(1)')。attr(' title ')；/script结果：

1.2使用attr(名称)获取alt值：

scriptalert($('ul li:eq(1)')。attr(' alt ')；/script结果：

2.attr(名称，值)//设置属性的值。

2.1使用attr(name，value)将标题值修改为：不吃橘子。

脚本$(“ul li: eq(1)”)。attr ('title '，'不吃橘子')；alert($('ul li:eq(1)')。attr(' title ')；/script结果：

Attr (name，fn)//设置属性的函数值。

3.1将alt属性值设置为title属性值。

脚本$(“ul li: eq(1)”)。attr('title '，function(){ return this . alt })；alert($('ul li:eq(1)')。attr(' title ')；/script结果：

4.attr(properties) //以“name/value”的形式设置一个对象作为所有匹配元素的属性。

4.1获取ul中第二个li设置的标题和alt属性。

脚本$(“ul li: eq(1)”)。attr ({title : '不要喝橙汁'，alt: '不是123 ' })；alert($('ul li:eq(1)')。attr(' title ')；alert($('ul li:eq(1)')。attr(' alt ')；/script结果：

4.2获得ul第二个li设置等级。

脚本$(“ul li: eq(1)”)。attr({ class name : ' Lili ' })；/script结果：

4.3获取ul中的第二个li设置id。

脚本$(“ul li: eq(1)”)。attr({ id : ' Lili ' })；/script结果：

4.4获得ul中的第二种li设置样式。

脚本$(“ul li: eq(1)”)。attr({ style : ' color : red ' })；/script结果：

在li中添加alt是错误的，它只能用于img、区域和输入元素(包括applet元素)。对于输入元素，alt属性旨在替换提交按钮的图片。这里为了详细解释attr()方法，没有合适的属性，所以以alt为例，仅供学习参考attr()方法的用法。

在这个描述中，alt和tite的区别。

Alt:这是用来描述图形的文字。当图片无法显示时，将显示该文本而不是图片。当鼠标在图片上移动时，这些单词也会显示出来。Title:是鼠标放上后显示的文本。

那么如何删除属性呢？

jquery中删除属性的关键词是： removeAttr。注意A是大写的。看看如何使用：这也是用法1中的html代码。我想删除李的标题属性，所以这是：

脚本$(“ul li: eq(1)”)。remove attr(' title ')；/script就这么简单。attr实际上是原生js中getAttribute的简化实现，removeAttr是removeAttribute的缩写。

有没有类似attr()的属性？

jquery中的Val()类似，$(this)。val()；获取元素节点的值，相当于$(this)。attr(' value ')；$(这个)。val(值)；设置元素节点的值，相当于$(this)。attr('value '，value)；

二、jQuery的prop()方法：

prop()函数用于设置或返回当前jQuery对象匹配的元素的属性值。

该函数属于一个jQuery对象(实例)。如果需要删除DOM元素的属性，请使用removeProp()函数。

语法

这个函数是在jQuery 1.6中添加的。prop()函数有两种用途：

用法1:

jqueryobject . prop(propertyName[，value])设置或返回指定属性property name的值。如果指定了value参数，则意味着propertyName属性的值被设置为value；如果未指定值参数，则返回属性propertyName的值。

参数值也可以是函数，由prop()根据所有匹配的元素执行，函数中的这个指针会指向对应的DOM元素。Prop()还为函数传入了两个参数：第一个参数是匹配元素中元素的索引，第二个参数是元素的propertyName属性的当前值。该函数的返回值是为元素的propertyName属性设置的值。

用法2:

JQueryObject.prop(object)以对象的形式同时设置任意数量属性的值。对象的每个属性对应于propertyName，属性的值对应于value。

注意：prop()函数的所有“设置属性”操作都是针对当前jQuery对象匹配的每个元素；所有“读取属性”操作仅针对第一个匹配元素。参数

请根据前面语法部分定义的参数名称找到对应的参数。

描述由参数属性名称字符串类型指定的属性名称。该值可以是由类型/对象/函数指定的属性值，也可以是返回属性值的函数。由对象类型指定的对象用于封装多个键值对并同时设置多个属性。参数值可以是任何类型，包括对象和数组。

返回值

prop()函数的返回值为任意类型，返回值的类型取决于当前prop()函数是执行“设置属性”操作还是“读取属性”操作。

如果prop()函数执行‘设置属性’操作，则返回当前jQuery对象本身；如果是“读取属性”操作，则返回读取属性值。

如果当前的jQuery对象匹配多个元素，当属性值被返回时，prop()函数只将第一个匹配的元素作为条件。如果元素没有指定的属性，它将返回undefined。

prop()和attr()的主要区别在于prop()函数针对的是DOM元素(JS Element对象)的属性，而attr()函数针对的是DOM元素对应的文档节点的属性。有关详细信息，请参见jQuery函数attr()和prop()之间的区别。

需要注意的事项

1.如果通过prop()函数改变了input和button元素的type属性，那么在大多数浏览器中都会抛出一个错误，因为后期一般不允许改变该属性。

2.如果使用prop()函数操作表单元素的选中、选中、禁用等属性，如果元素被选中(或禁用)，将返回true否则，它将返回false(意味着HTML中没有这样的属性)。

3.prop()函数还可以在DOM元素的Element对象上设置或返回一些属性，如tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected。

4.在IE9及更早的版本中，如果用prop()函数设置的属性值不是简单的原值(String、Number、Boolean)，并且在对应的DOM元素被破坏之前没有移除该属性，可能会导致内存泄漏。如果您只想存储数据，建议您使用data()函数来避免内存泄漏。

示例描述

以下面的HTML代码为例：

div id=' n1 ' P id=' N2 ' class=' demo test ' data-key=' UUID ' data _ value=' 1235456465 ' CodePlayer/P输入id=' n3 ' name=' order _ id ' type=' checkbox ' value=' 1 '输入id=' n4 ' name=' order _ id ' type=' checkbox ' checking=' checking ' value=' 2 '/div我们编写以下jQuery代码：

var $ N2=$(' # N2 ')；prop()操作针对的是Element(元素对象)的属性，而不是元素节点(HTML文档)的属性document . writeln($ N2 . prop(' data-key '))；//undefineddocument . writeln($ N2 . prop(' data _ value '))；//undefinedddocument . writeln($ N2 . prop(' id '))；//N2 document . writeln($ N2 . prop(' tagName '))；//pdocument . writeln($ N2 . prop(' class name '))；//demo test document . writeln($ N2 . prop(' innerHTML '))；//codeplayerdocument . writeln(type of $ N2 . prop(' GetAttribute '))；//function//prop()为Elements(元素对象)设置属性，所以也可以通过元素本身直接访问$n2.prop('prop_a '，' CodePlayer ')；document.writeln($n2[0])。prop _ a)；//CodePlayervar N2=document . getelementbyid(' N2 ')；document . writeln(N2 . prop _ a)；//CodePlayer//同时以对象的形式设置多个属性。属性值可以是任何类型，如对象和数组，$ n2.prop ({prop _ b:' baike '，prop _ c: 18，site3360 {name3360' CodePlayer '，URL 3360 '/www . JB)。document.writeln($n2[0])。prop _ c)；//18 document . writeln($ N2[0]. site . URL)；////www.jb51.net///取消选中所有复选框(未选中的将被选中，选中的将被取消选中)$(' input 3360 checkbox ')。prop ('checked '，function (index，old value) {return！oldValue});附件：jquery中attr和prop的区别。

在jquery的较高版本中引入prop方法后，应该什么时候使用prop？何时使用attr？它们有什么区别？这些问题就出现了。

关于它们之间的区别，网上有很多答案。在这里谈谈我的心，我的心很简单：

当处理HTML元素的固有属性时，使用prop方法。对于我们自己定制的HTML元素的DOM属性，在处理的时候，使用attr方法。

以上描述可能有点模糊，只举几个例子。

a href=' http://www . Baidu.com ' target=' _ self ' class=' BTN ' Baidu/a

在这个例子中，元素a的DOM属性包括“href、target和class”，这是元素a本身携带的属性，包含在W3C标准中，也可以在IDE中智能提示。这些属性称为固有属性。处理这些属性时，建议使用prop方法。

A href=' #' id=' link1 '操作=' delete' delete/a。

在这个例子中，元素A的DOM属性是“href、id和action”。显然，前两个是固有属性，而后一个“动作”属性是自定义的。元素A本身没有这个属性。这是自定义的DOM属性。在处理这些属性时，建议使用Attr方法。使用prop方法取值和设置属性值时，会返回未定义的值。

再举一个例子：

输入id=' ch k1 ' type=' checkbox '/是否可见？input id=' chk 2 ' type=' checkbox ' checking=' checked '/是否可见？

对于复选框、单选、选择等元素，选择的属性对应“选中”和“选中”，这也是固有属性，所以要用正确的方法才能得到正确的结果。

$ ('# chk1 ')。prop ('checked')==false $ ('# chk2 ')。prop ('checked')==true如果上面使用了attr方法，将会出现：

$ ('# chk1 ')。attr('选中')==undefined $ ('# chk2 ')。attr ('checked')==' checked '希望这篇文章对大家的jQuery编程有所帮助。