WEB閲覧時に、画像が切り替わったり、マウスを載せるとウインドウがでてきたり、と様々な表現ができるjQuery。今回はそのjQueryについてまとめていきます。2015年5月27日記事
目次
本家サイトよりダウンロードしてください。minのタイプがオススメです。 バージョンがころころ変わりますので、マウスを載せるとファイル名が表示されるので1.XX.X.min.jsか2.XX.X.min.jsというファイルをダウンロードするようにしてください。
Version1はIE8以前をサポートしたもの
Version2はIE8以下を切り捨て、最近のブラウザで高速に使えるようにしたもの
です。各自お好きな方をDLしてください。
ダウンロードしたファイルをアクセスできるところに置きます。 設置方法は主に二つあります。
HTML部方法1
自分のフォルダのJQueryを呼び出す
<head> 他の記述 <script src="js/jquery.1.5.1.min.js"></script> 他の記述 </head>
HTML部方法2
GoogleのJQueryを呼び出す
<head> 他の記述 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> <!--上のように、src以降はhttpなくてもアクセスできます。--> 他の記述 </head>
HTML部
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>JQueryテスト</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("p").click(function(){ alert("Hello JQuery"); }); }); </script> </head> <p>Click me!<p> <body> </body> </html>
Click meを押して、アラート画面がでてきたらjQueryが実行されている証拠です。
Click meを押して・・・
このようにアラート画面がでてきたらOKです。
動いたらjQueryが呼び出され、動いている証拠です。次回はjQueryを基礎から学んでいきたいと思います。 jQueryを学ぶ1