jQuery鏈?zhǔn)秸{(diào)用、鼠標(biāo)移入移出、輪播、鍵盤(pán)事件

style

成都創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比臨夏網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式臨夏網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋臨夏地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴(lài)。

? ? *{

? ? ? ? margin: 0%;

? ? ? ? padding: 0%;

? ? }

? ? .box{

? ? ? ? width: 340px;

? ? ? ? border: 1px solid blue;

? ? ? ? margin: 10px auto;

? ? }

? ? .box h1{

? ? ? ? height: 40px;

? ? ? ? color: #fff;

? ? ? ? padding-left: 15px;

? ? ? ? background-color: blue;

? ? ? ? font-size: 25px;

? ? }

? ? ul li{

? ? ? ? padding-left: 15px;

? ? ? ? list-style-type: none;

? ? ? ? line-height: 45px;

? ? ? ? border-bottom: 1px dashed #ccc;

? ? }

? ? ul li:last-child{

? ? ? ? border-bottom: none;

? ? }

/style

/head

body

div class="box"

? ? h1

? ? ? ? 祝福冬奧

? ? /h1

? ? ul

? ? ? li貝克漢姆/li

? ? ? li 姚明/li

? ? ? li張宏/li

? ? ? li肖恩懷特/li

? /ul

? /div

script src="./jquery-1.12.4.js"/script

script

? ? /* jQuery的鏈?zhǔn)秸{(diào)用 */

? ? /* $('div').$('div').text('我是學(xué)生').css('color','red').attr({name:'zhangsan',age:30}) */

? ? /* 鏈?zhǔn)秸{(diào)用的原理jq里面的方法都會(huì)return this 把當(dāng)前調(diào)用者return出去實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用 */

? /* $('ul li').first().css('background','yellow').end().eq(1).css('background','red') */

? ? /* 獲取的只是content里面的距離,不包括padding margin border里面的距離 */

? ? /* 返回以像素為單位的top和left的坐標(biāo),僅對(duì)可見(jiàn)元素有效 */

? ? /* top和left值都會(huì)包括自己的margin和父元素border的值 */

? ? console.log($('div2').offset().top);

? ? console.log($('ul').width());

? ? console.log($('ul').height());

? ? /* offsetParent 返回最近的自己定位的祖先元素 */

? ? console.log($('div2').offsetParent());

? ? /* position() 返回第一個(gè)匹配元素相對(duì)于父元素的位置 */

? ? console.log($('div').position());

? /* scrollLeft([position]) 參數(shù)可選,設(shè)置返回匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移*/

? ? /* 設(shè)置滾動(dòng)條的距離 */

? ? $(window).scrollLeft(100)

? ? /* 獲取滾動(dòng)條的距離 */

? ? $(window).scroll(function(){

? ? ? ? console.log($(document).scrollLeft());

? ? })

/script

style

? ? .div1{

? ? ? ? width: 300px;

? ? ? ? height: 300px;

? ? ? ? border: 1px solid red;

? ? }

? ? .div2{

? ? ? ? width: 200px;

? ? ? ? height: 200px;

? ? ? ? background-color: red;;

? ? }

/style

/head

body

div class="div1"

? ? div class="div2"

? /div

/div

script src="./jquery-1.12.4.js"/script

script

? ? /* mouseenter mouseleave 在進(jìn)入子元素區(qū)域時(shí)不會(huì)觸發(fā)

? ? ? ?mouseover 和mouseout 會(huì)觸發(fā) */

? ? /* $('.div1').mouseenter(function(){

? ? ? ? $(this).css('background','green')

? ? })

? ? $('.div1').mouseleave(function(){

? ? ? ? $(this).css('background','yellow')

? ? }) */

? ? /* 由mouseenter 和mouseleave組成 */

? ? $('.div1').hover(function(){

? ? ? ? $(this).css('background','yellow')

? ? ? ? console.log(1);

? ? })

/script

style

? ? *{

? ? ? ? margin: 0%;

? ? ? ? padding: 0%;

? ? }

? ? .box{

? ? ? ? width: 340px;

? ? ? ? border: 1px solid blue;

? ? ? ? margin: 10px auto;

? ? }

? ? .box h1{

? ? ? ? height: 40px;

? ? ? ? color: #fff;

? ? ? ? padding-left: 15px;

? ? ? ? background-color: blue;

? ? ? ? font-size: 25px;

? ? }

? ? ul li{

? ? ? ? padding-left: 15px;

? ? ? ? list-style-type: none;

? ? ? ? line-height: 45px;

? ? ? ? border-bottom: 1px dashed #ccc;

? ? }

? ? ul li:last-child{

? ? ? ? border-bottom: none;

? ? }

/style

/head

body

div class="box"

? ? h1

? ? ? ? 祝福冬奧

? ? /h1

? ? ul

? ? ? li貝克漢姆/li

? ? ? li 姚明/li

? ? ? li張宏/li

? ? ? li肖恩懷特/li

? /ul

? /div

? script src="./jquery-1.12.4.js"/script

? script

? ? /* $('li:eq(0)').mouseenter(function(){

? ? ? ? $(this).css('background','red')

? ? })

? ? $('li:eq(0)').mouseout(function(){

? ? ? ? $(this).css('background','')

? ? }) */

? ? $('li').hover(function(){

? ? ? ? /* css('background','')不會(huì)改變?cè)卦瓉?lái)bgc樣式 */

? ? ? ? $('li').first().css('background','red').siblings().css('background','')

? ? })

? ? $('li:eq(1)').mouseenter(function(){

? ? ? ? $(this).css('background','yellow')

? ? })

? ? $('li:eq(1)').mouseout(function(){

? ? ? ? $(this).css('background','')

? ? })

? /script

style

? ? .box{

? ? ? ? margin: 30px auto;

? ? ? ? width: 500px;

? ? ? ? height: 300px;

? ? ? ? border: 1px solid cyan;

? ? ? ? position: relative;

? ? }

? ? .img-list img{

? ? ? ? width: 500px;

? ? ? ? height: 300px;

? ? ? ? display: block;

? ? ? ? position: absolute;

? ? ? ? left: 0;

? ? ? ? top: 0;

? ? }

/style

/head

body

div class="box"

? ? div class="img-list"

? ? ? ? img src="./imgs/1.jpg" alt=""

? ? ? ? img src="./imgs/2.jpg" alt=""

? ? ? ? img src="./imgs/3.jpg" alt=""

? ? ? ? img src="./img/4.jpg" alt=""

? ? /div

/div

button style="margin-left: 450px;" class="left"后退/button

button class="right"前進(jìn)/button

script src="./jquery-1.12.4.js"/script

script

? ? /* 定時(shí)器 過(guò)2s 顯示一張圖 顯示最后一張圖的時(shí)候再跳回第一張 */

? ? /* let i = 0

? ? $('img').eq(0).show().siblings().hide();

? ? setInterval(function(){

? ? ? i++;

? ? ? if(i==$('img').length){

? ? ? ? ? i=0

? ? ? } */

? ? ? /* 淡入淡出 */

? ? ? /* $('img').eq(i).fadeIn('slow').siblings().fadeOut('slow')

? ? },2000) */

? let i = 0;

? ? let timer = null

? ? $('img').eq(i).show().siblings().hide();

? ? /* 自動(dòng)播放 */

? ? show();

? ? $('.left').click(function(){

? ? ? ? /* 先清空定時(shí)器 阻止自動(dòng)播放 */

? ? ? ? clearInterval(timer);

? ? ? ? i--;

? ? ? ? /* 防止減到-1找不到對(duì)應(yīng)的圖片 */

? ? ? ? if(i == -1){

? ? ? ? ? i=$('img').length - 1

? ? ? ? }

? ? ? ? /* 展示當(dāng)前對(duì)應(yīng)的圖片其他圖片淡出 */

? ? ? ? $('img').eq(i).show().siblings().hide();

? ? ? ? /* 繼續(xù)開(kāi)始自動(dòng)播放 */

? ? ? ? show();

? ? })

? ? $('.right').click(function(){

? ? ? ? /* 先清空定時(shí)器 阻止自動(dòng)播放 */

? ? ? ? clearInterval(timer);

? ? ? ? i++;

? ? ? ? /* 防止減到-1 找不到對(duì)應(yīng)的圖片 */

? ? ? ? if(i==$('img').length){

? ? ? ? ? i=0

? ? ? ? }

? ? ? ? /* 展示當(dāng)前對(duì)應(yīng)的圖片其他圖片淡出 */

? ? ? ? $('img').eq(i).show().siblings().hide();

? ? ? ? /* 繼續(xù)開(kāi)始自動(dòng)播放 */

? ? ? ? show()

? ? ? ? /* 定時(shí)器 過(guò)兩秒 顯示一張圖 顯示最后一張圖的時(shí)候

? ? ? ? 再跳到第一張 */

? ? })

? ? function show(){

? ? ? ? timer = setInterval(function (){

? ? ? ? ? ? i++;

? ? ? ? ? ? if(i == $('img').length){

? ? ? ? ? ? ? ?i = 0

? ? ? ? ? ? }

? ? ? ? ? ? /* fadeIn 淡入 fadeOut淡出 */

? ? ? ? ? ? $('img').eq(i).fadeIn().siblings().fadeOut();

? ? ? ? },2000)

? ? }

/script

body

用戶(hù)名:input type="text"br

密碼: input type="password"

script src="./jquery-1.12.4.js"/script

script

? ? /* 按下鍵盤(pán) */

? ? /* $('input[type=text]').keydown(function(){

? ? ? ? alert('我按下了')

? ? }) */

? /* 抬起鍵盤(pán) */

? ? /* $('input[type=password]').keyup(function(){

? ? ? ? alert('我抬起了')

? ? }) */

? /* keypress 連續(xù)敲擊鍵盤(pán) */

? ? /* $('input[type=text]').keypress(function(){

? ? ? ? alert('連續(xù)打字')

? ? }) */

? ? $(window).keyup(function(e){

? ? ? ? if(e.keyCode==13){

? ? ? ? ? ? alert('已提交')

? ? ? ? }

? ? })

/script

/body

jQuery鍵盤(pán)事件中event.keyCode==13相當(dāng)于按下了那個(gè)鍵

當(dāng)用戶(hù)按下enter鍵時(shí)觸發(fā)from提交，而不只是點(diǎn)擊提交按鈕才提交！這樣更友好。 13表示enter按鍵的keyCode編碼

jquery的鍵盤(pán)事件分為keypress、keydown和keyup事件

一、鍵盤(pán)事件

1、keypress()事件

keypress當(dāng)按鈕被按下時(shí)，會(huì)發(fā)生該事件，我們可以理解為按下并抬起同一個(gè)按鍵。

2、keydown()事件

當(dāng)按鈕被按下時(shí)，發(fā)生 keydown 事件（多用于游戲開(kāi)發(fā)，比如一直按空格鍵進(jìn)行攻擊）。

3、keyup事件

keyup 事件會(huì)在按鍵釋放時(shí)觸發(fā)，也就是你按下鍵盤(pán)起來(lái)后的事件

二、通過(guò)鍵盤(pán)事件可以進(jìn)行相應(yīng)操作

$(document).ready(function() {

//釋放按鍵時(shí)

$(document).keyup(function(event){

if(event.keyCode=="13"){ //13表示回車(chē)鍵的代碼

alert("釋放按鍵");

}

})

//按下按鍵時(shí)

$(document).keydown(function(event){

if(event.keyCode=="13"){

alert("按下按鍵");

}

})

//輸入字符時(shí)

$(document).keypress(function(event){

if(event.keyCode=="13"){

alert("輸入字符");

}

})

//獲取鍵盤(pán)的 鍵碼值 方法（如果不知道某個(gè)鍵對(duì)應(yīng)的 鍵碼值，可用這個(gè)方法，在鍵盤(pán)上按該鍵，就會(huì)彈出對(duì)應(yīng)的值 ）

$(document).keyup(function(event){

alert(event.keyCode);

})

});

jquery 模擬鍵盤(pán)按下

function AHrefClick (){

var e = jQuery.Event("keydown");//模擬一個(gè)鍵盤(pán)事件

e.keyCode = 13;//keyCode=13是回車(chē)

$("#id").trigger(e);//模擬按下回車(chē)

}

要模擬鍵盤(pán)事件，首先要在需要模擬的元素上綁定事件才能模擬。比如先：

$(".div").on("keydown","input",function(){

alert("ABC");

});

然后再執(zhí)行：

var e = jQuery.Event("keydown");//模擬一個(gè)鍵盤(pán)事件

e.keyCode = 13;//keyCode=13是回車(chē)

$(".div input").trigger(e);//模擬按下回車(chē)

如何用js或jquery實(shí)現(xiàn)點(diǎn)擊事件觸發(fā)鍵盤(pán)

當(dāng)按鈕被按下時(shí)，發(fā)生 keydown 事件。

keydown() 方法觸發(fā) keydown 事件，或規(guī)定當(dāng)發(fā)生 keydown 事件時(shí)運(yùn)行的函數(shù)。

語(yǔ)法

$(selector).keydown(function)

例如：

$(document).keydown(function(event){

alert(event.keyCode);//彈出按鍵的對(duì)應(yīng)值?

});

jquery中怎么添加鍵盤(pán)事件？

!--?把下邊所有代碼放到?.html?文件中，打開(kāi)看效果就知道啦?--

html

headtitle/title/head

body

按一下鍵盤(pán)試試

/body

/html

script?src=""?type="text/javascript"/script

script?type="text/javascript"

//?當(dāng)頁(yè)面執(zhí)行?onkeydown?事件（鍵盤(pán)點(diǎn)擊事件）的時(shí)候，執(zhí)行方法?function(e){}

$(document).keydown(function(e){

//?這個(gè)判斷是為了兼容所有瀏覽器，使?e?能被所有瀏覽器所解析

if(!e)?var?e?=?window.event;??

//?這里就是要執(zhí)行的方法體，其中?e?就是鍵盤(pán)對(duì)象

//?其中?e.keyCode（Code中C一定要大寫(xiě)）?就是按下的鍵的鍵值?

alert("鍵盤(pán)按鍵的?keycode?是?"?+?e.keyCode);

})

/script

jquery 敲擊鍵盤(pán)事件

最快捷的修改辦法：

$(document).ready(function(){

var p = $("#p").click(function(){

$(this).hide();

});

});

//此處是需要綁定esc事件的代碼，當(dāng)esc按下時(shí)觸發(fā)hide方法

$(document).bind('keydown', 'esc',function (evt){

//關(guān)閉層代碼

$(this).hide();

return false;

});

網(wǎng)站名稱(chēng)：jquery鍵盤(pán)事件,jquery鍵盤(pán)事件顯示隱藏盒子
網(wǎng)頁(yè)網(wǎng)址：http://jinyejixie.com/article46/dssoohg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、定制開(kāi)發(fā)、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)