jQueryはじめました

jQueryはじめました。

というのもバイトで使う必要が出てきたから。

何でも新しいこと勉強しようと思っても必要性がないとすぐ飽きちゃって身につかないから、バイトみたいにそれを勉強する必要性のある環境ってのはありがたいものですね。

 

jQueryとはJavascriptのライブラリの一つです。

prototype.jsとかnode.jsとか聞いたことありますがjQueryもその一つのようです。

Javascriptは色々ライブラリが出回ってていいですね。

Actionscriptと違って・・・。

 

とりあえず、jQueryの導入方法をメモ。

 

1,jQuery本体ダウンロード

jQueryのウェブサイト(http://jquery.com/)に移動し、「Download(jQuery);」と書かれたボタンからjQuery本体をダウンロードします。

リンク先のファイルの拡張子が.jsですので、ブラウザによっては右クリックメニューから「リンク先のファイルを保存」でダウンロードしないといけないかもしれません。

 

PRODUCTIONとDEVELOPMENTが用意されていますが、PRODUCTIONは改行や空白などを除いてなるべくファイルサイズを小さくしたもの。

DEVELOPMENTは改行や空白が残されていて、人間がテキストエディタで開いても読みやすいものという違いがあります。

jQueryを使う際はウェブサーバ上にこのファイルを置いてクライアントにダウンロードしてもらうわけなので、普通はPRODUCTIONのファイルサイズが小さいものを使うといいです。

jQueryの中身を読みたい場合などはDEVELOPMENTをダウンロードして読むといいです。

 

2, htmlからjQueryを読み込む

基本的に普通の.jsファイルと同じように読み込みます。

ここでは先程ダウンロードしたjQuery本体を「jQuery.js」という名前にリネームし、htmlファイルから見て「./js」のディレクトリの中に設置したとします。

-------

<!DOCTYPE html>

<html lang="ja">

<head>

<meta chatdet="utf-8" />

<script type="text/javascript" src="js/jQuery.js"></script>

</head>

 

<body>

</body>

</html>

 -------

 

3, 試しにjQueryCSSをいじってみる(サンプル)

それではjQueryがちゃんと動いているか試してみます。

 -------

<!DOCTYPE html>

<html lang="ja">

<head>

<meta chatdet="utf-8" />

<script type="text/javascript" src="js/jQuery.js"></script>

 

<script type="text/javascript">

<!--

$(document).ready(function(){

 

$("#box1").css("color", "red");

 

});

-->

</script>

 

</head>

 

<body>

 

 <div id="box1">

Hello jQuery!

</div>

 

</body>

</html>

 -------

赤い文字で「Hello jQuery!」と表示されていればOKです。

 

簡単に説明。

$(document).ready();

これは$(document)つまりがこのHTMLドキュメントが準備できたときに引数の中の関数を実行するという命令です。

このサンプルでは引数に無名関数(名前のない関数)を指定し直接処理を引数の中に書いています。

 

$("#box1").css("color", "red");

これはcssを動的にいじる関数です。

#box1はbodyの中に書かれたdiv要素に付けられたidです。(このへんはCSSの基礎を参照)

 

つまり#box1というidを付けられた要素のcssを変更するという意味。

CSSのcolorの値をredにします。

つまり文字色を赤にするという意味になります。

 

 

そんな感じで初めてはてブロで書いた記事でした。

慣れたら「syntaxhighlighter」とか使って読みやすくソースコード表示させたいですね。

それとも他にキレイにソースコード表示させる機能とかあるのかな。

絶対ありそう・・・。

それでは。