jquery框架：属性

最新推荐文章于 2024-07-29 22:23:29 发布

hahahafree

最新推荐文章于 2024-07-29 22:23:29 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

分类专栏： Web jQuery 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_43731793/article/details/97038956

Web 同时被 2 个专栏收录

80 篇文章

订阅专栏

jQuery

17 篇文章

订阅专栏

本文介绍了如何使用jQuery进行DOM操作，包括设置和获取属性、增删CSS类、修改HTML内容、获取文本内容及表单值等关键操作。通过具体示例展示了jQuery简化网页交互的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性:

1.属性

attr();
removeAttr();

attr设置属性

<body>

<h1>2222222222</h1>
	
</body>
<script>
$('h1').click(function(){
	$(this).attr({'age':'20','name':'user1'});
});
</script>

attr获取属性值

<body>

<h1>2222222222</h1>
	
</body>
<script>
$('h1').click(function(){
	$(this).attr({'age':'20','name':'user1'});
	alert($(this).attr('age'));
});

</script>

removeAttr删除属性

<script>
$('h1').click(function(){
	$(this).attr({'age':'20','name':'user1'});
	alert($(this).attr('age'));
});
$('button').click(function(){
	$(this).prev().removeAttr('age');
});
</script>

2.css类

addClass();
removeClass();
toggleClass();

addClass和removeClass增加和减少类

<style>
		*{
			font-family: 微软雅黑;
		}
		img{
			cursor: pointer;
		}

		.imgcls{
			background:#272822;
			border:5px solid #f00;
			border-radius:20px;
			opacity:0.7;
		}
	</style>
	<script src="jquery.min.js"></script>
</head>
<body>
	<img src="hu.png">
</body>
<script>
i=0;
$('img').click(function(){
	if(i%2==0){
		$(this).addClass('imgcls');
	}else{
		$(this).removeClass('imgcls');
	}
	i++;
});
</script>

toggleClass切换类

<style>
	*{
		font-family: 微软雅黑;
	}
	.imgcls{
			background:#272822;
			border:5px solid #f00;
			border-radius:20px;
			opacity:0.7;
		}
</style>
<script src="/js/jquery.min1.js">
	
</script>

</head>
<body>

		<img src="/img/dai.png">
</body>
<script>
i=0;
$('img').click(function(){
	$(this).toggleClass('imgcls');
});
</script>

3.html代码

html();

html方法

<style>
		*{
			font-family: 微软雅黑;
		}

		.div1{
			width:500px;
			height:100px;
			background: #000;
			color:#fff;
			line-height: 100px;
			text-align: center;
		}
	</style>
	<script src="jquery.min.js"></script>
</head>
<body>
	<div class='div1'>
			
	</div>
	<br>
	<br>
	<button>出现时间</button>
</body>
<script>
$('button').click(function(){
	tobj=new Date();
	str=tobj.toLocaleString();
	$('.div1').html(str);
});
</script>

4.文本

text();

text文本内容

<body>
	<h1><b><i><u>aaaaaaaa</u></i></b></h1>	
</body>
<script>
$('h1').click(function(){
	str=$(this).text();
	alert(str);
});
</script>

5.值

val();

val获取表单元素的值

<body>
	<form action="get.php">
		<p>用户名:</p>
		<p><input type="text" name='username'></p>
		<p>密码:</p>
		<p><input type="text" name='password'></p>
		<p>
			<input type="submit" value="确认">
			<input type="reset" value="取消">
		</p>
	</form>
</body>
<script>
$('form').submit(function(){
	username=$('input[name=username]').val();
	password=$('input[name=password]').val();

	if(username!='admin' || password!='123'){
		alert('用户名或密码有误!');
		return false;
	}
});
</script>