オブジェクトの操作
セレクターを指定してオブジェクトを操作を複数回行う場合、毎回セレクターで意中のオブジェクトを抽出するのは効率が悪い。 そういう場合、操作関数（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>…
