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

1. $.find()与$.children()的区别有如下HTML片段：复制代码代码如下: <div id="div_four"> <input id="one"/><input id="two"/> <div><input id="three"/></div> </div> 1. find() 返回元素下所有指定元素，不限制子级的深度，如： $("#div_four").find("input")//返回one、two、three三个input元素 2.childr() 返回元素的一级子节点元素集合，如： $("#div_four").children("input")//返回one、two两个input元素 2. $.append()与$.appendTo()的区别 1. append()：返回父元素的引用 2. appendTo()：返回新创建的元素的引用复制代码代码如下: <div id="div_1"></div> var e = $("<h1>动态创建并添加表标题元素</h1>").appendTo($("#div_1")); var r = $("#div_1").append("<h1>动态创建并添加表标题元素</h1>"); //e 表示新创建的<h1>元素 //r 表示$("#div_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 = $("#div_2 h1").remove();//返回删除了的h1元素 var e = $("#div_2 h1").remove("#h2");//删除id为h2的<h1>元素，返回所有h1元素 6. $.eq()和$.get()的区别相同点：都可获得元素集合中指定第n个元素不同点： 1. eq(n) 返回的是jQuery对象，可以直接使用jQuery内置方法，如：复制代码代码如下: $("#div_three a").eq(0).bind("click", function () { alert($(this).text()); }); 2. get(n) 返回的DOM Element对象，可以直接使用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. $.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");

　　推荐阅读

　　Ubuntu 11.10 安装Node.js的方法

1.安装依赖包复制代码代码如下: sudo apt-get install g++ curl libssl-dev apache2-utils sudo apt-get install git-core 2.下载源代码复制代码代码如下: git clone git://github.com/ry/node.git 　　这一>>>详细阅读

本文标题：jQuery中需要注意的细节问题小结

地址：http://www.17bianji.com/kaifa2/JS/23876.html

1/2 1