前端 jQuery 事件操作

2022-05-14 18:02:22 字數 1682 閱讀 8969

###############    jquery事件-給未來元素繫結事件     ################

#姓名

愛好操作

1小強吃冰激凌

刪除 2二哥

girl

刪除

新增一行資料

###############    jquery鍵盤相關事件-批量操作     ################

#姓名

愛好操作

小強吃冰激凌

下線上線

離線

二哥girl

下線上線

離線

二哥girl

下線上線

離線

二哥girl

下線上線

離線

二哥girl

下線上線

離線

###############   jquery簡單動畫     ################

選單一

###############   jquery中的each操作     ################

111222

333444

555

###############    jquery中的data操作     ################

新增#

姓名愛好

操作

1egon

街舞編輯

刪除

2alex

燙頭編輯

刪除 3苑局

日天編輯

刪除

姓名愛好

提交取消

// 定義乙個彈出模態框的函式

functionshowmodal()

// 關閉模態框

functionclosemodal()

// 給新增按鈕繫結事件

$("#add").on("click", function() );

// 模態框中的取消按鈕繫結事件

$("#modal-cancel").on("click", function() );

// 模態框中的提交按鈕繫結事件

$("#modal-submit").on("click", function() else

// 隱藏模態框

closemodal();

});// 2. 根據是編輯 還是新增 做不同的操作

// 2.1 如果是新增操作,就生成一條新的tr,加到table的最後

// 2.2 如果是編輯操作, 根據先前 編輯 按鈕那一行

// 難點在於 如何確定 編輯的是哪一行? --> 利用data()可以存具體的jquery物件

// 給每一行的編輯按鈕繫結事件

// 要使用事件委託,基於已經存在的元素(頁面載入完之後存在的標籤)繫結事件

$("tbody").on("click", ".edit-btn", function() );

// 給每一行的刪除按鈕繫結事件

$("

jQuery 的事件操作

dom 中提供了load事件用於載入頁面完畢之後的執行機制,jquery 提供了ready 方法實現相似功能。但 dom 中的load事件與 jquery 中的 ready 方法的區別如下表所示 dom 中的load事件 jquery 中的read 方法 沒有任何簡寫形式 具有簡寫形式 當 html...

前端 jQuery操作表單

表單控制項是我們的重中之重,因為一旦牽扯到資料互動,離不開form表單的使用,比如使用者的註冊登入功能等 那麼通過上節知識點我們了解到,我們在使用jquery方法操作表單控制項的方法 selector val 設定值和獲取值看如下html結構 頁面展示效果 操作表單控制項 如下 表單控制項是我們的重...

jquery操作DOM和事件

1.jquery操作dom的屬性 attr 1.1 獲得節點的屬性 jquery物件.attr 屬性名 eg 獲得節點物件的屬性 alert d1 attr src 1.2 設定節點的一對屬性 jquery物件.attr 屬性名 屬性值 eg 設定節點物件的一對屬性 1.3 設定節點的多對屬性 jq...