JQuery--方法

最新推荐文章于 2022-04-16 18:18:48 发布

小伟呀

最新推荐文章于 2022-04-16 18:18:48 发布

阅读量317

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43879167/article/details/113662971

版权

这篇博客详细介绍了JQuery中的html()、attr()、prop()、val()方法的使用，包括在id选择器和标签选择器中的应用，以及它们在取值和赋值时的不同情况。同时，文章还探讨了each()方法以及hide、show、slideUp、slideDown、fadeIn、fadeOut、fadeToggle和fadeTo等效果的应用，提供了丰富的示例和交互效果。

摘要由CSDN通过智能技术生成

文章目录

一、html()方法
- 1.1 id选择器中使用html()方法
- 1.2 标签选择器中使用html()方法
二、attr()方法
三、prop()方法
四、val()方法
五、each()方法
六、效果

一、html()方法

作用：取值、赋值

1.1 id选择器中使用html()方法

无参数时，为取值；

有普通参数时，为赋值；

有方法参数时，方法中alert为取值，方法中return为赋值；方法有2个参数：index和html，分别为对应的索引和内容。

格式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../JQuery文件/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function f1() {
    
				var d = $("#1"); //d为JQuery对象
				//1--无参数时取值
				var value = d.html();
				alert(value);
				//2--有参数赋值
				d.html("yyy");
				//3--参数为方法时，alert
				d.html(function(index, html) {
    
					alert(index + " " + html);
				});
				//4--参数为方法时，return
				d.html(function(index, html) {
    
					return "Hellow";
				})
			}
		</script>
	</head>
	<body>
		<div id="1">ffff</div>
		<button onclick="f1()">按钮</button>
	</body>
</html>

初始：
在这里插入图片描述

点击按钮后的弹窗：
在这里插入图片描述

点击OK后：
在这里插入图片描述
点击OK后：

1.2 标签选择器中使用html()方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../JQuery文件/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function f(){
    
				var arrs = $("div");//JQuery对象数组
				//1--无参数时取值第一个数
				alert(arrs.html());
				//2--有参数时修改所有的数据
				arrs.html("aaa");
				//3--参数为方法，但不返回
				arrs.html(function(index,html){
    
					alert(index+" "+html);
				});
				arrs.html(function(index){
    
					alert(index);
				});
				//4--参数为方法，且返回
				arrs.html(function(index,html){
    
					return 1;//全部变为1
				});
				arrs.html(function(index,html){
    
					return index+" "+html;//全部变为1
				});
			}
		</script>
	</head>
	<body>
		<div>444</div>
		<div>555