Jqueryのセレクタとthisとconsole.logの使い方

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

つまづきやすい5つのポイント WEB制作

Jqueryのとっつきにくいポイントを5つに絞ってまとめました。例文はわずか5行のJqueryですが、たったこれだけでJqueryの基本は覚えられます。構文さえわかってしまえば、Jqueryのメソッドを組み合わせれば大体できるようになります。

公開日:
最終更新日:

つまづきやすい5つのポイント 関連ワード #93
使い方
WEB制作
  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0

Jqueryの知っておきたい基本的な使い方

脱Jqueryの流れが大きくなってきた昨今ですが、Jqueryって便利ですよね。便利なJqueryの基本的な使い方を解説します。

ここがわかれば一気にJqueryが使いやすくなるという基本的な使い方を5つのポイントに絞ってお伝えいたします。

Jqueryの勉強にはこちらの書籍がオススメです

オススメというか私が実際に買って読んだ本です。Jqueryモバイルという本も一緒に買ったんですが、モバイルの方は全然聞かなくなりました。

読み応えはあるものの、初心者向けとはちょっと言いずらい内容です。ある程度、基礎ができてる人にはオススメ。

改訂新版 jQuery本格入門

改訂新版 jQuery本格入門 Webプログラミング 【改訂新版 jQuery本格入門】

3,630円 (Amazon価格)

紹介する5つの機能

1. ターゲットを指定するセレクタ$("クラス or ID")

2. きっかけを作るトリガー .click

3. とりあえず確認しよう console.log()

4. アクションを設定 $(this)

5. 動きをつける fadeIn / fadeOut

私が良く使う機能と書き方に絞ってお伝えしますので、ここが理解できればいろいろと面白いことができるようになります。
私もそんなにJquery詳しくないんですが、トランプゲームくらいは作れるようになりました。Jqueryで。

事例:画像をクリックするとフェードアウトしながら入れ替わる

Jqueryで画像切り替え

クリックすると画像が変わります

最低限のコードで作るために、簡素な作りになっていますが基礎編ということで何卒。

Jqueryのコード全容

$(".image1").click(function(){
	console.log("OK");
	$(this).hide();
	$(".image2").fadeIn();		
});

5行で完了。簡単でしょ。

HTMLはこんな感じ

<img src="img/thumbs.png" class="image1">
<img src="../img/thumbs.png" class="image2" style="display: none;"> 		

切り替えたい画像を display:none で非表示にしておきます。

Jqueryを書く前に何がしたいかを整理しましょう

どんなことでも完成のイメージがないことには作ることができません。
したいことの言語化をしておくと何をすればよいかが明確になります。

今回の例でいうと
「画像」「クリック」したときに「画像を切り替え」たい

これができないとどんなコードを書けばいいのかが出てきません。

Jquery 何がしたいのかを明確に

これがないと始まらない セレクタの指定方法

Jqueryの最大のメリット、セレクタの指定が超簡単。だけどセレクタの指定がわからなくて、コピペで済ましてきた人がめちゃくちゃ多い。(昔の自分のことです)

ちゃんと理解すればマジで簡単なんです。

1行目の → $(".image1") がトリガーの対象物「セレクタ」です。

$() の中に、対象物を指定するものを書きます。
ここには「クラス名」「ID名」「タグ」などが入ります。

$( )の中に書くときは「"(ダブルクォート)」か「'(シングルクォート)」で囲う必要があります。
囲わないでよいのは、Javascript内で作った変数名を書くとき。
後ほど「this」が出てきますが、そいつはクォートで囲いません。

今回はクラス名をここに書きます

画像をクリックしたときなので、画像に振ってあるクラス名をここに入れます。
$(".image1")となります。

クラスを示す「.(ピリオド)」も忘れないように!
ちなみにIDの場合は「#(シャープ)」をいれます。CSSのルールと同じです。
タグの場合は何もなし。タグを書く。$("img") のように。

Jquery クラスタの指定方法

これで「.image1」というクラスを持った画像が対象物になりました。
次はトリガーの設定!

クリックしたらなにかをしなさい

画像に対してのトリガーを設定します。トリガーというのは、ユーザーアクションですね。
今回は「クリック」したら、なのでクリックを指定。

$(".image1").click(function(){ });

クリックをしたらなので「click」と書きます。
Jqueryの文法はドットシンタックスと言われる書き方で、.(ドット)で命令文をつないでいきますので、さっき作ったセレクタの後に.(ドット)がつきます。

書き方がちょっとややこしくなってきましたね。

clickの後のカッコ()と大カッコ{}が出てきます。こいつがJqueryの鬼門です。

順番にコードを書くと少しわかりやすくなります。
カッコは必ず一対になっているので、色ごとにセットになってます。

1 $(".image1").click()

clickのあとに()が入ります。開始(と、終わり)のカッコ

2 $(".image1").click(function())

click() のカッコ内に functionを書きます。
functionの後にも()は入ります。

3 $(".image1").click(function(){ });

function()の後に{}大かっこを書きます。
最後に;(セミコロン)で命令文の終わりを告げます。

間違えやすいポイント

.clickの次のカッコの中にfunctionを書いて、functionのカッコには何も書きません。
そのカッコの後に{}大カッコで囲います。

これで「画像」「クリック」したら、まで完成です。

クリックしたらちゃんと動くか検証

ここまで書けたら、命令文がちゃんと動作しているか確認します。
全部書いてから検証すると、なにがダメだったのかがわかりづらくなるので、ちょこちょこ検証します。

console.logで動作確認

さっき作った命令文にconsole.log("OK");と書いて、画像をクリックしてみてください。

$(".image1").click(function(){
	console.log("OK");
});

コンソール画面はF12キーを押すとでてきます

console.log()の中に”(ダブルクォート)で囲ったテキストを入力すると、ブラウザのコンソール画面にその文字が表示されます。
エラーが出てなければ!

Jquery コンソールOK画面

エラーなし!OK!

Jquery コンソールNG画面

エラーメッセージが表示

エラーメッセージが表示された場合は、内容を確認します。
今回のエラーは シンタックスエラー:文法エラーで、{ カッコ足りなくない?と言われているみたいです。

エラー検証の際も、指定したトリガーの条件を満たさないと何も起きませんのでご注意ください。
今回は画像をクリックすることで、console.log が発動します。

{}の中にやりたいことを書きます 画像切り替え

いよいよ画像の切り替えアクションを指定します。

$(".image1").click(function(){
	console.log("OK");
	$(this).hide();
	$(".image2").fadeIn();		
});

3行目の$(this).hide();と、4行目の$(".image2").fadeIn(); がそのアクション。

Jquery {}の中にやりたいことを書く

this ってなんなのさ → 自分

this がわかればJqueryの簡単なスクリプトは覚えたも同然。ほんと。これ意味わからんかった。

ややこしくすると混乱するので、簡単にいいます。
1行目で指定したセレクタの中身を指します。

今回は .image1 のことですね。これがthisの実態。

1行目で指定したセレクタの中身がthis。
但し、クリックされた画像のみが対象になります。

同じクラス名をもっていても$(this)で指定すると、クリックされた画像のみが対象。

Jquery thisの対象

$(this)とクラス指定との違い

$(this)の場合は、クリックされた .image1 だけが対象ですが、クラス名で指定した場合、クリックしてない画像もhide()が発動します。

$(this).hide(); 自分を隠して

セレクタの書き方で書きましたが「this」はクォートで囲いません。Jqueryの変数なので。

$(this).hide()のhide()をメソッドと呼びます。
メソッドの話もややこしくなるので、セレクタにこのhide()をくっつけると非表示になると覚えてください。

メソッドは色んな種類があるので、使い方とセレクタの指定方法を覚えてから、ほかのメソッドを探すのが良いです。
「attr」とか「parent」とかは文法がわからないうちから使おうとすると、ややこしくて嫌になります。

$(".image2").fadeIn(); で徐々に表示

ここでまたセレクタの登場です。
最初に使ったセレクトとまったく同じ使い方なんですが、一番最初のセレクタは、アクションの対象物だったんですよ。

「画像」「クリック」したときに「画像を切り替え」たい
の画像を指定しました。

今から指定するセレクタは、画像を切り替えるための「画像」を指定するセレクタです。

$(".image2").fadeIn で class名が「image2」の画像をフェードインせよ、という命令になっています。
ちなみに、同じクラス名を持った画像がほかにもいたら、それも一緒にフェードインします。

Jquery メソッドの使い方

Jquery メソッドの使い方

fadeIn()メソッドは、fadeIn()がついたセレクタのCSSが変動します。
displayがblockにかわり、opacity(透明度)が徐々に上がって、1になったら止まります。

なので、ボタンが押された後に出てくる画像(.image2)は style="display:none" で非表示化しておけば、fadeInが発動することにより、displayがblockに切り替わる!
※タグに直接書いてますが、クラス指定してCSSで非表示にするのも、もちろんOKです。

ここの動作を整理すると、クリックされたimage1が非表示になり、その次にimage2がフェードインして、画像が切り替わる、という動きです。

ここまでできれば、Jqueryを使った画像切り替えの完了です!

Jqueryのわかりづらいところにフォーカスしました

自分がJqueryをわかったと思えた瞬間が、セレクタの指定方法とthisの意味が腹落ちした時だったんですね。
その時の気持ちを思い出しながらなるだけ詳しく書いてみました。

そのせいで5行のコードの解説がかなり冗長になってしまいました。

別の機会でメソッドを深堀したいと思います。

Jquery 5つのポイントまとめ

WEBデザイナー・プログラミング学習にオススメ

  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0
はてなブックマーク

おもしろかったらぜひ、はてなブックマークをお願いいたします。

次の記事はこちら

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
41歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

文中で紹介している商品

改訂新版 jQuery本格入門

改訂新版 jQuery本格入門 Webプログラミング 【改訂新版 jQuery本格入門】

3,630円 (Amazon価格)

つまづきやすい5つのポイント オススメ関連コンテンツ

jquery 関連記事はこちら すべての WEB制作 記事はこちら

CLS改善をしてPageSpeed Insightsを大幅改善

CLS改善をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

1行のCSSで作る横スライドの作り方

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

14年間使ったロリポップのライトプランからスタンダードプランへ変更

14年間使ったロリポップのライトプランからスタンダードプランへ変更

14年間使っていたロリポップのライトプラン(月額250円)からスタンダードプランへランクアップしてみました。

PHPを使った漢字クイズの作り方解説 その1 POST送信

PHPを使った漢字クイズの作り方解説 その1 POST送信

【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。

本をめくるJqueryライブラリ bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

PHPの良いところは難しいと思われていること

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

ブログアクセスランキング

新着記事

カテゴリリスト

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
41歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

WEB制作関連・オススメ商品 amazon