abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="/s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-3.3.1.min.js"></script>
</head>
<style>
body{background: #3C8DBC;}
div{width:300px;height:200px;padding: 10px 10px;border: 1px solid #000000;border-radius: 8px; margin:450px auto;}
.box{background: #FF8600;}
</style>
<script>
// ready() //當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)
$(document).ready(function () {
// focus()//當(dāng)元素獲得焦點(diǎn)時(shí)
// $('input').focus(function () {
// $('input').css('background','red')
// })
// blur()//當(dāng)元素失去焦點(diǎn)時(shí)
// $('input').blur(function () {
// $('input').css('background','blue')
// })
// toggle()//切換元素為可見(jiàn)或者隱藏
// click()//當(dāng)點(diǎn)元素是，會(huì)發(fā)生事件。
// $('button').click(function () {
// $('input').toggle()
// })
// dblclick()//當(dāng)雙擊元素時(shí)，會(huì)發(fā)生事件
// $('button').dblclick(function () {
// $('input').toggle()
// })
// change()//當(dāng)元素的值發(fā)生改變時(shí)，會(huì)發(fā)生事件。
// $('input').change(function () {
// $('input').css('color','pink')
// })
// hover(over,out) ///切換鼠標(biāo)移動(dòng)或移除元素
// $('div').hover(function () {
// $(this).css('background','pink');},
// function(){
// $(this).css('background','red')
// }
// )
// mouseenter()//當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)，會(huì)發(fā)生事件,大多數(shù)時(shí)候會(huì)與mouseleave 事件一起使用。
// $('p').mouseenter(function(){
// $("p").css("background","yellow");
// });
// mouseleave()//當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)，會(huì)發(fā)生 事件,大多數(shù)時(shí)候會(huì)與mouseenter 事件一起使用。
// $('p').mouseleave(function(){
// $("p").css("background","#fff");
// });
// mouseover()//當(dāng)鼠標(biāo)移動(dòng)到元素上，觸發(fā)事件；
// $('p').mouseover(function(){
// $("p").css("background","red");
// });
// mousemove()//當(dāng)鼠標(biāo)移動(dòng)到元素上，觸發(fā)事件
// $('p').mousemove(function(){
// $("p").css("background","red");
// });
// mouseup()//當(dāng)鼠標(biāo)移動(dòng)到元素上，松開(kāi)觸發(fā)事件
// $('button').mouseup(function(){
// $("p").css("background","pink");
// });
// mousedown()//當(dāng)鼠標(biāo)移動(dòng)到元素上，按下觸發(fā)事件；
// $('button').mousedown(function(){
// $("p").css("background","red");
// });
// resize()//當(dāng)調(diào)整瀏覽器窗口的大小時(shí)
// $(window).resize(function () {
// alert("窗口改變了！")
// });
//resize()//當(dāng)調(diào)整瀏覽器窗口的大小時(shí).統(tǒng)計(jì)次數(shù)
// var x=0;
// $(window).resize(function() {
// $('span').text(x++);
// });
// pageX()//獲取鼠標(biāo)移動(dòng)時(shí)，x坐標(biāo)
// pageY()//獲取鼠標(biāo)移動(dòng)時(shí)，y坐標(biāo)
// $(document).bind('mousemove',function(e){
// $('#box').text('x坐標(biāo): ' + e.pageX + ', Y坐標(biāo): '+ e.pageY);
// });
// attr()//設(shè)置或返回被選元素的屬性值
// $('button').click(function () {
// $('img').attr('src','/images/images/2.jpg')
// })
// removeAttr()//從每一個(gè)匹配的元素中刪除一個(gè)屬性
// $('button').click(function () {
// $('img').removeAttr('src')
// })
// addClass()//為每個(gè)匹配的元素添加指定的類名。
// $('button').click(function () {
// $('p').addClass('box')
// })
// removeClass()//從所有匹配的元素中刪除全部或者指定的類。
// $('button').click(function () {
// $('p').removeClass('box')
// })
// toggleClass()//如果存在（不存在）就刪除（添加）一個(gè)類。
// $('p').click(function () {
// $('p').toggleClass('box')
// })
// html()//取得第一個(gè)匹配元素的html內(nèi)容，可以改變html元素標(biāo)簽
// $('p').html('<h2>html來(lái)改變標(biāo)簽</h2>')
// text()//獲得匹配元素文本的內(nèi)容
// $('p').text('text來(lái)改變文本內(nèi)容')
// val()//獲得匹配元素的當(dāng)前值
// $('input').val('val來(lái)修改內(nèi)容')
})
</script>
<body>
<img src="/images/images/1.jpg">
<div id="box">
<span>統(tǒng)計(jì)</span>
<p>表單提交</p>
<lable>用戶名</lable>
<input type="text" value="用戶名" id="kk"><br>
<lable>密碼</lable>
<input type="password"><br>
<button>提交</button>
</div>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2019-01-13 10:30:42
Teacher's summary：jQuery中的事件, 是對(duì)原生事件做了封裝的, 很方便, 但并不是萬(wàn)能的, 有一些事件, 原生會(huì)更方便,等學(xué)得多了, 就知道了