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


Posted in Javascript onDecember 29, 2015

本文实例讲述了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>

结果:

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

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

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

结果:

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

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

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

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

结果:

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

3. 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>

结果:

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

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>

结果:

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

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

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

结果:

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

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

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

结果:

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

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

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

结果:

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

在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: "https://3water.com/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // https://3water.com/
// 反选所有的复选框(没选中的改为选中,选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});
Javascript 相关文章推荐
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 #Javascript
javascript实现下拉提示选择框
Dec 29 #Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 #Javascript
js+css简单实现网页换肤效果
Dec 29 #Javascript
Jquery使用小技巧汇总
Dec 29 #Javascript
js为什么不能正确处理小数运算?
Dec 29 #Javascript
javascript从作用域链谈闭包
Jul 29 #Javascript
You might like
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
在centos7中分布式部署pyspider
2017/05/03 Python
实例讲解python中的协程
2018/10/08 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Python实现自动装机功能案例分析
2020/10/22 Python
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
外贸采购员求职的自我评价
2013/11/26 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
索桥的故事教学反思
2014/02/06 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
健康状况证明模板
2014/10/23 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
紧急迫降观后感
2015/06/15 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
python基础之爬虫入门
2021/05/10 Python