THE HAM MEDIA BLOG

JavaScript OFF環境に優しく?jQueryでCSSを追加

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
CSS

jQueryでstyle追加

JavaScriptやjQueryでCSSを操作することをよくするのですが、jQueryなどで実行しようと思うと、DOMの読み込みを待ってから適用させることがほとんどなので、場合によっては、display:none;にして見せたくないところもチラっと見えてしまうなんてことがあったりしませんか?

それが嫌な場合はあらかじめCSSでdisplay:none;をあらかじめ指定しておくなどの必要があるのですが、JavaScriptがオフの環境でもそれが適用されてしまうことになるので、見せるためのコードが使えないなんて状況になったり。

チラッとも見せたくないし、OFFの環境の人にも見せたい・・・そんな時のために、JavaScriptに影響を受ける箇所のCSSをJavaScriptで追加し、且つ、DOMの完了を待たずに実行するような仕組みにしてみたらどうかと考えたので、それを実現させるコードをjQueryで考えてみました。

続きを読む

CSSのとjQueryの「:target」の違い

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
CSS
:target

:target

先日ご紹介したjQueryでも一部のブラウザで利用できるようになったCSS3のセレクタ「:target」。jQueryで使うことはまだまだない現状ですが、試しに使ってみました。

ところがCSSで使う時と違い、jQueryで使う場合は一工夫必要かな?なんて思ったので、まとめてみます。

続きを読む

何故かあまり取り上げられない、jQueryのCSS3セレクタ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
CSS3
jquery

あれ?jQueryでCSS3の全部のセレクタを使えるようになってる?いつから?

jQueryといえば、ほとんどのCSS3のセレクタに対応しているのですが、そのうちの一部は、jQuery1.3.2になっても、確か使えなかったと認識していました。使えないものだと思っていたのですが、最近になって、そのまだ対応していなかったはずのセレクタを試してみたところ、なぜか使えるようになっている様子。1.3.2で試してみても動作する。

いつから!?

とりあえず検証。

続きを読む

jQuery1.4.2リリース

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

jQuery1.4.2リリース

気づけばjQueryのバージョンが新しくなって、1.4.2がリリースされていました。

今回も主な変更はバグの修正と速度改善のようですが、機能も追加されているようです。

続きを読む

Re: 今さら聞けないjQuery実行パターンまとめ【実行のタイミングって?ちょっとした補足】

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

201002151.gif

noriさんのブログでまとめられていた「.ready()」などのjQueryの実行パターンについてのまとめ。jQueryの書き出しに書かれる.ready()メソッドや$(function(){〜});などを「おまじない」とか「最初に書いておくもの」なんて言われたり見て覚えていた人が多いんじゃないかなって思うのですが、こういうまとめがあるとわかりやすくていいですね。

十分ではあるのですが、僕なりの補足を入れておこうかなと思ったので紹介も兼ねてエントリー

続きを読む

デザイナー・コーダー必見の一冊!『Web制作の現場で使う jQueryデザイン入門』

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
おすすめ本
jquery

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

本の帯に「もう、プログラマーには頼らない!」なんて事が書いてある、jQueryの入門本。このブログでも何度かお世話になった、to-Rの西畑さん著の本で、デザイナーやコーダーがプログラミングの知識なしに始めることができるjQueryの入門本です。

サンプルのHTMLもスクリプトもわかりやすく書いてあり、まさに入門!というくらいの簡単にできてしまうサンプルが豊富に掲載されています。

JavaScriptやjQueryをこれから始めようと思っている人、始めたばかりの人、ちょっと復習をしてみようと思っている人向けの本で、これを読めば、jQueryを使ったちょっとしたUIの変化などを取り入れたサイトが作れることでしょう!

続きを読む

jQuery使っても十分速いよというお話

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

jQueryが、改めてすげぇってt思った

先日のこと、かなり表示している要素のところに適用していたJavaScript(JS)があるのですが、それが重たいとの指摘があり、調査・調整することになりました。自分がコーディングをしたわけではないので、何が原因になっているのかなども全部調べるところからはじめたのですが、確かに要素数が多くなると、ものすごく重くて遅すぎる状態。

ライブラリとかを使わないでgetElementsByTagName使って、配列にpushとかの内容でごにょごにょしていたんですが、いろいろ遅い。高速化の処理を調べて修正しようとも思ったのですが、なにぶん時間も限られている。そして都合のいいことに、jQueryが、なんか別の処理のためにpluginを使うために読み込まれているという状況。それならjQuery使って処理しちゃおうと考えたわけです。

速くなるのかはとりあえず試してみるかってことでチャレンジ。

続きを読む

「Easy Retweet Button」をカスタマイズしてRetweetボタンを設置する

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
javascript
twitter

先日、某所にてお世話になっている、@mersyさんより「ブログの記事一覧にReTweetのボタンをJSで自動でつけられるようにしたい。」というような課題みたいな話題が出てきました。

bitlyのAPIを使って、URLを自動的に縮めておきたいという要件もついていたので、それくらいであれば、以前ブログで紹介した「Easy Retweet Button」を利用したら簡単にできるのではないか?と思ったので、やってみることにしました。

続きを読む

jQuery1.4のバグなどが修正されたjQuery1.4.1リリース!

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

jQuery1.4.1

jQueryの1.4版がでて少したちますが、バグなどが修正された1.4.1がリリースされました!

続きを読む

jQuery1.4の追加機能や変更された点など その1

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

jQuery1.4のリリース前より、いろいろ紹介するとか言って起きながら結局紹介できなかったダメ男です。ちょっと奮起してちょっとずつでもご紹介していくぞ!

ということで、いくつかの機能を自分なりに紹介

今回は.first() と .last()、あとはそれに関するものと、.nextUntil() と .prevUntil()、あと.parentsUntil()の5つを書いておきます。

続きを読む

jQuery1.4のindex()が使い安くなった

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
INDEX

jQuery 1.4  .index()がちょっと使い安く

jQueryが1.4になって、このバージョンで作業を進めるようになったのですが、本当にいろいろ便利になったなーと思うことがちょこちょこある。

そんな中の一つ、index()のご紹介。

続きを読む

jQuery 1.4リリースきましたよ!

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery

jQuery1.4

日本だと15日になってからでしたが、jQuery 1.4がリリースされました。

続きを読む

jQuery 1.4rc1 リリース!正式版まであとわずか!!

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

jQuery 1.4rc1

もうすぐ正式版がリリースされるjQuery1.4の最後の(?)プレリリースrc1がリリースされた。

続きを読む

jQuery1.4が出るまであとわずか

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

14 Days of jQuery

もうすぐ正式リリースとなるjQuery1.4、新年になってからも、ちょこちょこ動きがあったのですが、ブログに書いていなかった!!

すぐに書けるようにしないと。。。

と、そんなjQuery1.4リリースを記念して、14日連続のオンラインでのイベントを行というような内容のサイトが立ち上がっていた。

続きを読む

jQueryのアルファ版 jQuery1.4a2リリース

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
javascript
jquery

jQuery1.4a2

先日、jQuery 1.4のアルファ版のご紹介をして、現在サンプルなどなどを実験したり、作成していたりして、エントリーをまとめていたのですが、気づいたら1.4a2がリリースされておりました。

続きを読む

jQuery1.4のアルファ版を試してみた その1

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

jQuery1.4a1

今月のあたまの話になるのですが、「jQuery 1.4 Alpha 1」がリリースされていました。

年末年始にかけて最新版がリリースされる予定となっていたのですが、今回のはそのテスト段階のもので、Alpha1としてでています。(開発の最新ではAlpha2が徐々に作成進行中)

これまでのjQuery1.3.2と、どのような点で変化するのか、現時点でわかっていることだけでも書いておこうと思います。

続きを読む

DOMにピンとこないなら最初は感覚で使えばいいじゃない

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
DOM
jquery

DOMにピンとこないなら最初は感覚で使えばいいじゃない

先日、いつものチャットメンバーで話をしているときに、DOM Sctiptingの話になったのですが、メンバーで「DOM」がよくわからない人がいたりしました。

でも、実際にDOMなんて用語で覚えようとしても、最初はピンとこなかったりしませんか?

JavaScriptとかjQueryにしろ、覚えておくべき用語なのですが、ピンとこないので、最初は感覚で使ってしまいましょう。

続きを読む

jQueryに興味あるなら、まずプラグインを使うべし

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

jQuery

以前より自分はjQueryについてのことを書いてきているのですが、いまでも「jQueryってなに?」と聞いてくる同業の方がいたりする。最近では減ってはきてはいるものの(知っている人の方が多くなってきているものの)、やはり「使う」までに至らない人の方が多い様子。

個人的には、jQueryは今後のコーダー習得必須の項目になるんじゃないかなって思っている(あくまで個人の想い)。他のどのプログラムより、そしてプレーンのJavaScriptよりも導入の敷居は低いと思うので、HTMLとCSSを覚えるのと同じで、jQueryの基礎的な部分は押さえておいてもいいんじゃないかでしょうか?

それでも基礎を覚えるのは大変なので、最初はプラグインを使うところから入ってみたらどうだろう?

続きを読む

jQuery勉強:要素の配列メモ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
map
配列

配列

まだ変数に入れた配列の扱いがよくわかっていないのでメモ。

続きを読む

jQuery勉強:eachさせた中の$(this)でlive()は使えない

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
live

jQuery

昨日、5509ブログのnoriさんとチャットで話をしている中で「nori: liveがうまくいかない><」なんて話がでてきたので、一緒にソースを見て、どうして動作しないのかを検証してみることにした。

続きを読む

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。