摘要：<!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() //當DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)
$(document).ready(function () {
// focus()//當元素獲得焦點時
// $('input').focus(function () {
// $('input').css('background','red')
// })
// blur()//當元素失去焦點時
// $('input').blur(function () {
// $('input').css('background','blue')
// })
// toggle()//切換元素為可見或者隱藏
// click()//當點元素是，會發(fā)生事件。
// $('button').click(function () {
// $('input').toggle()
// })
// dblclick()//當雙擊元素時，會發(fā)生事件
// $('button').dblclick(function () {
// $('input').toggle()
// })
// change()//當元素的值發(fā)生改變時，會發(fā)生事件。
// $('input').change(function () {
// $('input').css('color','pink')
// })
// hover(over,out) ///切換鼠標移動或移除元素
// $('div').hover(function () {
// $(this).css('background','pink');},
// function(){
// $(this).css('background','red')
// }
// )
// mouseenter()//當鼠標指針穿過元素時，會發(fā)生事件,大多數(shù)時候會與mouseleave 事件一起使用。
// $('p').mouseenter(function(){
// $("p").css("background","yellow");
// });
// mouseleave()//當鼠標指針離開元素時，會發(fā)生 事件,大多數(shù)時候會與mouseenter 事件一起使用。
// $('p').mouseleave(function(){
// $("p").css("background","#fff");
// });
// mouseover()//當鼠標移動到元素上，觸發(fā)事件；
// $('p').mouseover(function(){
// $("p").css("background","red");
// });
// mousemove()//當鼠標移動到元素上，觸發(fā)事件
// $('p').mousemove(function(){
// $("p").css("background","red");
// });
// mouseup()//當鼠標移動到元素上，松開觸發(fā)事件
// $('button').mouseup(function(){
// $("p").css("background","pink");
// });
// mousedown()//當鼠標移動到元素上，按下觸發(fā)事件；
// $('button').mousedown(function(){
// $("p").css("background","red");
// });
// resize()//當調整瀏覽器窗口的大小時
// $(window).resize(function () {
// alert("窗口改變了！")
// });
//resize()//當調整瀏覽器窗口的大小時.統(tǒng)計次數(shù)
// var x=0;
// $(window).resize(function() {
// $('span').text(x++);
// });
// pageX()//獲取鼠標移動時，x坐標
// pageY()//獲取鼠標移動時，y坐標
// $(document).bind('mousemove',function(e){
// $('#box').text('x坐標: ' + e.pageX + ', Y坐標: '+ e.pageY);
// });
// attr()//設置或返回被選元素的屬性值
// $('button').click(function () {
// $('img').attr('src','/images/images/2.jpg')
// })
// removeAttr()//從每一個匹配的元素中刪除一個屬性
// $('button').click(function () {
// $('img').removeAttr('src')
// })
// addClass()//為每個匹配的元素添加指定的類名。
// $('button').click(function () {
// $('p').addClass('box')
// })
// removeClass()//從所有匹配的元素中刪除全部或者指定的類。
// $('button').click(function () {
// $('p').removeClass('box')
// })
// toggleClass()//如果存在（不存在）就刪除（添加）一個類。
// $('p').click(function () {
// $('p').toggleClass('box')
// })
// html()//取得第一個匹配元素的html內(nèi)容，可以改變html元素標簽
// $('p').html('<h2>html來改變標簽</h2>')
// text()//獲得匹配元素文本的內(nèi)容
// $('p').text('text來改變文本內(nèi)容')
// val()//獲得匹配元素的當前值
// $('input').val('val來修改內(nèi)容')
})
</script>
<body>
<img src="/images/images/1.jpg">
<div id="box">
<span>統(tǒng)計</span>
<p>表單提交</p>
<lable>用戶名</lable>
<input type="text" value="用戶名" id="kk"><br>
<lable>密碼</lable>
<input type="password"><br>
<button>提交</button>
</div>
</body>
</html>
批改老師：天蓬老師批改時間：2019-01-13 10:30:42
老師總結：jQuery中的事件, 是對原生事件做了封裝的, 很方便, 但并不是萬能的, 有一些事件, 原生會更方便,等學得多了, 就知道了