jquery操作文档节点的属性_jquery打印指定元素的所有属性-CSDN博客

本文链接：https://blog.csdn.net/qq_28596151/article/details/80444086

1、使用attr()获取属性和设置属性

语法1：$(selector).attr(attrName);

获取匹配到的元素的attrName属性。

语法2：$(selector).attr(attrName,attrValue);

把匹配到的元素的属性attrName值设置为attrValue。

2、删除属性使用removeAttr()方法实现

$(selector).removeAttr(attrName);

删除选择器匹配到的元素的attrName属性.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的dom操作</title>
	<script src="../jquery-1.3.1.js"></script>
</head>
<body>
	<p title="选择你喜欢的水果">你最喜欢的水果是?</p>
	<ul> 
		<li title="苹果">苹果</li>
		<li title="橘子title">橘子</li>
		<li title="菠萝">菠萝</li>
		<li title="菠萝2">菠萝2</li>
		<li title="菠萝3">菠萝3</li>
	</ul>
</body>
<script> 
	$(function(){
		alert($("li:eq(1)").attr("title"));
		$("li:eq(1)").attr("title","橘子来啦");
		alert($("li:eq(1)").attr("title"));
		$("li:eq(1)").removeAttr("title");
		alert($("li:eq(1)").attr("title"));
	});
</script>
</html>

3、prop()操作属性

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的dom操作</title>
	<script src="../jquery-1.7.2.min.js"></script>
	<style>
		.red{
			color:red;
		}
	</style>
</head>
<body>
	<p title="选择你喜欢的水果">你最喜欢的水果是?</p>
	<ul> 
		<li title="苹果">苹果</li>
		<li class="" title="橘子title">橘子</li>
		<li title="菠萝">菠萝</li>
		<li title="菠萝2">菠萝2</li>
		<li title="菠萝3">菠萝3</li>
	</ul>
</body>
<script> 
	$(function(){
		//$("li:eq(1)").prop("title")//获取指定元素的title属性
		
		//返回值是修改过属性后的元素节点对象
		//$("li:eq(1)").prop("title","liliio")//给元素属性赋值
		
		//$("li:eq(1)").prop("title","liliio").html("橘子来了");
		
		//$("li:eq(1)").attr("class","red");
		$("li:eq(1)").prop("class","red");
		
	});
</script>
</html>