jQuery_jquery で注意すべき詳細のまとめ

1. $.find() と $.children() の違い
には次の HTML フラグメントがあります:

コードをコピー コードは次のとおりです:

1. () は要素の一番下を返します。子の深さを制限することなく、指定されたすべての要素を返します。たとえば、
$("#div_four").find("input")//1 つ、2 つ、および 3 つの入力を返します。 elements
2.childr() 次のような、要素の第 1 レベルの子ノード要素のコレクションを返します。
$("#div_four").children("input")//1 つと 2 つの入力を返します。要素

2. $.append () と $.appendTo()
1. append(): 親要素2 の参照を返します。 : 新しく作成された要素の参照を返します

コードをコピー コードは次のとおりです:

var e = $("

表のタイトル要素を動的に作成して追加

").appendTo($("# div_1"));
var r = $("#div_1").append ("

gt;表のタイトル要素を動的に作成して追加

");
//e は新しく作成された要素を表します

要素
//r は $("#div_1") 要素

3. イベントを動的にバインドすることとイベントを静的に追加することの違い
jQueryを使用すると、要素にイベントを動的にバインドすることが非常に簡単になりますが、従来の方法では要素にイベントを直接追加することを忘れないでください。ただし、jQueryと通常のJavaScriptを組み合わせたプログラムを使用する場合は、イベントの取得の違いを明確にする必要がありますjQuery の動的にバインドされたイベントと静的に追加されたイベントの間のソース オブジェクト。

動的にバインドされたイベントと静的に追加されたイベントの違い

動的バインディング固定イベントと静的に追加されたイベントの違い

動的にバインドされたイベントと静的に追加されたイベントの違い
//1. イベントを動的にバインドします。これはイベント ソースを表します。例:
$("#p1").click(function(){
alert($(this).text()); //このコード イベント ソース
}); / /2. イベントを静的にバインドする場合、これを直接使用することはできません。例:
function fun(){
alert($(this).text); //

//3 を渡すことでイベントを取得できます。 "this" Source
function fun2(obj){
alert($(obj).text());//obj を jQuery オブジェクトとしてラップします

4. this と $(this inイベント処理関数 )

$("#p1").click(function(){ alert(this.innerHTML); //これを直接使用します
alert($(this). text( )); //これを jQuery オブジェクトとしてラップします });
上記のコードでは、これはイベント ソース オブジェクトを表しますが、これを直接使用する場合は HTML DOM オブジェクトになります。 $(this) は HTML を変換できます。 DOM オブジェクトは jQuery オブジェクトとしてラップされます。つまり、それらは jQuery オブジェクトのプロパティとメソッドを持ちます。

5. $.remove() と $.remove(selector) の違い

どちらの呼び出しフォームも、メソッド
1 の前にセレクターによって選択された要素を返します。 : 親要素 [suicide] から自身を削除します 2.remove(expr): 親要素 [suicide] から要素を削除します 例:
var e = $("#div_2 h1") .remove();//削除された h1 要素を返します
var e = $("#div_2 h1").remove("#h2");//ID h2 の

要素を削除し、すべてを返しますh1 element

6. $.eq() と $.get() の違い

同じ点: どちらも要素セット内の指定された n 番目の要素を取得できます
相違点: 1. eq(n) は jQuery オブジェクトを返します。次のような jQuery 組み込みメソッドを直接使用できます。



コードをコピー

コードは次のとおりです: $("#div_three a").eq(0).bind("click", function () { alert($(this).text ());

});

2. get(n) によって返される DOM 要素オブジェクトは、次のような HTML DOM 属性とメソッドを使用できます。 div_three a").get(1).onclick = function () {
alert($(this).text());
};

または、オブジェクトを jQuery オブジェクトにカプセル化して、同じ効果:




コードをコピー

コードは次のとおりです: $($ ("#div_three a").get(1 )).bind("click",function () { alert($(this).text()); }); >
7. The difference between $.css(properties) and $.css(name,value)
1. The difference in syntax
css(properties) $("p").css({color:" red"}); or $("p").css({"color":"red"});
css(name,value) $("p").css("color":"red ");
2. Differences in attribute names
css(properties):
If the style attribute name is not quoted, the css style name in JavaScript syntax must be used: such as
$("p" ).css({color:"red",fontSize:"30px"});
If you change it to "font-size", it will have no effect
If the style attribute name has quotation marks, both styles will work. For example:
$("p").css({color:"red","font-size":"30px","fontWeight":"bold"});
css(name,value) : Both forms are acceptable, and the following two effects are the same:
$("p").css("fontSize":"30px");
$("p").css("font-size ":"30px");