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");
有如下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");
标签:
细节
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“jQuery中需要注意的细节问题小结”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。