【jQuery】要素を取得して変更する

　世の中何事にも流行り廃りがあるもので、「最近はもうあまりjQueryは使わないほうがいい」みたいな声もちらちらと見かけるようになってきました。とはいえ、実際に使用してみるとなかなかに便利で、慣れるとなかなか手放せなかったりもします。使わない方がいいと言われるのにはきっといろいろと理由があるのだと思いますが、ひとまず今回はそういうことは抜きにして、私が思うjQueryの便利なところを書いてみようと思います。

そもそもjQueryとは

　jQueryは、JavaScriptを簡単に書けるようにしてくれるライブラリのひとつです。普通にJavaScriptで書くと何行にも渡って書かなければならない処理を、さくっと少ない分量で書けるように便利にしてくれたもの、というイメージでしょうか。比較的直感的に扱いやすく、考え方を掴みやすいライブラリだと思います。HTMLやCSSと組み合わせて、動的で可変なWebサイトを作成する際に使われたりします。HTMLとCSSだけでも綺麗なWebサイトを作ることが出来ますが、JavaScript(jQuery)が加わると、より華やかで面白い工夫のあるサイトになりますね。

要素を取得する

　jQueryが便利だなと思うのは、HTMLなどの要素を取得するとき。簡単に狙ったポイントを取得して、中身を書き換えることが出来ます。

　

①<div id="animal">
　②<p id="dog">いぬ</p>
　③<p id="cat">ねこ</p>
　④<a href="http://karinourl">戻る</a>
⑤</div>


②「いぬ」を「チワワ」に変える
$('#dog").text("チワワ");
⇒「id="dog"」のついたpタグを取ってきて（②）、その文字を「チワワ」に変更する処理

③「ねこ」の文字色をピンクにする
$('#cat').css('color', 'pink');
⇒「id="cat"」のついたpタグを取ってきて（③）、そこに文字色をピンクにするCSSをかける処理

④「戻る」のリンク先を「http://animal」に変える
$('#animal').find('a').attr('href', 'http://animal');
⇒「id="animal”」のついたdivタグを取ってきて（①）、その中からaタグを探し（④）、「href」要素を変更する処理

　

　divタグの中の何番目の要素、みたいな取り方も出来るので、入れ子になったHTMLでも取得しやすいのが便利なところです。今後jQueryが廃れていくかも、ということを考えると、別のライブラリを習得する必要もあるとは思いますが、jQueryもまだまだ便利で使いやすいライブラリだなと思いました。