Javascriptの勉強をかねて、以前買った「jQueryデザイン入門」を読んでみます。
jQueryとは
jQueryとはjavascriptのライブラリーの一種で2006年に公開されました。どちらかというと外部を構成するデザイナー向けのライブラリーです。
特徴はコードをあまり書かないが、ダイナミックな表現を実践できることにあります。
使い方としては公式サイトから「jQueryライブラリー」をサーバーにアップロードして利用する方法が一般的です。
scriptタグの中にコードを記述することもできますが、外部ファイルに記述したほうが実務上楽でしょう。
[cc lang=”html”]
//メタダグなど
//もしくは、直接呼び出しても大丈夫です。
[/cc]
jQueryの基本
javascriptの開発環境をなんでしようかを考えていたのですが、FireBugと一緒に使えるFireQueryを使ってみます。
こういった開発環境を整えるのが億劫になってしまうんですよね。
FireQueryはFireBug上のコンソールに書いたコードがブラウザで表示されているHTML文章に適用されます。
[cc lang="javascript"]
$("p").each(function(){
$(this).click(function(){
$(this).css("color","blue");
});
});
[/cc]
例えば上記コードをFireBugのコンソール内で実行すると、ブラウザないのPタグをクリックした際に文字の色が青に変わります。
[基本的書き方]
- $マークの（）の中にはターゲットとなるセレクタを入れる。
- $("セレクタ").命令（内容）
セレクタはタグの名前。タグの名前やid="",class=""などがしてできる。
CSS3やCSS2、「属性セレクター」、「jQuery独自のフィルター」など多くの記載方式があるみたいです。
セレクタを指定したら、そのセレクタに何を行わせるかの命令を記載します。
例
- text("変更したいテキスト内容");
- css(".....",".....") CSSの制御
- append(....) :要素の最後に指定したHTMLを移動させる
- html("変更したいhtml");
[cc lang="javascript"]
// のCSSを変更する。この場合は背景を緑、文字の色を白に。
$(function(){
$("a").css("background-color","green")
.css("color","#ffffff");
});
[/cc]
[イベント]
通常のjavascriptのように、イベントを設定することが可能です。
例えば、あるセレクタをクリックしたら文章を変えるなどを設定できます。
[cc lang="javascript"]
$(function(){
$("p").click(function(){
$(this).css("color","blue");
});
});
[/cc]
click以外にも、mouseover()、one()、toggle()など色々なイベントがあります。これらを組み合わせることによって寄り動的なサイトを作ることができます。
［参考書籍］
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
