Jquery中获取内容和属性

最新推荐文章于 2023-08-28 21:50:54 发布

Rapper_cl

最新推荐文章于 2023-08-28 21:50:54 发布

阅读量645

点赞数

分类专栏： jQuery 文章标签： Jquery中获取内容和属性

本文链接：https://blog.csdn.net/m0_37510446/article/details/94717328

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Jquery拥有可操作HTML元素和属性的强大方法。
常用的方法有：

text()/设置或返沪所选元素的文本内容
html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记）
val()/返回表单字段的值（理解为value的简写）
attr()/设置或返回所选属性的值**

接下来通过实际例子来实现这几个方法！
text()/设置或返沪所选元素的文本内容&html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记）

<!DOMTYPE>
<html>
<mete charset="utf-8"/>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$("#btn1").click(function(){
		alert($("#test1").text());});
    $("#btn2").click(function(){
		alert($("#test1").html());});	
	});					 
</script>
</head>
<body>
<p id="test1">这是个测试的<b>文本</b>.</p>
<button id="btn1">显示文本（text)</button>
<button id="btn2">显示html（html)</button>
</body>
</html>

text()
在这里插入图片描述
html()

在这里插入图片描述
val()/返回表单字段的值（理解为value的简写）

<!DOMTYPE>
<html>
<mete charset="utf-8"/>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$("#btn1").click(function(){
		alert($("#test1").val());});
	});					 
</script>
</head>
<body>
<p ><input  id="test1" value="ccc"/></p>
<button id="btn1">显示输入值</button>
</body>
</html>

执行val，显示出输入框的值
在这里插入图片描述
如上所示，改val()方法显示出了输入框的值

attr()/设置或返回所选属性的值
这个方法，相对前面三个方法来说，相对复杂一点，可以根据参数的不同，分为以下三个方法：
（1）attr(属性名）
返回被选元素中属性的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
	$("button").click(function(){
		alert($("#t1").attr("class"));
	});
});
</script>
</head>
<body>
	<p id="t1" class="t2">显示p中的class值</p>
	<button>点击</button>
</body>
</html>

在这里插入图片描述
(2)attr(属性名，属性值）
设置被选元素中属性名的属性值
属性值可以为数值，也可以为函数返回值即可

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
	$("#btn1").click(function(){
		$("#t1").attr("class","modifyClass");
		alert($("#t1").attr("class"));
	});
	$("#btn2").click(function(){
		$("#t1").attr("class",function(n,v){
			return v+"modify";});
		alert($("#t1").attr("class"));
		});
});
</script>
</head>
<body>
	<p id="t1" class="t2">显示p中的class值</p>
	<button id="btn1">点击1</button>
	<button id="btn2">点击2</button>
</body>
</html>

点击1：
在这里插入图片描述
点击2：

(3)attr({属性名:值，属性名:值})，当设置多个属性的时候，以键值对的形式进行赋值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
	$("#btn1").click(function(){
		$("#t1").attr({class:"modifyClass",width:"300"});
		alert($("#t1").attr("width"));
	});
	});
</script>
</head>
<body>
	<p id="t1" class="t2"  width="200">显示p中的class值</p>
	<button id="btn1">点击1</button>
</body>
</html>

在这里插入图片描述
以上就是对于Jquery捕获内容和属性的解析了

Rapper_cl

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Jquery中获取内容和属性

Jquery拥有可操作HTML元素和属性的强大方法。常用的方法有：**text()/设置或返沪所选元素的文本内容html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记）val()/返回表单字段的值（理解为value的简写）attr()/设置或返回所选属性的值**接下来通过实际例子来实现这几个方法！text()/设置或返沪所选元素的文本内容&h...
复制链接

扫一扫