<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
/*1.操作元素属性
* -获取：
* 对象.attr("属性名"); //注意输入框的实时value要用对象.val()
* -修改：
* 对象.attr("属性名","属性值");
*
*/
/*2.操作元素内容
* -获取： //同js的innerHTML innerText
* 对象.html()
* 对象.text()
* -修改：
* 对象.html("内容") //拼接：对象.html(对象.html()+"内容")
* 对象.text("内容")
*/
$(document).ready(function(){
/*3.操作元素样式(css)
*
*/
$("#t01").click(function(){
//-增加/修改样式 //同js的.style设置的是内联样式 优先级较高
$(this).css("background-color","green");
//-获取样式
console.log($(this).css("width"));
});
$("#t02").click(function(){
//-修改json方式多个样式
$(this).css({"background-color":"yellow",
"width":"200px",
"border":"5px solid red"});
});
/*4.操作元素样式(class)
*/
$("button").click(function(){
//-增加class
$("#t03").addClass("tClass");
//-删除class
$("#t03").removeClass("tClass2");
//-切换class 有就删除 没有就添加
// $("#t03").toggleClass("tClass");
});
});
</script>
<style type="text/css">
#t01,#t02{
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid red;
}
.c03{
width: 100px;
height: 100px;
border: 1px solid black;
}
.tClass{
background-color: pink;
}
.tClass2{
font: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="t01">
操作元素样式(css)
</div>
<div id="t02">
操作元素样式(css)--json
</div>
<button >操作元素样式(class)</button>
<br /><br />
<div id="t03" class="c03 tClass2">
操作元素样式(class)
</div>
</body>
</html>
