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 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
JavaScript实现省市联动效果
Nov 22 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
php桌面中心(三) 修改数据库
2007/03/11 PHP
坏狼的PHP学习教程之第2天
2008/06/15 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
canvas使用注意点总结
2013/07/19 HTML / CSS
医院门卫岗位职责
2013/12/30 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
贷款委托书范本
2014/04/08 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
工作保证书范文
2014/04/29 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
公司门卫岗位职责
2015/04/13 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers