※スマホ対応はしてません。

タグ: jQuery

jQueryが要素検索に使うSizzleについて。

カテゴリー: JavaScript

jQueryの強力な機能のひとつに、 $('#the-target') のようにCSSのセレクターを用いて要素検索できるというものがあります。この要素検索を行うモジュールにはSizzleという名前が付けられています。

一方、近代的なブラウザーには .querySelectorAll() がネイティブで実装されています。こちらもCSSのセレクターで要素検索できるメソッドです。

var $elems = $('elem#id.class, .and.more.selectors');
var elems = document.querySelectorAll('elem#id.class, .and.more.selectors');

JavaScriptで何かするよりも、ネイティブでやった方が高速です。じゃあSizzleなんていらないんじゃないの?と思われるかもしれません。実際、jQuery互換軽量フレームワークを詠うZepto.jsでは、ほとんどそのまま querySelectorAll() を利用しています。(そのために古いIEでは正常に動作しませんが。)

それでもjQueryはSizzleを使い続ける方針です。Sizzleが .querySelectorAll() に勝る点とは、何でしょうか。

参考

jQuery 1.8の更新内容をまとめたよ。

カテゴリー: JavaScript, Web

個人的に油断してたんですが、jQuery 1.8がリリースされましたね。

CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。(ちょっとだけどね。) えらい!

なおjQuery UI (1.8.22)とjQuery Mobile (1.1.1)が正常に動作する事は確認しているようです。

ダウンロード

ちなみにWordPressで利用するにはこちらの記事を。

主な変更点

(さらに…)

jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。

カテゴリー: JavaScript

必要ならどうぞ。

デモ

jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS

共通:要素の探し方

input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。

<form id="my-form">
  <input type="text" name="my-text" value="This is text." />
</form>
// id="my-form" の中から name="my-text" なものを検索
var $input = $('#my-form [name=my-text]');

[name=xxx]だけだとフォームが複数あるときに全部取ってきちゃうので、フォームの方にはidを振って、その中から探すようにしました。

テキスト

これが基本パターン。 .val()で得られます。

(さらに…)

jQuery.gpFadeImage 1.0を公開しました。

カテゴリー: 拙作

ふわふわ切り替える感じで。

こんな風に、ギャラリーページの入り口みたいなところで使ったらいいんじゃないかなと思います。

サンプルで利用している画像はmofblancより。中の人のひとり、ます子さんとは仲良くしてもらっています。ステルスしないマーケティング。 ⊂(´・Θ・`)⊃

I.I.S(原克志さん)のサイトでHistory APIとか使ってみたよ!!

カテゴリー: 拙作

普段からお世話になってる原さん(@iis_hara_dev)のサイトで機能追加の実装をさして頂きました。

今回実装したのはこんな感じ:

  • 製作実績(Web)の画面をリニューアル
    • 一覧のデザインを変更
    • 実績ごとの画面を作成
  • 各画面ごとに個別のURLを割り当て

ちなみに横にスクロールするのは元々です。(モックではjQueryを使って同じものを実装しましたが。)

タグ検索

実績の各項目には内容を示すタグが付いていたのですが、それを元にフィルタリングできるようにしました。

(さらに…)