5509

Site Search

jQueryのセレクタを自作して遊ぶ

jQuery("div:unkomorimori").css("background", "#89640d");

「:unkomorimori」っていうセレクタを作ってみようっていうそういう話です。簡単です。まあunkomorimoriなんてふざけたセレクタなんで、きっと中身はunkoでいっぱいなんでしょう。

結局やってることってfilterと同じような感じなんですけど

<div>
  <p>うんこうんこうんこうんこうんこうんこ</p>
</div>
<div>
  <p>うんこ</p>
</div>
<div>
  <p>うんこうんこ</p>
</div>
<div>
  <p>うんこ</p>
</div>

なんかうんこって書いてあるdivがたくさんありました、と。後から気づいたんですけど、これdiv要らないですね。pだけでいい・・・でJSとしてはセレクタの記述をのぞけば

jQuery("div:unkomorimori").css("background", "#89640d");

これだけです。:unkomorimoriの基準は対象要素内で「うんこ」が3回以上出てくるかどうかです。出てきた要素だけを返します。ちなみにfilterでやった場合はこんな感じ。

カスタムセレクタを使う利点は、何回も同じfilter書くときとか、めんどいんでじゃあセレクタでやりましょうか、ってなる感じですね。気をつけないといけないのは、今回の書き方は全てのdiv要素の中身を文字列で取得した上で、正規表現使って「うんこ」を探してるんですけど、処理的にはうんこだけにくそ重いっていう点ですね。うまく落ちたところで、あ、うんこだけに落ちたところで、この辺で。

【必要なかった】動的に読み込んだ画像の高さ・幅が取得できるタイミングでコールバックを実行するm5ImgLoad

追記:うーん、なんか色々あかんっぽい。わかる人以外はとりあえず放置してくださいーそもそも必要なかった感じでした

$("<img src='hogehoge.jpg' />").load(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

とかやると高さと幅を取得できたりできなかったりするので、.load()に置き換わるようなやつ書いといた。単純に置き換えるだけ使えるはずーだめだった

$("<img src='hogehoge.jpg' />").m5ImgLoad(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

結局のところ、.load()メソッドで取れてた

$("<img src='hogehoge.jpg' />").load(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

↑これみたいに、width()、height()メソッドを使うと動的に呼び出した画像に対しては0で返されるので、、、

$("<img src='hogehoge.jpg' />").load(function() {
  alert("width: " + $(this).attr("width") + "\nheight: " + $(this).attr("height"));
});

↑画像の属性から取ればいける感じです。これはどんな場合でもいけるんかなぁー

動作サンプル

サンプル
左のボタンはただの.load()メソッドでこれだと高さと幅が取れないけど、右の.m5ImgLoad()メソッドを使えば高さと幅がとれとりますね

img.completeを使ってみたっすよ。

ダウンロードとか

ダウンロードとかソースコードはgithubからどぞー

https://github.com/5509/m5ImgLoad

対応ブラウザ

クロスブラウザ的なのはどうでしょう。手元のIE6~8、Safari5、Fx3、Chrome9、Opera10は問題なかったけど・・・バグとかあったらフォークして教えてください^ω^

第5回リクリセミナー「明日からjQueryがもっと好きになる。」が開催されます

12月に出版されたjQuery逆引きマニュアル著書の西畑さん中村さんとセミナーを行います。お二人のお話が同時に聞けるセミナーはなかなかないので関西圏の方はぜひ参加を・・・!(僕のセッションはトイレ休憩に行くとか寝るなど有意義におすごしください)

冗談はさておき、僕のセッションではUIの設計からjQueryでの実装までをフローとコードで解説しようと思っています。対象は中級者くらいになると思いますが、なるべくわかりやすく説明しますので、よろしくお願いします :)

明日からjQueryがもっと好きになる。jQuery セミナー - 第5回リクリセミナー

<イベント名>
第5回リクリセミナー 『明日からjQueryがもっと好きになる。』
<日時>
2/20(日) 15:0018:00
<場所>
デジタルハリウッド大阪校 地下セミナールーム
(大阪市北区西天満6-5-17 デジタルエイトビル地下1F)
<参加費>
一般:4,000円
デジハリ生:無料(※学生証をお持ちください。)

※スポンサーの協賛、参加者の人数に応じてディスカウント予定です。
講師陣の書籍、『jQuery逆引きマニュアル』を持参し、受付で提示していただきますと500円割引をいたします。
※対象は一般の参加者のみとなります。

<定員>
80名
<参加方法>
セミナー特設ページから参加表明して下さい

URL:http://www.re-creators.jp/vol5/

<懇親会>
セミナー終了後、18:30から開催予定。

via: 2/20(日)第5回リクリセミナー「明日からjQueryがもっと好きになる。」参加受付開始!

YouTube(HTML5で表示しているもの)から動画をダウンロードするためのブックマークレット

HTML5(というかvideo要素)で表示されている場合は簡単に閲覧可能な動画をダウンロードすることができます。

この辺Flashだとflvだったりして再生しにくかったりするのが、HTML5だとmp4とか割と再生しやすいファイルになるので便利かも。ChromeとかSafariで実行するのがおすすめです。

ブックマークレット

以下のリンクをブックマークバーにドラッグして、YouTubeのサイトでクリックするだけです。クリックすると動画ファイルそのものが表示されるので、名前を付けて保存的なアクションで保存できます。

動画のファイル名は常に「videoplayback」になるので適当に変更したほうがよさそう。「WEBM」バッジがついている動画は形式がWEBMになっているのですがそのまま拡張子なしでダウンロードすると再生できないので、「.webm」の拡張子をつけるといいみたいです。.webmで保存するとVLCで再生できます。

ブックマークレット:HTML5動画からダウンロード

Read more

jQuery逆引きマニュアルのモニターを募集しています

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践先日出版された「jQuery逆引きマニュアル」ですが、出版元のインプレスジャパンさんで読者モニターを募集しています。
なんと書籍ではなく、PDFの電子書籍です。電子書籍は非売品なので、興味のある方はよければ応募してみてください :)

申し込みページ(申し込みは終了しました)

<モニター応募要項>
●応募受付期間:2010年12月28日(火)~2011年1月11日(火)
●募集予定人数:最大30名(モニター事務局での選考とさせていただきます)
●応募方法:
最下部の「応募する」ボタンよりエントリーください。
モニター当選の方へは、応募受付終了後別途メールにて詳細をご連絡します。
●モニター実施予定期間:2011年1月14日(金)~2011年2月28日(月)(約1ヶ月間半)
●モニター品:『jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践』電子書籍版(PDF形式。本文のテキストコピー不可。サンプルコードはネット上で公開中 http://www.impressjapan.jp/support/aftercare/2961
●モニター期間中のお願い:
ブログやツイッターなどで以下のような感想・コメントを書いていただき、ぜひ読者の皆様でjQueryについての情報を共有しましょう!
◎本書のこの記事は試してみたい!
◎本書の内容をこんな風に試してみた
◎本書のこの記事は役に立ちそう
◎本書の内容をこんな風に応用した!
◎jQueryでこんなことがしたい!
◎jQueryでこんなことができた!
◎jQueryについてこんな新しい発見があった などなど
情報共有がスムーズに行えるように、本書専用のツイッターアカウント@jQuery_Manualを設置しました。
ツイッターをご利用されている方は、ぜひこちらのアカウントのフォローをお願いいたします。
たくさんのご応募をお待ちしております!

書いてるひと

nori
nori
- フロントエンド・エンジニア
Location
- 東京