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


Posted in Javascript onDecember 06, 2011

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");
Javascript 相关文章推荐
JS支持带x身份证号码验证函数
Aug 10 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
jQuery load方法用法集锦
Dec 06 #Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 #Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 #Javascript
js Function类型
Dec 04 #Javascript
Javascript base64编码实现代码
Dec 02 #Javascript
JS获取页面窗口大小的代码解读
Dec 01 #Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 #Javascript
You might like
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php旋转图片90度的方法
2013/11/07 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
基于jQuery的星级评分插件
2011/08/12 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
python将数据插入数据库的代码分享
2020/08/16 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
团队精神的演讲稿
2014/05/14 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis