タイトル: 導入方法
SEOタイトル: jQueryの導入方法
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<p><span style="font-size:14px"><span style="color:#f39c12"><strong>jQuery</strong></span>を利用するためには、jQueryをHTML上に記述し、</span>読み込む必要がある。</p>
<p>読み込み方の主な方法は2パターンある。</p>
<p> </p>
<h2><span style="font-size:16px">Web上のソースをそのまま読み込む方法</span></h2>
<p><span style="font-size:12px">(※CDNにホストされているjQueryファイルの読み込む)</span></p>
<p><span style="font-size:12px">※CDN（Contents Delivery Network）とはウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのこと。</span></p>
<p> </p>
<p><span style="font-size:14px"><strong>①<a href="https://code.jquery.com/">jQueryのCDN</a>を使ったjQueryファイルの読み込み</strong></span></p>
<table border="1" cellpadding="1" cellspacing="1" style="width:600px">
<tbody>
<tr>
<td style="background-color:#ffffff">
<p><span style="font-size:14px"><strong><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script></strong></span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p><strong><span style="font-size:14px">②<a href="https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview">MicrosoftのCDN</a>を使ったjQueryファイルの読み込み②</span></strong></p>
<table border="1" cellpadding="1" cellspacing="1" style="width:700px">
<tbody>
<tr>
<td style="background-color:#ffffff">
<p><strong><script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script></strong></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p><span style="font-size:14px"><strong>③<a href="https://developers.google.com/speed/libraries/">GoogleのCDN</a>を使ったjQueryファイルの読み込み③</strong></span></p>
<table border="1" cellpadding="1" cellspacing="1" style="width:700px">
<tbody>
<tr>
<td style="background-color:#ffffff">
<p><span style="font-size:14px"><strong><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></strong></span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2><span style="font-size:16px">ダウンロードしたjQueryを読み込む方法</span></h2>
<p><span style="font-size:14px">Queryライブラリの公式ページからダウンロードする。</span></p>
<p><a href="http://jquery.com/download/"><span style="font-size:14px">公式ページ</span></a></p>
<p><img alt="" src="/uploadImage/20170824043658_9654164.png" /></p>
<p> </p>
<p><img alt="" src="/uploadImage/20170820085053_1386660.png" /></p>
<p><span style="font-size:14px"><strong>ダウンロードしたjQueryファイルの読み込み</strong></span></p>
<table border="1" cellpadding="1" cellspacing="1" style="width:600px">
<tbody>
<tr>
<td style="background-color:#ffffff">
<p><strong><span style="font-size:14px"><script type="text/javascript" src="格納場所のパス/jquery.min.js"></script></span></strong></p>
</td>
</tr>
</tbody>
</table>
<p> </p>