<img src="https://www.520longzhigu.com/diannao/img/1.jpg" width="300"><img src="https://www.520longzhigu.com/diannao/img/1.jpg" width="300"><img src="https://www.520longzhigu.com/diannao/img/1.jpg" width="300">?<script src="https://www.520longzhigu.com/diannao/js/jquery-3.4.1.min.js"></script><script>// 點(diǎn)擊一下 , 切換照片$("img").click( function(){// this 是事件觸發(fā)的源頭$(this).attr( "src","img/2.jpg" );} );// 移動(dòng)到元素上$("img").mouseover( function(){$(this).css( "border","2px solid red" );} );// 離開元素$("img").mouseout( function(){$(this).css( "border","2px solid white" );} );</script>鍵盤事件用戶每次按下或者釋放鍵盤上的鍵時(shí)都會(huì)產(chǎn)生事件 。
<input><h3></h3>?<script src="https://www.520longzhigu.com/diannao/js/jquery-3.4.1.min.js"></script><script>$("input").keyup( function(){// 獲取框中的值var str = $(this).val();// 將 h3 元素中的文本內(nèi)容更改為 str$("h3").text( str );} );</script>表單事件當(dāng)元素獲得焦點(diǎn)時(shí) , 會(huì)觸發(fā) focus 事件 , 失去焦點(diǎn)時(shí) , 會(huì)觸發(fā) blur 事件 。
<form action=""><p>帳號(hào):<input id="a" value="https://www.520longzhigu.com/diannao/請(qǐng)輸入帳號(hào)..."></p><p>電話:<input id="b"></p></form>?<script src="https://www.520longzhigu.com/diannao/js/jquery-3.4.1.min.js"></script><script>// 獲得焦點(diǎn)(激活/點(diǎn)擊一下)$("#a").focus(function(){$(this).val("");});?// 失去焦點(diǎn)(未激活/未點(diǎn)擊)$("#a").blur(function(){$(this).val("請(qǐng)輸入帳號(hào)...");});</script>鼠標(biāo)懸停復(fù)合事件hover() 方法相當(dāng)于 mouseover 與 mouseout 事件的組合 。
<img src="https://www.520longzhigu.com/diannao/img/3.jpg" width="400">?<script src="https://www.520longzhigu.com/diannao/js/jquery-3.4.1.min.js"></script><script>$("img").hover(function(){$(this).css("border","5px solid red");},function(){$(this).css("border","5px solid white");});</script>連續(xù)點(diǎn)擊復(fù)合事件<h2>選擇</h2><ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li></ul>?<script src="https://www.520longzhigu.com/diannao/js/jquery-3.4.1.min.js"></script><script>$("h2").click(function(){// 連續(xù)點(diǎn)擊 , ul 的可見和隱藏進(jìn)行切換$("ul").toggle();});</script>事件的動(dòng)態(tài)綁定對(duì) dom 元素綁定事件的另一種寫法
綁定一個(gè)事件$(".del").on('click', function() {alert('hello');})綁定多個(gè)事件$(".del").on('click mouseover', function() {alert('hello');})元素的隱藏和顯示改變?cè)氐膶捄透撸◣?dòng)畫效果)show(speed):顯示hide(speed):隱藏toggle(speed) 等價(jià)于 show + hide:顯示的隱藏 , 隱藏的顯示可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度 , 可以取以下值:”slow”、”fast” 或毫秒
<style>div{width: 200px;height: 200px;background-color: black;}</style><body><button id="btn1">顯示</button><button id="btn2">隱藏</button><button id="btn3">切換</button><div></div>?<script src="https://www.520longzhigu.com/diannao/js/jquery-3.4.1.min.js"></script><script>$("#btn1").click(function(){$("div").show('slow');});$("#btn2").click(function(){// fast:快速的// slow:緩慢的// 毫秒:自定義$("div").hide(2000);});$("#btn3").click(function(){$("div").toggle(1000);});</script></body>改變?cè)氐母撸ɡ煨Ч﹕lideDown(speed):顯示slideUp(speed):隱藏slideToggle(speed) 等價(jià)于 slideDown + slideUp可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度 , 可以取以下值:”slow”、”fast” 或毫秒
<script>$("#btn1").click(function(){// 向下伸展$("div").slideDown(1000);});$("#btn2").click(function(){// 向上收縮$("div").slideUp(1000);});$("#btn3").click(function(){// 切換$("div").slideToggle(1000);});</script>不改變?cè)氐拇笮。ǖ氲鲂ЧゝadeIn(speed) 顯示fadeOut(speed) 隱藏fadeToggle(speed) 等價(jià)于 fadeIn + fadeOut 動(dòng)畫fadeTo(speed, 透明度) 方法允許漸變?yōu)榻o定的不透明度(值介于 0 與 1 之間)可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度 , 可以取以下值:”slow”、”fast” 或毫秒
以上關(guān)于本文的內(nèi)容,僅作參考!溫馨提示:如遇健康、疾病相關(guān)的問題,請(qǐng)您及時(shí)就醫(yī)或請(qǐng)專業(yè)人士給予相關(guān)指導(dǎo)!
「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容,希望對(duì)您有所幫助:- 蘋果手機(jī)怎么設(shè)置壁紙 蘋果手機(jī)如何設(shè)置壁紙
- js阻止事件冒泡的方法 jquery刪除節(jié)點(diǎn)的方法
- 保護(hù)文件安全的方法 win7局域網(wǎng)共享文件夾設(shè)置
- win7系統(tǒng)共享設(shè)置的詳細(xì)操作方法 win7局域網(wǎng)共享設(shè)置
- 文件共享的方法步驟圖解 兩臺(tái)電腦共享一臺(tái)打印機(jī)怎么設(shè)置
- 郵箱自動(dòng)回復(fù)是對(duì)方收到了嗎 郵箱自動(dòng)回復(fù)怎么設(shè)置
- 智能門禁ic卡設(shè)置
- 同步服務(wù)器時(shí)間 windows時(shí)間同步服務(wù)器設(shè)置
- jquery實(shí)現(xiàn)復(fù)選框的全選 jquery選擇checkbox中的值
- 教你設(shè)置軟件禁止聯(lián)網(wǎng) win10禁止程序聯(lián)網(wǎng)方法
