こんにちは
システムチーム プログラマー / マネージャーのAです。
シナジーデザインでは勉強会を実施しています。
その中で「”jQuery”が分からない」という質問が出ました。
初学者ならではのざっくりした質問で、結構難しい。
明確に答えている技術ブログがないので、ここで回答します。
※初学者向けに書くので、語弊があります。※
jQuery≒「どのHTMLに、どのように、何をする」
jQueryには
「どのHTMLに、どのように、何をするか」という
フレームワーク（考え方の枠組み）があると思っています。
まずは、
自分の願望を
「どのHTMLに、どのように、何をするか」に
に当てはめてください。
例えば 「見出しの本文を赤色にしたい」 のであれば
・どのHTMLに？=>「見出し」
・どのように？ =>「中の文字が赤色になるように」
・何をする？ =>「CSSを変更する」
という具合です。
とにかく、
・どのHTMLに
・どのように
・何をする
を明確に。ココが一番大事です。
あとはこのフレームワークを、
jQuery用に書き換えます。
「$(どのHTMLに).何をする(どのように)」
「どのHTMLに、どのように、何をするか」というフレームワークは
jQueryでは
$(どのHTMLに).何をする(どのように)
と表現しています。
先ほどの「見出しの色を赤色にしたい」であれば…
$(見出し).CSSを変更する（中の文字が赤色になるように）
=>
$(“h1”).css( “color”, “#f00” );
という具合です。
“$(どのHTMLに).何をする(どのように)”は 日本語過ぎるので
“$(セレクタ).メソッド（オプション）”
とも表現されますが、全く同じことです。
「何をする」が難しい。「何ができるか」を知ることから。
「どのHTMLに、どのように、何をする」のフレームワークですが
「何をする」の部分を考えるのが難しいと思います。
具体的にいうと、どのメソッドを使えばいいか分からないと思います。
原因は
① HTMLに関する基礎知識不足
② 何ができるかを知らない
の2つ。
① に関しては別の機会に取り扱うとして、
② について、よく使うメソッドと共に紹介します。
前提として、
下記のメソッドだけで、したいことの80%~90%は実現できます。
—–
① HTMLのクラスを増減する
増）$(“セレクタ”).addClass( “増やすクラス名” );
減）$(“セレクタ”).removeClass( “減らすクラス名” );
② 属性を取得する / 属性を追加する
取得）$(“セレクタ”).attr(“取得したい属性名（例:src）”);
追加）$(“セレクタ”).attr(“追加したい属性名”, “追加したい属性値”);
③ 直近の親HTMLを取得する
$(“セレクタ”).closest(“取得したい親HTMLのセレクタ”);
④ 子HTMLを取得する
$(“セレクタ”).find(“取得したい子HTMLのセレクタ”);
⑤ HTMLを書き換える
$(“セレクタ”).html(“書き換えたいHTMLの内容”);
⑥ HTMLを加える
セレクタの直後に）$(“セレクタ”).after( “追加したいHTML文字列” );
セレクタの直前に）$(“セレクタ”).before(“追加したいHTML文字列”);
セレクタの最後の子HTMLとして）$(“セレクタ”).append(“追加したいHTML文字列”)
セレクタの最初の子HTMLとして）$(“セレクタ”).prepend(“追加したいHTML文字列”)
⑦ 複数のHTMLを1個ずつあたる
$(“セレクタ”).each(function( index ){
console.log( index ); // 今何番目のHTMLか（0, 1, 2…）
console.log( $(this) ); // 今のHTML
});
⑧ クリックされたときに◯◯する
$(“セレクタ”).click(function(){
// ◯◯の中身
console.log( $(this) ); // 今のHTML
});
⑨ select や input[type=radio]が変更されたときに◯◯する
$(“セレクタ”).change(function(){
// ◯◯の中身
console.log( $(this) ); // 今のHTML
});
⑩ select や input[type=”text”]の中身を取得する
$(“セレクタ”).val();
⑪ アニメーション（CSSを少しずつ変化）させる
$(“セレクタ”).animate(
{
変化させたいCSSのプロパティ① : 変化させたいCSSの値①,
変化させたいCSSのプロパティ② : 変化させたいCSSの値②,
…
},
何msかけてアニメーションするか,
function(){
// アニメーション完了後にさせたい動作がある場合はココに書く
});
以上となります。
何度も言いますが
上記のメソッドだけで、ほとんどの場合に対応できます。
上記のメソッドだけで、どうにかならないかを考えてください。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
自分の曖昧な欲求を叶えてくれる、
奇跡の様なメソッドを検索し続けることがないように。
そんな都合の良いものは、ありません。
とにかく、
「どのHTMLに、どのように、何をするか」を
明確にしてください。
