jQuery
次は、イベントが発生した要素自身を取得したい場合。 例えばアレだ。DBのテーブルに登録したレコードを編集するような「一覧画面」と「詳細画面」の関係。 一覧画面であるレコードをclickしたらその情報を詳細画面に表示するというイベント。 各レコードご…
buttonみたいなタグは既に登録されているイベントつーもんはない。 んが、aタグのように、hrefが設定されると自動的にclickイベントが登録されるような要素の場合、自前でclickイベントを登録するとどのように振る舞うかをメモ。 自前イベント処理の最後に「…
さて、イベントですよ、イベント。 これがなくっちゃ最近のGUIアプリなんて作れませんよ。じゃ、さっそく基本から。 $(セレクター).イベント(function(){ $(セレクター).命令 }); これだけ。 jQueryだとイベントの登録はこれで大丈夫なんだろうか？ 確かjava…
セレクターを指定してオブジェクトを操作を複数回行う場合、毎回セレクターで意中のオブジェクトを抽出するのは効率が悪い。 そういう場合、操作関数（javascriptの世界ではメソッドというんだろうか？）を数珠つなぎにしていくことでセレクターの処理を一回…
見た目を変える為に頻繁に使用されるCSSについて。 主に３つの方法が。 ・指定したCSSプロパティの値を取得する。 ・指定したCSSプロパティの値を設定する。 ・複数のCSSプロパティの値を設定する。３個めがかなり便利そう。これJSON形式の記述フォーマット…
今までのは全部「要素」に対する操作だったけど、今度は属性の操作について。 基本となる記述方法は次の通り。 //取り出し var value = $(セレクター).attr(属性名); //変更 $(セレクター).attr(属性名, 属性値); //削除 $(セレクター).removeAttr(属性名); …
次は要素のラッピング、置き換え、削除について。 こいつらも使いそうだなぁ〜。該当する関数は、 ■ラッピング ・囲まれる要素.wrap(囲む要素) ・囲まれる要素.wrapAll(囲む要素) ・囲まれる要素の親要素.wrapInner(囲む要素) ■置き換え ・置換される要素.re…
前回は新しく要素を挿入するパターン。 今度は既に存在する要素を移動するパターン。 これも簡単。prependTo()、appendTo()、insertBefore()、insertAfter()がその関数群。 前回の関数が分かれば予想は簡単。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> </head></html>
今度は指定したセレクターの要素内、外に対する挿入、追加操作について。 これも簡単だなぁ〜。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("#div1").prepend("<span style='color: red'>要…</span></head></html>
今度はテキストではなくてHTMLとして操作する。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //取り出す。 var div3text = $("#div3").text(); //テキスト var div3html = $("…</head></html>
タグの中のテキストを文字列として取得したり変更したりするメソッドについて。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //取り出す。 var div1 = $("#div1").text(); var div2 = $("#d…</head></html>
前回までのjQuery関連では、セレクターを一通りやった。 次の段階として、セレクターで選んだオブジェクトに対して何らかの操作を行う方法について学習する。 ま、既に少しやってるんだけど。スタイルを変更するって形で。基本的なやり方は次の通り。 <script type="text/javascript"> $(fun</script>…
header ：h1〜h6要素のこと。独自フィルターにするほど使うのか？ contains：特定の文字列が含まれている要素。 has ：特定の「要素」が含まれている要素。 parent ：子要素やテキストを含む要素を指定可能。IsParent?みたいなニュアンスかな。とりあえず競…
これは今までのセレクターでは代用できないかなぁ。覚えてた方が便利だろ。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li:lt(2)").css("color","red"); $("li:eq(2)").css("col…</head></html>
このセレクターは前にnth-child擬似クラスでちょっと出てきたからまぁ迷わんだろう。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li:odd").css("color","red"); $("li:even").cs…</head></html>
う〜ん、わかんねぇ。。 first-child／last-childセレクターが共通の親要素を持つ要素から最初（または最後）の要素を選択するのに対して、 last／firstフィルターは指定したセレクターで最初（最後）に登場する要素を指定できます。first-child、last-child…
属性値を文字列とみなして、「^」は先頭、「$」は末尾、「*」は含むかどうか、複合タイプは全ての条件をandで、 それぞれ判定する。 んで、合致する場合のみ抽出する。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //先頭が'f'で…</head></html>
![はてなブックマーク - セレクターその１８（CSSの属性セレクター[attribute^='value'],[attribute$='value'],[attribute*='value'],[attributeFilter1][attributeFilter2](複合タイプ) [CSS3]）](https://b.hatena.ne.jp/entry/image/https://awacio.hatenadiary.org/entry/20100301/1267451692)
前エントリにさらに等号と不等号の条件をつけることが可能。 サンプルは指定した属性の値が同じく指定した値に等しいものを抽出する。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("[class='fourth']").css("c…</head></html>
![はてなブックマーク - セレクターその１７（CSSの属性セレクター[attribute='value'] [attribute!='value'] [CSS3]）](https://b.hatena.ne.jp/entry/image/https://awacio.hatenadiary.org/entry/20100301/1267450082)
[attribute]で指定したattribute属性を持っている要素が抽出される感じ。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //id属性を持つタグだけ色が赤になる。 $("[id]").css("color","red…</head></html>
![はてなブックマーク - セレクターその１６（CSSの属性セレクター[attribute] [CSS3]）](https://b.hatena.ne.jp/entry/image/https://awacio.hatenadiary.org/entry/20100301/1267449296)
こいつは使い道がイメージできないなぁ。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //一行目のspanだけ色が赤になる。 $("li span:only-child").css("color","red"); }) </head></html>
![はてなブックマーク - セレクターその１５（only-child擬似クラス[CSS3]）](https://b.hatena.ne.jp/entry/image/https://awacio.hatenadiary.org/entry/20100301/1267449092)
これも〜、最後の合計金額を出す為のフッターとかで背景色を指定したいときとか使えるか。 そんなこと行ったらfirst-childもヘッダーのバックカラー指定できるな。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li:las…</head></html>
![はてなブックマーク - セレクターその１４（last-child擬似クラス[CSS3]）](https://b.hatena.ne.jp/entry/image/https://awacio.hatenadiary.org/entry/20100301/1267448767)
こ、これは・・・！！ テーブル行の背景色を交互に変更したい場合なんかにものすげー役に立つぞ！特定のセレクターから指定した番号の要素だけを指定できる。 セレクターの後ろに :nth-child(番号) と記述する。チーと長いが、後でみて参考にするためにも。…
![はてなブックマーク - セレクターその１３（nth-child擬似クラス[CSS3]）](https://b.hatena.ne.jp/entry/image/https://awacio.hatenadiary.org/entry/20100301/1267446508)
子要素やテキストを含まない要素を指定できる。 セレクターの後ろに :empty と記述する。あ〜、これはテーブルでやってみたいなぁ。自前タグをテーブルでやってみよう。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li:no…</head></html>
![はてなブックマーク - セレクターその１２（empty擬似クラス[CSS3]）](https://b.hatena.ne.jp/entry/image/https://awacio.hatenadiary.org/entry/20100301/1267443014)
セレクター内で特定の条件「以外」のものを指定できる。 セレクターの後ろに :not(...) を付け、除外する条件を (...) 内に記述すると。サンプルだとnotの括弧中には擬似クラスである:first-childが指定されているけど、ようするにセレクターフォーマットの…
![はてなブックマーク - セレクターその１１（否定擬似クラス[CSS3]）](https://b.hatena.ne.jp/entry/image/https://awacio.hatenadiary.org/entry/20100301/1267442352)
特定のセレクターの後に出現する要素を指定できる。 セレクターと要素を ~(チルダ)で結びつける。前とか後ろとか先頭とか、そういう表現があるときは要素の並びのことを意味するっぽい。 サンプルの状態から、また別のケースを考えてやってみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.</script></head></html>…
![はてなブックマーク - セレクターその１０（間接セレクター[CSS3]）](https://b.hatena.ne.jp/entry/image/https://awacio.hatenadiary.org/entry/20100301/1267441865)
特定のセレクターのうち最初に登場する要素のみを指定するセレクター。 ってことなんだけど、いまいちわかんねー。 サンプルではli要素を指定しているけど、liは連続していることが前提なのか？ と思ったので、ちょっと自分でも要素を追加してみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">goog</script></head></html>…
![はてなブックマーク - セレクターその９（first-child擬似クラス[CSS2]）](https://b.hatena.ne.jp/entry/image/https://awacio.hatenadiary.org/entry/20100301/1267436723)
隣接セレクター 指定したセレクターの次に出現するセレクターを指定できる。 「基準となるセレクター + 次に隣接しているセレクター」のフォーマットで指定。idだけでなく、classや子セレクターとも混ぜてみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(…</head></html>
![はてなブックマーク - セレクターその８（隣接セレクター[CSS2]）](https://b.hatena.ne.jp/entry/image/https://awacio.hatenadiary.org/entry/20100301/1267426636)
特定の要素の直下に配置された要素を指定できるのが「子セレクター」です。子セレクターは親要素と子要素を >（大なり/greater than）で結びます。入れ子と別のセレクター（IDとclass）も試してみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(…</head></html>
![はてなブックマーク - セレクターその７（子セレクター[CSS２]）](https://b.hatena.ne.jp/entry/image/https://awacio.hatenadiary.org/entry/20100301/1267425645)
複数のセレクターを,(カンマ)区切りで並べて指定できるのが「グループセレクター」です。それぞれのセレクターに対する命令をまとめて記述できます。サンプルでは "," の両サイドに半角スペースを挿入しているけどつなげるとどうなるんだろう。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.lo</script></head></html>…
すべての要素を指定できるのが「ユニバーサルセレクター」です。ユニバーサルセレクターは*(アスタリスク)で記述します。ですって。では早速。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li *").css("color","…</head></html>
