2章 セレクター この章で見る主な内容です。 基本的なセレクター 検索する対象(範囲)を指定する書き方 階層構造によるセレクター 基本、子要素フィルター コンテントフィルター フォーム系フィルター .is()フィルター セレクト回数を減らそう 基本的なセレクター jQueryでは、CSSでお馴染みのセレクターを使って、要素を選択(取得)します。ここでは、以下の基本的なCSSセレクターを見て行きましょう。 要素(タグ)セレクター クラスセレクター IDセレクター グループセレクター ユニバーサルセレクター 属性セレクター 要素(タグ)セレクター 要素(タグ)名を元に対象要素を選択します。要素名は、括弧(<>)は付けずに、そのまま書きます。 例えば、
ブログネタ:JavaScript に参加中! 忘れそうなので覚書〜 JavaScript で配列なんかをイテレーション処理する時は、for を使うのが一般的。 ● JavaScript の書き方 for (var i=0, numArity=arrHOGE.length; i<numArity; i++) { (なんか処理); } jQuery を使ったときは、イテレーションのために each を利用できる。 ● jQuery の書き方 $(arrHOGE).each( function(i) { (なんか処理); } ); 便利だねー。 ■ continue / break のやり方 さて、for でグルグル回している処理を 「その時だけパスする」 や 「途中で止める」 ということをしたい。 そんな時もある。 にんげんだもの そのためには、continue や break を用いる。 ●
クリックした要素、例えばリストなんかで、そのクリックした要素がリスト中の何番目なのかというのを取得する方法、以前は普通に使っていたような気がするのですが、ここ最近思い出せない。検索してもなかなかでてこなかったりして悩んだのですが、普通にリファレンスに書いてあるじゃーんってのに遅いですが気づいたのでメモエントリー。 何番目の要素か 何番目の要素なのかを調べるには、jQueryのindex()を使う。 ■サンプルHTML <div id="test0"> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> </ul> <p>クリックした要素は<span>?</span>番目です</p> </div> リストをクリックした際に「?」の部分が変わる。クリックした要素が何番目
セレクタが便利そうなので、jqueryを使ってみました。 elementを選択するには、 id : $("#idname") class : $(".classname") tag : $("tagname") なんてのが使える 他にも便利なセレクタがありますが、名前でも選択が可能です。 以下のように書けばいいです。 $("*[name=target]") これって・・・「name」属性が"target"のものを取得するということになります。 てことは、別に、nameじゃなくても、idでも、classでも、hrefでもlangとかでも出来るらしい。 って、ただ単に、cssの セレクタ の記述方法だけど(笑) 正規表現でマッチとかもそのうちできたらいいのになぁ~ ...cssが対応すれば出来るかも?? 先は長そうな気がする(笑)
jQueryの$(this)とthisの違い jQueryのイベントハンドラやコールバック関数内のthisについてです。 大した内容でもありませんが、なんとなく知らないまま使っている人もいるみたいなので、ちょっとメモ書き。 $(this)とthisの違い thisはDOMエレメントです。 イベントハンドラのthisはそのイベントが発生した要素、eachのコールバック関数内のthisは順番の回ってきた該当する要素です。 一方$(this)の方はと言うと、この要素を$関数に渡して、単にjQueryオブジェクト化しているだけなんですね。 使い分け という事で、使い分けは、 DOMエレメントのプロパティやメソッドを使うときはthis jQueryオブジェクトのメソッドを使いたいときは$(this) ということになります。 例えば a要素のhref属性を取ってきて何か処理を書こうと思ったとき、 何も
attr()でdisableをどうこうするばあいは、 true or falseで設定します。 (かなり古いバージョンのjQueryはこの記事通りですが) また前の人が指摘している通り、 1.6でprop()にかわり、1.6.1で後方互換が導入され、どちらでも使えるようになりました。
解説 jQueryのイベントシステムは W3Cの規格に基づいて実装されています。 イベントオブジェクトは、イベントハンドラの引数として渡されます。 イベント発生時には、イベントの種別や環境によって、さまざまな名称や状態でイベントオブジェクトが渡されます。 jQuery はこの違いを吸収し、イベントオブジェクトに対する統一されたインターフェースを提供します。 また、ネイティブイベントのほとんどのプロパティはマージされますので、それを使用することもできます。 jQuery のイベントオブジェクトを生成し、使用する例は、jQuery.Event(src) を参照してください。 イベントオブジェクトが持つプロパティとメソッドは次の通りです。 プロパティ currentTarget : イベントのバブリングフェーズにおける現在のDOM要素 data : バインド時に渡されたデータ pageX : イ
event.preventDefault() 1.0追加 デモ event.preventDefault() 1.0追加 戻り値:undefined このメソッドが呼ばれると、通常実行されるアクションがキャンセルされます。 デモ 例えば、Aタグのリンクをクリックすれば通常は指定されたページに遷移しますが、その処理をキャンセルすることが出来ます。 また、event.isDefaultPrevented()を使用すれば、event.preventDefault()がイベント中に実行されているかどうかを調べる事が出来ます。 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <!-- hrefにリンク先が指定されているので普通はこの
解説 高機能なダイアログウィジェットです。 dialog は、タイトルバーとコンテンツエリアを持つ、フローティングウィンドウです。 デフォルトでは、移動、リサイズすることができ、右上の "x" ボタンでウィンドウを閉じることができます。 コンテンツの大きさが最大値を超えた場合は、スクロールバーが自動的に表示されます。 書式 依存ファイル jquery.ui.core.js jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.position.js jquery.ui.draggable.jsオプション jquery.ui.resizable.jsオプション 引数 optionsオプション 関数 String: "destroy"、 "disable"、"enable"、"option"、"widget"、"close", "isOpen", "
2025年8月最新版 レンタルサーバーおすすめ比較完全ガイド! 当ページのリンクには広告が含まれています。
jQuery1.7がリリースされたのですが、今回追加されたevent apiのon()、off()がとても便利で、on()でイベントを登録し、off()でイベントを削除するするということで、これまでより直感的です。 event apiとしてはこれまで、bind、live、delegateが存在していました。今回追加されたon()は、bindやdelegateと置き換わる機能となります。 $(elements).on(events [, selector] [, data], handler); $(elements).off(events [, selector] [, data], handler); 例えば使い方としてとしては var sayHello = function (event) { alert("Hello "+event.data.name); } $("button")
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
新しいチャリを手に入れたら歯車や金属のバーを眺めてニヤニヤするようになったminamiです。 11/3にjQueryの最新バージョン1.7がリリースされました。大小さまざまな機能追加がされましたが、その中でもかなり大きな「.on()」「.off()」というイベントAPIが追加されましたが、今までのイベントAPIとどう違うのかいまいちわからなかったので調べてみました。 「.on()」「.off()」の使いどころ jQueryには今までのバージョンにも、「.bind()」「.live()」「.delegate()」といったイベントAPIがありました。今回追加された「.on()」「.off()」はそれら3つの機能をカバーしたメソッドになります。 「.bind()」「.live()」「.delegate()」については今後も利用できますが、「.on()」「.off()」の使用が推奨されていくようで
jQueryでhtmlタグに任意の属性が存在するかどうかを確認する方法のメモです。チェックボックスがチェックされているかどうかを確認するときなどに役立ちます。 jQueryにはhasClass()というクラスが存在するかどうか調べるメソッドがあります。だから属性の有無を調べるhasAttr()もあるだろうと思い込んでいたのですが無いんですね。つまり以下で紹介するのはhasAttr()を実現する方法でもあります。 <input id='target' type='checkbox'> <script> var attr = $("#target").attr("checked"); if( typeof attr !== 'undefined' && attr !== false ){ //チェックされていた場合の処理 }else{ //チェックされていなかった場合の処理 } </scrip
Selectors/API/jQuery 基本 #id 指定されたidを持つ要素を選択する。 element 指定されたタグ名の要素を選択する。 .class 指定されたクラスを持つ要素を選択する。 * 全ての要素を選択する。 selector1, selector2, ..., selectorN 複数のセレクターを指定して集合要素を選択する。 階層 ancestor descendant ancestorを先祖に持つdescendantを選択する。 parent > child 親子関係を指定して要素を選択する。 prev + next 前後関係を指定して要素を選択する。 prev ~ siblings prev以降の兄弟関係にある要素を選択する。 基本フィルタ :first 先頭の要素を選択する。 :last 末尾の要素を選択する。 :not(selector) 指定したセレクターを
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ?'); }, function(){ $(this).text('ヌー'); } );
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く