JavaScriptやjQueryでCSSを操作することをよくするのですが、jQueryなどで実行しようと思うと、DOMの読み込みを待ってから適用させることがほとんどなので、場合によっては、display:none;にして見せたくないところもチラっと見えてしまうなんてことがあったりしませんか？
それが嫌な場合はあらかじめCSSでdisplay:none;をあらかじめ指定しておくなどの必要があるのですが、JavaScriptがオフの環境でもそれが適用されてしまうことになるので、見せるためのコードが使えないなんて状況になったり。
チラッとも見せたくないし、OFFの環境の人にも見せたい・・・そんな時のために、JavaScriptに影響を受ける箇所のCSSをJavaScriptで追加し、且つ、DOMの完了を待たずに実行するような仕組みにしてみたらどうかと考えたので、それを実現させるコードをjQueryで考えてみました。
先日ご紹介したjQueryでも一部のブラウザで利用できるようになったCSS3のセレクタ「:target」。jQueryで使うことはまだまだない現状ですが、試しに使ってみました。
ところがCSSで使う時と違い、jQueryで使う場合は一工夫必要かな？なんて思ったので、まとめてみます。
あれ？jQueryでCSS3の全部のセレクタを使えるようになってる？いつから？
jQueryといえば、ほとんどのCSS3のセレクタに対応しているのですが、そのうちの一部は、jQuery1.3.2になっても、確か使えなかったと認識していました。使えないものだと思っていたのですが、最近になって、そのまだ対応していなかったはずのセレクタを試してみたところ、なぜか使えるようになっている様子。1.3.2で試してみても動作する。
いつから！？
とりあえず検証。
jQuery: » jQuery 1.4.2 Released
気づけばjQueryのバージョンが新しくなって、1.4.2がリリースされていました。
今回も主な変更はバグの修正と速度改善のようですが、機能も追加されているようです。
今さら聞けないjQuery実行パターンまとめ :: 5509(+1)
noriさんのブログでまとめられていた「.ready()」などのjQueryの実行パターンについてのまとめ。jQueryの書き出しに書かれる.ready()メソッドや$(function(){〜});などを「おまじない」とか「最初に書いておくもの」なんて言われたり見て覚えていた人が多いんじゃないかなって思うのですが、こういうまとめがあるとわかりやすくていいですね。
十分ではあるのですが、僕なりの補足を入れておこうかなと思ったので紹介も兼ねてエントリー
本の帯に「もう、プログラマーには頼らない！」なんて事が書いてある、jQueryの入門本。このブログでも何度かお世話になった、to-Rの西畑さん著の本で、デザイナーやコーダーがプログラミングの知識なしに始めることができるjQueryの入門本です。
サンプルのHTMLもスクリプトもわかりやすく書いてあり、まさに入門！というくらいの簡単にできてしまうサンプルが豊富に掲載されています。
JavaScriptやjQueryをこれから始めようと思っている人、始めたばかりの人、ちょっと復習をしてみようと思っている人向けの本で、これを読めば、jQueryを使ったちょっとしたUIの変化などを取り入れたサイトが作れることでしょう！
先日のこと、かなり表示している要素のところに適用していたJavaScript(JS)があるのですが、それが重たいとの指摘があり、調査・調整することになりました。自分がコーディングをしたわけではないので、何が原因になっているのかなども全部調べるところからはじめたのですが、確かに要素数が多くなると、ものすごく重くて遅すぎる状態。
ライブラリとかを使わないでgetElementsByTagName使って、配列にpushとかの内容でごにょごにょしていたんですが、いろいろ遅い。高速化の処理を調べて修正しようとも思ったのですが、なにぶん時間も限られている。そして都合のいいことに、jQueryが、なんか別の処理のためにpluginを使うために読み込まれているという状況。それならjQuery使って処理しちゃおうと考えたわけです。
速くなるのかはとりあえず試してみるかってことでチャレンジ。
先日、某所にてお世話になっている、@mersyさんより「ブログの記事一覧にReTweetのボタンをJSで自動でつけられるようにしたい。」というような課題みたいな話題が出てきました。
bitlyのAPIを使って、URLを自動的に縮めておきたいという要件もついていたので、それくらいであれば、以前ブログで紹介した「Easy Retweet Button」を利用したら簡単にできるのではないか？と思ったので、やってみることにしました。
Retweetボタンを簡単に設置できる「Easy Retweet Button」のカスタマイズ方法
jQuery1.4のリリース前より、いろいろ紹介するとか言って起きながら結局紹介できなかったダメ男です。ちょっと奮起してちょっとずつでもご紹介していくぞ！
ということで、いくつかの機能を自分なりに紹介
今回は.first() と .last()、あとはそれに関するものと、.nextUntil() と .prevUntil()、あと.parentsUntil()の５つを書いておきます。
jQueryが1.4になって、このバージョンで作業を進めるようになったのですが、本当にいろいろ便利になったなーと思うことがちょこちょこある。
そんな中の一つ、index()のご紹介。
もうすぐ正式リリースとなるjQuery1.4、新年になってからも、ちょこちょこ動きがあったのですが、ブログに書いていなかった！！
すぐに書けるようにしないと。。。
と、そんなjQuery1.4リリースを記念して、14日連続のオンラインでのイベントを行というような内容のサイトが立ち上がっていた。
jQuery: » jQuery 1.4 Alpha 2 Released
先日、jQuery 1.4のアルファ版のご紹介をして、現在サンプルなどなどを実験したり、作成していたりして、エントリーをまとめていたのですが、気づいたら1.4a2がリリースされておりました。
今月のあたまの話になるのですが、「jQuery 1.4 Alpha 1」がリリースされていました。
jQuery: » jQuery 1.4 Alpha 1 Released
年末年始にかけて最新版がリリースされる予定となっていたのですが、今回のはそのテスト段階のもので、Alpha1としてでています。（開発の最新ではAlpha2が徐々に作成進行中）
これまでのjQuery1.3.2と、どのような点で変化するのか、現時点でわかっていることだけでも書いておこうと思います。
先日、いつものチャットメンバーで話をしているときに、DOM Sctiptingの話になったのですが、メンバーで「DOM」がよくわからない人がいたりしました。
でも、実際にDOMなんて用語で覚えようとしても、最初はピンとこなかったりしませんか？
JavaScriptとかjQueryにしろ、覚えておくべき用語なのですが、ピンとこないので、最初は感覚で使ってしまいましょう。
以前より自分はjQueryについてのことを書いてきているのですが、いまでも「jQueryってなに？」と聞いてくる同業の方がいたりする。最近では減ってはきてはいるものの（知っている人の方が多くなってきているものの）、やはり「使う」までに至らない人の方が多い様子。
個人的には、jQueryは今後のコーダー習得必須の項目になるんじゃないかなって思っている（あくまで個人の想い）。他のどのプログラムより、そしてプレーンのJavaScriptよりも導入の敷居は低いと思うので、HTMLとCSSを覚えるのと同じで、jQueryの基礎的な部分は押さえておいてもいいんじゃないかでしょうか？
それでも基礎を覚えるのは大変なので、最初はプラグインを使うところから入ってみたらどうだろう？
まだ変数に入れた配列の扱いがよくわかっていないのでメモ。
この広告は90日以上新しい記事の投稿がないブログに表示されております。
