Tag: javascript Tag: jquery
jquery
リンク
- jQuery.com
- https://jquery.com/
- jQuery日本語リファレンス
- http://semooh.jp/jquery/
- jQuery TECHNIQUE
- http://black-flag.net/jQueryTechnicalNote/chapterList.html
メモ
個々の要素でなくイベントを処理する場合
- 2016-11-23
$("#hogehoge").click(function(e) { ・・・
$("#hogehoge").keydown(function(e) { ・・・
だと指定したセレクタを対象のイベント処理になってしまう。
$(document)..keydown(function(e) { ・・・
などとすると、画面全体を含めてkeydownが発生する要素のイベントを処理出来る。もちろん、thisオブジェクトなどを使ってイベントが発生した要素を調べて処理を分岐する必要があるだろう。
ブラウザの元々の機能を殺す
- 2016-11-23
keydownイベントでfalseを返す事によって、本来のブラウザの機能を無効にできる事があります。ブラウザの仕組みによっては無効かもしれません。
$(document).keydown(function(e) {
var c = e.which ? e.which : e.keyCode;
// F1:112
// F2:113
// |
// F11:122
// F12:123
if (c==9) { // Tab
return false;
}
if (c==112) {
return false;
}
if (c==122) { // F11 最大表示
return false;
}
});フォーム関係
入力可能な入力要素にフォーカスを移動
2017-02-03
$('input:visible').eq(0).focus();
INPUTタグの中の可視属性がある中の、最初(0番目)にフォーカースをセットする。
イベント
どうだったかな・・・というイベント。
右クリック
$("要素").contextmenu(function(event){
//処理
});
要素がカット/コピー/ペースト
$("要素").on("cut",function(event){
//処理
});
※ cutの部分を、コピー→「copy」、ペースト→「paste」。なお、テキストを選択した場合は、
$(document).select(function(event){
//処理
});
値が変化した時
$("要素").change(function(event){
//処理
});
マウスイベント発生時の座標の種類
$(要素).mousemove( function(evt) {
});
とした時のevtで取得できるマウスの座標の種類。
- evt.clientX, evt.clientY
- evt.pageX, evt.pageY
- evt.offsetX, evt.offsetY
などがある。
参考URL: http://easyramble.com/js-check-positions-and-sizes.html
bind - 要素にイベントを関連付ける
【重要】JavaScriptで動的に作成した要素にイベントの処理をさせる時には、bindなどで要素にイベントを紐付けする必要がある。既存のセレクタで追加した要素でイベントが反応しない場合は、この辺のチェック、処理が必要。
bind(type, [data], fn) - jQuery日本語リファレンス
イベントの発生したことにする
triggerでイベントの発生したことにして処理を行うことができる。
$(IDなどセレクタ).trigger("イベント名");
などの書式、具体的には、$('#saveData').trigger("click"); などとして、用意しておいたイベントの処理を実行させることが出来る。
【jQuery】クリックなどのイベントを発生させる
【jQuery】triggerしたイベントを引数で区別する
trigger(type, [data]) - jQuery日本語リファレンス
その他
要素の存在を調べる
if ($("#hogehoge").length>0) {
// 要素がある時の処理
} else {
// 要素が無い時の処理
}
便利なプラグイン
tablesorter
- Flexible client-side table sorting
- http://tablesorter.com/docs/
Datepicker | jQuery UI
- Select a date from a popup or inline calendar
- https://jqueryui.com/datepicker/
DateTimePicker
- 日付に加えて時間の選択も可能
- http://xdsoft.net/jqplugins/datetimepicker/
Autocomplete
Tooltip
便利そうなプラグインなど
jquery-panelslider
- スマホのような左右パネルの実装
- 紹介: http://www.hp-stylelink.com/news/2015/01/20150127.php
fixed Table Header
- テーブルヘッダがスクロールしても隠れないプラグイン
- 紹介: http://www.hp-stylelink.com/news/2014/11/20141127.php
- ダウンロード(GitHub): https://github.com/hungnq1989/fixed-table-header
- 固定部分が<thead>～</thead> のタグで指定されていなければならない
開閉式メニュープラグイン「Tendina」
- 開閉式メニューをカンタンに実装
- 紹介: http://www.hp-stylelink.com/news/2014/10/20141028.php
Sweet Alertプラグイン
Jexcel
- Light online spreadsheet jquery plugin [#f485d4a4]
- http://bossanova.uk/jexcel