jQuery中需要注意的细节问题小结
jQuery中需要注意的细节问题小结
发布时间:2016-12-30 来源:查字典编辑
摘要:1.$.find()与$.children()的区别有如下HTML片段:复制代码代码如下:1.find()返回元素下所有指定元素,不限制子级...

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">动态绑定事件和静态添加事件的区别</p>

<p id="p3">动态绑定事件和静态添加事件的区别</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");

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类