THE HAM MEDIA BLOG

jQueryのバージョンが1.3になって増えた新機能「live()」
いまいちよく使い方がわかっていなかったので、
勉強をかねてのメモエントリーを残しておきます。

jQuery1.3が出たばかりでしたが、
バグフィックス版の1.3.1が昨日リリースされておりました。

jQuery: » jQuery 1.3.1 Released

一つ前のエントリーでも書いたが、
jQueryの最新版、1.3がリリースされた。

最新版になって、機能が良くなるのはいいことだが、
今回のリリースによって、エラーが発生してしまう！
なんて事態がいくつか予測される。

中でもいくつかのことは気をつけておかないと
エラーで動作しない！なんてことが多発しそうなので、
ここに特に注意しておく２つを書いておく。

年末からjQueryの最新版のBeta版について
２度ほど試しに使ったことを書きましたが、
今日、正式に1.3がリリースされていたので紹介！

新年に入って更新が滞っていましたが、
ようやく始動させまする！！

更新するネタがなかったのではなくて、
何書こうかなーなんて調べたりしているうちに寝ていたという…
そんな一週間をすごしていました（汗）

まず今回のエントリーですが、
年末にも書いたjQueryno1.3のBeta版、
先日Beta2がでていたのであらためて使ってみました。

jQuery 1.3Beta1のテスト版が数日前に出ていた。
正式版は来月の中旬に出るらしい(？)のだが
その前にBeta版をちょっとだけ試してみることにした。

以前紹介したSameHeight Plugin
これの実験をしているうちにふと気づいたことがある。
CSSの指定の仕方によって、.css()で取得してくる値がなんだか違う。

実はそのせいで、サンプルを作ったときは、
SafariとChromeで若干表示が違ったということが判明！

気づいたことをサンプルとメモで残しておく。

以前のエントリーで、
「jQueryメモ：親要素だけ消すってどうやるんだろう？」
というのをエントリーしたのですが、
cyokodogさんから別な方法も教えてもらいました。

そこでcontents()というjQueryの関数を使っていたのですが、
after()と一緒に使うと、「こんな風になるのか！？」
と驚いたというか、動作について勘違いしていたことに気づきました。
メモのためにエントリーしておきます。続きを読む »

jQueryを使うと、HTML内のいろいろなタグにアクセスできて、
簡単にそれらを操作することができる。
けど、head内って操作することできるのかな？
一応htmlだしできるよね？なんて疑問に思ったので、
とりあえず試してみた。

いつもロールオーバーを設定するときは、
パッとすぐに切り替わるものを使っていたのですが、
以前紹介した、「透明度を利用したロールオーバー」
これを使えばフワッとしたロールオーバーができな〜
なんて思ったのでさっそく作ってみた。

上の図にしたように、子要素を持つ親要素のみを削除したいとき、
jQueryを使って表現するにはどうしたらいいんだろう？
なんてのを悩んで結局できなかった。

とりあえずためしたものをメモエントリーとして書いておく。

いつも利用させていただいているjQueryのプラグイン「yuga.js」
どんな風に書かれているのかなーって思い、作者のブログを読んだところ、
プラグインの記述方法で書いていると書かれていた。

そんなものがあるのかなと思い出してみたら、
魔法の鎖のつなぎ方(2)で書かれていたのを思い出した。
どんな風に書けばいいのかメモ程度に書いておく。

以前紹介した、Mootoolsを使ったナビゲーション、
「Fancy Navigation with MooTools Javascript」
「Mootoolsでグラデーションのように変化するナビゲーション
　「Fancy Navigation」の設定の仕方」
これをMootoolsじゃなくて、jQueryで似たようなものを作ってみることにした。

同じとまではいかなかったけど、できるだけ綺麗に動作するようなのにしてみた。

先日書いた「jQueryの勉強：自作関数？」
これを読み返していて、プレビューを実行。
そこでなぜか違和感を感じる動作をしていることに気づく。
「あれ？コレの実行って文字が大きくなってから
　指定の大きさになるんだっけ？」

いやいやいや、そんな指定はしていない。
小さい文字から大きくなるアニメーションのはずだ。

作ったときはFirefoxでプレビューしていたから気づかなかったけど、
どうやらIE6で見たときに違う動作をするようだ。

一体なぜ！？

原因を探ってみることにした。

自作の関数ってどうやって作るんだろう？
どうやれば動くんだろう？

実はさっぱりわかっていなかったりします。

なので、今回は
「魔法の鎖のつなぎ方(1) - ［JavaScript］All About」
これを見てお勉強することにしてみました。

以前にご紹介した
「jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト」

それを使って、今行っている案件をこなそうと思ったら、
３つ程改良したい部分が出てきた。

一つ目はあらかじめ文字を出現させていて、
そのままsubmitされた場合、デフォルトの文字のままだった場合、
それを削除するというもの。

二つ目は、あらかじめHTMLの段階でvalueをセットしていた場合や、
以前入力していたのをあらかじめ表示させておくなどをした場合、
デフォルトの文字を表示させないようにするというもの。

３つめは単純、フォーカスがあった部分の
背景の色を変えて、入力している部分がわかるようにするもの。

以上３点を加えたものを作ってみた。

入力フォームに何を入力していいのか、
あらかじめサンプルを入力しておくのがいいと言われます。

でも、valueとしてあらかじめ文字を入力しておくと、
入力しようとするときにいちいち消す必要があるので面倒です。

なので、最初はサンプル文字をいれておき、
入力部分にフォーカスがいったときにそれを消すスクリプトを作ってみました。

昨日までJSONデータの取り扱いで悩んでいたら、
なんと『to-R』の西畑さんが、参考となるエントリーを書いてくださいました！

参照：JSONとJSONP[to-R]

これを見たときは、大興奮（笑）
本当にありがとうございます。

読んでいるだけだとだめだ！なんて思ったので、
自分でも動作するかいろいろいじってみる事にした。

昨日に引き続き、JSONのお勉強中。

外部URLからデータをもってこyほうとしているのだけど、
エラーばっかりでて、なかなかうまくいかない。

今日は自分のための簡易メモ

以前XMLを扱おうとした際に出てきたJSONなるもの。
JSONについて何もしらないので、調べつつここにメモしていこうと思う。

ちなみに、JSONのことを書こうとしているのですが、
XMLのことも、現状の理解度は低かったりします。
と、そんな状態ですが、とりあえず扱えるくらいにはなってみよう！
などという目標のもと、今回の勉強メモをエントリー