JavaScript基礎:jQuery導入手順・記述方法

こんにちはタクゾウです。
今回はJavaScriptのライブラリであるjQueryの基礎についてまとめてたいと思います。

個人の復習として誰が見てもわかりやすいように書いていますので、
参考になれば幸いです。

jQuery(ジェイクエリー)とは

JavaScriptのライブラリのひとつであり、jQueryを使用する事によりJavaScriptの記述を少なくすることができます。

jQueryを使用するまでの手順

jQueryをダウンロードする

jQueryは公式サイトからダウンロードする事ができます。Webで「jQuery」と検索するか、下記リンクから公式サイトに移りましょう。

参考 jQuery公式サイトjQuery公式サイト

右のダウンロードボタンからダウンロードページに遷移しましょう。

基本的に最新のバージョンを選択で問題ありません。(※ブロク投稿時バージョン:3.3.1)
・非圧縮ファイル:Download the compressed, production jQuery 3.3.1
・圧縮済みファイル:Download the uncompressed, development jQuery 3.3.1

MEMO
圧縮してある方が、読み込みも早くなるため、特に理由がなければ圧縮済みファイルを選択しましょう!

jQueryを読み込む

ダウンロードしたjQueryを使用する時はhtmlのheadタグ内か、bodyの終端でjQueryファイルを読み込む記述を追加しましょう。(現場ではbody終端に配置する事が多いです。)

HTML
//DOMを読み込んだタイミングでjQueryを読み込む
<script src="/assets/js/lib/jquery.min.js"></script>
//外部ファイルをよみこむ時はjqueryを読み込んだ後に読み込む
<script src="/assets/js/app.js"></script>
</body>

CDN(Contents Delivery Network, CDN)を使った読み込みかた

CDNとは、インタネット上で提供されているjQueryをインターネットから読み込むやり方で、jQueryをCDNで読み込む方法は3つあります。

1, jQueryのCDNを使ったjQueryファイルの読み込み方法

HTML
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
参考 jQuery CDNjQuery CDN

2, GoogleのCDNを使ったjQueryファイルの読み込み方法

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js""></script>
参考 Google Developers

3, MicrosoftのCDNを使ったjQueryファイルの読み込み方法。

HTML
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js""></script>
参考 Microsoft Ajax Content Delivery NetworkMicrosoft Ajax Content Delivery Network
MEMO
CDNは便利ですが、ネットに接続されている状態でないと読み込まれないため、納品するときはダウンロードしたファイルを使いましょう!

jQueryを使った記述方法

基本的な記述方法

基本的には、セレクター名の後にメソッド名と引数を指定するように記述していきます。
また、jQueryではチェインメソッドと呼ばれる仕組みをつかっており、メソッドをつなげて使用する事ができます。

JavaScript
//要素を選択しなにを行うが選ぶ
$("セレクター").メソッド名(引数);
	
//p要素の色を赤くする例
$(function(){
	$("p").click(function(){
		$(this).css("color","red").fadeOut();//thisは自分の事
	});
});	

DOMが読み込まれたタイミングで処理をする

下記の記述方法は、どれも同じ意味になります。現場では一番シンプルな3番目の記述を使いましょう!

JavaScript
jQuery(document).ready(function($){
	//DOMがよみこまれた段階で実装
});

$(document).ready(function($){
	//DOMがよみこまれた段階で実装
});
	
$(function(){
	//DOMがよみこまれた段階で実装
});

よく使用するメソッド

addClassメソッド

要素に対してクラスを追加するメソッド

JavaScript
$(function(){
	$("p").addClass("color");//p要素に対してcolorのクラス属性を追加する。
});	

attrメソッド

要素の属性を取得してその属性を書き換えるもの

JavaScript
$(function(){
	$("a").attr("href","http://jQuery.com/download/");//a要素のリンク先を変更する。
});	

changeメソッド

指定した要素の中身が変わった時に実行する。

JavaScript
$(function(){
	$("input").change(function(){
		alert("変更されました。");
		//inputの要素の中身が変更された場合。
	});
});	

clickメソッド

要素がクリックされた処理を実行

JavaScript
$(function(){
	$("p").clik(function(){
		alert("クリックされました。");
		//p要素がクリックされた場合に処理をする。
	});
});	

hideメソッド

要素を非表示にする。

JavaScript
$(function(){
	$("p").hide();//p要素を非表示にする
});	

showメソッド

要素を表示する。

JavaScript
$(function(){
	$("p").show();//p要素を表示する
});	

toggleメソッド

ある要素が非表示の場合は表示に、表示に場合は非表示にする。

JavaScript
$(function(){
	$("p").toggel();
});	

textメソッド

要素内のテキストを取得、書き換える

JavaScript
$(function(){
	$("p").text("書き換えるテキスト");
	//p要素のテキストを書き換える
});	

まとめ

  • jQueryはjsを簡単に書けるようにした工作キット
  • jQueryを使うにはファイルを読み込むか、ネット上にあるファイルを読み込む
  • 外部ファイルを読み込む場合は、jQueryファイルを読み込んでから外部ファイルを読み込む
  • jQueryもjsと同じく、「要素を選択」してから何をするか記述する。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA