3_1jQuery操作属性和样式
jQuery操作属性和样式
操作属性
原生js 中的通过元素.属性名或者元素.setAttribute()方式操作元素属性,jQuery给我们封装了attr() 和removeAttr(),更加便捷的操作属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a{
background-color: aqua;
}
</style>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
/*
*attr()
*
* */
function fun1(){
console.log($("#f1").attr("color"))
console.log($("#f1").attr("id"))
console.log($("#f1").attr("size"))
}
function fun2(){
$("#f1").attr("color","green")
$("#f1").attr("size","5")
}
function fun3(){
$("#f1").removeAttr("color")
}
function fun4(){
$("#f1").attr("class","a")
}
</script>
</head>
<body>
<font id='f1' color="red" size="7" >牛气冲天</font>
<hr />
<input type="button" value="获得属性" onclick="fun1()" />
<input type="button" value="修改属性" onclick="fun2()" />
<input type="button" value="删除属性" onclick="fun3()" />
<input type="button" value="添加属性" onclick="fun4()" />
</body>
</html>操作样式
原生js 中的通过元素.style.样式名=’样式值’的方式操作元素样式,jQuery给我们封装了css()方法,便于我们操作样式,多数情况样式选择器使用类选择器,所以jQuery针对于这一情况,给我们封装了addClass removeClass toggleClass 三个方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a{
width: 100px;
height: 100px;
background-color: pink;
}
.b{
border: 10px solid green;
border-radius: 20px;
}
</style>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!--
元素.style.样式名=
css()
-->
<script>
function fun1(){
//获得d1的css样式
console.log($("#d1").css("width"));
console.log($("#d1").css("height"));
console.log($("#d1").css("background-color"));
//修改d1的css样式
$("#d1").css("width","200px")
$("#d1").css("height","300px")
$("#d1").css("background-color","yellow");
}
/*
* CSS 样式在实际的研发中,往往通过类选择器作用到元素上
* jQuery就专门的封装了操作class属性值的方法
* */
function fun2(){
$("#d2").addClass("b")
}
function fun3(){
$("#d2").removeClass("b")
}
function fun4(){
$("#d2").toggleClass("b")// 原来有b 则删除,如果没有,则增加b
}
</script>
</head>
<body>
<div id="d1"class="a">
</div>
<input type="button" value="修改样式" onclick="fun1()" />
<div id="d2" class="a" >
d2
</div>
<input type="button" value="添加class值" onclick="fun2()" />
<input type="button" value="删除class值" onclick="fun3()" />
<input type="button" value="切换class值" onclick="fun4()" />
</body>
</html>
