JQuery(1) 導入のすすめ
Sponsored Links
皆さんこんにちは
お元気ですか?私は眠いです。
さて、本日はWebでよく使われるJQueryについて見てみましょう。
JQueryとは
オープンソースのJavaScriptライブラリの一つ。2006年1月にJohn Resig氏が 最初のバージョンを公開し、現在は有志プログラマによる開発者集団「jQuery Team」が 開発・メンテナンスしている。(E-wordsより)
端的にいうとJavascriptで複雑にしなければできないことを、簡単にできるようにするライブラリみたいなイメージです。JQueryを使ったライブラリとかもあります。
JQuery導入の方法
urlをはりつける方法
googleがホスティングしているurlを利用する。この場合ローカルで扱いたい時にネットワークが繋がっていないと利用できない。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
おばけをクリックすると文字が変更されます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <title>おばけ</title> <script> $(function() { $('p').click(function(){ $(this).html('きゅーちゃん'); }); }); </script> </head> <body> <p>おばけー</p> </body> </html>
自分でダウンロードする方法
まずは、JQueryのページへ移動(Download jQuery | jQuery)
ダウンロードページを開いて、全体選択+コピー。
ローカルにjquery.jsと保存。後は相対パスを入れるだけ
compressが圧縮、uncompressが非圧縮(綺麗にコード書いているか?程度の違いしかありません)
<script src="./jquery.js"></script>
以下が全文です
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="./jquery.js"></script> <title>おばけ</title> <script> $(function() { $('p').click(function(){ $(this).html('きゅーちゃん'); }); }); </script> </head> <body> <p>おばけー</p> </body> </html>
この場合だとローカルでの開発は簡単ですね。