まだjQueryわかんないの？　って自分を煽りたくなった時に見る記事

2018.04.12

サーバーサイドなのでjQueryよくわからないですすみません。

jqueryがjavascriptを便利に扱うライブラリだということはわかってるんですが、まだ便利な感じがしないんですよね。なんでだろう。
特にセレクタの概念が理解しにくかったです。
でもなんか慣れれば簡単だって聞いたので必要に迫られて使ってるコードをまとめようと思ったよ。
まあ慣れればなんでも簡単だよね知ってるよしってるけど…。
記事書くと基本は二度と思い出さなくていいので気が楽でいいよね…。
また使ってるの増えたら増やします。

参考サイト

【jQuery】要素を指定するセレクタの使い方 まとめ
JQuery備忘録:ありがちなtableとチェックボックスのやつ

jQueryの基本的な使い方っぽいもの

jQueryは「これ」に「なにかやって」みたいなかたちで処理する
aタグのリンクを消したいなら「aタグ」に「リンク消して」って書く

そしてその書く場所はjQueryって書いてその中に$始まりの関数を書けばいいらしい？
$( function($){　
とも書けるけど　
jQuery(function($){
って書いておくと他のライブラリと$指定が被っててもエラーにならずにjqueryの扱いになるって聞いた。

要するに概念的にはこうなる

// jQueryはじまり
jQuery( function($){
	$( 'これに' ).なんかやって('値はこれ指定して');
} );//jQuery終わり

もう少し詳しく書くとこうなる

// jQueryはじまり
jQuery( function($){
	// ここに$はじまりのjQueryコードを書く
	//セレクタで選択した要素に対してメソッドで処理するのが基本らしい
	var hoge = $( 'セレクタを書く' ).メソッドを書く();
	
	//別に変数に入れる必要もない場合もあるのでこういう書き方するときもある
	$( 'セレクタを書く' ).メソッドを書く();
	$( 'セレクタを書く' ).メソッドを書く('disableとかclassとかみたいな、セットしたい値とか');
} );//jQuery終わり

以下はjQueryのコードなので　
jQuery( function($){　
//ここの中に書く。
} );
（別にbodyの閉じタグ直前に書けば宣言いらないけどいちいち考えるの面倒なので暫定的にこれで覚えよう…）

よく使いそうなセレクタ

セレクタは要素を指定するのに使う。
「これ」に「なにかして」のこれにあたる部分。
aタグを選択する場合は「a」って書くとaタグが選択される指定、みたいなもの。

//セレクタはcssのセレクタがほぼそのまま使える
$( '#id_name' ).メソッド();//id_nameっていうidを指定するとき
$( '.class_name' ).メソッド();//class_nameってclassを指定するとき
$( 'input' ).メソッド();//inputタグを指定するとき
$( 'a' ).メソッド();//なのでaタグだったらaって指定する

//複数指定したい時はカンマで区切る
 $( '.class,.class2,#id3' ).メソッド();

//属性とかも選択できる、inputタグのtypeがcheckboxのだけとか
$( 'input[type="checkbox"]' ).メソッド();
//さらにチェックしてあるものだけ
$( 'input[type="checkbox"]:checked' ).メソッド();
//inputのnameの中身がhogeのものだけ
$( 'input[name="hoge"]' ).メソッド();

よく使いそうなメソッド

メソッドは処理、セレクタで指定した「これ」に「なんかやって」の何かやるの部分を担当する。

// inputやなんかのvalueとかボタンのvalueとか取れる
var hoge = $( 'セレクタ' ).val();

// innerHTMLがとれる、innertHTMLはタグに囲まれた要素のこと
// <a>innerHTMLで取れる部分</a> こういうの
var hoge = $( 'セレクタ' ).html();


//セレクタの要素（タグ）ごと削除できる
$('セレクタ').remove();

//セレクタの要素（タグ）の中身だけ削除する
$('セレクタ').empty();


//チェックボックスにチェックを入れる
$('チェックボックスのセレクタ').prop('checked',true);


//要素の中身を検索する
$('セレクタ').find( 'セレクタ' );


//ドロップダウンリストのvalue値を取得
$( '[name=drop_down_name] option:selected').val();

//ドロップダウンリストのラベルを取得
$( '[name=drop_down_name] option:selected').text();

[/code]

<h3>よく使いそうな関数</h3>
これらの「これ」に「なんかやって」をまとめて関数を作って処理する。
[code]
//セレクタ要素をクリックした時に処理を実行する
$('セレクタ').click(function(){
	//ここに実行したい処理を書く
});

// funtion(event)って書くとevent.targetでhtml上でクリックされた要素が取得できる、とても便利
$(document).click(function(event){
	var target = $(event.target);
	// 以下は参考に書いてるだけなので必要な行以外は消して使って下さい

	//クリックされた要素がテーブルのレコード上だった場合にget_inner_html_classのclassが付けられた要素のタグ内にある値、要素を取得する
	$( 'td.get_inner_html_class', $( target ).parents( 'tr' ) ).html();
	
	//クリックされた要素のタイプがチェックボックスだったらチェックを付け外しする
	if(target.context.type === 'checkbox'){
		$(target).prop( 'checked', ! $(target).prop( 'checked' ));
	}
	
	// 要素がクリックされたら消す
	$(target).remove();
});

書いてて思ったけどセレクタと処理順序と取得に必要な関数だけ分かれば多少はなんとかなりそうでいいね…。

スポンサーリンク