サマリー：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/xuexi/static/jQuery/jquery-3.3.1.min.js">&l
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/xuexi/static/jQuery/jquery-3.3.1.min.js"></script>
<title>jQuery事件總結(jié)</title>
<style>
.div_a{width: 100px; height:100px;}
.div_b{ border: 1px solid red;}
</style>
</head>
<body>
<script>
//ready() 當(dāng)我們的DOM已經(jīng)加載，頁(yè)面已經(jīng)加載完，觸發(fā)的事件
$(document).ready(function(){ // 文檔就緒函數(shù) 注意的是不能與js中body的onload事件一起使用
$('div,p').css('color','red') //給div和p標(biāo)簽添加CSS 字體紅色樣式
$('div').css({'font-size':'20px','font-weight':'bold'}) //同時(shí)給div設(shè)置兩個(gè)CSS樣式
// alert($('div').css('color')) //獲取div元素字體顏色CSS屬性值
$('div').addClass('div_a div_b') //向div元素添加兩個(gè)class類 不用帶. 多個(gè)用空格分開(kāi)間隔
$('div').removeClass('div_b') //刪除div中名為div_b的class類
// alert($('a').attr('href')) //返回a元素的href屬性值
$('a').attr('href','http://www.baidu.com') //修改a元素的href屬性值
$('a').removeAttr('href') //從a元素中移除href屬性
// alert($('div').hasClass('xn2019')) //檢查div元素class名是否是xn2019
$('.xn2019').click(function(){ //為類名為xn2019的類添加單擊事件
$(this).toggleClass('div_b') //當(dāng)前div元素進(jìn)行添加/刪除類名為div_b的切換操作
})
// alert($('div').text()) //返回div元素的文本內(nèi)容
$('div').text('wipnx.cn') //修改或添加div元素的文本內(nèi)容 從PHP中文網(wǎng)改成了ipnx.cn
// alert($('div').html()) //返回div元素的文本內(nèi)容
$('p').html('<h2>php中文網(wǎng)</h2>') //修改內(nèi)容 并修改了標(biāo)簽元素 p標(biāo)簽修改成了h2標(biāo)簽
// alert($('input').val()) //返回input框 value屬性值
$('input').val('修改的內(nèi)容') //修改input框 value屬性值
$('input').blur(function(){ // blur()當(dāng)元素失去焦點(diǎn)觸發(fā)事件,適用于input框
$('input').css('background','red') //失去焦點(diǎn)input框變成紅色
})
$('input').focus(function(){ //focus()當(dāng)元素獲得焦點(diǎn),適用于input框
$('input').css('background','#ccc') //獲得焦點(diǎn)input框變成灰色
})
$('input').change(function(){ //change()當(dāng)元素的值發(fā)生改變的時(shí)候,適用于input框
$('input').css('background','burlywood') //值改變時(shí)變成粉色
})
$('.burron_a').click(function(){ //點(diǎn)擊事件 改變所有div的背景色
$('div').css('background','pink')
})
$('.burron_a').dblclick(function(){ //雙擊擊事件 改變第一個(gè)div的背景色
$('.xn2019').css('background','pink')
})
$('div').mouseover(function(){ //當(dāng)鼠標(biāo)指針位于當(dāng)前div元素上方時(shí) 添加div_b 類class屬性
$(this).addClass('div_b')
})
$('div').mouseenter(function(){ //當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)修改當(dāng)前div中的內(nèi)容
$(this).text('新年好')
})
$('div').mousemove(function(){ //當(dāng)鼠標(biāo)指針在指定的元素中移動(dòng)時(shí)當(dāng)前div中文字縮小
$(this).css('font-size','10px')
})
$('div').mouseleave(function(){ //當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)當(dāng)前div變成粉色
$(this).css('background','pink')
})
$('div').mouseout(function(){ //當(dāng)鼠標(biāo)指針從元素上移開(kāi)時(shí)當(dāng)然div字體大小變成25PX
$(this).css('fontSize','25px')
})
$('div').mousedown(function(){ //當(dāng)鼠標(biāo)指針移動(dòng)到元素上方并按下鼠標(biāo)按鍵時(shí) 當(dāng)然div背景色變灰色
$(this).css('background','#ccc')
})
$('div').mouseup(function(){ //當(dāng)在元素上松開(kāi)鼠標(biāo)按鍵時(shí)背景色變成紅色
$(this).css('background','red')
})
$(a=0); //聲明變量
$(window).resize(function(){ //因?yàn)榇翱谑录哉{(diào)用window窗口 窗口變動(dòng)一次 在b標(biāo)簽顯示變量a的次數(shù)
$('b').text(++a)
})
$(document).mousemove(function(aa){ //因?yàn)檎{(diào)取整個(gè)文檔所以使用document 同時(shí)使用了鼠標(biāo)移動(dòng)事件 并傳參數(shù)aa
$('#b_a').text('x: '+aa.pageX+'y: '+aa.pageY) //在b標(biāo)簽輸出 x和 y的的實(shí)時(shí)位置
})
$('p').hover( //語(yǔ)法：hover(移動(dòng)上觸發(fā)函數(shù),移開(kāi)觸發(fā)的函數(shù))
function(){ //移動(dòng)上觸發(fā)函數(shù)
$(this).css('background','#ccc')
}, function(){ //移開(kāi)觸發(fā)的函數(shù) 使用，分開(kāi)
$(this).css('color','blue')
}
)
$('.burron_b').click(function(){ //按鈕點(diǎn)擊事件函數(shù)
$('p').toggle() //隱藏或顯示p 標(biāo)簽 如果p 標(biāo)簽本身隱藏點(diǎn)擊測(cè)顯示
})
})
</script>
<div class="xn2019">php中文網(wǎng)</div>
<div>您好</div>
<button class="burron_a">按鈕</button>
<p title="xinnian">新年好</p>
<button class="burron_b">隱藏/顯示</button>
<a href="http://ipnx.cn">中文網(wǎng)</a>
<br>
<input type="text" value="請(qǐng)輸入文字" >
<b> </b>
<br>
鼠標(biāo)的當(dāng)前位置是：<b id="b_a"> </b>
<!-- 總結(jié)
元素添加class類
addClass() 該方法向被選中的元素添加一個(gè)或者多個(gè)類
語(yǔ)法：$('選擇元素').addClass('CSS類選擇器名稱1 名稱2') 不用帶. 用空格分開(kāi)
案例：$('p').addClass('box box_a') //給P標(biāo)簽添加class類屬性box和box_a
-----------------
元素移除class類
removeClass() 該方法從被選中的元素移除一個(gè)或者多個(gè)類
語(yǔ)法：$('選擇元素').removeClass('選擇器名稱1 名稱2')
案例：$('p').removeClass('box box_a')//移除P標(biāo)簽的class屬性box和box_a
========================================================================
元素修改返回屬性值
attr() 該方法設(shè)置或者返回被選中元素的屬性值
返回語(yǔ)法: $('元素名').attr('元素屬性名')
案例：alert($('p').attr('title'))//返回獲取title的屬性值
修改屬性值語(yǔ)法： $('元素名').attr('元素屬性名','新修改的屬性值')
案例：$('p').attr('title','李濤')//修改P標(biāo)簽 title屬性的屬性值為李濤
------------------------------------------------------------------------------
元素中移除屬性
removeAttr() 該方法從被選中的元素中移除屬性
語(yǔ)法$('元素名').removeAttr('元素屬性名')
$('button').click(function(){
$('img').removeAttr('src') //img里的src屬性移除
})
========================================================================
檢測(cè)元素是否是指定class名
hasClass() 該方法檢查被選中的元素是否是指定class名
語(yǔ)法：alert($('div').hasClass('litao')) //檢測(cè)div的CLASS名是否為litao
-------------------------------------------
元素進(jìn)行添加/刪除類的切換操作
toggleClass()該方法對(duì)被選中元素進(jìn)行添加/刪除類的切換操作
語(yǔ)法：$('button').click(function(){
$('p,b,span').toggleClass('box')//給p,b,span標(biāo)簽添加和切換.box屬性
})
=============================================================================
設(shè)置html內(nèi)容：
返回修改元素的文本內(nèi)容
text() 該方法返回或者設(shè)置被選中的元素的文本內(nèi)容
返回語(yǔ)法：返回文本內(nèi)容語(yǔ)法$('元素').text()
案例：alert($('span').text())
修改語(yǔ)法：修改文本語(yǔ)法內(nèi)容$('元素').text('修改的元素內(nèi)容')
案例：$('b').text('成成')
-----------------------------------------------------------------
返回修改元素的文本內(nèi)容（可以修改html標(biāo)簽）
html() 該方法返回或者設(shè)置被選中的元素的內(nèi)容（類似innerHTML 可以包括html標(biāo)簽）
返回被選中元素內(nèi)容語(yǔ)法 $('元素').html()
案例：alert($('span').html())
修改內(nèi)容或替換元素標(biāo)簽 $('原元素').html('<修改元素>內(nèi)容</修改元素>')
案例：$('p').html('<h1>修改內(nèi)容</h1>')
------------------------------------------------------------------------
input框的value值的返回和修改
val() 該方法返回或者設(shè)置被選元素的值(適用于input框)
語(yǔ)法：返回value值語(yǔ)法 $('input').val()
案例：alert($('input').val())
語(yǔ)法：修改value值語(yǔ)法 $('input').val('修改的val的內(nèi)容')
案例：$('input').val('修改的value內(nèi)容')
==========================================================================
jQuery事件
在jQuery中是以調(diào)用事件函數(shù)的形式來(lái)觸發(fā)事件的，如js中的onclick事件，在jQuery則用click()來(lái)替代
簡(jiǎn)單的理解：事件方法會(huì)觸發(fā)匹配元素的事件，或者將函數(shù)綁定到所有匹配元素的某個(gè)事件
--------------------------------------------------------------------
ready() 當(dāng)我們的DOM已經(jīng)加載，頁(yè)面已經(jīng)加載完，觸發(fā)的事件==js的onload
語(yǔ)法如：
$(document).ready(function(){
})
*不能與<body onload="">一起使用
----------------------------------------------------------------------
blur()當(dāng)元素失去焦點(diǎn)==onblur
案例：$('input').blur(function(){ //獲取input框失去焦點(diǎn)
$('input').css('background','red') //當(dāng)失去焦點(diǎn)后設(shè)置顏色
})
--------------------------
focus()當(dāng)元素獲得焦點(diǎn)
案例$('input').focus(function(){ //input框獲取焦點(diǎn)
$('input').css('background','blue') //設(shè)置input框樣式
})
-------------------------------
change()當(dāng)元素的值發(fā)生改變的時(shí)候
案例：$('input').change(function(){ //input框元素值改變
$('input').css('background','pink') //設(shè)置改變后input框樣式
})
-----------------------------------------------------------------------
click()點(diǎn)擊事件
案例：$('button').click(function(){ //button是按鈕的意思，點(diǎn)擊按鈕
$('div').css('background','blue') //獲取改變?cè)氐腃SS樣式
})
-------------------------------------------
dblclick()雙擊事件
案例： $('div').dblclick(function(){ //獲取div元素 雙擊
$(this).css('background','pink') //this當(dāng)前 css設(shè)置樣式
})
-------------------------------------------------------------------------
mouseover() 當(dāng)鼠標(biāo)指針位于元素上方時(shí)會(huì)發(fā)生mouseover事件
案例： $('div').mouseover(function(){ //獲取div 鼠標(biāo)位于上方時(shí)
$('div').text('成成') //修改div 內(nèi)容
})
------------------------------------
mouseenter() 當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)會(huì)發(fā)生mouseenter事件
案例：$('div').mouseenter(function(){ //獲取div 當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)
$('div').text('成成') //修改div 內(nèi)容
})
-------------------------------------------------------------------------
mousemove() 當(dāng)鼠標(biāo)指針在指定的元素中移動(dòng)時(shí)，就會(huì)發(fā)生該事件
案例：$('div').mouseenter(function(){ //獲取div 當(dāng)鼠標(biāo)指針在指定的元素中移動(dòng)
$('div').text('成成') //修改div 內(nèi)容
})
-------------------------------------------------------------------
mouseleave() 當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)
案例：$('div').mouseleave(function(){ //獲取div 當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)
$('div').text('成成') //修改div 內(nèi)容
})
---------------------------------------------------------------------
mouseout() 當(dāng)鼠標(biāo)指針從元素上移開(kāi)時(shí)
案例：$('div').mouseout(function(){ //獲取div 當(dāng)鼠標(biāo)指針從元素上移開(kāi)時(shí)
$('div').text('成成') //修改div 內(nèi)容
})
------------------------------------------------------------------------
mousedown() 當(dāng)鼠標(biāo)指針移動(dòng)到元素上方并按下鼠標(biāo)按鍵時(shí)
案例：$('div').mousedown(function(){ //當(dāng)鼠標(biāo)指針移動(dòng)到元素上方并按下鼠標(biāo)按鍵時(shí)
$('div').text('成成') //修改div 內(nèi)容
})
-------------------------------------------------------------------------
mouseup() 當(dāng)在元素上松開(kāi)鼠標(biāo)按鍵時(shí)
案例：$('div').mouseup(function(){ //當(dāng)在元素上松開(kāi)鼠標(biāo)按鍵時(shí)
$('div').text('成成') //修改div 內(nèi)容
})
---------------------------------------------------------------------------
resize() 當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時(shí)
案例： $(window).resize(function(){ //窗口使用window函數(shù)
$(a=1);
$('b').text(a++) //調(diào)整一次窗口就再b標(biāo)簽輸出次數(shù)
--------------------------------------------------------------------------
pageX()屬性是鼠標(biāo)指針的位置，相對(duì)于文檔的左邊緣 event.pageX event：必需 參數(shù)來(lái)自事件綁定函數(shù)。
pageY()屬性是鼠標(biāo)指針的位置，相對(duì)于文檔的上邊緣 event.pageY event：必需 參數(shù)來(lái)自事件綁定函數(shù)。
案例： $(document).mousemove(function(aa){ //因?yàn)檎{(diào)取整個(gè)文檔所以使用document
$('b').text('x: '+aa.pageX+'y: '+aa.pageY) //在b標(biāo)簽輸出 x和 y的位置
})
-----------------------------------------------------------------------------------
事件切換：
------------------
hover(over,out)
over:鼠標(biāo)移上元素上要觸發(fā)的一個(gè)函數(shù)
out:鼠標(biāo)移出元素上要觸發(fā)的一個(gè)函數(shù)
案例： $('div').hover( //在元素div下設(shè)置切換函數(shù)
function(){ //鼠標(biāo)以上元素觸發(fā)的函數(shù)
$(this).css('background','red') //鼠標(biāo)移上修改div背景
},
function(){ //鼠標(biāo)移開(kāi)觸發(fā)的函數(shù)
$(this).css('color','#fff') //鼠標(biāo)一款修改div字體顏色
}
)
----------------------------------------------------------------
toggle() 如果元素是可見(jiàn)的，就切換為隱藏，否則相反
$('button').click(function(){ //按鈕 點(diǎn)擊函數(shù)
$('p').toggle().css('background','red') //p 標(biāo)簽隱藏顯示切換
-->
</body>
</html>
添削の先生：查無(wú)此人添削時(shí)間：2019-02-11 09:54:48
先生のまとめ：完成的不錯(cuò)。筆記記錄有很多方式。你也可以試試用表格，一行一個(gè)事件，記錄會(huì)簡(jiǎn)短，比較容易找到。