使用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");

复制自http://www.jb51.net/article/29076.htm

时间: 2024-10-12 18:44:09

使用jQuery要注意的问题的相关文章

基于jquery开发的UI框架整理分析

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

微信生成二维码 只需一个网址即刻 还有jquery生成二维码

<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text=http://123.net/index.php?s=/Home/Index/yanzheng/mai/{$dange.id}" style="width: 5rem; margin-bottom: 1rem;" > </div> http://qr.tops

Jquery基础总结

jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. <ul> <li id=&quo

初识jQuery

jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:

zepto与jquery冲突的解决

问题出现的背景: 在light7框架下搭建的触屏版项目中,要拓展一个投票系统,其中投票系统有一个比较完善的上传组件,但是此组件是依赖zepto的,而原来的项目是依赖jQuery的,所以就会遇到冲突的问题: 解决方法1: jquery有一个方法叫noConflict() ,可以把jquery的$改掉. var jq=$.noConflict(); 这个时候用jq来代替jquery的$吧. 解决方法2: zepto的符号改掉 window.zp=window.Zepto = Zepto 在zepto

jQuery父级以及同级元素查找的实例

父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(

jQuery EasyUI---DataGrid

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../jquery-1.4.2.min.js" ty

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

jQuery $.ajax传递数组的traditional参数传递必须true

出自:http://blog.csdn.net/ojackhao/article/details/24580437 起初我认为traditional:true,可有可无,但是后来不用traditional的时候,发现后台无法获取selectUsers的值,那么可以肯定的是traditional默认值是false.当提交的参数是数组( {selectUsers:[value,value,value]} ),如果是false的话,则提交时会是"selectUsers[]=value&sele

页面滚动图片等元素动态加载插件jquery.scrollLoading.js

如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的就不用加载了.这样还可以在一定程度上节省服务器资源.该插件作者的网页将该插件的功能和使用方法描述的非常详细,这里把最一般最普遍的使用情况给大家展现一下. 插件作者:http://www.zhangxinxu.com/ 首先我们需要加载jQuery库和本插件js文件. (jquery.scrollLo