jQuery (二)

asoren 發布于2019-08-23 11:28 / 1086人閱讀

摘要：文件命名需要使用的庫該庫已經兩年未更新了，不過依舊在回復中，對于庫的檢查，已經完全測試通過一個栗子，日期選擇將為中的元素統統替換為日期選擇組件

使用jQuery處理事件 事件處理

一個栗子，單擊p時背景變成灰色

由于es6的箭頭函數不支持this的綁定，所以無法使用箭頭函數，只能使用匿名函數

html

hello world

// 單擊任意p時，使其背景變成灰色
$("p").click(function () { $(this).css("background-color", "gray"); });

效果

或者使用第二個參數，添加相關的屬性，完成事件的相關觸發

// 單擊任意p時，使其背景變成灰色
$(""));
        });
        // 返回這個未加修改過的jQuery對象，方便鏈式調用
        return this;
    }

ps 這個灰常簡單，原型鏈那一套內容，需要注意的是要進行返回該對象，否則無法進行鏈式調用

使用一下下

$("#debug").println("x =", "x", "y");

即完成了一個jquery的插件的封裝
使用jQuery.fx.speeds完成對緩動函數的封裝
擴展css選擇，使用jQuery.expr[";"]完成對css選擇的封裝

jQuery.expr[":"].draggable = function(e) {
    return e.draggable === true;
}

使用

$("img:draggable");

等價于

$("img[draggable=true]")

上方封裝的一個選擇器為可拖動的元素

當draggable為true的時候，可以對元素進行拖動，這是h5的內容

一些注意事項

不要依賴$
插件要返回this
插件有兩個或者兩個以上的選項，使用對象直接傳入
不能污染命名空間，請在jquery上定義一個方法即可，如果有多個方法，請直接使用前綴
如果有事件需要綁定，使用插件名作為命名空間，然后放在插件名中，即，不能使用全局的
如果插件需要使用data()方法關聯數據數據值要在一個對象中。
文件命名需要使用jquery.plugin.js

jQuery的UI庫

https://jqueryui.com/

ps 該庫已經兩年未更新了，不過lssues 依舊在回復中，對于庫的檢查 https://travis-ci.org/jquery/...，已經完全測試通過

一個栗子，日期選擇

$("input.date").datepicker();

將class為data中的input元素統統替換為日期選擇組件

GPU云服務器云服務器雙十二優惠雙十二促銷第二域名雙十二萬網

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97002.html

細說 jQuery 事件篇（二） - 處理簡單事件

摘要：我們可以利用可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。其他類似的操作事件都可以通過這個方法，將處理事件的程序綁定到同名事件上面。我們可以利用 jQuery 可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。增添樣式基于用戶的事件，對特定的 DOM 元素樣式進行轉換是 jQuery 處理事件中比較常見的情形，舉例說明，當用戶點擊輸入框后，會增添 highli...

ckllj 2019-08-19 14:51 評論0 收藏0
jQuery基礎（二）DOM篇

摘要：將匹配元素集合的父級元素刪除，保留自身和兄弟元素，如果存在在原來的位置。方法查找指定元素集合中每一個元素的同輩元素。每次回調函數執行時，會傳遞當前循環次數作為參數從開始計數。 DOM節點的創建先介紹下需要用到的瀏覽器提供的一些原生的方法（這里不處理低版本的IE兼容問題）創建流程比較簡單，大體如下：創建節點(常見的：元素、屬性和文本) 添加節點的一些屬性加入到文檔中流程中涉及的一...

Harpsichord1207 2019-08-22 10:42 評論0 收藏0
JQuery DOM 常用操作匯總

摘要：通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發一個回調函數。請求完成后回調函數請求成功或失敗時均調用。一、JQuery對象的基本方法： (1) get(); 取得所有匹配的元素 (2) get(index); 取得其中一個匹配的元素 $(this).get(0) 等同于 $(this)[0] (3) Number index(jqueryObj); 搜索子對象 (...

airborne007 2019-08-21 10:24 評論0 收藏0
W3School 教程整理

摘要：離線版大部分整理自，少部分整理自，由本人整理。感謝站長的無私奉獻。由于本人精力有限，此處的列表不一定能夠及時更新，最新版本請到本人博客查看。離線版大部分整理自 w3cschool ，少部分整理自 w3school ，由本人整理。感謝 w3cschool 站長的無私奉獻。由于本人精力有限，此處的列表不一定能夠及時更新，最新版本請到本人博客查看。 AngularJS教程最后更...

douzifly 2019-08-21 10:22 評論0 收藏0
W3School 教程整理

摘要：離線版大部分整理自，少部分整理自，由本人整理。感謝站長的無私奉獻。由于本人精力有限，此處的列表不一定能夠及時更新，最新版本請到本人博客查看。離線版大部分整理自 w3cschool ，少部分整理自 w3school ，由本人整理。感謝 w3cschool 站長的無私奉獻。由于本人精力有限，此處的列表不一定能夠及時更新，最新版本請到本人博客查看。 AngularJS教程最后更...

CoffeX 2019-08-01 14:43 評論0 收藏0
W3School 教程整理

摘要：離線版大部分整理自，少部分整理自，由本人整理。感謝站長的無私奉獻。由于本人精力有限，此處的列表不一定能夠及時更新，最新版本請到本人博客查看。離線版大部分整理自 w3cschool ，少部分整理自 w3school ，由本人整理。感謝 w3cschool 站長的無私奉獻。由于本人精力有限，此處的列表不一定能夠及時更新，最新版本請到本人博客查看。 AngularJS教程最后更...

Dionysus_go 2019-07-01 14:12 評論0 收藏0