jQuery之属性

最新推荐文章于 2021-06-27 11:17:30 发布
最新推荐文章于 2021-06-27 11:17:30 发布
阅读量834 收藏 1
点赞数
分类专栏： # jQuery 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnds123321/article/details/104227591
版权

目录

属性参考表格

属性

attr(name|properties|key,value|fn)

描述

语法

示例

removeAttr(name)

描述

语法

示例

prop(name|properties|key,value|fn)

描述

语法

示例

removeProp(name)

描述

语法

示例

CSS类

addClass(class|fn)

描述

语法

示例

removeClass([class|fn])

描述

语法

示例

toggleClass(class|fn[,sw])

描述

语法

示例

HTML代码/文本/值

html([val|fn])

描述

语法

示例

text([val|fn])

描述

语法

示例

val([val|fn|arr])

描述

语法

示例

属性参考表格

编号语法描述
1

attr(name|pro|key,val|fn)

设置或返回被选元素的属性值。
2

removeAttr(name)

从每一个匹配的元素中删除一个属性
3

prop(n|p|k,v|f)

获取在匹配的元素集中的第一个元素的属性值。
4

removeProp(name)

用来删除由.prop()方法设置的属性集
5

addClass(class|fn)

为每个匹配的元素添加指定的类名。
6

removeClass([class|fn])

从所有匹配的元素中删除全部或者指定的类。
7

toggleClass(class|fn[,sw])

切换类，如果不存在该类则添加指定类，如果存在该类则删除指定类。
8

html([val|fn])

设定或取得第一个匹配元素的html内容。
9

text([val|fn])

设定或取得所有匹配元素的内容。
10

val([val|fn|arr])

设定或获得匹配元素的当前值。

属性

attr(name|properties|key,value|fn)

描述

设置或者返回被选元素的属性值。

参数说明：

  • name指的是属性名称。
  • properties指的是属性的“名/值对”对象。
  • key,value指的是属性名,属性值
  • key,function(index.attr)指的是属性名称和返回属性值的函数，其中函数有两个参数，index表示当前元素的索引值，第二个参数为原先的属性值。

语法

// attr(name)
$('img').attr("src");

// attr(properties)
$('img').attr({src:"a.jpg",alt:'这是图片'});

// attr(key,value)
$('img').attr('src','a.jgp');

// attr(key,function(index,attr){});
$('img').attr('title',function(){return '图片'});

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<img>
		</div>
		<script type="text/javascript">
			var url = 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png';
			$('img').attr('src', url);
		</script>
	</body>
</html>

removeAttr(name)

描述

从被匹配的元素中删除属性。

参数说明：

  • 要删除的属性名。

语法

$(selector).removeAttr(name);

其中selector为选择器，name表示要删除的属性名。

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<img>
		</div>
		<script type="text/javascript">
			var url = 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png';
			// 添加src属性
			$('img').attr('src', url);
			// 删除名为src的属性
			$('img').removeAttr('src');
		</script>
	</body>
</html>

prop(name|properties|key,value|fn)

描述

获取在匹配的元素集中的第一个元素的属性值。

参数说明：

  • name指的是属性名称。
  • properties指的是属性的“名/值对”对象。
  • key,value指的是属性名,属性值
  • key,function(index.attr)指的是属性名称和返回属性值的函数，其中函数有两个参数，index表示当前元素的索引值，第二个参数为原先的属性值。

语法

// $(selector).prop(name)
$("input[type='checkbox']").prop("checked");

// $(selector).prop({attrName:attrValue})
$("input[type='checkbox']").prop({
    disabled: true
});

// $(selector).prop(key,value)
$("input[type='checkbox']").prop("checked", true);

// $(selector).prop(key,function(index,attr){})
$("input[type='checkbox']").prop("checked", function(i, val) {
    return !val;
});

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<input type="checkbox">男
			<input type="checkbox">女
		</div>
		<script type="text/javascript">
			$('input[type="checkbox"]').attr("checked",true);
		</script>
	</body>
</html>

浏览器效果如下：

removeProp(name)

描述

删除由.prop()方法设置的属性集。

参数说明：

  • name指的是要删除的属性名。

语法

$(selector).removeProp(name)

selector指的是选择器，name指的是属性名。

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<img src="#" alt="问奈何">
			<button type="button">删除属性</button>
		</div>
		<script type="text/javascript">
			$('button').click(function() {
				$('img').removeProp("alt");
			});
		</script>
	</body>
</html>

该示例无效，不会产生作用，可能是jQuery版本问题，removeProp()方法已经失效。

CSS类

addClass(class|fn)

描述

为指定元素添加指定的类名。

参数说明：

  • class指的是要添加的类名，可以添加多个类名，当必须用空格隔开。
  • 函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

语法

$(selector).addClass(className)

$(selector).addClass(className1 className2 ... className)

$(selector).addClass(function(index,className){})

selector指的是选择器，className指的是要添加的类名。

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			.appStyle {
				width: 50px;
				height: 50px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			$("#app").addClass("appStyle")
		</script>
	</body>
</html>

浏览器显示如下：

第二种用法的示例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			.appStyle_0 {
				width: 50px;
				height: 50px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			$("#app").addClass(function(index,className){
				return 'appStyle_'+index;
			})
		</script>
	</body>
</html>

removeClass([class|fn])

描述

用匹配的元素中删除全部或指定的类。

参数说明：

  • 如果没有参数则删除所有类。
  • class指的是删除指定类名的类。
  • fn表示此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

语法

// 删除所有类
$(selector).removeClass();

// 删除指定的类
$(selecotr).removeClass(className);

// 回调函数
$(selecotr).removeClass(function(index,className){});

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			.appStyle_0 {
				width: 50px;
				height: 50px;
				background: red;
			}

			.appStyle_1 {
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="app" class="appStyle_0 appStyle_1">测试DIV</div>
		<button id="deleteAll">删除全部</button>
		<button id="deleteClass">删除指定类</button>
		<button id="deleteFunction">删除回调函数</button>
		<button id="refresh">刷新</button>

		<script type="text/javascript">
			$('#deleteAll').click(function() {
				// 删除所有类
				$("#app").removeClass();
			});
			$('#deleteClass').click(function() {
				// 删除名为appStyle_0的类
				$("#app").removeClass("appStyle_0");
			});
			$('#deleteFunction').click(function() {
				// 删除调用回调函数
				$("#app").removeClass(function(index, className) {
					console.log("index: " + index + "->className: " + className);
					return className + " appStyle_1";
				})
			});
			$('#refresh').click(function() {
				// 刷新浏览器页面
				window.location.reload();
			});
		</script>
	</body>
</html>

浏览器如下：

toggleClass(class|fn[,sw])

描述

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。

参数说明：

  • class：必需。规定添加或移除 class 的指定元素。如需规定若干 class，请使用空格来分隔类名。
  • sw：可选。布尔值。规定是否添加或移除 class。

语法

$(selector).toggleClass(class,switch)

$(selector).toggleClass(function(index,class),switch)

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			.appStyle_0 {
				width: 50px;
				height: 50px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="app">测试DIV</div>
		<button id="test">切换</button>

		<script type="text/javascript">
			$('#test').click(function() {
				// 如果元素存在appStyle_0类就删除,如果不存在就添加appStyle_0类
				// 如果为true则添加后不会再删除类.
				// 如果为false则删除后不会再添加类
				$('#app').toggleClass('appStyle_0');
				// $('#app').toggleClass('appStyle_0',true);
			})
		</script>
	</body>
</html>

使用回调函数的代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			.appStyle_0 {
				width: 50px;
				height: 50px;
				background: red;
			}

			.appStyle_1 {
				border-radius: 100%;
			}
		</style>
	</head>
	<body>
		<div id="app" class="appStyle_0">测试DIV</div>
		<button id="test">切换</button>

		<script type="text/javascript">
			$('#test').click(function() {
				// 如果元素存在appStyle_0类就删除,如果不存在就添加appStyle_0类
				// 如果为true则添加后不会再删除类.
				// 如果为false则删除后不会再添加类
				$('#app').toggleClass(function(index, className) {
					console.log("index: " + index + "->className: " + className);
					return "appStyle_1";
				});
			})
		</script>
	</body>
</html>

HTML代码/文本/值

html([val|fn])

描述

取得所匹配元素的HTML文本内容。

参数说明：

  • val：可以设定所匹配元素的html值
  • fn(index,html)：此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为该元素原先的HTML值。

语法

// 获取html值
$(selector).html();

// 设定所匹配元素的html值
$(selector).html(value);

// 使用函数来设置所有匹配元素的内容
$(selector).html(function(index,html){});

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<span>测试文本</span><br>
		<button>获取html文本</button>

		<script type="text/javascript">
			$('button').click(function() {
				alert($('span').html());
			})
		</script>
	</body>
</html>

设定html文本值的示例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<span>测试文本</span><br>
		<button>获取html文本</button>

		<script type="text/javascript">
			$('button').click(function() {
				$('span').html('这是所设定的文本')
			})
		</script>
	</body>
</html>

调用函数的示例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<span>测试文本</span><br>
		<button>获取html文本</button>

		<script type="text/javascript">
			$('button').click(function() {
				$('span').html(function(index,html) {
					return "新的文本"+" 索引："+index+" 原文本："+html;
				});
			});
		</script>
	</body>
</html>

text([val|fn])

描述

取得所有匹配元素的内容。

参数说明：

  • val：可以设定所匹配元素的text值
  • fn(index,text)：此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为该元素原先的text值。

语法

// 获取所匹配元素的text文本
$(selector).text();

// 指定所匹配元素的text文本
$(selector).text(value);

// 调用回调函数
$(selector).text(function(index,text){});

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<span>测试文本</span><br>
		<button id="one">获取text文本</button>
		<button id="two">设定text文本</button>
		<button id="three">回调函数设置text文本</button>

		<script type="text/javascript">
			$('#one').click(function() {
				alert($('span').text());
			});
			$('#two').click(function() {
				$('span').text("新文本");
			});
			$('#three').click(function() {
				$('span').text(function(index, text) {
					return "新文本组成：" + "index: " + index + "原text: " + text;
				});
			});
		</script>
	</body>
</html>

val([val|fn|arr])

描述

获得匹配元素的当前值。

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

参数说明：

  • val：指的是要设置的值。
  • fn(index,value)：函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为所匹配元素原先的text值。
  • array：用于设置check/select 的被选中的值。

语法

// 获取文本框的值
$(selector).val();

// 设定文本框的值
$(selector).val(value);

// 回调函数
$(selector).val(function(index, value) {});

// 设定array
$(selector).val([value1, value2...]);

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<input type="text" value="初始值">
		<select id="selected">
			<option value="唐僧">唐僧</option>
			<option value="孙悟空">孙悟空</option>
			<option value="猪八戒">猪八戒</option>
			<option value="沙僧">沙僧</option>
		</select><br>

		<button id="one">获取文本框的值</button>
		<button id="two">设定文本框的值</button>
		<button id="three">回调函数</button>
		<button id="four">使用arry设定被选中值</button>

		<script type="text/javascript">
			$('#one').click(function() {
				alert($('input').val());
			});
			$('#two').click(function() {
				$('input').val("新值");
			});
			$('#three').click(function() {
				$('input').val(function(index, value) {
					return "新值组成：" + "index: " + index + "原value: " + value;
				});
			});
			$('#four').click(function() {
				var arr = ['沙僧'];
				// 是用于设定被选中的值
				$('select').val(arr);
			})
		</script>
	</body>
</html>

 

二木成林
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 学习笔记（九）认识jQuery 和 jQuery的基本操作
小张小张的博客
04-01 1036
一、认识jQuery jQuery 是一个大型的 简单的 第三方类库。或者说是JavaScript中最流行的一种框架。 引用 jQuery： <script src="js/jquery.min.js"></script> //或者 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>　　//Google //或者 <sc
$().attr()的用法 && $().html()与$().text()的区别
weixin_34198583的博客
01-19 2642
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery dom操作 属性操作
Mr_XMeng的博客
12-08 392
jQuery DOM 操作 属性操作 一、通用属性操作 <div class="attr"> <img src="./屏幕截图 2020-10-24 173951.jpg" alt="" kaivon ="liu"> <input type="text" value="这是一个输入框"> </div> 1、attr()获取匹配的元素集合中的第一个元素属性的值 $('.attr img').attr('
jQuery之attr属性操作
cx-young的博客
03-16 364
1）获取id为img的这个元素的src属性的值 alert($("#img").attr("src")) <img alt="" id="img" src="images/1.jpg"> 并得到图片 2）设置id为img的这个元素的src属性的值，实现图片的切换 alert("切换图片") //设置id为img的这个元素的src属性的值，实现图片的切换 $("#img")...
jq改变html的img,jquery更改img元素的src属性的方法
weixin_35482237的博客
06-27 7090
jquery更改img元素的src属性的方法：首先在html文件中，给button按钮绑定onclick点击事件；然后在js标签内创建editsrc函数；接着通过“id(myimg)”获得img对象；最后使用attr方法设置src属性即可。本教程操作环境：windows7系统、jquery1.10.0版本，该方法适用于所有品牌电脑。在jquery中，主要通过attr()方法来设置img标签的src...
jQuery Mobile Data 属性
01-06
jQuery Mobile Data 属性 jQuery Data 属性 jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观。 在下面的参考列表中，粗体显示的值为默认值。 按钮 在1.4 版本以后已废弃。...
jquery 学习之二 属性相关
10-28
本文将深入探讨jQuery中的`attr()`方法及其变体，它们是处理元素属性的关键工具。 `attr(name)`方法是jQuery中最基础的属性访问函数，用于获取或设置元素的属性值。例如，当调用`$("img").attr("src")`时，它会返回...
jQuery学习笔记之jQuery原型属性和方法
10-25
主要介绍了jQuery原型属性和方法,,需要的朋友可以参考下
跟着JQuery API学Jquery 之二 属性
10-29
在选择器的API学习中，走马观花的把选择器过了一遍，但是选择归选择，选择出来了没干什么事，也没有什么用嘛
Jquery删除css属性的简单方法
10-20
下面小编就为大家带来一篇Jquery删除css属性的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
刷新iframe页面$('#iframe').attr('src', $('#iframe').attr('src'));
christalfuller的博客
07-12 1万+
1，reload 方法，该方法强迫浏览器刷新当前页面。　　语法：location.reload([bForceGet])　　参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”) window.location.reload(); //方法1document.getElement
关于jquery或js的attr方法，$("#img").attr({width:"这里想用百分比"});
飞翔的熊blabla
11-27 6629
1 2 3 4 $("#img").css({"width":"100%"});或 $("#img").css("width","100%");或 $("#img").width("100%");或 $("#img").attr("style","width:100%;");
jQuery 属性操作 - attr() 方法
二月的羊
12-18 1546
1、用法说明        attr() 方法设置或返回被选元素的属性值。        注意：根据该方法不同的参数，其工作方式也有所差异。 2、语法       a、$(selector).attr(attribute)             说明：返回被选元素的属性值。             实例： $("img").attr("width")       b、$(s
jquery attr()方法
小画家
10-10 398
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，用一个attr()就可以全部搞定了,赞一个先 ^^ jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。 1. attr(属性名)
jQuery attr()获取属性和设置属性的方法
热门推荐
u013746071的专栏
09-06 7万+
前言： 在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，只需要用到attr()这个函数就可以了。attr是attribute（属性）的缩写。 语法： 1、attr(“属性名”)； //获取属性的值（取得第一个匹配元素的属性。通过这个方法可以方便的从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，
jquery $(this).attr $(this).val方法使用介绍
unity3d，unity3d教程下载
10-08 1071
$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法，本文整理了一些相关的示例，感兴趣的朋友可以参考下 　　$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法 　　$(this).attr(key, value); 设置节点属性的值，相当于setAttribute(key,value)
$().attr() 和 $().css的区别
banjing_1993的博客
03-21 4924
 最近调整前台的时候发现 使用jquery的.attr( )方法去给div隐藏，我是这样写的 $("#div_id").attr("display","none"),发现并没有生效，但是docunment.getElementById("div_id").style("display","none")就生效了。 而且再调试的时候发现，使用$("#div_id").att
jquery新增属性
最新发布
03-16
以下是两种使用jQuery新增属性的例子： 1. 使用jQuery创建元素并添加属性[^1]： ```javascript $('document').ready(function (){ console.log($('<div>').attr('class', 'mydiv').attr('id', 'div1')); }); ``` 2. 使用jQuery创建多级标签并添加属性： ```javascript $('document').ready(function (){ console.log($('<div>').attr('class', 'mydiv').attr('id', 'div1').text('测试').append($('<span>').attr('class', 'myspan').text('子元素')))); }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值