JQuery チート

Mon, Aug 17, 2020

${{DZ_TITLE}}$
繁に検索してしまうJQueryまとめ

JQuery読込

<script src="https://code.jquery.com/jquery-3.3.1.js"> </script>

Selector

$("#id名")
$(".class名")

// ID,Classを持つ要素
$("#id名要素")
$(".class名要素")

// ID直下の要素
$("#id名 > 要素")

$("要素名A + 要素名B")

// 要素名Aの以降のすべての要素名B
$("要素名A ~ 要素名B")

// Attribute
$("要素[属性]")
$("要素[属性='値']")
$("要素[属性!='値']")

HTML読込、書換

// 読込
alert($('#id名').html(););
// 書換
$('#id名').html('<h1>テスト・テスト</h1>');

HTML読込んだタイミング、画像読込んだタイミング

DOM » ready » 画像読み込み » load

// ready (DOM後 HTML等を読み込んだ後)
$(document).ready(function(){});
// load (画像等を読み込んだ後）、以下３つはどれも同じ意味
$(function() {});
$(document).ready(function(){});
$(window).on('load', function() {});

イベント

$(function() { // Load後にイベントを関連付ける
  $('button').on('click', function(){});
  // Dictionaryを渡す
  $('button').on('click', {val: 'Val '}, testFunction);
  function testFunction( e ) {
    console.log( e.data.val );
  }
});

イベントでどれのイベントか取得する

<button class='button' data-id='A'>A</button>
<button class='button' data-id='B'>B</button>
<button class='button' data-id='C'>C</button>

<script type="text/javascript">
  $(function() {  
    $('.button').on('click', function(){
    var dataID =  $(this).attr('id');
  });
</script>

イベントの種類

-blur
フォーカスを失ったとき
-focus
フォーカスを得たとき
-load
ドキュメントを読み終わった後
-resize
Windowサイズ変更時
-scroll
スクロールしたとき
-click
クリック時
-dblclick
ダブルクリック時
-mousedown
ダブルクリック時
-mouseup
マウスのクリックが離れたとき
-mousemove
マウスが移動しているとき
-mouseover
マウスが上にのった時
-mouseout
マウスが要素から外れたとき
-mouseenter
マウスが要素に入った時
-mouseleave
マウスが要素から離れたとき
-change
値が変更されたとき
-submit
フォームが送信されるとき
-error
javascriptのエラーが発生した時に発生
-keypress
キーを押したとき
-keydown
キーを押したとき（押したタイミング）
-keyup
キーを押したとき（離したタイミング）

JavaScriptをHTML内に直書き

<script type="text/javascript">
</script>