jQuery1.4新特性

1. 传参给 jQuery(…)

之前,jQuery可以通过 attr 方法设置元素的属性,既可传属性的名和值,也可以是包含几组特定 属性名值对 的 对象。在 jQuery 1.4 中,你可以把一个参数对象作为第二个参数传给 jQuery 函数本身,同时创建HTML元素。

比方说你想要创建一个带有几个属性的锚记元素(<a></a>)。在1.4中,一切如此简单:

Code:

jQuery('<a/>', {
id: 'foo',
href: 'http://google.com',
title: 'Become a Googler',
rel: 'external',
text: 'Go to Google!'
});

你大概也能猜到,这个锚记元素没有的 text 属性会调用 jQuery 的私有方法".text()" ,把元素里的文字设置为“Go to Google!”

针对这一用法,下面是更有用的实例:

Code:

jQuery('<div/>', {
id: 'foo',
css: {
fontWeight: 700,
color: 'green'
},
click: function(){
alert('Foo has been clicked!');
}
});

id 为一般属性,被直接加上了,而 css 和 click 则激发了相应的 jQuery 方法。在1.4以前,上面的代码需写成这个样子:

Code:

jQuery('<div/>')
.attr('id', 'foo')
.css({
fontWeight: 700,
color: 'green'
})
.click(function(){
alert('Foo has been clicked!');
});

详细了解 jQuery(…)

2. 直到遇见你...

1.4的DOM遍历工具包里又增加了3个新方法:nextUntil, prevUntilparentsUntil。这些方法会按照特定的方向遍历DOM,直到遇到满足指定选择符的元素为止。举例来说,现在我 们有一张水果名的清单:

Code:

<ul>
<li>Apple</li>

<li>Banana</li>
<li>Grape</li>

<li>Strawberry</li>
<li>Pear</li>

<li>Peach</li>
</ul>

我们想挑选出所有在 Apple 后,Pear 前的所有条目。代码十分简单:

Code:

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');
// 选出的是 Banana, Grape, Strawberry

详细了解: prevUntil, nextUntil, parentsUntil

3. 绑定多个事件处理器

不再需要把各个事件绑定方法“链”在一起,现在你可以把它们捆成一堆,如下:

Code:

jQuery('#foo).bind({
click: function() {
// do something
},
mouseover: function() {
// do something
},
mouseout: function() {
// do something
}
})

这一用法也适用于 ".one()".

详细了解 .bind(…)

4. 依属性指定缓动效果

以前只能为一个动画指定一种缓动效果(easing,即动画过程中的速度变化规律。jQuery 原生支持两种缓动效果,swing(默认)和linear 。要使用其他效果,你需要自己另行下载。),现在你可以为动画的各个属性参数指定不同的缓 动效果:

Code:

jQuery('#foo').animate({
left: 500,
top: [500, 'easeOutBounce']
}, 2000);

点此查看实际效果

你也可以在一个可选的动画选项对象中为 secialEasing 设置一系列名值对来完全上面的工作:

Code:

jQuery('#foo').animate({
left: 500,
top: 500
}, {
duration: 2000,
specialEasing: {
top: 'easeOutBounce'
}
});

编辑注:我们的作者 James Padolsey 谦虚了,这一功能点是他想出来的哦!

详细了解有关 per-property-easing 的内容

5. 更新的 Live 事件!

jQuery 1.4 添加了对指派 submit change focusblur 事件的支持。在jQuery中,我们利用".live()" 方法指派事件。当你想要为多个元素注册事件处理器时,这会非常有用。而且就算满足选择符的元素是新出现的,这些事件也会继续有效(使用 .live() 比不断重复绑定要省力省心得多)。

不过,当心了!注册 focus 和 blur 事件时你需要用 focusinfocusout 作为事件名。

Code:

jQuery('input').live('focusin', function(){
// do something with this
});

6. 控制函数上下文

jQuery 1.4 提供了一个全新的 proxy 函数,位于 jQuery 命名空间下。这一函数接受两个参数,一个是“作用域”(scope)或者一个方法名,另一个是某函数或者目标作用域(the intended scope)。

众所周知, JavaScript的 this 关键字是一个很难把握的东西。有时候你并不想它代表一个元素,而想让它代表你前面创建的某个对象。

例如,在这里我们创建了一个 app 对象,它拥有两个属性,一个是 clickHandler 方法,一个是负责参数配置的对象。

Code:

var app = {
config: {
clickMessage: 'Hi!'
},
clickHandler: function() {
alert(this.config.clickMessage);
}
};

这个 clickHandler 方法,当像 app.clickHandler() 这样调用时,app 就是其上下文,也就是说 this 关键字指向的是 app 。如果只需简单地调用,这样的写法没什么问题:

Code:

app.clickHandler(); // "Hi!" is alerted

不过如果把它当作一个事件处理器:

Code:

jQuery('a').bind('click', app.clickHandler);

当我们点击这个锚记时,并没有达到预想的效果(没东西 alert 出来)。这是因为 jQuery (以及大部分理智的事件模型),默认地,都会把处理器的上下文指定为目标元素本身。也就是说,this 所代表正是被点击的这个链接。而我们想的是,this 应该继续代表 app 。在jQuery 1.4中,实现这一目的十分简单:

Code:

jQuery('a').bind(
'click',
jQuery.proxy(app, 'clickHandler')
);

现在点击所有锚记都会弹出“Hi!”了。

代理函数把你的函数包裹一圈,同时把函数内的 this 设定为你想要东西。在其他上下文应用场景,如把回调函数传给其他 jQuery 方法或插件,代理函数也能派上用场。

了解更多 jQuery.proxy

7.  动画队列延迟

现在,可以给动画队列加一个延迟了。虽然这个功能可以在任何队列里实现,但最常用的可能还是延迟“fx 队列”("fx" queue,jQuery默认的动画队列)。它能让你在两个动画行为之间暂停一下,而不用牵扯到回调函数和 setTimeout 之类的东西。.delay() 的第一个参数即你需要设定的延迟毫秒数:

Code:

jQuery('#foo')
.slideDown() // Slide down
.delay(200) // Do nothing for 200 ms
.fadeIn(); // Fade in

如果你想延迟一个除 fx 以外的队列,把队列名作为第二个参数传给 .delay() 就可以了

详细了解 .delay(…)

8. 检测元素是否含有特定内容

jQuery 1.4 让检测一个元素(或集合)是否含有(.has())某项东西更为容易。其背后的机理和选择过滤器 :has()是一样的。这个方法会从当前集合中选出满足任意指定条件之一的元素。

Code:

jQuery('div').has('ul');

这条语句在所有DIV元素中挑出那些包含UL元素的。这种情况可能用选择过滤器 :has() 就好了,但当你要更程式化地过滤选择集时 .has() 方法就十分有用了。

jQuery 1.4 还在 jQuery 命名空间下新增了一个 contains  函数。这是一个比较底层的函数,接受两个 DOM 节点为参数。返回一个布尔值,指示第二个元素是否包含在第一个元素中。例如:

Code:

jQuery.contains(document.documentElement, document.body);
// 返回true - <body> 确实包含在 <html> 中

消息了解: .has(…), jQuery.contains(…)

9. 给元素剥皮!

很早以前,jQuery 就可以用 .wrap() 给元素裹一层皮。现在, jQuery 1.4 添加了 .unwrap() 方法,用以剥皮。看下面的DOM结构:

Code:

<div>
<p>Foo</p>
</div>

来把 p 元素外面的一层皮(div)剥掉:

Code:

jQuery('p').unwrap();

DOM 变成了:

Code:

<p>Foo</p>

总而言之,这个方法可以把任意元素的父元素移除。.

详细了解 .unwrap(…)

10. 移除元素,而不删除数据

以前有一个.remove()方法,是把元素剥离后抛弃。全新的 .detach() 方 法可以让你把一个元素从DOM中剥离,而不丢失数据。囊括该元素的 jQuery 对象会在操作完成后还保留这个元素。数据可以通过 .data()  或者 jQuery 事件系统中的任意事件处理器传入 jQuery 对象。

当你需要把某个元素从DOM中移除,然后在将来某个场景中重新引入时,这个函数会很有用。元素的事件句柄和其他所有数据都会被保留。

Code:

var foo = jQuery('#foo');

// 绑定一个重要的事件处理器
foo.click(function(){
alert('Foo!');
});

foo.detach(); // 从DOM中移除
// … do stuff

foo.appendTo('body'); // 重新加入到DOM

foo.click(); // 弹出alert信息: "Foo!"

详细了解 .detach(…)

11. index(…) 的功能增强

jQuery 1.4 为您使用 .index() 提供了两种新方法。以前,你必须把元素作为参数传给它,然后获得一个返回的数值,代表在当前集合中这个元素的索引。现在,如果不传参数过去,返回的值就代 表某元素在其同辈中排行老几。比方说下面的DOM:

Code:

<ul>
<li>Apple</li>

<li>Banana</li>
<li>Grape</li>

<li>Strawberry</li>
<li>Pear</li>

<li>Peach</li>
</ul>

你想要晓得点击一个条目后它是列表中的第几个,实现的代码十分简单:

Code:

jQuery('li').click(function(){
alert( jQuery(this).index() );
});

jQuery 1.4 也允许你将选择符作为 .index() 的第一个参数。这样做会返回当前元素在你指定的选择符 所匹配出的元素集合中的索引值。

还得提醒一点,这一方法返回的是数值,如果文档中无法找到指定条件的元素,会返回数值 -1 。

详细了解 .index(…)

12. DOM 操纵可接收回调函数

现在,大部分的DOM操纵方法都支持了将 函数 作为单一参数传入(.css().attr() 传 入为第二个参数)。这个函数会为选择集中的每一个元素都跑一遍,从而为相应操纵方法提供更“有个性”的值。

下列方法支持这一功能:

  • after
  • before
  • append
  • prepend
  • addClass
  • toggleClass
  • removeClass
  • wrap
  • wrapAll
  • wrapInner
  • val
  • text
  • replaceWith
  • css
  • attr
  • html

有了回调函数,你就能在选择集中利用 this 关键字来访问当前元素,用回调函数的第一个参数来访问其索引值。

Code:

jQuery('li').html(function(i){
return 'Index of this list item: ' + i;
});

还有还有,上面的某些方法还提供第二个参数供你利用。如果你调用的是一个设定型方法(如.html().attr('href...) ),你还能取得当前值。例如:

Code:

jQuery('a').attr('href', function(i, currentHref){
return currentHref + '?foo=bar';
});

如您所见,对于.css().attr() 方法来说,之所以要把函数作为第二个参数 传递,是因为第一个参数要用来指定我们需要修改的是哪一个属性:

Code:

jQuery('li').css('color', function(i, currentCssColor){
return i % 2 ? 'red' : 'blue';
});

13. 判定对象类型

jQuery 1.4 新增了两个全新的辅助函数(都直接位于 jQuery 命名空间下),可以帮助你判别你正在操纵的是何种对象。

第一个函数是 isEmptyObject, ,它返回一个布尔值,判定对象是否为空()。第二个是 isPlainObject ,它返回的布尔值代表传递过去的参数是否为JavaScript的简单对象(plain object),也就是用 {} 或 new Object()创建的对象。

Code:

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false

jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

了解更多: isPlainObject(…), isEmptyObject(…)

14. Closest(…) 的功能增强

jQuery的.closest() 方法现在可以接受一组选择符作为参数。当你需要遍历某一元素的所有上级,找到一 个以上符合特定特征的最近元素时,此功能就能派上用场。

而且,现在它还能接受上下文环境作为第二个参数,也就是说你可以控制DOM遍历的深度或者说远度。虽然说大家可能很少会用到这两个新特性,但一旦用 上效果是惊人的!

了解更多 .closest(…)

15. 新事件! focusIn 与 focusOut

如前所述,现在部署 focus 和 blur 事件时,你需要使用 focusin 和 focusout 这两个新事件。这两个事件帮助你在特定元素或者该元素的子元素 获取/失去 焦点时采取行动。

Code:

jQuery('form')
.focusin(function(){
jQuery(this).addClass('focused');
});
.focusout(function(){
jQuery(this).removeClass('focused');
});

值得说明的是,这两个事件不会传播开来(即所谓的“冒泡”),它们会被捕获住。也就是说,外部元素(父辈)会在作孽的“目标”元素(causal "target" element)之前被触发。


转载于:https://www.cnblogs.com/koking/archive/2010/06/15/1758453.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276025.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python pack unpack_golang 仿python pack/unpack

package includesimport ("bytes""encoding/binary""fmt"_"os""strconv""strings")type Protocolstruct{Format []string}//封包func (p *Protocol) Pack(args ...interface{}) []byte{la :len(args)ls :len(p.Fo…

JavaScript递归应用与实践

递归简单来说就是函数内调用自生的一种方法&#xff0c;形如&#xff1a; function foo(){foo() } 复制代码下面我列举一些常用的递归应用。 1. 求和&#xff0c;例如求1234...100之和 分析如下&#xff1a; sum(100)sum(99)100 sum(99)sum(98)99 ... sum(1)sum(0)1 复制代码代…

一个好的设计师_是什么让一个好的设计师

一个好的设计师重点 (Top highlight)The design manager role has grown considerably over the past five years. As design has been recognised as a business value-driver and organisations have increased their design maturity, we’ve seen lots more design managem…

PHP-Redis扩展安装 error: ext/standard/php_smart_str.h: No such file or directory

在源码编译PHP-redis扩展时&#xff0c;遇到缺少头文件问题【问题描述】error: ext/standard/php_smart_str.h: No such file or directory 【问题原因】PHP安装好的头文件目录&#xff1a;/php/include/php/ext/standard/&#xff0c;这些头文件&#xff0c;在php7之前的版本&…

相见恨晚的一款前端布局神器!

大家好&#xff0c;我是若川。欢迎加我微信 ruochuan12&#xff0c;长期交流学习。今天给大家推荐一款非常实用的前端页面布局神器&#xff0c;点击下方卡片关注我&#xff0c;或者查看源码系列文章。页面和布局是一门前端程序员的必修课&#xff0c;css 从来也不是停留在面试八…

IC设计前端几本经典书籍

No.1 Writing Testbenches, Functional Verification of HDL Modelsby Janick Bergeron本书主要以HDL&#xff08;verilog/vhdl&#xff09;为例&#xff0c;详细讲述了在IC DESIGN FLOW中Verification 以及Test的设计思想、方法和技巧&#xff0c;涵概了测试的各个方面&#x…

unreal无损音乐百度云_将网易云音乐专用的无损音乐格式转换成全平台通用的无损格式...

前几天发现网易云音乐的ncm格式很坑爹&#xff0c;由于网易云的部分音乐采取了这种流媒体平台模式&#xff0c;这种格式的歌曲下载到设备本地以后只有在网易云音乐的app上面才能播放&#xff0c;而且还要在会员生效期间才能播今天网易云弄出一个ncm&#xff0c;明天百度音乐来一…

锁升级

JavaSE1.6为了减少获得锁和释放锁带来的性能消耗&#xff0c;引入了“偏向锁”和“轻量级锁”。 在JavaSE1.6中&#xff0c;锁一共有4种状态&#xff0c;级别从低到高依次是&#xff1a;无锁状态、偏向锁状态、轻量级锁状态和重量级锁状态&#xff0c;这几个状态会随着竞争情况…

ux和ui_首先要做的— UX / UI案例研究

ux和ui休息一下&#xff01; (Get some rest!) After four weeks of four-day design sprints each week, I welcomed the opportunity to work on this 9-day design challenge. With this also being an individual project, I allocated 50% of my time on the UX process a…

微信消息模板换行符转义问题处理

通常的微信模板&#xff1a; Hello &#xff01;\n\n Are you OK&#xff1f; ① 直接定义字符串&#xff1b; ② 数据库中读取&#xff1b;这里需要说明的是 数据库读取 的内容&#xff0c;如果直接推送&#xff0c;\n\n是没有被转移为换行符的。此时需要&#xff1a; $tplStr…

Vue2 彻底从 Flow 重构为 TypeScript,焕然一新!

大家好&#xff0c;我是若川。欢迎加我微信 ruochuan12&#xff0c;长期交流学习。今天分享一篇技术热点&#xff0c;众所周知&#xff0c;前不久vue3不打算支持IE11&#xff0c;vue2将支持composition API&#xff0c;现在vue2用ts重构&#xff0c;试问&#xff1a;还学得动嘛…

红米note5linux刷机包__最新最全的红米Note5ROM刷机包下载、刷机教程_红米Note5论坛_移动叔叔...

本帖最后由 压力山大大叔 于 2018-5-15 00:52 编辑20180513跟新全屏手势。看最后一张载图。1&#xff1a;先解锁&#xff0c;刷第三方&#xff0c;都是这个流程。2非常干净&#xff0c;只有670兆&#xff0c;刷完没有找到浏览器&#xff0c;刷前下载一个浏览器在手机里备用。3电…

每个网页设计者都自以为是

&#xff08;一&#xff09;垃圾还是经典网页技术更新很快&#xff0c;一个网站的界面设计寿命仅仅2-3年而已。不管是垃圾还是精品&#xff0c;都没有所谓的经典。经典只存在于是哪个首次成功创新性的应用。网页设计 者不管自己的学识、技术和经验如何&#xff0c;都自以为自己…

文件夹的拷贝

文件夹用来把文件包裹起来&#xff0c;褪去这些外衣&#xff0c;说到底拷贝文件夹也就是拷贝文件 模拟实例&#xff1a;将F:/Picture/test 文件夹 拷贝到 F:/Picture/dir文件夹 该实例中test文件夹下只包含了test.txt文件 步骤分析&#xff1a; 1.通过路径得到File对象 2.递归查…

【抽奖】若川诚邀你加前端群,长期交流学习~

最近有许多读者朋友关注了我&#xff0c;加我好友没有来得及拉群交流。另外偷偷告诉你&#xff1a;公众号回复 411&#xff0c;参与抽奖&#xff0c;送极客时间100元以内的课程&#xff0c;今晚八点开奖&#xff0c;必须开奖前加了我的微信&&像是前端&&关注了我…

帝国cms重置管理员_重新设计《纽约时报》 CMS飞行员

帝国cms重置管理员1.什么是飞行员&#xff1f; (1. What Is Pilot?) For 10 weeks, I joined The New York Times’s Story Formats team as a Product Design Intern. Partnered with technology intern Shormie Faruque, we were tasked with redesigning Pilot.大约十个星期…

微信小程序开发 Request Headers: Provisional headers are shown

在微信小程序开发的时候&#xff0c;写了两个API请求&#xff1a; 请求A://请求Awx.request({url: https://wx.baidu.com/api/wx/getBallByDate,method: POST,dataType: json,data: {date: that.data.curDate},header: {content-type: application/json},success: function(dt…

昆山万象汇机器人_昆山十镇,在售新盘汇总

陆家建伟国际汽车城&#xff0c;均价 7500 元/㎡美吉特家居广场&#xff0c;均价 17000 元/㎡美吉特灯都&#xff0c;均价 17000 元/㎡花桥绿地象屿苏河公园&#xff0c;均价 22950 元/㎡凯德都会新峰&#xff0c;均价 21500 元/㎡越洋国际&#xff0c;均价 18000 元/㎡浦西玫瑰…

Mini 容器学习笔记6——组件的获取(应用)

1. 通过组件Id获取组件实例&#xff1a; [Test]public void GetByIdTest(){ServiceRegistry.Register<Person>("person");var person ServiceLocator.Get<IPerson>("person");Assert.IsTrue(person ! null);var person2 ServiceLocator.Get&…

JavaScript ES2021 最值得期待的 5 个新特性解析

大家好&#xff0c;我是若川。欢迎加我微信 ruochuan12&#xff0c;长期交流学习。今天分享一篇关于ES2021的5个新特性。点击下方卡片关注我&#xff0c;或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列在写本文时&#xff0c;本文提到的新的 JavaScript …