jQuery中需要注意的细节问题小结

1. $.find()与$.children()的区别 有如下html片段： 代码如下:

1. $.find()与$.children()的区别
有如下html片段：

代码如下:

<p id="p_four">
<input id="one"/><input id="two"/>
<p><input id="three"/></p>
</p>

1. find() 返回元素下所有指定元素，不限制子级的深度，如：
$("#p_four").find("input")//返回one、two、three三个input元素
2.childr() 返回元素的一级子节点元素集合，如：
$("#p_four").children("input")//返回one、two两个input元素
2. $.append()与$.appendto()的区别
1. append()：返回父元素的引用
2. appendto()：返回新创建的元素的引用

. 代码如下:

<p id="p_1"></p>
var e = $("<h1>动态创建并添加表标题元素</h1>").appendto($("#p_1"));
var r = $("#p_1").append("<h1>动态创建并添加表标题元素</h1>");
//e 表示新创建的<h1>元素
//r 表示$("#p_1")元素

3. 动态绑定事件和静态添加事件的区别
有了jquery后，给元素动态绑定事件变得很简单，但传统方式直接给元素添加事件也不能忘了，但综合了jquery和普通javascript的程序在使用时必须明确jquery动态绑定事件和静态添加事件在获得事件源对象的不同之处。
<p id="p1">动态绑定事件和静态添加事件的区别</p>
<p id="p2" onclick="fun()">动态绑定事件和静态添加事件的区别</p>
<p id="p3" onclick="fun2(this)">动态绑定事件和静态添加事件的区别</p>
//1. 动态绑定事件，this即代表事件源。如：
$("#p1").click(function(){
alert($(this).text()); //this代码事件源
});
//2. 静态绑定事件时，不能直接使用this。如：
function fun(){
alert($(this).text); //不能获得<p>的内容
//3. 通过传递“this"后即可获得事件源
function fun2(obj){
alert($(obj).text());//将obj包装为jquery对象
4. 事件处理函数中this和$(this)的区别
$("#p1").click(function(){
alert(this.innerhtml); //直接使用this
alert($(this).text()); //将this包装为jquery对象
});
如上代码中this代表事件源对象，但直使用this时它是html dom对象；
$(this)可以将html dom对象包装为jquery对象，即拥有jquery对象的属性和方法。
5. $.remove()和$.remove(selector)的区别
两种调用形式都返回方法前选择器选中的元素
1. remove():将自身从父元素中删除【自杀】
2. remove(expr):从父元素中删除某元素【他杀】
如：
var e = $("#p_2 h1").remove();//返回删除了的h1元素
var e = $("#p_2 h1").remove("#h2");//删除id为h2的<h1>元素，返回所有h1元素
6. $.eq()和$.get()的区别
相同点：都可获得元素集合中指定第n个元素
不同点：
1. eq(n) 返回的是jquery对象，可以直接使用jquery内置方法，如：

. 代码如下:

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

2. get(n) 返回的dom element对象，可以直接使用html dom属性和方法，如：
$("#p_three a").get(1).onclick = function () {
alert($(this).text());
};
或将对象封装成jquery对象达到一样的效果，如：

. 代码如下:

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

7. $.css(properties)和$.css(name,value)的区别
1. 语法的区别
css(properties) $("p").css({color:"red"}); 或 $("p").css({"color":"red"});
css(name,value) $("p").css("color":"red");
2.属性名的区别
css(properties)：
如果样式属性名没有用引号，则必须用javascript语法的css样式名：如
$("p").css({color:"red",fontsize:"30px"});
如果改为“font-size”就没有效果
如果样式属性名有用引号 ，则两种样式都可以，如：
$("p").css({color:"red","font-size":"30px","fontweight":"bold"});
css(name,value)：两种形式都可以，下面两种效果一样：
$("p").css("fontsize":"30px");
$("p").css("font-size":"30px");