e2esound.com blog » jQuery

「Web制作の現場で使うjQueryデザイン入門」

yterajima — Tue, 09 Mar 2010 18:00:00 +0000

タイトルの通り、Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)を購入しました。
以前からJavaScriptを学ぶように心掛けていますが、他の優先事項の前に遅々として進まず。jQuery自体はWebのデザインをしていく上でどうしても必要＆ちょうど面白そうな本が出たので購入した次第です。

さてさて、一通り読み終わると簡単なjQueryを使用したJavaScriptが書けるようになります。
もちろん本のタイトル通り入門を目的としているので、実感としてもっと勉強する必要があると思っています。

内容もライトに書かれているので、オススメです。

※なんとなく書いてみました。
http://www.e2esound.com/sample/biz

PHPと連携させたら何ができるでしょうか？悩みが増えますが、楽しい悩みですね。

jQuery:イベント処理

yterajima — Tue, 16 Sep 2008 10:00:02 +0000

続いて続いてイベント処理です。

■ページが読み込まれる時に実行
window.onloadイベント。

$(function() {
$(“div”).text(“文字列の追加とかしちゃう。”);
});

使い道としては、
例えば複数ページの共通する特定部分を書き直すような場合に使用するのだろうか？

■クリック時に実行
clickメソッドを使う。

$(function(){(
    $(“div”).click(function(){
    this.style.backgroundColor=”yellow”;
    });
});

thisキーワードに対象のプロパティがあって、それを対象に変化させる、と。
ほぅ。clickメソッドの中のプロパティは後でお勉強が必要ですね。
これ、「2回クリックしたら元に戻る」とか出来ないのかな？(多分出来る)

■マウスオーバー/マウスアウト時に実行

mouseover()
マウスを載せたとき
mouseout()
マウスを載せていないとき

$(function(){(
    $(“div”).mouseover(function(){
    this.style.backgroundColor=”yellow”;
    });
});

$(function(){(
    $(“div”).mouseout(function(){
    this.style.backgroundColor=”white”;
    });
});

おぉー、これならクリックよりも理想に近い形で動かせますね。ふむふむ。

■hover()

mouseover()とmouseout()を一度に扱うメソッド。

都合、中身が2つ必要。

$(function(){(
    $(“div”).mousehover(
    function(){
    this.style.backgroundColor=”yellow”;
    });
    function(){
    this.style.backgroundColor=”white”;
    });
});

mouseover()とmouseout()を指定するよりもこちらの方が楽。

そもそも、mouseout()を使用することってあるのかな？
無い気がする。

よっしゃ。これで少しはイジレルようになってきた。

jQuery:CSSへのアクセス

yterajima — Tue, 16 Sep 2008 09:58:44 +0000

引き続き、jQueryの学習を進めるのであった。

道のりは遠いような近いような感じですが、本日も進みます。
今日はCSSへのアクセスと操作です。

■CSSメソッド
CSSへアクセスするには、専用のメソッドを使用する。
それがCSSメソッド。

パラメーターの数で動作が違うので要注意!!

パラメーターが1つの場合
css(“プロパティ”)で対象プロパティの値を読み込む

$(“p”).css(“color”)

pタグのcolorの値を取得
パラメーターが2つの場合
css(“プロパティ”,”値”)でスタイルシートの値を設定する

$(“p”).css(“color”,”#000000″)

■プロパティを一括で書き換える

cssメソッドに2つのパラメーターを与える場合、以下のようなcodeが考えられる。

$(“p”).css(“color”,”#000000″).css(“background-color”,”#0033cc”)

この様に複数のプロパティを同時に操作する場合、以下の記述で対応できる。

$(“p”).css({“color”:”#000000″,”background-color”:”#0033cc”})

ちょっとCSSのような、じゃ無いような不思議なcodeですね(汗
codeの冗長化は避けたいので必須ですね。

■クラスの追加/削除

クラスの追加はaddClass()メソッド、削除はremoveClass()メソッドを使用する。

ex.class=”sample”をpタグに追加する

$(“p”).addClass(“nore”)

ex.class=”sample”をpタグから削除する

$(“p”).removeClass(“note”)

■スタイルシートの交互切替

スタイルシートの切替を交互に行うtoggleClass()メソッドを使用する。
ex.通常⇒heightクラス⇒通常

.height {height:20px;}

$(“p”).toggleClass(“height”)

ふむふむ。

CSSへのアクセスはCSSメソッド
ＣSSクラスの追加=addClass()メソッド
CSSクラスの削除=removeClass()メソッド
CSSクラスの交互切替=toggleClass()メソッド

よっしゃ。ちぃ覚えた!!（違

どうでもいいのですが、
$(“p”) ←ヨダレ垂らしているみたいですねwww

jQuery:HTMLへのアクセス

yterajima — Mon, 15 Sep 2008 12:40:48 +0000

jQueryを扱えるようになりたい!!ということで、早速基本部分から。

尚、JavaScriptは全くいじった事がありません・・・

資料を購入する余裕も今はないので、こちらを参考に基本から。

まずは、動作対象となるhtmlタグを指定する方法。
感覚的にはほぼCSSと同じ。楽チン。

■ドキュメントへのアクセス(CSSライク)

特定タグへのアクセス
pタグへのアクセスは、$(“p”)
複数タグへのアクセス
CSSと同様にカンマ区切りでアクセス。$(“p,img,div”)
id=”about”へのアクセス
$(“#about”)
class=”about”へのアクセス
$(“.about”)

以上は、CSSのセレクタ指定を$(“”)の中に入れ込めば良いので問題なし。
ただし、以下の部分からアクセスの方法が異なる。

■ドキュメントへのアクセス(階層構造的に)
※参考として以下のcodeの結果を考える

text1text2text3text4

pタグの中のspanタグへのアクセス$::text1、text2、text3
(“p span”)
pタグの中の子spanタグへのアクセス::text1、text2
$(“p>span”)
pタグの直後のspanタグへのアクセス::text1
$(“p+span”)

より詳細にアクセスする場合には便利ですね。なるほど。

■関連メソッド
※参考として以下のcodeの結果を考える

1と2の違い

html(“”)
対象とするアクセスにhtml形式で文字列を出力

1と2の違い
text(“”)
対象とするアクセスにtextそのままの文字列を出力

1と2の違い

今回はHTMLへのアクセスでしたが、CSSにもアクセスできる!!ということで。
CSSにアクセスできるのは凄いな(汗

明日はCSSとイベントについてまとめたいと思います。

jQueryを使えるようになりたい

yterajima — Sat, 13 Sep 2008 13:00:49 +0000

前職ではMobileサイトの製作/運営も仕事のうちでした。

Mobileでは、やれることもディスプレイの面積も限られているので
返ってコーディングの上で技術的なものは必要とされていませんでした。

しかし、webになるとできることも多くなってきます。

棚上げになっているbiz.e2esound.comのモックアップを作りながら、
「CSSとXHTMLの組み合わせけだと少しさびしいな」と思い始めました。

そこで、biz.e2esound.comではjQueryを使ってみようかなと考えています。

jQueryとはJavaScriptのライブラリの1つで、高速・軽量を特徴としています。
JavaScriptは以前からいじってみたかったのですが、より実践的にjQueryから入ってみようと思います。

まだリファレンスやサンプルを読み始めたばかりですが、
思っていたよりも出来ることが広がりそうなのでワクワクしております。
(俺、専門法律だった気がするけど、いいんだもん、いいんだもん。)

ところで、調べているうちに気になったんですが、
CSS3で対応できる動作については、Ajax/JavaScriptとCSSのどちらが動作が速いんだろうか？

■制作中