jquery的属性操作

最新推荐文章于 2021-09-22 13:18:16 发布
最新推荐文章于 2021-09-22 13:18:16 发布
阅读量602 收藏
点赞数
分类专栏： jquery
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，用一个attr()就可以全部搞定了,赞一个先^^

jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQueryDOM操作中会经常用到attr()，attr()有4个表达式。

1. attr(属性名)      //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined ）


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


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


4.attr(properties)   //给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)


html代码结构:


<ptitle="你最喜欢的水果是。">你最喜欢的水果是？</p>
<ul>
   <lititle="苹果汁">苹果</li>
   <li title="橘子汁"value="123">橘子</li>
   <lititle="菠萝汁">菠萝</li>
</ul>


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


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

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


结果：橘子汁



1.2使用attr(name)获取value值：

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


结果：123


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>


结果：不吃橘子


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


3.1把value属性的值设置设给title属性。
<script>
$("ul li:eq(1)").attr("title",function(){ returnthis.value});
alert($("ul li:eq(1)").attr("title"));
</script>


结果：123


4.attr(properties) //将一个“名/值”形式的对象设置为所有匹配元素的属性


4.1获取<ul>里第2个<li>设置title和value属性。
<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",value:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("value"));
</script>


结果：不喝橘子汁  不是123


4.2获取<ul>里第2个<li>设置class。
<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>


结果：第二个li的html：<liclass="lili" title="橘子汁"value="123">橘子</li>


4.3获取<ul>里第2个<li>设置id。
<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>


结果：第二个li的html：<li id="lili"title="橘子汁"value="123">橘子</li>


4.4获取<ul>里第2个<li>设置style。
<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>


那么怎么删除属性呢?


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


就这么简单，attr 其实就是原生js中 getAttribute 的简化实现, 而removeAttr 就是 removeAttribute 的简写了



其他例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			$("tbody tr").each(function(n){
				//使用attr只加入一个参数可以获取属性值
				//alert($(this).attr("id"));
				
				//通过attr()设置两个参数，可以完成对某个节点的属性的设置
				// $(this).attr("title",$(this).children("td:eq(1)").html());
				
				//可以基于json的格式来设置属性,甚至可以设置一些非html的属性，通过这些属性来做一些特殊处理
				//但是设置特殊属性的这种方式在jquery1.4之后就基本不使用，因为在1.4之后提供data方法
				$(this).attr({
					"title":$(this).children("td:eq(1)").html(),
					"id":$(this).children("td:eq(0)").html(),
					"personId":n
				});
				
				//可以移除属性
				// $("tr#2").removeAttr("personid");
			});
		});
	</script>
</head>
<body>
	<a href="jquery_basic01.html">basic01</a>
	<a href="jquery_basic02.html">basic02</a>
	<a href="jquery_basic03.html">basic03</a>
	<a href="http://www.zttc.edu.cn">zttc</a>
	<a href="http://zjc.zttc.edu.cn:8080">zjc</a>
<table width="700" border="1" align="center" id="users">
	<thead>
		<tr>
			<td>用户标识</td>
			<td>用户姓名</td>
			<td>用户年龄</td>
			<td>用户密码</td>
		</tr>
	</thead>
	<tbody>
		<tr id="abc">
			<td>1</td>
			<td>张三</td>
			<td>23</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>2</td>
			<td>李四</td>
			<td>33</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>3</td>
			<td>王五</td>
			<td>13</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>4</td>
			<td>赵六</td>
			<td>45</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>5</td>
			<td>朱琪</td>
			<td>21</td>
			<td>abc123</td>
		</tr>
	</tbody>
</table>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//设置所有a中以http为链接开头的超链接在新窗口打开
			$("a[href^='http://']").attr("target","_blank");
			
			//设置tbody中的tr的title属性，让属性的值为第几个tr
			$("tbody tr").attr("title",function(n){
				return "这是第"+(n+1)+"个tr";
			});
		});
	</script>
</head>
<body>
	<a href="jquery_basic01.html">basic01</a>
	<a href="jquery_basic02.html">basic02</a>
	<a href="jquery_basic03.html">basic03</a>
	<a href="http://www.zttc.edu.cn">zttc</a>
	<a href="http://zjc.zttc.edu.cn:8080">zjc</a>
<table width="700" border="1" align="center" id="users">
	<thead>
		<tr>
			<td>用户标识</td>
			<td>用户姓名</td>
			<td>用户年龄</td>
			<td>用户密码</td>
		</tr>
	</thead>
	<tbody>
		<tr id="abc">
			<td>1</td>
			<td>张三</td>
			<td>23</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>2</td>
			<td>李四</td>
			<td>33</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>3</td>
			<td>王五</td>
			<td>13</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>4</td>
			<td>赵六</td>
			<td>45</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>5</td>
			<td>朱琪</td>
			<td>21</td>
			<td>abc123</td>
		</tr>
	</tbody>
</table>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			var props = initHeader();
			var users = getUsers(props);
			
			// var json = {"id":1,"username":张三,"age":23,"password":abc123};
			// alert(json.id);
			
			$(users).each(function(n){
				var str = "";
				for(var i=0;i<props.length;i++) {
					str+=this[props[i]]+",";
				}
				alert(str);
			});
		
			function getUsers(props) {
				var users = new Array();
				$("tbody tr").each(function(n){
					//不能基于字符串添加，只能基于对象添加
					var user = new Object();
					
					$(this).find("td").each(function(tn){
						user[props[tn]] = $(this).html();
					});
					users.push(user);
				});
				return users;
			}
			
			function initHeader() {
				//可以将一些值存储在标签中，这个值不会通过属性的方式显示给用户
				// $("thead tr td:eq(0)").data("prop","id");
				// $("thead tr td:eq(1)").data("prop","username");
				// $("thead tr td:eq(2)").data("prop","age");
				// $("thead tr td:eq(3)").data("prop","password");
				var props = $("thead td").map(function(n){
					return $(this).attr("title");
				}).get();
				return props;
			}
		});
	</script>
</head>
<body>
<table width="700" border="1" align="center" id="users">
	<thead>
		<tr>
			<td title="id">用户标识</td>
			<td title="username">用户姓名</td>
			<td title="age">用户年龄</td>
			<td title="password">用户密码</td>
			<td title="address">地址</td>
			<td>操作</td>
		</tr>
	</thead>
	<tbody>
		<tr id="abc">
			<td>1</td>
			<td>张三</td>
			<td>23</td>
			<td>abc123</td>
			<td>昭通</td>
			<td>添加  删除</td>
		</tr>
		<tr>
			<td>2</td>
			<td>李四</td>
			<td>33</td>
			<td>abc123</td>
			<td>昭通</td>
			<td>添加  删除</td>
		</tr>
		<tr>
			<td>3</td>
			<td>王五</td>
			<td>13</td>
			<td>abc123</td>
			<td>昭通</td>
			<td>添加  删除</td>
		</tr>
		<tr>
			<td>4</td>
			<td>赵六</td>
			<td>45</td>
			<td>abc123</td>
			<td>卡努曼</td>
			<td>添加  删除</td>
		</tr>
		<tr>
			<td>5</td>
			<td>朱琪</td>
			<td>21</td>
			<td>abc123</td>
			<td>昭通</td>
			<td>添加  删除</td>
		</tr>
	</tbody>
</table>
</body>
</html>


wenzhu0_0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery中的eq真的可以传变量吗？
qiuqingpo的专栏
02-02 6164
dfds function testeq() { var s=1; alert($("#eqtable").find("tr").find("td:eq('"+s+"')").text()); } 测试环境： ie6.0 无论变量的值怎么改变。弹出都是:d firefox10.0 无论变量的值怎么改变。弹出都是:空 因此我感觉eq中跟变量还是不行的！ 感谢：sk
jQuery开发常用方法
半颗茜
01-22 605
1、jQuery( “:eq(index)” ) 在匹配的集合中选择索引值为index的元素。 jQuery( “:eq(index)” ) 添加的版本: 1.0 index: 要匹配元素的索引值（从0开始计数） jQuery( “:eq(-index)” ) 添加的版本: 1.8 indexFromEnd: 要匹配元素的索引值（从0开始计数）, 从最
js jQuery小结
bull521的博客
03-21 268
本帖总结一下js/jQuery在一些具体场景中使用时的应用。 1.选中table的某一列的值 这里以中国农业大学某一个页面为例子，页面缩略图如下： 假如这里我只需要获取到所有企业的名称，那么我首先需要定位到这个表格： $('table:eq(27)') 这个表格没有特殊的id，因此使用索引来获取到这个表格，之后就可以考虑获取到td了： $('table:eq(27) tr')....
jQuery简介---常用函数01
时光里的博客
07-09 328
什么是jQuery(了解) jQuery: JavaScript Query JS查询 jQuery是一门轻量的、免费开源的JS函数库（就是JS的简单框架） jQuery可以极大的简化JS代码 jQuery的核心思想：“写的更少，但做的更多” 轻量的：是指一个技术或框架对代码或程序的侵入程度是比较低的。 或者说代码对该技术依赖程度越低，这个技术越轻。对该技术的依赖程度越高，这个技术越重。 jQuery本质就是一个包含了很多函数的JS文件，如果要在某一个HTML中使用这个JS文件中的函数，就必须得将JS文件
jquery全选反选
m0_59776219的博客
08-16 139
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
JQuery属性操作与循环用法示例
10-17
### jQuery属性操作 #### 1. 读取属性 jQuery提供`.prop()`方法用于获取或设置元素的属性值。例如，要获取`<img>`标签的`src`属性，我们可以使用以下代码： ```javascript var $src = $('#img1').prop('src'); ``...
jquery属性操作
03-29
本文将深入探讨jQuery中的属性操作，帮助你更好地理解和利用这个强大的工具来提升网页开发效率。 首先，我们需要理解jQuery的核心概念——选择器。jQuery的选择器基于CSS，使得我们能够轻松地选取页面上的元素。...
jQuery第2天知识点：jQuery 样式操作、jQuery 属性操作.zip
07-18
在深入探讨jQuery的样式操作和属性操作之前，我们先来理解一下jQuery是什么。jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript代码的编写，特别是在处理DOM（Document Object Model）操作...
jQuery操作属性和样式详解
10-22
本文将深入探讨jQuery如何操作属性和样式，帮助开发者更好地理解和应用这一强大的工具。 首先，我们需要理解DOM（Document Object Model）属性与元素属性的区别。在HTML中，像`id`、`src`和`alt`这样的属性被称为...
jQuery 中 $("tr:eq(1) td:eq(2)") 写法
weixin_30360497的博客
04-15 6898
$("tr:eq(1) td:eq(2)"):这代表了要选中表格的第二行中的第三个单元格 如果在后面再加上.text() 代表要取出这个单元格中的文本。 注意以下三种情况用法 .text() .html() .val() 转载于:https://www.cnblogs.com/renfeija/p/6713603.html...
Jquery 选择器
11-25 1504
 $("#myELement")    选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div")           选择所有的div标签元素，返回div元素数组 $(".myClass")      选择使用myClass类的css的所有元素 $("*")             选择文档中
jquery eq参数
weixin_33859231的博客
02-18 214
为什么80%的码农都做不了架构师？>>> ...
jQuery学习笔记
weixin_33885676的博客
10-09 68
【新增】jquery.tmpl.js笔记： https://www.cnblogs.com/zhuzhiyuan/p/3510175.html https://www.cnblogs.com/think8848/archive/2011/07/17/2108570.html 1： $ = jQuery    $() = jQuery() 【新增】 1、多条件选择器 用途：使用多个条...
汇总常用的jQuery操作Table tr td方法
weixin_34242509的博客
08-23 193
虽然现在DIV+CSS进行页的布局大行其道，但是很多地方使用table还是有很多优势，用table展示数据是比较方便的，下面汇总了jQuery操作Table tr td常用的方法，熟记这些操作技巧，下次再使用的到时候，会让你如鱼得水，提高开发效率。 1.鼠标移动行变色 $("#table1 tr").hover(function(){    $(this).children("td").a...
jQuery操作table tr td
weixin_33756418的博客
07-11 211
1.鼠标移动行变色 $("#tab tr").hover(function(){ $(this).children("td").addClass("hover") },function(){ $(this).children("td").removeClass("hover") }); 方法二： $("#tab tr:gt(0)").hover(function(...
【Jquery】Jquery操作table表格详细说明
liuzhenhe1988的专栏
01-08 1691
函数说明 //eq:获取子元素索引从 0 开始 $("#tableid tr th:eq(1)").remove();//第二列 //nth-child:获取子元素从 1 开始 $("#tableid tr td:nth-child(2)").remove();//第二列 行操作 1、隐藏行 $("#tableid tbody tr:eq(3)").hide(); //隐藏第四行，行索引从0开始 //隐藏第二行的方式 $("#tableid tr:gt(0):eq(1)").hide();//
jquery计算表格列，求和
qq_36521848的博客
09-22 1793
jquery计算表格列，求和 有时候，需要统计网页上数据总数，系统没有提供该功能，需要手动计算，于是设计了这段代码 核心代码： $(function() { var totalRow = 0; $('#overTimes tr').each(function() { $(this).find('td:eq(1)').each(function() { totalRow += parseFloat($(this).text()); }); }); console.log('计算共
jquery 选择器(name,属性,元素)大全
热门推荐
a616413086的专栏
05-06 4万+
jquery 选择器是jquery中非常重要的一个功能了，正是因为有了jquery选择器所有jquery才如此简单了，下面小编来给各位同学介绍jquery 选择器用法，希望对各位同学会有所帮助。 Jquery 选择器大体上可分为：基本选择器、层次选择器、过滤选择器、表单选择器。 其中过滤选择器可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器
jQuery学习总结
u011017272的专栏
07-05 425
1、jQuery基础  first.html     (1)简介          jQuery是一个js框架，最大的特点是，利用     选择器查找要操作的节点，并且将找到的节点     封装成一个jQuery对象，这样封装的好处有两个：     一个是可兼容不同的浏览器，另外，代码也会更简洁。     (2)编程步骤         step1,利用选择器(jQuery借鉴了cs
"深入理解Jquery属性操作与内容操作
prop()方法获取属性值语法： $...以上就是关于JQuery属性和内容操作的介绍，通过prop()、attr()和data()方法，我们可以方便地操作元素的属性和内容，实现丰富多样的交互效果和功能。希望以上内容对您有所帮助，谢谢！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值