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 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
小程序实现抽奖动画
Apr 16 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
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
第二节 对象模型 [2]
2006/10/09 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP实现微信对账单处理
2018/10/01 PHP
php的扩展写法总结
2019/05/14 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
使用PDB模式调试Python程序介绍
2015/04/05 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
Python 高效编程技巧分享
2020/09/10 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
类的核心特性有哪些
2014/01/01 面试题
出国签证在职证明
2014/01/16 职场文书
运动会入场解说词
2014/02/07 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
教师节寄语2015
2015/03/23 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
中学教师教学工作总结
2015/08/13 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
Python 中random 库的详细使用
2021/06/03 Python