韦德国际1946国际网址:jQuery中须求专注的底细难

作者: 韦德国际1946国际网址  发布:2019-08-05

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

  1. 简化代码
    JavaScript定义对象和数组特别不难,大家想要创造贰个对象,一般是这样写的:
  1. 简化代码
    JavaScript定义对象和数组非常轻巧,大家想要成立一个对象,一般是如此写的:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

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

<SPAN style="FONT-FAMILY: verdana, geneva">var car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;
</SPAN>

<SPAN style="FONT-FAMILY: verdana, geneva">var car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;
</SPAN>

  1. find() 重回成分下具有钦赐元素,不限制子级的深度,如:
    $("#div_four").find("input")//返回one、two、three三个input元素
    2.childr() 再次来到成分的一流子节点成分集结,如:
    韦德国际1946国际网址:jQuery中须求专注的底细难题计算,javascript代码编写须求注意的7个小细节小结。$("#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")元素

<SPAN style="FONT-FAMILY: verdana, geneva">var car = {
colour:'red',
wheels:4,
  hubcaps:'spinning',
  age:4
}
</SPAN>

<SPAN style="FONT-FAMILY: verdana, geneva">var car = {
colour:'red',
wheels:4,
  hubcaps:'spinning',
  age:4
}
</SPAN>

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个因素
    不同点:
  3. eq(n) 重返的是jQuery对象,能够平素利用jQuery内置方法,如:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

<SPAN style="FONT-FAMILY: verdana, geneva">var moviesThatNeedBetterWriters = new Array(
'Transformers','Transformers2','Avatar','Indiana Jones 4'
);
</SPAN>

<SPAN style="FONT-FAMILY: verdana, geneva">var moviesThatNeedBetterWriters = new Array(
'Transformers','Transformers2','Avatar','Indiana Jones 4'
);
</SPAN>

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

越来越精简的写法是:

更简洁的写法是:

  1. get(n) 重回的DOM Element对象,能够间接选择HTML DOM属性和措施,如:
    $("#div_three a").get(1).onclick = function () {
    alert($(this).text());
    };
    或将目的封装成jQuery对象达到一样的成效,如:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

<SPAN style="FONT-FAMILY: verdana, geneva">var moviesThatNeedBetterWriters = [
'Transformers','Transformers2','Avatar','Indiana Jones 4'
];
</SPAN>

<SPAN style="FONT-FAMILY: verdana, geneva">var moviesThatNeedBetterWriters = [
'Transformers','Transformers2','Avatar','Indiana Jones 4'
];
</SPAN>

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

对于数组,还会有关联数组那样一个特别的东西。 你会开采非常多代码是那样定义对象的:

对于数组,还会有关联数组那样贰个非常的东西。 你会发觉众多代码是如此定义对象的:

  1. $.css(properties)和$.css(name,value)的区别
  2. 语法的区分
    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");

复制代码 代码如下:

复制代码 代码如下:

<SPAN style="FONT-FAMILY: verdana, geneva">var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
car['age'] = 4;
</SPAN>

<SPAN style="FONT-FAMILY: verdana, geneva">var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
car['age'] = 4;
</SPAN>

那太疯狂了,不要以为疑惑,“关联数组”只是对象的三个小名而已。
除此以外贰个简化代码的艺术是行使伊利运算符,举个例证:

那太疯癫了,不要以为猜忌,“关联数组”只是对象的三个外号而已。
别的两个简化代码的主意是接纳安慕希运算符,举个例证:

复制代码 代码如下:

复制代码 代码如下:

<SPAN style="FONT-FAMILY: verdana, geneva">var direction;
if(x < 200){
direction = 1;
} else {
direction = -1;
}
</SPAN>

<SPAN style="FONT-FAMILY: verdana, geneva">var direction;
if(x < 200){
direction = 1;
} else {
direction = -1;
}
</SPAN>

大家得以应用如下的代码替换这种写法:

大家能够运用如下的代码替换这种写法:

复制代码 代码如下:

复制代码 代码如下:

<SPAN style="FONT-FAMILY: verdana, geneva">var direction = x < 200 ? 1 : -1;
</SPAN>

<SPAN style="FONT-FAMILY: verdana, geneva">var direction = x < 200 ? 1 : -1;
</SPAN>

  1. 利用JSON作为数据格式
    高大的DougRussCrockford发明了JSON数据格式来储存数据,你能够接纳原生的javascript方法来囤积复杂的多寡而没有须求展开任何额外的更改,举个例子:
  1. 接纳JSON作为数据格式
    伟大的DouglasCrockford发明了JSON数据格式来积存数据,你能够使用原生的javascript方法来囤积复杂的数目而无需展开任何额外的调换,比如:

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:韦德国际1946国际网址:jQuery中须求专注的底细难

关键词: 伟德国际中文