abstract：<!doctype html><html><head><meta charset="UTF-8"><title>jQuery中css屬性事件</title><link rel="icon" type="image/x-icon" href="image
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery中css屬性事件</title>
<link rel="icon" type="image/x-icon" href="images/time.png">
<link rel="stylesheet" type="text/css" href="">
<script src="js/jquery-3.3.1.min.js"></script>
<style>
.box1,.box2,.box3{width: 200px;height: 100px;background:red;}
.box4{border-radius: 35px;}
.p2{background: #ccc;font-size: 20px;}
</style>
</head>
<body>
<script>
//jQuery獲取、改變CSS
//獲取CSS樣式：$("選擇器").css("屬性名")
$(document).ready(function(){
var a;
a=$(".box1").css("height");
alert(a);
})
//改變css單個屬性：$("選擇器").css("屬性名","屬性值")
$(document).ready(function(){
$(".bt").click(function(){
$(".box1").css("background","green");
})
})
//改變多個css屬性:
//$("選擇器").css({"屬性名1":"屬性值1","屬性名2":"屬性值2","屬性名3":"屬性值3",})
$(document).ready(function(){
$(".bt1").click(function(){
$(".box1").css({"background":"blue","width":"150px"});
})
})
//操作屬性其原理還是對DOM的操作
//addClass()該方法向被選中元素添加一個或多個類
//removeClass()該方法從被選中元素移除一個或多個類
//attr()該方法設(shè)置或者返回選中元素的屬性
//removeAttr()該方法從被選中元素移除屬性
//hasClass()該方法檢查被選中元素是否包含指定的class
//toggleClass()該方法對被選中的元素進行添加刪除類的操作
//設(shè)置內(nèi)容：
//text()該方法返回或者設(shè)置被選中元素的文本內(nèi)容
//html()該方法返回或者設(shè)置被選中元素的內(nèi)容（類似innerHTML，可包括html標簽本身）
//val()該方法返回或者設(shè)置被選中元素的值
//添加移除類
$(document).ready(function(){
//添加類
$(".p1").addClass("p2");
$(".bt2").click(function(){
$(".p1").removeClass("p2");
})
})
//設(shè)置返回屬性
$(document).ready(function(){
$(".box2").click(function(){
$(".box2").attr("title","你好！");//設(shè)置屬性
alert($(".box2").attr("title"));//返回屬性
})
//$(".box2").removeAttr("title")
})
//hasClass()
$(document).ready(function(){
alert($(".box2").hasClass("title"));
})
// toggleClass()添加刪除類
$(document).ready(function(){
$(".box3").click(function(){
$(".box3").toggleClass("box4");
})
})
//設(shè)置內(nèi)容：
//text()
$(document).ready(function(){
$(".box5").click(function(){
$(".box5").text("添加了text文本");
$(".box5").css("color","white");
})
})
// html()返回或者設(shè)置被選中元素的內(nèi)容
$(document).ready(function(){
$(".p3").click(function(){
$(".p3").html("<h2>php中文網(wǎng)，一個學校的好網(wǎng)址。</h2>");
$(".p3").css("background","red");
})
})
// val()返回或者設(shè)置被選中元素的值
$(document).ready(function(){
$(".in").val("我是被修改后的值。");
})
//事件方法：
//blue()當元素失去焦點，相當于js中的onblue
//focus()當元素獲得焦點時，相當于js中的onfocus
//change()元素值改變
$(document).ready(function(){
// $(".in1").blur(function(){
// $(".in1").css("background","blue");
// });
$(".in1").focus(function(){
$(".in1").css("background","green");
});
$(".in1").change(function(){
$(".in1").css("background","pink");
});
})
//click()單擊事件，dblclick()雙擊事件
$(document).ready(function(){
$(".box6").click(function(){
$(".box6").css("background","red");
});
$(".box6").dblclick(function(){
$(".box6").css("background","pink");
});
})
//鼠標事件
//mouseover() 當鼠標指針位于元素上方時
//mouseenter() 當鼠標指針穿過元素上方時
//mousemove() 當鼠標指針在指定元素上移動時
//mouseleave() 當鼠標指針離開元素時
//mouseout() 當鼠標指針從元素上移開時
//mousedown() 當鼠標指針按下時
//mouseup() 當鼠標指針在元素上松開時
//resize() 當調(diào)整當前瀏覽器窗口大小時
//pageX() 屬性是鼠標指針位置，相對于文檔左邊緣 event.pageX event:必須 參數(shù)來自事件綁定函數(shù)。
//pageY() 屬性是鼠標指針位置，相對于文檔上邊緣 event.pageY event:必須 參數(shù)來自事件綁定函數(shù)。
//mouseover() 當鼠標指針位于元素上方時
$(document).ready(function(){
$(".box7").mouseover(function(){
$(".box7").css("border-radius","40px");
});
})
//獲取鼠標位置
$(document).ready(function(){
$(document).mousemove(function(aa){
$("span").text("x: "+aa.pageX +"y: "+aa.pageY);
});
})
//事件切換:
//hover(over,out),內(nèi)部本身是兩個函數(shù)，
//over是鼠標移上元素要出發(fā)的函數(shù)；
//out是鼠標移出元素要出發(fā)的函數(shù)；
$(document).ready(function(){
$(".box9").hover(
function(){
$(this).css("background","red");
},
function(){
$(this).css("color","#fff");
}
)
})
//toggle() 如果元素可見，就切換為隱藏，否則反之
$(document).ready(function(){
$(".bt6").click(function(){
$(".p6").toggle();
})
})
</script>
<!-- 獲取、改變CSS樣式 -->
<div></div>
<button>點擊換底色</button><br>
<button>點擊改變多個css屬性</button><br>
<!-- 操作屬性的方法： -->
<!-- 添加類 \移除類-->
<p>php中文網(wǎng)！</p>
<button>點擊移除類</button>
<!-- 設(shè)置或者返回選中元素屬性 -->
<!-- hasClass()檢查被選中元素是否包含指定的class -->
<div title="cont" ></div><br>
<!-- toggleClass()添加刪除類的操作 -->
<div></div><br>
<!-- 設(shè)置內(nèi)容: -->
<div style="width: 100px;height: 100px;background: blue"></div><br>
<!-- html()返回或者設(shè)置被選中元素的內(nèi)容 -->
<p>php中文網(wǎng)，一個學校的好網(wǎng)址。</p>
<!-- val()返回或者設(shè)置被選中元素的值 -->
<input type="text" value="我是元素的值"><br>
<!-- 事件方法： -->
<!-- 當元素獲得、失去焦點時、內(nèi)容改變時 -->
失去、獲得焦點，內(nèi)容改變<input type="text">
<!-- 單擊或雙擊事件 -->
<div style="width: 100px;height: 60px;background: #ccc;"></div>
<!-- 鼠標指針位于元素上方時mouseover() -->
<div style="width: 100px;height: 60px;background: green;margin-top: 10px;"></div>
<!-- 獲取鼠標位置 -->
<div >
當前鼠標位置：<span></span>
</div>
<!-- 事件切換 -->
<div style="width: 100px;height: 60px;background: green;margin-top: 10px;">我是內(nèi)容</div>
<p style="width: 100px;height: 60px;background: blue;margin-top: 10px;"></p>
<button>點擊</button>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2019-03-20 17:29:40
Teacher's summary：事件雖然很多, 但是根據(jù)事件的發(fā)生主體,或者調(diào)用者,其實就是二個: 系統(tǒng)事件, 自定義事件