jquery-210812-04---jquery函数01

该博客详细介绍了jQuery中的几个核心函数:val()用于操作DOM对象的value属性,text()用于处理元素的文字显示内容,而attr()则用于处理除val和text外的其他属性。通过实例演示了如何无参数读取属性值,以及如何有参数地设置这些属性值。这对于理解和使用jQuery进行DOM操作非常有帮助。

jquery-210812-04—jquery函数01


函数介绍

1. val
	操作数组中 DOM 对象的 value 属性.
	$(选择器).val() :无参数调用形式, 读取数组中第一个 DOM 对象的 value 属性值
	$(选择器).val(值):有参形式调用,对数组中所有 DOM 对象的 value 属性值进行统一赋值

2. text
	操作数组中所有 DOM 对象的【文字显示内容属性】
	$(选择器).text():无参数调用,读取数组中所有 DOM 对象的文字显示内容,将得到内容拼接为一个字符串返回
	$(选择器).text(值):有参数方式,对数组中所有 DOM 对象的文字显示内容进行统一赋值

3. attr 对 val, text 之外的其他属性操作
	$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
	$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值

演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery函数</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<style type="text/css">
			div{
				background: gray;
			}
		</style>
		<script type="text/javascript">
			
			// val,,无参
			$(function(){
				$("#btnGetFirstTextValue").click(function(){
					var $obj = $(":text");
					alert($obj.val());
				})
			})
			
			// val,,有参
			$(function(){
				$("#btnSetAllTextValue").click(function(){
					$(":text").val("text");
				})
			})
			
			// text,,无参
			$(function(){
				$("#btnGetAllDivTextValue").click(function(){
					// 无参,获取所有的文本值,连接成一个字符串
					alert($("div").text());
				})
			})
			
			// text,,有参
			$(function(){
				$("#btnSetAllDivTextValue").click(function(){
					// 有参,设置所有的文本值
					$("div").text("div");
				})
			})
			
			
			// attr,,获取指定属性的值
			$(function(){
				$("#btnGetSpanIdValue").click(function(){
					// 有参,设置所有的文本值
					alert($("span").attr("id"));
				})
			})
			
			// attr,,设置指定属性的值
			$(function(){
				$("#btnSetSpanIdValue").click(function(){
					// 有参,设置所有的文本值
					$("span").attr("style","color:green");
				})
			})
			
			
		</script>
	</head>
	<body>
		<input type="text" id="txt01" value="txt01" />
		<br/>
		<input type="text" id="txt02" value="txt02" />
		<br/>
		<input type="text" id="txt03" value="txt03" />
		<br/>
		<br/>
		<div>div01</div>
		<div>div02</div>
		<div>div03</div>
		<br/>
		<br/>
		<span id="span01" style="color: red;">这里是span标签,我的id值是:span01</span>
		<br/>
		<br/>
		<br/>
		<br/>
		<input type="button" id="btnGetFirstTextValue" value="获取第一个文本框的value值" />
		<br/>
		<input type="button" id="btnSetAllTextValue" value="设置所有文本框的value值" />
		<br/>
		<input type="button" id="btnGetAllDivTextValue" value="获取所有div的文本值" />
		<br/>
		<input type="button" id="btnSetAllDivTextValue" value="设置所有div的文本值" />
		<br/>
		<input type="button" id="btnGetSpanIdValue" value="获取指定属性的值,这里获取span的id值" />
		<br/>
		<input type="button" id="btnSetSpanIdValue" value="设置指定属性的值,这里指定span文本颜色为绿色" />
	</body>
</html>
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值