jquery属性和方法的操作

属性：

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>

jquery属性和方法的操作

属性：

css类：

猜你喜欢