jQuery

jQueryはJavaScriptのライブラリ(よく使う機能をまとめたもの)です。JavaScriptを使いやすくしたもので、コードをより短く記述することができます。

書き方

$('セレクタ').メソッド();
または
jQuery('セレクタ').メソッド();

セレクタとは、操作したいHTML要素などです。以下は書き方の例です。

例1 要素名の場合
$('h1')

例2 id名の場合
$('#id名')

例3 class名の場合
$('.class名')

例4 idとclass以外の属性をもつ要素の場合
$('要素名[属性名="値"]')

これ以外にもいろいろな書き方があります。

メソッドは「指定した要素に何をするか」を指定します。例えば以下のようなものがあります。

例1 h1要素のテキストを「Hello World」に変更する
$('h1').text('Hello World');

例2 p要素のテキストの文字の色をredに変更する
$('p').css('color', 'red');

例3 class名がcontentのdiv要素を削除する
$('div').remove(.content);

例4 ul要素の子要素からclass名がsecondの要素を取り出す
$('ul').children('.second');

JavaScriptは、ブラウザによって挙動が異なる場合があります。jQueryはブラウザの違いをあらかじめ吸収できるように設計されているので、差異を気にせず記述できます。また、プラグイン(機能を拡張するソフトウェア)を使って簡単に機能を追加することができます。

参考記事

【初心者向け】jQueryとは?jQueryの基本的な使い方まとめ
jQuery初心者の方向けに、基本的な使い方をまとめました。jQueryとは何か・jQueryを使う前の準備・書き方・簡単なサンプルをご紹介。基本的な使い方を覚えるだけでもできることは色々あるので、これからjQueryを勉強する方にぜひ読んでほしい記事です。
【初心者向け】jQueryとは?JavaScriptとの違いや特徴・使い方の完全まとめ | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト
「jQuery」という言葉は聞いたことあるけど 「jQueryって何?」 「jQueryって何ができるの?」 「jQueryっていまいちよく分からない」 という方も多いのではないでしょうか? 調べてみても難しい単語が並んでいてよくわからなかったり、学習方法がわからなかったりもすると思います。 そこで今回は、入門者の方で...
【jQuery】要素を指定するセレクタの使い方 まとめ
jQueryを使用してDOMの操作を行いたい場合に,セレクタの指定を簡単に行う方法を紹介します.使い方を覚えてしまえば要素の取得を最小限に抑えられ,処理の高速化にもつながります.

コメント

タイトルとURLをコピーしました