快捷導(dǎo)航

jQuery中需要注意的細(xì)節(jié)問題小結(jié)

更新時(shí)間：2011年12月06日 20:28:37 投稿：mdxy-dxy

jQuery中需要注意的細(xì)節(jié)問題小結(jié)，使用jquery的朋友可以參考下。

1. $.find()與$.children()的區(qū)別
有如下HTML片段：

<div id="div_four">
<input id="one"/><input id="two"/>
<div><input id="three"/></div>
</div>

1. find() 返回元素下所有指定元素，不限制子級(jí)的深度，如：
$("#div_four").find("input")//返回one、two、three三個(gè)input元素
2.childr() 返回元素的一級(jí)子節(jié)點(diǎn)元素集合，如：
$("#div_four").children("input")//返回one、two兩個(gè)input元素
2. $.append()與$.appendTo()的區(qū)別
1. append()：返回父元素的引用
2. appendTo()：返回新創(chuàng)建的元素的引用

復(fù)制代碼代碼如下:

<div id="div_1"></div>
var e = $("<h1>動(dòng)態(tài)創(chuàng)建并添加表標(biāo)題元素</h1>").appendTo($("#div_1"));
var r = $("#div_1").append("<h1>動(dòng)態(tài)創(chuàng)建并添加表標(biāo)題元素</h1>");
//e 表示新創(chuàng)建的<h1>元素
//r 表示$("#div_1")元素

3. 動(dòng)態(tài)綁定事件和靜態(tài)添加事件的區(qū)別
有了jQuery后，給元素動(dòng)態(tài)綁定事件變得很簡(jiǎn)單，但傳統(tǒng)方式直接給元素添加事件也不能忘了，但綜合了jQuery和普通JavaScript的程序在使用時(shí)必須明確jQuery動(dòng)態(tài)綁定事件和靜態(tài)添加事件在獲得事件源對(duì)象的不同之處。
動(dòng)態(tài)綁定事件和靜態(tài)添加事件的區(qū)別
動(dòng)態(tài)綁定事件和靜態(tài)添加事件的區(qū)別
動(dòng)態(tài)綁定事件和靜態(tài)添加事件的區(qū)別
//1. 動(dòng)態(tài)綁定事件，this即代表事件源。如：
$("#p1").click(function(){
alert($(this).text()); //this代碼事件源
});
//2. 靜態(tài)綁定事件時(shí)，不能直接使用this。如：
function fun(){
alert($(this).text); //不能獲得的內(nèi)容
//3. 通過傳遞“this"后即可獲得事件源
function fun2(obj){
alert($(obj).text());//將obj包裝為jQuery對(duì)象
4. 事件處理函數(shù)中this和$(this)的區(qū)別
$("#p1").click(function(){
alert(this.innerHTML); //直接使用this
alert($(this).text()); //將this包裝為jQuery對(duì)象
});
如上代碼中this代表事件源對(duì)象，但直使用this時(shí)它是HTML DOM對(duì)象；
$(this)可以將HTML DOM對(duì)象包裝為jQuery對(duì)象，即擁有jQuery對(duì)象的屬性和方法。
5. $.remove()和$.remove(selector)的區(qū)別
兩種調(diào)用形式都返回方法前選擇器選中的元素
1. remove():將自身從父元素中刪除【自/殺】
2. remove(expr):從父元素中刪除某元素【他殺】
如：
var e = $("#div_2 h1").remove();//返回刪除了的h1元素
var e = $("#div_2 h1").remove("#h2");//刪除id為h2的<h1>元素，返回所有h1元素
6. $.eq()和$.get()的區(qū)別
相同點(diǎn)：都可獲得元素集合中指定第n個(gè)元素
不同點(diǎn)：
1. eq(n) 返回的是jQuery對(duì)象，可以直接使用jQuery內(nèi)置方法，如：

復(fù)制代碼代碼如下:

$("#div_three a").eq(0).bind("click", function () {
alert($(this).text());
});

2. get(n) 返回的DOM Element對(duì)象，可以直接使用HTML DOM屬性和方法，如：
$("#div_three a").get(1).onclick = function () {
alert($(this).text());
};
或?qū)?duì)象封裝成jQuery對(duì)象達(dá)到一樣的效果，如：

復(fù)制代碼代碼如下:

$($("#div_three a").get(1)).bind("click",function () {
alert($(this).text());
});

7. $.css(properties)和$.css(name,value)的區(qū)別
1. 語法的區(qū)別
css(properties) $("p").css({color:"red"}); 或 $("p").css({"color":"red"});
css(name,value) $("p").css("color":"red");
2.屬性名的區(qū)別
css(properties)：
如果樣式屬性名沒有用引號(hào)，則必須用JavaScript語法的css樣式名：如
$("p").css({color:"red",fontSize:"30px"});
如果改為“font-size”就沒有效果
如果樣式屬性名有用引號(hào) ，則兩種樣式都可以，如：
$("p").css({color:"red","font-size":"30px","fontWeight":"bold"});
css(name,value)：兩種形式都可以，下面兩種效果一樣：
$("p").css("fontSize":"30px");
$("p").css("font-size":"30px");