※読者がhtml/CSSの基礎知識がある前提で書いています。
※このページは筆者のアウトプット用に作りました。誤記があればYUUKIまでお知らせください。
jQueryについて
jQuery(ジェイクエリー)とは、JavaScriptのWebブラウザ用のライブラリのこと。
ライブラリとは、少ない記述でプログラムを書けるファイルを指す。
jQueryで何ができる？
Webブラウザに表示されるテキストや画像に動的な変化を付けることができる。
出典：https://techacademy.jp/magazine/11368
jQueryの使い方
jQueryの読み込み方には二種類ある。
- Web上のソースを読み込む方法
- jQueryの公式サイトからダウンロードし、格納先にアップして読み込む方法
簡単なのは前者だが、ここでは後者のやり方を説明する。
- jQueryの公式サイトからjsファイルをダウンロードし、格納先にアップロード
- htmlファイルの<head>タグの中に、scriptタグを使ってjQueryライブラリを読み込む記述を行う
-
<script type="text/javascript" src="jQueryの格納先.js"></script> <script type="text/javascript" src="jQueryの記述ファイル.js"></script> - jQueryファイルにコードを記述する
セレクタとメソッド
jQUeryではまずこのような形を作る。
// jQueryの形
jQuery(document).ready(function(){
//ここに書く
});
次に「ここに書く」にjQueryオブジェクトを作成する。
jQUeryオブジェクトとは、セレクタによって指定された対象を言う。
例えば$から始まる文はjQueryオブジェクトである。
$('.yuuki').fadeOut(1500); //jQueryオブジェクト
セレクタとは
HTMLの要素の場所を指定すること
基本的な書き方は
$('//セレクタ')
idのセレクタを指定するには、id名の前に「#」を付ける
例：id=”yuuki” を読み込む場合
$('#yuuki')
classのセレクタを指定するには、class名の前に「.」を付ける
例：div class=”yuuki” を読み込む場合
$('.yuuki')
メソッドとは
オブジェクトを操作する命令文のこと
基本的な書き方は
$('.yuuki').//メソッド();
メソッドには多くの命令文を使用する。
代表的なものにhideメソッドがある。
hideメソッドを使えば、要素を隠すことができる。
//hideメソッドを使用した例
$('.yuuki').hide(); //yuukiクラスの要素が消える
これで「yuukiクラス」の要素を隠すことができる。
引数とは
メソッドの()の部分に「引数」を入れることで、メソッドに文字や数値の情報を渡すことができる。
//hideメソッドに1000の引数を入れる
$('.yuuki').hide(1000); //1秒かけて要素が消える
jQueryの基礎まとめ
- jQueryではWeb上の文字や画像に動きを付けることができる
- jQueryを使うには、HTMLで読み込む
- jQueryの基本文は、$(‘セレクタ’).メソッド(引数); で、この一文はjQueryオブジェクトと言う。
