JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

jQueryの使い方 1.導入編

jQueryとは何なのか?

jQueryとはJavaScriptのコードを簡素化して使いやすくしてくれたものだと思ってください。中身をのぞいてみるとわかりますがjQyeryはJavaScriptで書かれた関数の塊です。

 

1.jQueryをダウンロードする

ダウンロードはここからです→(http://jquery.com/download/

f:id:vw-dsg:20170218055505p:plain

ダウンロードのリンクは何種類もありますが一番上のリンクをクリックすれば良いです。ここをクリックするとjquery-3.1.1.min.js」というのがダウンロードできます。

上から2番目のリンクはjquery-3.1.1.js」がダウンロードできます。

一番上のリンクでダウンロードできるjquery-3.1.1.min.js」2番目のリンクでダウンロードできるjquery-3.1.1.js」の違いは、コードに改行とコメントが入って読みやすくなっているかなっていないかだけなので、普通に使うのであればサイズの小さいjquery-3.1.1.min.js」を使った方が読み込みが速くて良いはずです。

<参考>

 jquery-3.1.1.min.js(84.6kB)
 jquery-3.1.1.js (260KB)

 

3.ダウンロードしてサイト内に置く

jQueryをダウンロードしたらサイト内の適当なところに配置しますが、配置の仕方は自由です。htmlファイルと同じ階層に並べてもいいしスクリプト用のフォルダを作ってその中に入れても良いです。

f:id:vw-dsg:20170218063446p:plain

 

4.HTMLページとjqueryをリンクさせる 

jQueryをサイト内に置いただけではまだ使えません。jQueryを使えるようにするためにはjQueryを使いたいhtmlファイルのコードに、htmlファイルとjQueryファイルを連結(リンク)させるためのscriptタグheadタグの中に追加する必要があります。

 

■追加するタグ
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>

typeはリンクするファイルの種類でお決まりの"text/javascript"。srcjqueryファイルのパス。 

 

■追加例

<head>
 //headタグ内でjqueryとリンク
 <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>

 

3.まとめ

導入までの流れは簡単ですね。

jQueryサイトからファイルをダウンロードして、サイト内に置き、jQueryを利用するhtmlファイルのheadタグ内にjQueryの場所を指定したscriptタグを追加するだけです。

  • jQueryサイトからファイルをダウンロード
  • サイト内に置く
  • headタグにjQueryの場所を指定したscriptタグを追加

 

<終わり>

※次回は実際にjQueryを使ったサンプルを作ってみたいと思います。