はじめに
何かある度に検索していくのが非常に面倒だったので、まるごとコピーして貼り付けられる形で個人的によく使う操作をまとめてみた。
それと、マシンに明るい人には不要なアドバイスだが……
もし「コード」から目当てのコードを探していくのがダルい、という人はCtrlキー（Commandキー）とFキーを同時押ししてみよう。右上の検索窓から文言検索ができる。
Javascript版もあります。一応。
コード
hoge.html
<script type="text/javascript">
// 最初にjQueryが正常に読み込まれてるかをチェックしてるとウレシイ。
if(typeof jQuery == 'undefined'){
console.log('jQueryライブラリは正しく読み込まれていますか？');
}
else{
console.log('jQueryは正常に読み込まれていますよ。');
}
// 即時関数。Wordpressでも動作するよう、少し特殊な書き方をしている。
jQuery(function($){
// イベント（非同期関数）
// 基本形
$('.hoge').on('click', function(){
/* ここにイベント実行時の処理を書く。jQueryで書いてもjavascriptで書いてもOK */
alert( 'クリックされたよ！' );
});
// a要素で、クリックしたときにリンク先のページに遷移させずに別の処理を行わせる。たとえば、新しいウィンドウを開くとか、写真をポップアップするとかね。
$('a.delete').on('click', function(){
$('input[name="s"]').val('');
// aタグの無効化。最後に書くこと！
return false;
});
// たとえば、aを押すとゆっくりスクロールしたい場合はこうなる
$('a[href^=#]').on('click', function(){
// アンカーの値取得
var href = $(this).attr("href");
// 遷移位置取得
var target = $(href == "#" || href == "" ? 'html' : href).offset().top;
// スクロール実行
$('body,html').animate({ scrollTop:target }, 400, 'swing');
return false;
});
// ページ読み込みの完了を待ってからJQueryを実行したいときは、$(window).on('load', function(){ });で囲んでやるとよい。
$(window).on('load', function(){
$('input[name="search"]').val('');
});
// こちらも、ページ読み込みの完了を待ってから実行する関数。上との違いは、画像の読み込み完了を待つかどうか。
// つまり、こっちはページ内の画像ファイルの読み込みを待たずに実行するのだ。
// コレでJQueryコードを囲むと動作を速くすることができるが、画像を操作する系の処理はこの中で行えない（バグるから）というデメリットも。使い分けよう。
$(document).ready(function(){
$('input[name="search"]').val('');
});
// クリックしたとき、クリックされたその要素のみに対してアクションを行う
$('.button').on('click', function(){
// $(this)が、クリックされた（正確には現在実行中の）要素を示すことは覚えておこう
if( $(this).hasClass('off') ){
$(this).removeClass("off").addClass("on");
var clicked_value = $(this).text();
$('input[name="search"]').val( $('input[name="search"]').val() + clicked_value + ',');
}
});
// こう書けば、クリックしたときにその要素が存在しない場合でもイベントを実行できる。
$(document).on('click','.button', function(){
alert('abcd');
});
$('body').prepend('<div id="haba">width:' + $(window).width() + 'px、 height:' + $(window).height() + 'px</div>');
// タブが開いたまま画面幅が変わったとき（スマホで横に倒した、PCでウィンドウ幅を変えたなど）に実行する
$(window).resize(function(){
// ここでは、画面幅が変わるたびにその画面幅を表示
var w = $(window).width();
var h = $(window).height();
$('#haba').text('<div id="haba">width:' + w + 'px、 height:' + h + 'px</div>');
});
// フォームの送信ボタンを押したとき、送信実行の直前に処理をはさむ。バリデーションチェックやデータの加工などに役立つ。このとき、セレクタは親となるform要素を指定すること。（formのidがabcなら、$('#abc')でもOK）
$('form').on('submit', function(){
var yourname = $('input[name="yourname"]').val();
if( yourname.match(/大将/) ){
alert('大将首だ！！\n大将首だろう！？\nなあ 大将首だろうおまえ\n首置いてけ！！\nなあ！！！');
// submitしない場合（たとえば、電話番号が1文字しか入れられてないとか）、return falseすることでsubmitを中止することができる。
return false;
}
});
// マウスが要素の上に乗った時の処理。cssのhoverと違い、乗った時、外れたとき両方の処理を書く必要あり
$('.button').on('mouseover', function(){
$(this).css({'cursor':'pointer'});
});
// 外れたとき
$('.button').on('mouseout', function(){
$(this).css({'cursor':'default'});
});
// 要素に変化があった時の処理
$('.button').on('change', function(){
alert( $(this).text() + 'に変化しました' );
});
// 要素作成、挿入
// 無から要素を作成するにはこうすればいい。
// ただ、そのままではどこにも代入されない。変数などに代入して使おう。
// Javascriptのdocument.createElement() と同じ感覚。
$('<div id="sakusei" class="saku">abcd</div>');
// 要素sakusei内の最後にdivを作成
$('#sakusei').append('<div class="maked">this is last!</div>');
// 要素内の最初にdivを作成
$('#sakusei').prepend('<div class="maked">this is first!</div>');
// 普通にテキストを追加することもできる。この場合、「this is first!and have a hoge!」になる
$('#sakusei .maked').append('and have a hoge!');
// 要素そのものを削除。今回は、fooの中にある、makedクラスがついているもののみ削除
$('#sakusei .maked').remove();
// 要素自体は残しつつ、その中身をすっからかんにする
$('#sakusei .maked').empty();
// 要素のすぐあとにdivを作成。appendと違い、指定した要素の「外」に作成されるのがポイント！
$('#sakusei').after('<div>this is after!</div>');
// 要素のすぐ手前にdivを作成。prependと違い、指定した要素の「外」に作成されるのがポイント！
$('#sakusei').before('<div>this is after!</div>');
// たとえば、クリック時に背景を薄暗く覆って、閉じるボタンを押したとき元に戻したいならこうなる
$('#openform').on('click', function(){
$('#openform').css({'display', 'none','opacity', '0'});
$('body').css('position', 'relative');
$('body').append('<div id="formbackground"></div>');
$('#formbackground').css({
'background-color': 'rgba(0,0,0,0.5)',
'z-index': '2',
'width': '100%',
'height': '100%',
'position': 'fixed',
'top': '0',
'left': '0',
});
$('body').append('<div id="formclose">×</div>');
$('#formclose').css({
'color': 'white',
'background-color': 'black',
'z-index': '3',
'width': '40px',
'height': '40px',
'position': 'fixed',
'top': '0',
'right': '0',
});
$('#formclose').on('click', function(){
// あらかじめ非表示にしてから削除すると見た目に不自然さがない
$('#formbackground, #formclose').animate({'opacity': '0'}, 800, 'swing');
$("#formbackground, #formclose").remove();
$('#openform').css({'display', 'block','opacity', '1'});
});
});
// 要素参照
// ※条件にあてはまるものが複数あるときは全部取得される（つまり、配列になる）。素のjavascriptと組み合わせるときは注意しよう！
// 変数にDOM要素を格納。
var fuga = $('#fuga');
// 一度格納するとそれ以降、その変数をDOMのように扱うことができる。
fuga.css('color', 'perple');
// html要素で指定し、該当するものすべての文字色をpurpleにする
$('p').css('color', 'purple');
$('body').css('color', 'purple');
$('h1').css('color', 'purple');
// クラスがhogeの要素すべての文字色をpurpleにする
$('.hoge').css('color', 'purple');
// idで指定し、該当するものの文字色をpurpleにする
$('#fuga').css('color', 'purple');
// idがfugaのひとつ上の親要素を指定し、文字色をpurpleにする
$('#fuga').parent().css('color', 'purple');
// fugaの先祖要素すべての中からclassがsenzoのものを指定し、その文字色をpurpleにする。
// 「先祖」なので、fugaが中に入ってない.senzoは対象にならないというのがポイントだ。
// 2つ以上離れているならこれがおススメ。
// ちなみに該当する要素が複数ある場合、それらすべてに対して処理を実行する。
$('#fuga').parents('.senzo').css('color', 'purple');
// fugaの先祖要素すべての中からclassがsenzoのものをひとつ指定し、その文字色をpurpleにする。
// parentsとの違いは、fugaから一番近いsenzoしか対象にしない点。つまり、こいつは配列にならないのだ。
$('#fuga').closest('.senzo').css('color', 'purple');
// fugaの子要素すべて（直下にあるもののみ。孫要素は含まない）の文字色をpurpleにする
$('#fuga').children().css('color', 'purple');
// fugaの子孫要素のうち、tabというクラスを持つものすべての文字色をpurpleにする。childrenと違って、孫要素まで対象になる。
$('#fuga').find(".tab").css('color', 'purple');
// parentsの応用編。
// fugaの先祖要素であるsenzoの中から、classがtabのものの文字色をpurpleにする。
// ……つまり、#fugaとは親子関係にないけど近くにある要素に対して処理を実行できるのだ。
$('#fuga').parents('.senzo').find(".tab").css('color', 'purple');
// data属性で指定。ここでは、data-specialがついている要素すべてにcolor: purple;を設定している
$('[data-special]').css('color', 'purple');
// data属性で指定。ここでは、data-specialがついているdiv要素すべてにcolor: purple;を設定している
$('div[data-special]').css('color', 'purple');
// data-specialという属性がついているdivで、なおかつその値がactiveのもののみにcolor: green;を設定
$('div[data-special="active"]').css('color', 'green');
// data-specialという属性がついているdivで、その値の先頭にactiveとついているもののみにcolor: yellow;を設定。たとえば「active」、「active1」、「active2」は全部該当する
$('div[data-special^="active"]').css('color', 'yellow');
// data-specialという属性がついているdivで、その値の末尾にsecとついているものすべてにcolor: blue;を設定
$('div[data-special$="sec"]').css('color', 'blue');
// data-specialという属性がついているdivで、その値にactiveが含まれていればにcolor: purple;を設定
$('div[data-special*="active"]').css('color', 'purple');
// data属性じゃなくても使えるよ！div要素である必要もないよ！
$('input[type="radio"]').css('font-size', '20px');
$('input[name="yourname"]').css('padding', '0.5em');
$('span[class="tohide"]').css('display', 'none');
$('ul[id="buttoncase"]').css('margin', '0 auto');
$('a[link="lightbox"]').css('text-decoration', 'none');
$('a[link^="lightbox"]').css('text-decoration', 'none');
// 複数指定する時はこうする
$('#fuga input[type="checkbox"][value="1"][name="review"]').css('font-size', '20px');
// ～～複数の要素系～～
// IDがhogaの中にある、クラス名がhogeの要素
$('#hoga .hoge').css('color', 'purple');
// IDがhogaの直下にあるクラス名がhogeの要素
$('#hoga > .hoge').css('color', 'purple');
// IDがhogaであるかクラス名がhogeである、このいずれかに合致する要素すべて
$('#hoga, .hoge').css('color', 'purple');
// IDがhogaの要素とpiyoの要素両方
$('#hoga, #piyo').css('color', 'purple');
// クラスonがついているli要素
$('li.on').css({'background-color': 'red', 'color': 'white'});
// ～～特殊な指定方法～～
// ちょうど3つ目のhoge要素の背景を水色にする
$('.hoge').eq(2).css('background', 'aqua');
// これでもOK
$('.hoge:eq(2)').css('background', 'aqua');
// 最初のhoge要素の背景を水色にする
$('.hoge').eq(0).css('background', 'aqua');
// 最後のhoge要素の背景を水色にする
$('.hoge:last').css('background', 'aqua');
// 4つ目とそれ以降のhoge要素の背景を水色にする
$('.hoge').gt(2).css('background', 'aqua');
// 2つ目とそれより前のhoge要素の背景を水色にする
$('.hoge').lt(2).css('background', 'aqua');
// 複数の要素に適用させつつ、要素ごとに処理を変えたい場合はeach関数が有効だ。
$('.hoge').each(function(i){
if(i == 2){
$(this).text('こいつぁ……２番手だ。');
}
});
// 適用＆削除＆格納
// 該当する要素がある場合、それらすべてに対して適用される。
// たとえば２つ以上fugaクラスがあるときに、$('.fuga').css('display', 'block');を実行するとすべての.fugaにdisplay: block;がかかる。
// とくに、値を取得する際はid指定にするなりthisを使うなりして該当要素が複数にならないようにしよう。
// css（style)を直接指定
// ※生のjavascriptとは違って、単数、複数問わず、cssを追加したときすでにかかっているcssを上書きしないことに注意
// ひとつだけ追加
$('#fuga').css('display', 'block');
// 削除
$('#fuga').css('display', '');
// 複数追加（一個でもOK）
$('#fuga').css({ 'display': 'block', 'width': '100%', 'background-color': 'rgba(0,0,0,0.5)' });
// 削除
$('#fuga').css({ 'display': '', 'width': '', 'background-color': '' });
// めんどくせェ、css全消しだ！をする
$('#fuga').removeAttr('style');
// #fugaのcss値(今回はcolor)を取得し、変数fugaに格納
var fuga = $('#fuga').css('color');
// #fugaのcssぜんぶを取得し、変数fugaに格納。このとき、fugaは配列になる。
var fuga = $('#fuga').attr('style');
// 変数を経由する場合
var cssarr = {
'display': 'block',
'width': '100%',
'background-color': 'rgba(0,0,0,0.5)'
'position': 'relative',
'color': 'red'
}
$('#fuga').css(cssarr);
// こういうのもOK
var fontsize = 18;
$('#fuga').css({'font-size': fontsize + 'px'});
// クラス
// 追加。ついてる要素に対して実行しても二重になったりはしない。
$('#fuga').addClass('activated');
// 削除。もともとついてない要素に対して実行しても処理はしないしバグらない。
$('#fuga').removeClass('activated');
// ついてるクラス全消し
$('#fuga').removeClass();
// 実はクラスの付与と削除は一気に行えちゃう。この場合、左のものから順番に実行される
$('#fuga').removeClass('on').addClass('off');
// fugaに「activated」クラスがついているなら削除し、ついていないなら追加
$('#fuga').toggleClass('activated');
// #fugaのclassを取得して変数fugaに格納。複数ある場合はぜんぶ取得して配列として格納。
var fuga = $('#fuga').attr('class');
// activatedというクラスがついているかどうかをチェックする。
// 上で挙げたaddClass、removeClassとは違い、こいつは特定の操作をするのではなく、データ値を返す。ようは「取得」系。
// 存在するなら変数fugaにはtrueが格納され、ないなら変数fugaにはfalseが格納される。
var fuga = $('#fuga').hasClass('activated');
// 属性
// data属性を追加
$('#fuga').attr('data-tokubetsu', 'fugadayo');
// data属性を削除
$('#fuga').removeAttr('data-tokubetsu');
// idを追加
$('#fuga .horo').attr('id', 'child_of_fuga');
// idを削除
$('#fuga .horo').removeAttr('id');
// 属性なら何でも追加できる
$('#fuga a').attr('href', 'http://www.sazaesan.jp/');
$('#fuga').attr('class', 'Sazaesan');
// 削除も同じ
$('#fuga a').removeAttr('href', 'http://www.sazaesan.jp/');
$('#fuga').removeAttr('class', 'Sazaesan');
// 要素に対して特殊な属性をつけることもできるぞ
$('input[name="name"]').attr('disabled', true);
$('input[name="name"]').attr('disabled', false);
// 要素に対して特殊な属性をつけることもできるぞその２
$('input[name="name"]').attr('readonly', true);
$('input[name="name"]').attr('readonly', false);
// #fugaのdata-tokubetsuという属性から値を取得し、変数fugaに格納。
var fuga = $('#fuga').data('tokubetsu');
// #これでもOK
var fuga = $('#fuga').attr('data-tokubetsu');
// #fugaのdata属性ぜんぶの値を取得する。data属性を複数付けているならコレ
var fuga = $('#fuga').data();
// 余談だけど、横に連ねていくことで一気に処理を行うこともできる。このとき、左から順番に読み込まれ実行されていくことは覚えておこう。
$('#fuga').css('display', 'block').addClass('activated').removeClass('off');
// 値
// #fugaの値。「value値として」取得するので、inputやtextareaなどの入力系以外には使わない方がいいらしい……
$('#fuga input[name="hey"]').val('Hey! This string is changed!');
// 削除
$('#fuga input[name="hey"]').val('');
// #fugaの値。「value値として」取得するので、inputやtextareaなどの入力系以外には使わない方がいいらしい……
var fuga = $('#fuga input[name="hey"]').val();
// #fugaの値。fuga内にhtmlタグがあった場合はそのまま取得し、そのhtmlが作動する。
$('#fuga').html('<p style="font-weight: bold;">Hey! This tag is changed!</p>');
// 削除
$('#fuga').html('');
// #fugaの中身を取得し、変数fugaに格納。要素fuga内にhtmlタグがあった場合はそのまま取得し、そのhtmlが作動する。
var fuga = $('#fuga').html();
// #fugaの値。fuga内にhtmlタグがあった場合はそのまま取得するが、htmlタグとしては実行されない。たとえば「<p>あいう</p>」が中身だった場合もpタグは消えない
$('#fuga').text('<p style="font-weight: bold;">Hey! This tag is changed!</p>');
// 削除
$('#fuga').text('');
// #fugaの中身を取得し、変数fugaに格納。fuga内にhtmlタグがあった場合はそのまま取得するが、htmlタグとしては実行されない。たとえば「<p>あいう</p>」が中身だった場合もpタグは消えない
var fuga = $('#fuga').text();
// 変数に要素のデータを格納・おまけ
// クラスhoroのid値
// お気づきかもしれないが、attrは属性名ならどんなものにも適用できる。
var fuga = $('.horo').attr('id');
// inputのチェック可否。返り値はtrueかfalse。.attrと違い、真であるか偽であるかを取得するのがポイント。
var fuga = $('input[type="checkbox"][value="1"]').prop("checked");
// #fugaの幅の値を取得。ただし、横方向のborder-width、paddingも含む。marginは含まない（単位はpx）
var fuga = $('#fuga').outerWidth();
// #fugaの高さを取得。ただし、縦方向のborder-width、paddingも含む。marginは含まない（単位はpx）
var fuga = $('#fuga').outerHeight();
// #fugaの幅の値を取得。ただし、横方向のpaddingを含む（単位はpx）
var fuga = $('#fuga').innerWidth();
// #fugaの高さを取得。ただし、縦方向のpaddingを含む（単位はpx）
var fuga = $('#fuga').innerHeight();
// #fugaの幅の値を取得。paddingは含まない（単位はpx）
var fuga = $('#fuga').width();
// #fugaの高さを取得。paddingは含まない（単位はpx）
var fuga = $('#fuga').height();
// animate
$('#piyo').css({'opacity': '0', 'width': '0', 'height': '400px', 'position': 'absolute'});
// 基本はcssと書き方おなじ。animateの中に書いたcssにゆっくりと近づくイメージ。「800」はかかる時間（ミリ秒）、「swing」はアニメーションの仕方で、swingとlinearが選べる
$('#piyo').animate({
'opacity': '1',
'width': '300px'
}, 800, 'swing');
// 連続して書くこともできる。この場合、浮き出たあとに移動する
$('#piyo').animate({
'opacity': '1',
'width': '300px'
}, 800, 'swing').animate({
'top': '50%',
'left': '20%'
}, 800, 'swing');
// 最後のanimetionにfunctionを書くと、animation終了直後に実行する処理を記述できる
$('#piyo').animate({
'opacity': '1',
'width': '300px'
}, 800, 'swing').animate({
'top': '50%',
'left': '20%'
}, 800, 'swing', function(){
// ここでの$(this) = $('#piyo')
$(this).addClass('moved');
});
// ajax
$.ajax({
type:"get",
data: 'https://httpbin.org/get',
).done(function(response) {
console.log(response);
}).fail(function(){
console.log('失敗');
});
});
</script>
参考文献
セレクタ
プロパティの操作
https://uxmilk.jp/8150
https://qiita.com/QUENCH/items/8cfeb09b6860249de511
https://qiita.com/ikemai/items/f1bfe461171f724878f6
https://qiita.com/kazTera/items/ab5dd9fb5b2579b25c4d
http://www.jquerystudy.info/reference/attributes/toggleClass.html
https://560days.com/lab/2013/01/001212.php
https://qiita.com/munaita_/items/1940329bb95f47eaa2ee
https://qiita.com/kbyay_/items/7a7ce9547f29b34a63b1
https://www.flatflag.nir87.com/css-2-1060
https://qiita.com/kbyay_/items/7a7ce9547f29b34a63b1
要素の作成
イベント
https://qiita.com/temori1919/items/bcbfc4a93301ef902d1d
https://qiita.com/kazu56/items/cdbf4e371cdc699709f1