jquery属性和方法的操作

最新推荐文章于 2024-04-22 15:31:17 发布

张贺_

最新推荐文章于 2024-04-22 15:31:17 发布

阅读量374

点赞数 1

分类专栏：学习笔记文章标签： jquery class attr

本文链接：https://blog.csdn.net/weixin_41849462/article/details/80627700

版权

学习笔记专栏收录该内容

68 篇文章 1 订阅

订阅专栏

属性：

attr：属性，元素.attr（）；获取属性；

$("input").attr('value', function(){return "onclick"});

attr（"attr"，"value"）；设置attr属性值为value；

$("input").attr({"value":"aaa"});

attr({value1:"zhi1",value2:"zhi2"})：设置多属性的值；（键值对）

$("input").attr({value:"aaa",type:"text"});

attr（“key”，“fn接收函数的返回值”）；：通过函数的返回值设置属性；

$("input").attr('value', function(){return "onclick"});

removeAttr(name):删除name属性

$("input").removeAttr('value');

css类：

addClass（className）/removeClass（className）：添加/删除类；

    	$("input").click(function(){
    		$(".ab").addClass("abcd");
    	});

toggleClass（className）：切换类：如果没有就添加，如果有就删除；

$("div").toggleClass("ab");

实例：点击按钮实现DIV样式切换：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="替换class//切换QQ空间模拟">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
	.div1{
		width: 200px;
		height: 100px;
		background: red;
	}	
	.div2{
		width: 200px;
		height: 100px;
		background: blue;
	}	
	.div3{
		width: 200px;
		height: 100px;
		background: #50ED11FF;
	}

</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
	<div class="div1">
		
	</div>
    <input type="button" name="" value="布局1" id="a1">
    <input type="button" name="" value="布局2" id="a2">
    <input type="button" name="" value="布局3" id="a3">
    <script type="text/javascript">
    	$("#a1").click(function(){
    		$("div").removeClass("div2");
    		$("div").removeClass("div3");
    		$("div").addClass("div1");
    	});    	
    	$("#a2").click(function(){
    		$("div").removeClass("div1");
    		$("div").removeClass("div3");
    		$("div").addClass("div2");
    	});    	
    	$("#a3").click(function(){
    		$("div").removeClass("div1");
    		$("div").removeClass("div2");
    		$("div").addClass("div3");
    	});
    </script>
</body>
</html>

张贺_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery属性和方法的操作

属性：attr：属性，元素.attr（）；获取属性；$("input").attr('value', function(){return "onclick"});attr（"attr"，"value"）；设置attr属性值为value；$("input").attr({"value":"aaa"});attr({value1:"zhi1",value
复制链接

扫一扫