- 浏览: 484534 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (301)
- Swing技术 (1)
- Linux (1)
- Javascript (22)
- 数据结构和算法 (3)
- J2SE (36)
- workflow (5)
- 设计模式 (14)
- web service (19)
- Ajax (14)
- 中间件 & 服务器 (8)
- 多线程 (9)
- Oracle (52)
- sys & soft (10)
- JMS (3)
- sso (9)
- android (11)
- struts2 (10)
- web协议 (2)
- 分布式 (2)
- PM (2)
- OLAP (3)
- Redis (2)
- Hibernate (7)
- ibatis (2)
- SQLServer (1)
- maven (3)
- Spring (7)
- Jsp (2)
- slf4j (1)
- jQuery (15)
- 权限 (1)
- 系统集成 (1)
- 笔记 (1)
- Freemarker (2)
- 项目管理 (1)
- eclipse (3)
- GIS (1)
- NoSql (3)
- win10 (1)
- win10网络 (2)
- 底层 (3)
- 数据库 (0)
最新评论
-
kabuto_v:
请问那种图,uml图是怎么画出来的呢?是您自己手工画的,还是有 ...
FastJSON 序列化、反序列化实现 -
梦行Monxin商城系统:
电商实例、业务并发、网站并发及解决方法 -
rockethj8:
client 㓟有一个参数是可以忽略一些URL 不进行验证登录 ...
SSO 之 (单点登录)实施中遇到的几个问题 -
mengxiangfeiyan:
好啊。。。。。
Oracle删除表,删除数据以及恢复数据、利用现有表创建新表
http://developer.51cto.com/art/201005/199747_1.htm
今年1月51CTO曾为您报道过jQuery 1.4发布的消息,在这个版本中,jQuery有相当多的改进与功能更新,包括将属性传递给jQurey、多事件绑定以及一些元素处理的功能,我们将通过讲解和示例代码的方式向您详细介绍。
AD:2013云计算架构师峰会精彩课程曝光
今年1月51CTO曾为您报道过jQuery 1.4发布的消息,在这个版本中,jQuery有相当多的改进与功能更新,它不仅包含了很多新的特性,还改进了很多功能, 更在性能优化方面下了很大功夫, 本文将对这些新的特性和增强的部分进行讨论,希望能对你有所帮助。
jQuery 1.4版本下载地址: http://code.jquery.com/jquery-1.4.js
下面我们通过讲解和示例代码来详细介绍jQurey 1.4版本中你应该知道并使用的十大新特性。
1. 传递属性给jQuery
在之前的版本中jQuery就通过"attr”方法支持了添加属性到元素集合中,"attr”方法不仅可以传递属性名和值,也可以传递包含有多个属性的对象集合。在jQurey 1.4中,除了可以创建新的对象,现在它更能将属性对象作为参数传递给jQuery函数或对象自身。如你可以创建一个含有多个属性的链接元素。
jQuery('<a></a>', {
id: 'gid',
href: 'http://www.google.com',
title: 'google非和谐版',
rel: 'external',
text: '进入<SPAN class=t_tag onclick=tagshow(event) href="tag.php?name=Google"
mce_href="tag.php?name=Google">Google</SPAN>!'
});
你可能会注意到"text”属性并且猜测它是干吗的,因为a标签是没有"text”属性的。呵呵,当你传递某些属性时,jquery 1.4同样会检查并使用它自己的方法。因此上面的"text”属性可以让jQuery调用它的".text()”方法并将"进入Google!“作为它的唯一参数。
这里给出一个更好的例子:
jQuery('<div/>', {
id: 'foo',
css: {
fontWeight: 700,
color: 'green'
},
click: function(){
alert('Foo被点击过!');
}
});
"id”属性是作为一个普通属性被添加的。但"css”和"click”属性则对应特定的jQuery方法。上面的代码在1.4之前一种写法如下:
jQuery('<div/>')
.attr('id', 'foo')
.css({
fontWeight: 700,
color: 'green'
})
.click(function(){
alert('Foo被点击过!');
});
2. 所有的东西都可以"until“了
jQuery 1.4新增了三个对DOM操作的方法,他们分别是"nextUntil", "prevUntil" 和 "parentsUntil"。 这些方法会按照某个顺序去遍历DOM对象直到满足指定的筛选条件。假设我们有一个水果列表:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>草莓</li>
<li>例子</li>
<li>桃子</li>
</ul>
如果你想选择所有在"Apple”和"Strawberry”之间的元素。代码可以这样写:
jQuery('ul li:contains(苹果)').nextUntil(':contains(梨子)'); // 得到 香蕉,葡萄,草莓
3. 绑定多个事件
与通过jquery链绑定多个方法到一起相比,现在你可以通过一次调用来绑定所有这些事件,如:
jQuery('#foo).bind({
click: function() {
// 具体代码
},
mouseover: function() {
// 具体代码
},
mouseout: function() {
// 具体代码
}
})
你也可以通过 ".one()"方法操作。
4、检查元素是否拥有某对象
通过".has()”方法,jQuery 1.4使得检查一个元素(或者集合)是不是有某对象变得相当简单。从程序角度看,它和jQuery的selector过滤器":has()”是一样的。该方法会返回在当前集合中所有包含有至少一个符合条件的元素数组。
jQuery('div').has('ul');
上面方法会返回所有包含有UL元素的DIV元素数组。在这种情况下,你可能会更倾向于简单使用选择器的过滤器(":has()"), 但当你需要通过代码过滤一个数组的时候,该方法仍会很有用。
jQuery 1.4同样在jQuery命名空间下添加了新的"contains"函数。这是一个低级的函数,它接受两个DOM节点作为参数。它会返回一个布尔值来表示后面一个元素是否在前面一个元素中存在。如:
jQuery.contains(document.documentElement, document.body);
// 返回true - <body>在<html>存在
5、去掉元素的包装
".warp()”已经在jQuery中有段日子了,现在跟它对应的".unwrap()”方法也被加进到1.4中了。这个方法刚好跟warp()方法相反。假设有下面的DOM结构:
<div>
<p>Foo</p>
</div>
我们可以用下面的函数去掉段落元素的外层:
jQuery('p').unwrap();
最终的DOM结构如下:
<p>Foo</p>
注意,这个方法处理比较简单,它会移掉任何元素的父节点。
6、detach() vs remove()
新的".detach()”方法允许你从DOM中移掉元素,这跟".remove()”很像。但与".remove()”有本质不同的是"detach()”不会将jQuery赋给该元素的数据也给注销掉。这包含通过".data()”和其他任意的通过jQuery的事件系统添加的事件等数据。
var foo = jQuery('#foo');
// 绑定一个重要的事件
foo.click(function(){
alert('Foo!');
});
foo.detach();
// 从 DOM中移除事件
// … 其他操作
foo.appendTo('body');
// 将元素重新加入到 DOMfoo.click();
// 弹出 "Foo!"
7、index(…) 加强
jQuery 1.4中我们有两种使用".index()”方法的方式。首先,你可以仅仅将一个元素自身作为参数,这样你可以得到该元素在当前集合中所处的索引位置值。
如果不设置参数的话,现在会返回该元素的兄弟节点。因此,假设有下面的DOM结构:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>草莓</li>
<li>例子</li>
<li>桃子</li>
</ul>
一个节点被点击的时候,你如果想找到在所有的节点集合中被单击的节点的位置,你可以这样写:
jQuery('li').click(function(){
alert( jQuery(this).index() );
});
jQuery 1.4还允许你指定一个选择器作为".index()”的第一个参数,这样它会返回该元素在选择器中产生的元素集合中的位置。最后需要注意的是,如果该元素在集合中存在的话,该函数会返回一个其位置的整数,如果不存在,则返回-1。
8、对象类型判断
jQuery 1.4添加了两个新的方法(直接放到了jQuery命名空间下面)以方便我们来判断当前处理的对象的类型。
首先是方法"isEmptyObject”,顾名思义,这个函数会返回一个布尔值来表明传递的对象是不是空对象(缺乏属性--无论是对象自身还是继续的对象)。其次是方法"isPlainObject”,它会返回一个布尔值来表明操作的对象是否是一个简单的js对象(指通过"{ }"或者"new Object”创建的对象)。
jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false
jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false
9、Closest(…) 增强
jQuery的".closest()”方法现在可以接受一组选择器了。如果开发人员想遍历一个元素的祖先,并在其中查找离其最近的那些符合某些特征的节点的时候,这会很有用。
另外,该函数现在也接受将上下文作为第二参数了。这意味着你现在可以控制你想在DOM中遍历的元素范围了。虽然这两种情况我们一般很少用到,不过它们在jQuery内部被很好的使用。
10、 新的事件focusIn和focusOut
为了委托"focus”和"blur”事件你需要这些新的事件,它们是"focusin”和"focusout”。这些新的事件将允许你在一个元素或其子元素获取焦点的时候进行相应操作。
jQuery('form')
.focusin(function(){
jQuery(this).addClass('focused');
});
.focusout(function(){
jQuery(this).removeClass('focused');
});
同时应该注意的是这两个事件都不是按冒泡顺序传递,它们将按捕获顺序触发。这意味着最外层的(也即祖先)元素会在实际节点事件触发前被触发。
除了以上提到的十点,jQuery 1.4还有很多有用的改进和增强,更多特性的解析及示例可以参考jQuery 1.4的官方文档。
今年1月51CTO曾为您报道过jQuery 1.4发布的消息,在这个版本中,jQuery有相当多的改进与功能更新,包括将属性传递给jQurey、多事件绑定以及一些元素处理的功能,我们将通过讲解和示例代码的方式向您详细介绍。
AD:2013云计算架构师峰会精彩课程曝光
今年1月51CTO曾为您报道过jQuery 1.4发布的消息,在这个版本中,jQuery有相当多的改进与功能更新,它不仅包含了很多新的特性,还改进了很多功能, 更在性能优化方面下了很大功夫, 本文将对这些新的特性和增强的部分进行讨论,希望能对你有所帮助。
jQuery 1.4版本下载地址: http://code.jquery.com/jquery-1.4.js
下面我们通过讲解和示例代码来详细介绍jQurey 1.4版本中你应该知道并使用的十大新特性。
1. 传递属性给jQuery
在之前的版本中jQuery就通过"attr”方法支持了添加属性到元素集合中,"attr”方法不仅可以传递属性名和值,也可以传递包含有多个属性的对象集合。在jQurey 1.4中,除了可以创建新的对象,现在它更能将属性对象作为参数传递给jQuery函数或对象自身。如你可以创建一个含有多个属性的链接元素。
jQuery('<a></a>', {
id: 'gid',
href: 'http://www.google.com',
title: 'google非和谐版',
rel: 'external',
text: '进入<SPAN class=t_tag onclick=tagshow(event) href="tag.php?name=Google"
mce_href="tag.php?name=Google">Google</SPAN>!'
});
你可能会注意到"text”属性并且猜测它是干吗的,因为a标签是没有"text”属性的。呵呵,当你传递某些属性时,jquery 1.4同样会检查并使用它自己的方法。因此上面的"text”属性可以让jQuery调用它的".text()”方法并将"进入Google!“作为它的唯一参数。
这里给出一个更好的例子:
jQuery('<div/>', {
id: 'foo',
css: {
fontWeight: 700,
color: 'green'
},
click: function(){
alert('Foo被点击过!');
}
});
"id”属性是作为一个普通属性被添加的。但"css”和"click”属性则对应特定的jQuery方法。上面的代码在1.4之前一种写法如下:
jQuery('<div/>')
.attr('id', 'foo')
.css({
fontWeight: 700,
color: 'green'
})
.click(function(){
alert('Foo被点击过!');
});
2. 所有的东西都可以"until“了
jQuery 1.4新增了三个对DOM操作的方法,他们分别是"nextUntil", "prevUntil" 和 "parentsUntil"。 这些方法会按照某个顺序去遍历DOM对象直到满足指定的筛选条件。假设我们有一个水果列表:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>草莓</li>
<li>例子</li>
<li>桃子</li>
</ul>
如果你想选择所有在"Apple”和"Strawberry”之间的元素。代码可以这样写:
jQuery('ul li:contains(苹果)').nextUntil(':contains(梨子)'); // 得到 香蕉,葡萄,草莓
3. 绑定多个事件
与通过jquery链绑定多个方法到一起相比,现在你可以通过一次调用来绑定所有这些事件,如:
jQuery('#foo).bind({
click: function() {
// 具体代码
},
mouseover: function() {
// 具体代码
},
mouseout: function() {
// 具体代码
}
})
你也可以通过 ".one()"方法操作。
4、检查元素是否拥有某对象
通过".has()”方法,jQuery 1.4使得检查一个元素(或者集合)是不是有某对象变得相当简单。从程序角度看,它和jQuery的selector过滤器":has()”是一样的。该方法会返回在当前集合中所有包含有至少一个符合条件的元素数组。
jQuery('div').has('ul');
上面方法会返回所有包含有UL元素的DIV元素数组。在这种情况下,你可能会更倾向于简单使用选择器的过滤器(":has()"), 但当你需要通过代码过滤一个数组的时候,该方法仍会很有用。
jQuery 1.4同样在jQuery命名空间下添加了新的"contains"函数。这是一个低级的函数,它接受两个DOM节点作为参数。它会返回一个布尔值来表示后面一个元素是否在前面一个元素中存在。如:
jQuery.contains(document.documentElement, document.body);
// 返回true - <body>在<html>存在
5、去掉元素的包装
".warp()”已经在jQuery中有段日子了,现在跟它对应的".unwrap()”方法也被加进到1.4中了。这个方法刚好跟warp()方法相反。假设有下面的DOM结构:
<div>
<p>Foo</p>
</div>
我们可以用下面的函数去掉段落元素的外层:
jQuery('p').unwrap();
最终的DOM结构如下:
<p>Foo</p>
注意,这个方法处理比较简单,它会移掉任何元素的父节点。
6、detach() vs remove()
新的".detach()”方法允许你从DOM中移掉元素,这跟".remove()”很像。但与".remove()”有本质不同的是"detach()”不会将jQuery赋给该元素的数据也给注销掉。这包含通过".data()”和其他任意的通过jQuery的事件系统添加的事件等数据。
var foo = jQuery('#foo');
// 绑定一个重要的事件
foo.click(function(){
alert('Foo!');
});
foo.detach();
// 从 DOM中移除事件
// … 其他操作
foo.appendTo('body');
// 将元素重新加入到 DOMfoo.click();
// 弹出 "Foo!"
7、index(…) 加强
jQuery 1.4中我们有两种使用".index()”方法的方式。首先,你可以仅仅将一个元素自身作为参数,这样你可以得到该元素在当前集合中所处的索引位置值。
如果不设置参数的话,现在会返回该元素的兄弟节点。因此,假设有下面的DOM结构:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>草莓</li>
<li>例子</li>
<li>桃子</li>
</ul>
一个节点被点击的时候,你如果想找到在所有的节点集合中被单击的节点的位置,你可以这样写:
jQuery('li').click(function(){
alert( jQuery(this).index() );
});
jQuery 1.4还允许你指定一个选择器作为".index()”的第一个参数,这样它会返回该元素在选择器中产生的元素集合中的位置。最后需要注意的是,如果该元素在集合中存在的话,该函数会返回一个其位置的整数,如果不存在,则返回-1。
8、对象类型判断
jQuery 1.4添加了两个新的方法(直接放到了jQuery命名空间下面)以方便我们来判断当前处理的对象的类型。
首先是方法"isEmptyObject”,顾名思义,这个函数会返回一个布尔值来表明传递的对象是不是空对象(缺乏属性--无论是对象自身还是继续的对象)。其次是方法"isPlainObject”,它会返回一个布尔值来表明操作的对象是否是一个简单的js对象(指通过"{ }"或者"new Object”创建的对象)。
jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false
jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false
9、Closest(…) 增强
jQuery的".closest()”方法现在可以接受一组选择器了。如果开发人员想遍历一个元素的祖先,并在其中查找离其最近的那些符合某些特征的节点的时候,这会很有用。
另外,该函数现在也接受将上下文作为第二参数了。这意味着你现在可以控制你想在DOM中遍历的元素范围了。虽然这两种情况我们一般很少用到,不过它们在jQuery内部被很好的使用。
10、 新的事件focusIn和focusOut
为了委托"focus”和"blur”事件你需要这些新的事件,它们是"focusin”和"focusout”。这些新的事件将允许你在一个元素或其子元素获取焦点的时候进行相应操作。
jQuery('form')
.focusin(function(){
jQuery(this).addClass('focused');
});
.focusout(function(){
jQuery(this).removeClass('focused');
});
同时应该注意的是这两个事件都不是按冒泡顺序传递,它们将按捕获顺序触发。这意味着最外层的(也即祖先)元素会在实际节点事件触发前被触发。
除了以上提到的十点,jQuery 1.4还有很多有用的改进和增强,更多特性的解析及示例可以参考jQuery 1.4的官方文档。
发表评论
-
jQuery前端网页特效大全
2016-01-22 11:15 756http://ini.iteye.com/blog/2165 ... -
HTML性能优化技巧
2016-01-14 11:41 926如何提升Web页面的性能 ... -
jQuery 之 nice Validator 0.2.0发布,jQuery智能表单验证
2014-02-20 17:45 801http://www.oschina.net/news/424 ... -
jQuery 之 跨域访问
2013-11-26 21:46 760浏览器端跨域访问一直是个问题, 多数 ... -
jQuery 之 几种常用方法
2013-10-19 00:28 765jQuery中为我们提供了很多有用的方法和属性,文章总结了一些 ... -
13333
2013-10-19 00:01 770jQuery 1.4十大新特性解读及代码示例(1) 2010- ... -
jQuery 之 用技巧来提高代码质量
2013-10-18 01:03 768http://www.cnblogs.com/analyzer ... -
JSON 之 利用JSON插件进行数据交换格式
2013-10-18 00:45 941http://developer.51cto.com/art/ ... -
jQuery Dom操作 之 移动和复制dom节点
2013-10-17 23:55 1696http://www.jquerycn.cn/content/ ... -
jQuery 之 纯js实现JSONP跨域
2013-10-15 23:20 1443http://www.jquerycn.cn/content/ ... -
jQuery 之 jsonp跨域原理
2013-10-15 23:14 1116http://www.jquerycn.cn/content/ ... -
jQuery 之 与Dom对象之间转换
2013-08-17 17:27 0刚开始学习jQuery,可能 ... -
jQuery 之 nt-child
2013-08-17 12:34 0在使用JQuery的时候如果你想寻找某个容器(诸如div或者是 ... -
jQuery 之 防止重复提交
2013-08-17 11:59 0复制代码 代码如下: $("input:subm ... -
jquery 之 JSON的解析方式
2013-08-17 09:26 883第一次用JSON作为jquery异步请求的传输对象,结果在jq ... -
jQuery 之 ajax json
2013-08-17 09:06 1008ajax利用json船底数据 一、 <!DOCTYP ... -
jQuery之 深入浅出jquery
2013-08-04 16:46 1307http://sishuok.com/forum/blogPo ...
相关推荐
jquery1.4 最新jquery.js包含jquery-1.4.min jquery,jquery-1.4,jquery1.4,最新jquery.js,jquery-1.4.min.js
JQuery_1.4_API.CHM JQuery_1.4_API.CHM JQuery_1.4_API.CHM JQuery_1.4_API.CHM
jQueryAPI1.4,jQueryAPI1.4,jQueryAPI1.4,jQueryAPI1.4。
Jquery API 1.4(中文)chm格式的 可以更新的 Jquery.js版本 1.42
jquery API 1.4手册 jquery API 1.4手册jquery API 1.4手册jquery API 1.4手册 jquery API 1.4手册 jquery API 1.4手册 jquery API 1.4手册 jquery API 1.4手册 jquery API 1.4手册 jquery API 1.4手册
JQuery_1.4_API
中文版JQuery_1.4_API手册
JQuery-1.4 and JQuery-1.4.mini
JQuery中文文档1.4版
JqueryEasyUI1.4参考手册.chm.zip,方便大家下载参考。
包括JQuery1.4.js和JQuery1.4帮助手册。对学习Ajax和javascript的朋友很有帮助。
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
JQuery_1.4_API (chm中文版)
看了许多的网站都在用这个版本 jquery ,因此发出来大家一起分享一下。
JQuery_1.4_API资料JQuery_1.4_API资料JQuery_1.4_API资料JQuery_1.4_API资料JQuery_1.4_API资料JQuery_1.4_API资料
jquery的api。虽然是1.4版本,不过大部分jquery需要的方法都可以找到。而且jquery1.4.4目前看来是最稳定的版本。
jQuery 文档XML文件内英文及代码部分版权归原官方wiki所有,中文部分分属为之漫笔, Shawphy and Cloudream所有。欢迎转载、替换其他XSL样式或其他形式的转载,但必须保证XML文件原样转载,保留署名以及不可用于商业...
jqueryapi1.4参考手册,纯中文,为方便前端工程师开发而上传
JQuery_1.4API中文帮助文档,