jQuery

作成日時:2019/04/22

更新日時:2019/04/22

公式サイト

公式サイト - https://jquery.com/

jQuery CDN - https://code.jquery.com/

jQueryメソッド

名前	説明
extend	-
slideDown	-
slideUp	-
on	-
off	-

slideDown(), slideUp()

https://api.jquery.com/slideDown/

https://api.jquery.com/slideUp/

使用例

on(), off()

指定要素にイベントをバインド、アンバインドします。

http://api.jquery.com/on/

https://api.jquery.com/off/

使用例

HTML

<button id="on-box-button">Button</button>
<button id="on-box-bind-button">Bind</button>
<button id="on-box-unbind-button">Unbind</button>

Script

function bind_event() {
  alert("call bind_event()");
}
$("#on-box-bind-button").click(function () {
  $("body").on("click", "#on-box-button", bind_event)
  .find("#on-box-button").text("Bind");
});
$("#on-box-unbind-button").click(function () {
  $("body").off("click", "#on-box-button", bind_event)
  .find("#on-box-button").text("Unbind");
});

on(), off() - scroll, resize

Scroll Event Count :

Resize Event Count :

HTML

<p>Scroll Event Count : <span id="scroll_cnt"></span></p>
<p>Resize Event Count : <span id="resize_cnt"></span></p>

Script

var scrollCnt = 0;
var resizeCnt = 0;
function scroll_cnt() { $("#scroll_cnt").text(scrollCnt++); }
function resize_cnt() { $("#resize_cnt").text(resizeCnt++); }
scroll_cnt();
resize_cnt();
$(window).on( "scroll", null, scroll_cnt );
$(window).on( "resize", null, resize_cnt );

jQueryプラグイン

名前	説明
bxSlider	スライダーを作成するプラグイン。 https://bxslider.com/ GitHub https://github.com/stevenwanderski/bxslider-4
DataTables	tableを機能拡張するプラグイン。 https://datatables.net/
jScrollPane	スクロールバーをカスタマイズするプラグイン。 http://jscrollpane.kelvinluck.com/examples/ GitHub https://github.com/vitch/jScrollPane
Scrolline.js	スクロール量を表示するバーを追加するプラグイン。 http://anthonyly.com/jquery.plugins/scrolline/ GitHub https://github.com/anthonyly/Scrolline.js