jQueryの鋭いポイントまとめ(2) jQueryでのDOM操作(その2)_jquery

12 HTML、テキスト、値の設定と取得

$("selector").html()
HTML コードの取得
$("selector").html(html)
HTML の設定コード (タグ内のコンテンツを置き換える)、html() メソッドは XML ドキュメントには使用できません
$("selector").text()
プレーン テキスト コンテンツの取得
$("selector").text (text )
テキストの内容を設定します (タグ内の内容を置き換えます)。XML ドキュメントで使用できる text() メソッドは
$("selector").val()
の値を取得します要素
$("selector ").val(value)
要素の値を設定します (外部:defaultValue 属性は HTML のデフォルト属性を取得できます。P80 例: if (txt_value==this.defaultValue) ){...})
$(" select").val("option")
次のように選択コントロールの選択状態を設定します: $(":checkbox").val("check1 ","check2"); $(":radio").val("radio1");
(外部: attr() メソッドを使用して、次のように同じ機能を実現できます: $("select option :eq(1)").attr("selected",true); $(" [value=radio2]:radio").attr("checked",true);)

13 ノードのトラバース

$("selector").children()
Getmatching 要素の子要素のセット。配列として返されます (子要素のみが考慮され、子要素の下にある子孫要素は考慮されません) )
拡張機能: 各子要素の HTML コンテンツをループするメソッド:


$( "selector").next()
一致する要素のすぐ後ろにある兄弟要素を取得します、配列として返されます
$("selector").prev()
一致する要素の直前の兄弟要素を取得し、配列として返されます Return
$("selector").siblings()
一致する要素の前後の兄弟要素をすべて取得し、配列として返します
P88 このメソッドの使用例:


$( "selector").closest()
最も近い要素を取得します。まず、現在の要素が一致するかどうかを確認します。一致しない場合は、親要素を上方に検索します。
P89 例



ノードを横断するためのその他のメソッド (find()、filter()、nextAll()、prevAll()、parent()、parents() など) 本書は省略

14 CSS-DOM 操作

$("selector").css("property")
要素 style の property 属性の値を取得
$( "selector").css("property","value")
要素 style の property 属性の値を設定します
$("selector").css({"property1":"value1", "property2" :"value2"})
要素の複数のスタイル属性の値を同時に設定します。注: 例: "font-size" = fontSize (引用符なしの CamelCase)
$("selector").css("opacity","value")
透明度の設定 (すべてのブラウザをサポート)、値 value ( 0 ~ 1)
$("selector").css("height")
要素の高さの値を取得 height
$("selector").height()
要素を取得現在計算されている実際の高さの値は auto などを返すことはありません。ウィンドウやドキュメントの高さを取得するためにも使用できます。
$("selector").height(100)
高さを設定します。デフォルトの単位は px です。他の単位を使用するには、.height(10em)
$("selector").width()
現在計算されている実際の幅の値を取得します。要素

$(selector).offset()
現在のウィンドウ内の要素の相対オフセットを取得します。返されるオブジェクトには、top と left の 2 つの属性が含まれます。このメソッドは、表示されている要素に対してのみ有効です。
P91
要素のオフセットを取得する例


$("selector").position()
style 属性を に設定して要素の最も近い位置を取得する相対または絶対の祖父母ノードの相対オフセット。返されるオブジェクトには、top と left の 2 つの属性が含まれます。例:

$("selector").scrollTop()
要素のスクロール バーと上部の間の距離を取得します。例: varscrollTop = $("selector").scrollTop( ); <script>var $ul = $("ul").children();for (var i=0 len=$ul.length; i<len; i++){alert($ul[i].innerHTML);}</script> $("selector").scrollLeft() <script>$(".has_children").click(function(){$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();})</script>次のように、要素のスクロール バーの左側からの距離を取得します。 >Position までスクロールするように要素のスクロール バーを制御します。パラメータは次のような上記 2 つのメソッドに渡すことができます。<script>$(document).bind("click",function(e){$(e.target).closest("li").css("color","red");})</script>$("textarea").scrollTop(300); (300);