本文实例叙述了jQuery中attr()与prop()函数用法。分享给我们供我们参谋,具体如下:

jQuery中attr()与prop()函数用法实例详解(附用法分别),jqueryattr

本文实例陈说了jQuery中attr()与prop()函数用法。分享给大家供大家参谋,具体如下:

一、jQuery的attr()方法

jquery中用attr()方法来赢得和设置成分属性,attr是attribute(属性)的缩写,在jQuery
DOM操作中会平时利用attr(),attr()有4个表达式。

  1. attr(属性名)
    //获取属性的值(获得第一个相配元素的属性值。通过这几个方法能够低价地从第贰个匹配元素中收获一个个性的值。要是成分未有相应属性,则赶回
    undefined )

  2. attr(属性名, 属性值) //设置属性的值
    (为有着相称的成分设置贰个属性值。)

  3. attr(属性名,函数值) //设置属性的函数值 
    (为富有相配的要素设置叁个乘除的属性值。不提供值,而是提供八个函数,由这些函数总括的值作为属性值。)

4.attr(properties) //给钦赐成分设置三个属性值,即:{属性名一: “属性值一”
, 属性名二: “属性值二” , … …
}。(那是一种在有着相配成分中批量安装过多性质的最棒方法。
注意,纵然您要设置对象的class属性,你不能不选用’className’
作为属性名。只怕你能够直接利用’class’只怕’id’。)

身体力行代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>

1.attr(name)//获取属性的值

1.1使用attr(name)获取title值:

<script>
alert($("ul li:eq(1)").attr("title"));
</script>

结果:

图片 1

1.2使用attr(name)获取alt值:

<script>
alert($("ul li:eq(1)").attr("alt"));
</script>

结果:

图片 2

  1. attr(name,value)   //设置属性的值

2.1利用attr(name,value)修改title值为:不吃橘柑

<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>

结果:

图片 3

  1. attr(name,fn)  //设置属性的函数值

3.1把alt属性的值设置为title属性的值。

<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>

结果:

图片 4

4.attr(properties)  //将三个“名/值”格局的靶子设置为持有相称成分的性质

4.1获取<ul>里第2个<li>设置title和alt属性。

<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>

结果:

图片 5图片 6

4.2获取<ul>里第2个<li>设置class。

<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

结果:

图片 7

4.3获取<ul>里第2个<li>设置id。

<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

结果:

图片 8

4.4获取<ul>里第2个<li>设置style。

<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

结果:

图片 9

在li中增多alt是荒谬的,它不得不用在img、area和input成分中(满含applet成分)。对于input成分,alt属性目的在于用来替换提交按钮的图样。在此地为了很详细表明attr()方法,未有适用的品质,全数用了alt进行譬如,只供就学仿效attr()方法用法。

在此表达下alt和tite的区分。

alt:这是用来描述图形的文字,当图片不也许出示时,这几个文字会代替图片而被出示。当鼠标移至图片上该些文字亦会展现。
title:是鼠标放上去之后,会显得出来的文字。

那就是说怎么删除属性呢?

jquery中去除属性的严重性词是: removeAttr 注意A是大写的. 看看怎么用的:
同一是用法一中的html代码, 笔者想删掉li的title属性, 那么就好像此:

<script>
$("ul li:eq(1)").removeAttr ("title");
</script>

就像此轻巧, attr 其实正是原生js中 getAttribute 的简化实现, 而removeAttr
正是 removeAttribute 的简写了。

这正是说是否有跟attr()相似的性质呢?

jquery中val()与之接近
$(this).val();获取有个别元金天点的value值,也正是$(this).attr(“value”);
$(this).val(value);设置某些成分节点的value值,相当于$(this).attr(“value”,value);

二、jQuery的prop()方法:

prop()函数用于安装或再次回到当前jQuery对象所相配的成分的属性值。

该函数属于jQuery对象(实例)。假诺供给删除DOM成分的品质,请使用removeProp()函数。

语法

jQuery 1.6 新添该函数。prop()函数有以下两种用法:

用法一:

jQueryObject.prop( propertyName [, value
] )
安装或再次回到钦赐属性propertyName的值。假设钦命了value参数,则象征设置属性propertyName的值为value;若无一点名value参数,则代表回去属性propertyName的值。

参数value还是能够是函数,prop()将基于相称的富有因素遍历实施该函数,函数中的this指针将针对对应的DOM成分。prop()还恐怕会为函数字传送入多少个参数:第二个参数正是该因素在相称成分中的索引,第叁个参数就是该因素propertyName属性当前的值。函数的再次来到值正是为该因素的propertyName属性设置的值。

用法二:

jQueryObject.prop( object )
以目的情势况兼安装任意三个属性的值。对象object的各个属性对应propertyName,属性的值对应value。

注意:prop()函数的有所”设置属性”操作针对的是近些日子jQuery对象所相称的每一个要素;全部”读取属性”的操作只针对第贰个门户万分的成分。
参数

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

参数 描述
propertyName String类型指定的属性名称。
value 可选/Object/Function类型指定的属性值,或返回属性值的函数。
object Object类型指定的对象,用于封装多个键值对,同时设置多项属性。

参数value能够是包蕴对象和数组在内的轻便档次。

返回值

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()函数操作表单成分的checked、selected、disabled等本性,假设该因素被入选(或剥夺),则赶回true,不然(意即HTML中一向不应该属性)重回false。

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>
  <input id="n3" name="order_id" type="checkbox" value="1">
  <input id="n4" name="order_id" type="checkbox" checked="checked" value="2">
</div>

作者们编辑如下jQuery代码:

var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性,而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined
document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function
// prop()设置的属性也是针对元素(Element对象),因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer
// 以对象形式同时设置多个属性,属性值可以是对象、数组等任意类型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://www.bkjia.com/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.bkjia.com/
// 反选所有的复选框(没选中的改为选中,选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

附:jquery中attr和prop的区别

在高版本的jquery引进prop方法后,哪天该用prop?哪一天用attr?它们七个以内有何界别?那个难点就出现了。

关于它们八个的界别,英特网的答案非常多。这里谈谈本人的体会,笔者的体会比相当粗略:

对此HTML成分本人就带有的原始属性,在拍卖时,使用prop方法。
对此HTML成分大家友好自定义的DOM属性,在拍卖时,使用attr方法。

地点的描述大概有个别模糊,举多少个例子就精通了。

<a href=”” target=”_self”
class=”btn”>百度</a>

其一例子里<a>成分的DOM属性有“href、target和class”,这几个属性正是<a>元素本身就带有的习性,也是W3C规范里就含有有这几本性情,大概说在IDE里能够智能提示出的属性,那么些就叫做固有品质。管理那么些属性时,建议接纳prop方法。

<a href=”#” id=”link1″ action=”delete”>删除</a>

其一例子里<a>成分的DOM属性有“href、id和action”,很显明,前两个是固有属性,而前面三个“action”属性是大家精诚团结自定义上去的,<a>成分自个儿是向来不那一个天性的。这种就是自定义的DOM属性。管理这个属性时,提议选取attr方法。使用prop方法取值和装置属性值时,都会重回undefined值。

再举叁个例证:

<input id=”chk1″ type=”checkbox” />是还是不是可见
<input id=”chk2″ type=”checkbox” checked=”checked” />是或不是可知

像checkbox,radio和select那样的因素,选中属性对应“checked”和“selected”,那些也属于固有属性,由此要求选择prop方法去操作本事获得不错的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

倘若下边使用attr方法,则会现出:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

指望本文所述对我们jQuery程序设计具备接济。

prop()函数用于安装或回到当前jQuery对象所匹配的要素的属性值。

今日在档期的顺序中选拔<select></select>下拉菜单时,使用juery操作,使页面加载完菜单暗许选中的值为2,小编一早先的操作如下:

一、jQuery的attr()方法

你大概感兴趣的稿子:

  • jquery判别复选框选中状态以及界别attr和prop
  • jQuery中 prop() attr()使用详解
  • jquery中attr和prop的区分分析
  • jQuery中attr()和prop()在修改checked属性时的界别
  • jQuery学习之prop和attr的不一样示例介绍
  • jQuery的attr与prop使用介绍
  • jquery中prop()方法和attr()方法的分别浅析
  • jquery获取自定义属性(attr和prop)实例介绍
  • jquery 获取自定义属性(attr和prop)的实现代码

本文实例叙述了jQuery中attr()与prop()函数用法。分享给大家供我们参照他事他说加以考察,具体如下…

该函数属于jQuery对象(实例)。如若须求删除DOM成分的习性,请使用removeProp()函数。

<!--html部分-->
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
/**js部分**/
$("select").attr("selected","selected"); 

jquery中用attr()方法来博取和设置元素属性,attr是attribute(属性)的缩写,在jQuery
DOM操作中会平日利用attr(),attr()有4个表明式。

语法

咋一看好全面,木难点,可是自身发觉在Safari浏览器中,根本不起功能!!留心查看一番发掘,在Safari浏览器中,属性确实是设置成功了,既value=2的那一项确实是<option
value=”2″
selected=”selected”>2</option>。那难点出在哪吧?冷静,不要方,万能的stack说只要把attr改成prop就行了,卧槽还真行了,那是啥奇怪事件。好吧,大家须要来研讨商量了,不用想,肯定是内需祭出官方文书档案了。

  1. attr(属性名)
    //获取属性的值(获得第三个匹配成分的属性值。通过这些点子能够实惠地从第叁个相配成分中获取五本性质的值。借使成分未有相应属性,则赶回
    undefined )

  2. attr(属性名, 属性值) //设置属性的值
    (为全数相配的成分设置贰个属性值。)

  3. attr(属性名,函数值) //设置属性的函数值 
    (为有着相配的要素设置一个企图的属性值。不提供值,而是提供二个函数,由那些函数总计的值作为属性值。)

jQuery 1.6 新扩张该函数。prop()函数有以下两种用法:

1.attr() : 获取相配的成分集结中的第二个成分的性质的值 或
设置每贰个相配成分的一个或三个属性。 •.attr( attributeName ) •.attr(
attributeName )

4.attr(properties) //给钦命成分设置三个属性值,即:{属性名一: “属性值一”
, 属性名二: “属性值二” , … …
}。(那是一种在全部相配成分中批量装置过多性情的顶级办法。
注意,假诺你要安装对象的class属性,你必须运用’className’
作为属性名。可能您能够一直采取’class’恐怕’id’。)

用法一:

•.attr( attributeName, value ) •.attr( attributeName, value )
•.attr( attributes )
•.attr( attributeName, function(index, attr) )

演示代码:

jQueryObject.prop( propertyName [, value ] )

2.prop() :
获取匹配的成分聚焦第2个成分的习性(property)值或设置每三个相配成分的四个或几个天性。
•.prop( propertyName ) •.prop( propertyName )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>

安装或再次回到钦定属性propertyName的值。假诺钦命了value参数,则象征设置属性propertyName的值为value;若无一点名value参数,则意味着回去属性propertyName的值。

•.prop( propertyName, value ) •.prop( propertyName, value )
•.prop( properties )
•.prop( propertyName, function(index, oldPropertyValue) )

1.attr(name)//获取属性的值

参数value还能是函数,prop()将依靠相配的持有因素遍历实践该函数,函数中的this指针将本着对应的DOM成分。prop()还或者会为函数字传送入八个参数:第一个参数正是该因素在相称成分中的索引,第3个参数正是该因素propertyName属性当前的值。函数的重返值正是为该因素的propertyName属性设置的值。

总的来看区别了呢,没有错,是参数有分别,attr()传入的是attributeName,而prop()传入的是propertyName,今后咱们的主题素材转移了,我们须要商量的是attributeName和propertyName之间的界别了。

1.1使用attr(name)获取title值:

用法二:

Attributes vs.
Properties

<script>
alert($("ul li:eq(1)").attr("title"));
</script>

jQueryObject.prop( object )

在此处,大家得以将attribute明白为“天性”,property通晓为为“属性”从而来区分俩者的反差。
假若把DOM元素看成是三个一般的Object对象,那么些目的在其定义时就有所局地特性(property),举例把select的option当做叁个对象:

结果:

以指标格局同期安装大肆四个天性的值。对象object的各样属性对应propertyName,属性的值对应value。

var option = {
selected:false,
disabled:false,
attributes:[],
...
} 

图片 10

只顾:prop()函数的兼具”设置属性”操作针对的是现阶段jQuery对象所相称的每三个要素;全数”读取属性”的操作只针对第三个杰出的成分。
参数

近年来,我们看清了,attribute是贰脾气剧情点,每种DOM成分都有三个应和的attributes属性来存放在全数的attribute节点,它是一个类数组的器皿。attributes的种种数字索引以名值对(name=”value”)的款型寄存了三个attribute节点。而property正是叁性格质,是二个以名值对(name=”value”)的格局存放在Object中的属性。

1.2使用attr(name)获取alt值:

请依据前面语法部分所定义的参数名称查找对应的参数。

回去一从头的难题,依照W3C的表单规范,在selected属性(property)是一个布尔属性,
这意味,借使那个特点(attribute)存在,
就算该脾气未有对应的值,只怕被设置为空字符串值,或以致是”false”,相应的属性(property)都照旧为true。
selected特性(attribute)值不会因为复选框的动静而改换,而selected属性(property)会因为复选框的气象而改造。由此,跨浏览器兼容的追寻和转移DOM属性,比方成分的checked,
selected, 或 disabled状态,请使用.prop()方法。

<script>
alert($("ul li:eq(1)").attr("alt"));
</script>

参数 描述
propertyName String类型钦赐的天性名称。
value 可选/Object/Function类型指定的属性值,或再次回到属性值的函数。
object Object类型钦点的对象,用于封装四个键值对,同偶尔间安装多项属性。
参数value能够是回顾对象和数组在内的妄动等级次序。

jquery中attr和prop的界别介绍

结果:

返回值

在高版本的jquery引进prop方法后,哪天该用prop?几时用attr?它们四个之间有何样界别?这几个主题素材就出现了。

图片 11

prop()函数的再次回到值是轻松等级次序,重返值的门类取决于当前prop()函数试行的是”设置属性”操作仍然”读取属性”操作。

关于它们八个的分别,网络的答案非常多。这里谈谈本人的经验,小编的经验非常粗大略:

  1. attr(name,value)   //设置属性的值

固然prop()函数试行的是”设置属性”操作,则赶回当前jQuery对象自己;假若是”读取属性”操作,则赶回读取到的属性值。

 •对于HTML元素本人就含有的原来属性,在拍卖时,使用prop方法。

2.1用到attr(name,value)修改title值为:不吃橘柑

若果当前jQuery对象相称多少个因素,重回属性值时,prop()函数只以中间第叁个门户大约的成分为准。假诺该因素没有一点名的属性,则再次回到undefined。

•对于HTML成分大家友好自定义的DOM属性,在拍卖时,使用attr方法。

<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>

prop()和attr()的根本差异:prop()函数针对的是DOM元素(JS
Element对象)的属性,attr()函数针对的是DOM成分所对应的文书档案节点的性质。详细的情况请查看jQuery函数attr()和prop()的界别。

地点的呈报也可以有一点模糊,举多少个例子就知道了。 

结果:

注意事项

<a href="http://www.baidu.com" target="_self" class="btn">百度</a> 

图片 12

1、如若经过prop()函数更换<input>和<button>成分的type属性,在大多数浏览器中校会抛出一个错误,因为该属性一般不容许在后期更换。

那几个事例里<a>成分的DOM属性有“href、target和class”,这一个属性就是<a>成分本身就带有的习性,也是W3C规范里就含有有那几个天性,只怕说在IDE里能够智能提示出的属性,那么些就叫做固有总体性。管理那个属性时,建议接纳prop方法。

  1. attr(name,fn)  //设置属性的函数值

2、假设应用prop()函数操作表单成分的checked、selected、disabled等品质,如若该因素被选中(或剥夺),则赶回true,否则(意即HTML中从未该属性)再次回到false。

<a href="#" id="link1" action="delete">删除</a> 

3.1把alt属性的值设置为title属性的值。

3、prop()函数还足以设置或回到DOM成分的Element对象上的少数质量,举例:tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等属性。

本条事例里<a>成分的DOM属性有“href、id和action”,很肯定,前三个是村生泊长属性,而后边一个“action”属性是我们和睦自定义上去的,<a>成分本身是从未有过这么些天性的。这种就是自定义的DOM属性。管理那个属性时,提议采用attr方法。使用prop方法取值和设置属性值时,都会再次来到undefined值。

<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>

4、在IE9及更早版本中,假诺运用prop()函数设置的质量值不是一个粗略的原始值(String、Number、Boolean),并且在相应的DOM成分被灭绝在此以前,该属性未有被移除,则可能会招致内部存款和储蓄器泄漏难题。假若你只是为着存款和储蓄数据,提出您使用data()函数,避防止内部存储器泄漏难题。

再举叁个例子:

结果:

示例&说明

<input id="chk1" type="checkbox" />是否可见<input id="chk2" type="checkbox" checked="checked" />是否可见
admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注