摘要：<!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單個(gè)屬性：$("選擇器").css("屬性名","屬性值")
$(document).ready(function(){
$(".bt").click(function(){
$(".box1").css("background","green");
})
})
//改變多個(gè)css屬性:
//$("選擇器").css({"屬性名1":"屬性值1","屬性名2":"屬性值2","屬性名3":"屬性值3",})
$(document).ready(function(){
$(".bt1").click(function(){
$(".box1").css({"background":"blue","width":"150px"});
})
})
//操作屬性其原理還是對(duì)DOM的操作
//addClass()該方法向被選中元素添加一個(gè)或多個(gè)類
//removeClass()該方法從被選中元素移除一個(gè)或多個(gè)類
//attr()該方法設(shè)置或者返回選中元素的屬性
//removeAttr()該方法從被選中元素移除屬性
//hasClass()該方法檢查被選中元素是否包含指定的class
//toggleClass()該方法對(duì)被選中的元素進(jìn)行添加刪除類的操作
//設(shè)置內(nèi)容：
//text()該方法返回或者設(shè)置被選中元素的文本內(nèi)容
//html()該方法返回或者設(shè)置被選中元素的內(nèi)容（類似innerHTML，可包括html標(biāo)簽本身）
//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)，一個(gè)學(xué)校的好網(wǎng)址。</h2>");
$(".p3").css("background","red");
})
})
// val()返回或者設(shè)置被選中元素的值
$(document).ready(function(){
$(".in").val("我是被修改后的值。");
})
//事件方法：
//blue()當(dāng)元素失去焦點(diǎn)，相當(dāng)于js中的onblue
//focus()當(dāng)元素獲得焦點(diǎn)時(shí)，相當(dāng)于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");
});
})
//鼠標(biāo)事件
//mouseover() 當(dāng)鼠標(biāo)指針位于元素上方時(shí)
//mouseenter() 當(dāng)鼠標(biāo)指針穿過元素上方時(shí)
//mousemove() 當(dāng)鼠標(biāo)指針在指定元素上移動(dòng)時(shí)
//mouseleave() 當(dāng)鼠標(biāo)指針離開元素時(shí)
//mouseout() 當(dāng)鼠標(biāo)指針從元素上移開時(shí)
//mousedown() 當(dāng)鼠標(biāo)指針按下時(shí)
//mouseup() 當(dāng)鼠標(biāo)指針在元素上松開時(shí)
//resize() 當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時(shí)
//pageX() 屬性是鼠標(biāo)指針位置，相對(duì)于文檔左邊緣 event.pageX event:必須 參數(shù)來自事件綁定函數(shù)。
//pageY() 屬性是鼠標(biāo)指針位置，相對(duì)于文檔上邊緣 event.pageY event:必須 參數(shù)來自事件綁定函數(shù)。
//mouseover() 當(dāng)鼠標(biāo)指針位于元素上方時(shí)
$(document).ready(function(){
$(".box7").mouseover(function(){
$(".box7").css("border-radius","40px");
});
})
//獲取鼠標(biāo)位置
$(document).ready(function(){
$(document).mousemove(function(aa){
$("span").text("x: "+aa.pageX +"y: "+aa.pageY);
});
})
//事件切換:
//hover(over,out),內(nèi)部本身是兩個(gè)函數(shù)，
//over是鼠標(biāo)移上元素要出發(fā)的函數(shù)；
//out是鼠標(biāo)移出元素要出發(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>點(diǎn)擊換底色</button><br>
<button>點(diǎn)擊改變多個(gè)css屬性</button><br>
<!-- 操作屬性的方法： -->
<!-- 添加類 \移除類-->
<p>php中文網(wǎng)！</p>
<button>點(diǎn)擊移除類</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)，一個(gè)學(xué)校的好網(wǎng)址。</p>
<!-- val()返回或者設(shè)置被選中元素的值 -->
<input type="text" value="我是元素的值"><br>
<!-- 事件方法： -->
<!-- 當(dāng)元素獲得、失去焦點(diǎn)時(shí)、內(nèi)容改變時(shí) -->
失去、獲得焦點(diǎn)，內(nèi)容改變<input type="text">
<!-- 單擊或雙擊事件 -->
<div style="width: 100px;height: 60px;background: #ccc;"></div>
<!-- 鼠標(biāo)指針位于元素上方時(shí)mouseover() -->
<div style="width: 100px;height: 60px;background: green;margin-top: 10px;"></div>
<!-- 獲取鼠標(biāo)位置 -->
<div >
當(dāng)前鼠標(biāo)位置：<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>點(diǎn)擊</button>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-03-20 17:29:40
老師總結(jié)：事件雖然很多, 但是根據(jù)事件的發(fā)生主體,或者調(diào)用者,其實(shí)就是二個(gè): 系統(tǒng)事件, 自定義事件