jQuery 事件 - keydown() 方法的應用

阿新 • • 發佈：2018-11-09

實現一個需求：當按住鍵盤的上下左右鍵的時候，自定義一個小球會向你控制的方向移動。
原理：當發生 keydown 事件時執行一個函式，結合上下左右四個鍵位的ASCII 碼實現不同的效果。
效果展示：在這裡插入圖片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<style>
    .div1{
        width: 100px;
        height:100px;
        position: absolute;
        left:50%;
        margin-left:-50px;
        background: #af1819;
        border-radius: 50%;
    }
</style>
<body>
<div class="div1"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script>
    $(document).keydown(function(e){
        if(e.keyCode==40)  //向下移動
        {
            $(".div1").css("top",parseInt($('.div1').css('top'))+10+'px') //parseInt（）字串轉換成數字
        };
        if(e.keyCode==38)
        {
            console.log(parseInt($('.div1').css('top')) -10 +'px');

            $(".div1").css("top",parseInt($('.div1').css('top')) -10 +'px')
        };
        if(e.keyCode==37)
        {
            // console.log(e.keyCode)
            $(".div1").css("left",parseInt($('.div1').css('left'))-10+'px')
        };
        if(e.keyCode==39)
        {
            // console.log(e.keyCode)
            $(".div1").css("left",parseInt($('.div1').css('left'))+10+'px')
        };

    })
</script>
</html>

jQuery 事件 - keydown() 方法的應用

jQuery 事件 - keydown() 方法的應用實現一個需求：當按住鍵盤的上下左右鍵的時候，自定義一個小球會向你控制的方向移動。原理：當發生 keydown 事件時執行一個函式，結合上下左右四個鍵位的ASCII 碼實現不同的效果。效果展示： <!doctype ht

jQuery 事件 bind() 方法

red 分隔額外事件處理程序 ack brush bsp 運行映射 bind() 方法為被選元素添加一個或多個事件處理程序，並規定事件發生時運行的函數。 $(selector).bind(event,data,function）//語法 event必需。規定添

jQuery 事件 - click() 方法

1.方法簡介當點選元素時，會發生 click 事件。當滑鼠指標停留在元素上方，然後按下並鬆開滑鼠左鍵時，就會發生一次 click。 click() 方法觸發 click 事件，或規定當發生 click 事件時執行的函式 2.click()方法觸發自定義函式myfun()： $

jquery事件--bind()方法

bind在表單提交時,繫結提交按鈕點選事件, 返回false能有效地阻止表單提交 $("#saveBtn").bind("click",function(){ //驗證資料不能為空 $(

jQuery事件對象的屬性和方法

行為 class down 接受觸發觸發事件 this 右鍵 lan jQuery事件對象的屬性和方法事件對象的屬於與方法有很多，但是我們經常用的只有那麽幾個，這裏我主要說下作用與區別 event.type：獲取事件的類型觸發元素的事件類型 $("a").cli

<jQuery> <方法> 十八. 移除事件, 觸發事件, 事件對象(阻止冒泡, 阻止跳轉)

value func bsp 方法 function 事件 opp put baidu <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JQuery——鍵盤事件.keydown()、.keyup()和.keypress()

input元素 soft 組合鍵 pan 獲取得到輸入文本獲得 down 鍵盤事件.keydown()、.keyup()和.keypress()1 .keydown()當用戶在一個元素上第一次按下鍵盤上字母鍵的時候，就會被觸發，與基本事件參數處理保持一

jQuery 事件方法

-i read 匹配 pos 返回 key width w3c change 事件方法觸發器或添加一個函數到被選元素的事件處理程序。下面的表格列出了所有用於處理事件的 jQuery 方法。方法描述 bind() 向元素添加事件處理程序 blur() 添加/觸發

jQuery三——篩選方法、事件

類名 dom對象 doc 應用百度 class bottom 代碼示例 ron 目錄一、jquery常用篩選方法　　以下為jquery的常用篩選方法：　　代碼示例如下： <!DOCTYPE html> <html lang="en"

jQuery事件對象event的屬性和方法

元素 pre prev http dom tde 區別 class 規範事件處理（事件對象、目標元素的獲取，事件對象的屬性、方法等）在不同瀏覽器之間存在差異，jQuery在遵循W3C規範的情況下做了封裝統一一、事件對象常用的屬性： event.type：獲取事

常用的JQuery事件方法

click()方法：該函式在使用者點選 HTML 元素時執行。 dblclick()方法：當雙擊元素時，會發生 dblclick 事件。 mouseenter()方法：當滑鼠指標穿過元素時，會發生 mouseenter 事件。 mouseleave()方法：當滑鼠指標離開元素

jquery的trigger()方法，自動觸發事件

trigger() 方法觸發被選元素上指定的事件以及事件的預設行為（比如表單提交）。該方法與triggerHandler() 方法類似，不同的是 triggerHandler() 不觸發事件的預設行為。與方法相比triggerHandler() 的不同之處: 它不

jQuery的事件委託方法bind 、live、delegate、on之間有什麼區別？

(1)、bind 【jQuery 1.3之前】定義和用法：主要用於給選擇到的元素上繫結特定事件型別的監聽函式；語法：bind(type,[data],function(eventObject))；特點：　　(1)、適用於頁面元素靜態繫結。只能給呼叫它的時候已經

jQuery的兩個合成事件---hover()方法和toggle()方法

1.hover()方法語法結構為：hover(enter,leave); 該方法用於滑鼠的懸停事件，當游標移動到元素上時，會觸發第一個函式（enter），當游標移除這個元素時，會觸發第二個函式（leave） $(function(){ $('div').ho

LBS——JS非同步事件，同步執行（Promise方法應用）

此方法主要解決，多條非同步事件，同步執行的問題（如高德api 前臺糾偏方法500點限制問題） AMap.GraspRoad() 高德糾偏能座標糾偏至道路線上，但是方法座標引數限制在500個，可用此方法解決點上限問題 /* <script type="text/javasc

42 jQuery-使用one()方法繫結觸發一次的事件

1.效果圖 2.html程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>42 jQuery-使用one()方法繫結觸發一次的

38. jQuery-使用bind()方法繫結事件

語法格式： bind(type, [data], fn) 其中引數type為一個或多個型別的字串，如“click”或“change”，也可以自定義型別；可以被引數type呼叫的型別包括blur、focus、load、resize、scroll、unload、click、 dbl

jquery為繫結事件的方法傳參

用onclick點選事件舉例：傳參時可以通過 $('#btn').click({paramName:'要傳到func的值'},func) //或者 $('#btn').bind('click'

jQuery 中trigger()方法使用 -- 複製元素點選事件

1. 常用事件在頁面載入完成時自動觸發input的點選事件，在移動端可以實現自動彈出輸入法，獲得焦點 $("input").trigger("click").focus(); 簡寫為以下： $("input").click(); 2. 自定義事件

jQuery事件繫結on()、bind()與delegate() 方法詳解

使用JS一段時間了，專案過程中發現在jQuery中繫結事件時，有人用bind()，有人用on()，有人用delegate()，還有人用live()，看程式碼的時候覺得都實現功能了也就掀過去了，只是一直沒完全弄懂之間的區別，於是今天查了下資料，自己做個總結。之

jQuery 事件 - keydown() 方法的應用

相關推薦