はじめに
jQueryの学習を始めると必ずといっていいほどでてくる理解が深まらない単語の山。
「なんとなくはわかるけど説明できるほど理解が・・・」という方も多いはず。
私もその一人です・・・。
しかしアウトプットしないと自分の頭に定着しないので
あえて説明させてください！
その中で今回はよく出てくる単語『jQueryオブジェクト編』で進めていきます。
jQueryオブジェクトとは？
jQueryオブジェクトとは簡単に言いますと
jQueryメソッドをつかえるようにしたDOM要素
はい出てきましたまた新しい用語。
jQueryメソッドとかDOM要素ってなんですか・・・
参考書とかだとこの新しい用語が当たり前のように使われるので
初心者の僕にはきつかった。
jQueryメソッドとDOM要素についてはまた違う記事でまとめようと思いますが、
軽く説明だけさせてもらいます。
jQueryメソッド
例えば
HTML
<p>背景の色を変えます</p>
jQuery
$(function(){
$('p').css("background-color", "red")
});
上の処理はp要素の背景の色を変えるコードです。
実際に処理を加えるのは.cssの部分です。
このように、あるものに対して操作を行うものがメソッドです。
DOM要素
HTMLの要素はそのままではJavaScript内で使うことができません。
なのでJavaScriptで直接操作ができるように変換したものを
DOM要素と言います。
さて本筋にもどりますが、先ほどにも書いていた通りjQueryオブジェクトとは
『jQueryメソッドを使えるようにしたDOM要素』
言い換えると
『DOM要素に対して.cssや.textなどのjQuery独自のメソッドを使うには
jQueryオブジェクトに変換しないと使えないよー』
ということになります。
実際どうやって使うの?
jQueryについてある程度わかってもらえたら幸いです。
さて次はどう使っていくかなんですが、
これはとても簡単です。
先ほどのコードを例に挙げると・・・
HTML
<p>背景の色を変えます</p>
jQuery
$(function(){
$('p').css("background-color", "red")
});
先ほどと同じようにp要素の背景色を赤色に変えるコードです。
jQueryオブジェクトは$(セレクター)の部分になります。
今回はp要素に対して.cssメソッドを使いたいので
$('p')という形になります。
IDを指定する場合、クラスを指定する場合も同じです。
IDを指定する場合
HTML
<p id="red">背景の色を変えます</p>
jQuery
$(function(){
$('#red').css("background-color", "red")
});
クラスを指定する場合
HTML
<p class="red">背景の色を変えます</p>
jQuery
$(function(){
$('.red').css("background-color", "red")
});
今回は.cssメソッドだけを例に挙げましたが他にもjQuery独自のメソッドは多数ありますので
その度にjQueryオブジェクトに変換する必要があります。
最後に
jQueryに限らずプログラミング学習を続けているとどんどん新しい用語が出てくるかと思います。
最初の内は全然言っている意味がわからないとも思います。
しかしとりあえず先に進めて大体の使い方がわかれば
もう一度最初に戻り用語の意味を読み解くと結構すんなり入るものです。
(私自身も結構そういう事があります。)
ですので復習などをする時にこの記事が少しでもお役に立てればと思います。
誤情報・補足情報などございましたらコメントでどんどんご指摘の方よろしくお願いします！