jQuery Coding Standards & Best Practices
All variables that are used to store/cache jQuery objects should have a name prefixed with a $. Always cache your jQuery selector returned objects in variables for reuse. var $myDiv = $("#myDiv"); $myDiv.click(function(){...}); Use camel case for naming variables. Use ID selector whenever possible. It is faster because they are handled using document.getElementById(). When using class selectors, d
jqueryのセレクター方法
jqueryの基本はセレクターでhtmlの要素や属性を選び操作することで、動きのあるホームページを作ることが可能です。 $("セレクター").jquery命令 そこで、今回は、 セレクターの方法を紹介します。 スタイルシートでよく使う選び方 スタイルシートでよく使う要素やID、classを使って選ぶ方法 $("div"),$("div#header"),$("div#header p"),$("#nav ul"),$("#nav ul,#header") 同じ要素の並びから一つの要素を指定する方法 ・last-child ・first-child ・nth-child htmlの例(1) <ul> <li id="first">変更前</li> <li id="second">変更前</li> <li id="last">変更前</li> </ul>
接頭辞つきのクラス名にマッチする CSS セレクター
Kraken というフロントエンドのフレームワークのコードを見ていたら、なるほどと感心する CSS セレクターの書き方を見つけた。grid-one、grid-two みたいな接頭辞つきのクラス名にマッチするセレクターで、こんな感じ: [class^="grid-"], [class*=" grid-"] { /* ... */ } 単純に考えると [class*="grid-"] でいけそうな気がするけど、それだと foo-grid- みたいに頭に余計なものがついていてもマッチしてしまう。そこでホワイトスペースを接頭辞の前に置いて [class*=" grid-"] とすることでそれを避けている。すると今度は class="grid-one" みたいに class 属性の先頭で頭にホワイトスペースがない場合にマッチしないので、[class^="grid-"] という前方一致のルールを追加。
jQuery とても便利なフィルター一覧、特定の要素が含まれている要素の変更等 | Stronghold Archive
明けましておめでとうございます！toshikuraです。今回のtipsは【jQuery とても便利なフィルター一覧】です。テーブルの偶数段のみ背景色をつける場合や、指定段以降に背景色をつける場合等に使えるとても便利なtipsですので、覚えておいても損は無いかと思います。 要素の位置から選択するフィルター 要素の位置から選択するフィルター系。奇数番や偶数番、n番目以降の要素を選択変更する場合につかえるフィルターです。使用頻度は比較的高めかも。
jQuery初心者がセレクタの記述でつまずきやすいことをまとめた - KDF Memo
最近のweb開発には欠かせないjQueryですが、まずはセレクタの使い方を覚えないと話になりません。ところがこの記述ルールが初心者にとって非常に紛らわしく、しかもリファレンスを見てすぐにわかるものとは限りません。自分が学び始めた頃に悩んだ（そして今でもときどき間違えそうになる）まぎらわしいセレクタの記述方法についてまとめます。 $(“.classA, .classB”) … //(1) $(“.classA .classB”) … //(2) $(“.classA + .classB”) … //(3) $(“.classA.classB”) … //(4) $(“.classA”, “.classB”) … //(5) $(“.classA” + “.classB”) … //(6) $(“.classA” + ” .classB”) … //(7) さてこれらのセレクタの意味がすぐにわ
jQuery( ':not( selector )' ) - jQuery API 日本語リファレンス
jQuery API の jQuery( ':not( selector )' ) は、selector に一致する要素以外の要素を選択する。 記述方法 セレクター①に一致した要素のうちの、セレクター②に一致する要素以外の要素を選択する。 実装例（サンプル） 項目１ 項目１－１ ( class=”jquery-api-not”) 項目１－２ 項目２ ( class=”jquery-api-not”) 項目２－１ 項目２－２ ( class=”jquery-api-not”) 項目２－２－１ ( class=”jquery-api-not”) 項目２－２－２ 項目２－３ 項目３ 実装例（サンプル）のソースコード JavaScript <script type="text/javascript"> <!-- jQuery( function() { jQuery( 'ul.jquery-api
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
IE6〜8でCSS3セレクタ利用「Selectivizr」
CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6～8はほとんど対応できていないことが分かります。 そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。 Selectivizrの設置方法 ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6～8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。 <script type="text/javascript" src="[JSライブラリ]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascr
CSSのセレクタを活用しよう | Design Spice
:focus擬似クラス 要素がフォーカスされた際のスタイルを指定します。 フォームの入力欄にカーソルを合わせてテキスト入力できるようになった状態などです。 input:focus{ background-color:#FF9; } :lang擬似クラス 特定の言語を指定されている要素にスタイルを適用します。 言語コードには、ja（日本語）、en（英語）、fr（フランス語）、zh（中国語）などがあります。 p:lang(en){ color:#C00; } :first-child擬似クラス ある要素内で最初に現れる子要素にスタイルを適用します。 li:first-child{ color:#C00; } :first-line擬似要素 ブロックレベル要素の最初の行にスタイルを適用します。 ※インライン要素には適用できません。 #firstLine p:first-line{ color:#
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
