JQueryの基本文法について(基本中の基本のこと)

記事
コラム
コピペで動くからと、あまりJQueryのことを理解せずにscriptタグに貼り付けている方、これからJQueryを勉強しようとされている方向けに、以下の簡単な処理を例にして、JQueryの文法の基本を解説します。

例)JQueryを使って、テキストを青文字に変更

image-2.png

$(function(){ ←これってなに?

基本的にJQueryは、ウェブサイトに動きを加えたりするために導入することが多いと思います。
でもHTML(DOM)が読み込まれる前にjQueryが処理を実行しても、うまく動作しません。
なので、次のような構文を決まり文句のような感じで書かなくてはなりません。
image.png

これは「HTML(DOM)が全て読み込まれるまで実行を待ちますよ」と書かれています。
で、短縮してこれでも同じ意味になります。

image-1.png

つまり、$(function(){ と書くことで、JQueryの実行順を制御していることになります。

$("p").css("color" , "blue") ←これは何をしているの?

figure1.png

これは、間にある .(ドット) で、前半と後半の処理に分かれています。
ドットの前を「セレクタ」、後ろを「メソッド」とそれぞれ呼びます。
やっていることは、

セレクタ ▶ 何を
メソッド ▶ どうする

という感じの処理になります。

今回やりたいことは、p要素に入っているテキストを青色に変えたいわけなので、
$("p") = P要素を(何を)
css("color" , "blue") = 色を青色にする(どうする)
という処理になるわけです。

ということで、これを実行すると、

image-4.png

styleタグでcssを書いたり、html内にカラーの指定を入れずに、
JQueryでテキストを青色に変えることができました。

今回は本当に超基本の文法を紹介しました

次回以降は関数を使った処理など、もう少し面白い文法を書いていきます。
見てくれた方のお役に立てれば嬉しいです。

ではまた次回の記事で。ノシ
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら