jQuery 1.4版本的15个新功能（如今已经发布到jquery1.8,特别是加强版的live事件，支持 submit ， change ， focus 和 blur 事件）

时间  2019-11-13
标签 jquery 1.4 版本 功能 如今 已经 发布 jquery1.8 特别是 加强 live 事件 支持 submit change focus blur 栏目 JQuery 繁體版
原文   原文链接

1.jQuery()建立DOM元素：支持传参设置属性

以前，jQuery能够经过 attr 方法设置元素的属性，既可传属性的名和值，也能够是包含几组特定 属性名值对 的 对象。在 jQuery 1.4 中，你能够把一个参数对象做为附属参数传给 jQuery 函数自己，同时建立HTML元素。css

比方说你想要建立一个带有几个属性的锚记元素（<a></a>）。在1.4中，一切如此简单：html

 
  1. jQuery('<a></a>',{
  2. id:'foo',
  3. href:'http://google.com',
  4. title:'BecomeaGoogler',
  5. rel:'external',
  6. text:'GotoGoogle!'
  7. });
 

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

针对这一用法，下面是更有用的实例：jquery

 
  1. jQuery('
  2. <div>',{
  3. id:'foo',
  4. css:{
  5. fontWeight:700,
  6. color:'green'
  7. },
  8. click:function(){
  9. alert('Foohasbeenclicked!');
  10. }
  11. });</div>
 

id 为通常属性，被直接加上了，而 css 和 click 则激发了相应的 jQuery 方法。在1.4之前，上面的代码需写成这个样子：api

 
  1. jQuery('
  2. <div>')
  3. .attr('id','foo')
  4. .css({
  5. fontWeight:700,
  6. color:'green'
  7. })
  8. .click(function(){
  9. alert('Foohasbeenclicked!');
  10. });</div>
 

2. parentsUntil()、prevUntil()、nextUntil()

1.4的DOM遍历工具包里又增长了3个新方法：nextUntil， prevUntil 和 parentsUntil。这些方法会按照特定的方向遍历DOM，直到遇到知足指定选择符的元素为止。举例来讲，现 在咱们有一张水果名的清单：app

 
  1. <ul>
  2. <li>Apple</li>
  3. <li>Banana</li>
  4. <li>Grape</li>
  5. <li>Strawberry</li>
  6. <li>Pear</li>
  7. <li>Peach</li>
  8. </ul>
 

咱们想挑选出全部在 Apple 后，Pear 前的全部条目。代码十分简单：ide

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

3. bind()、one()支持绑定多个事件

再也不须要把各个事件绑定方法“链”在一块儿，如今你能够把它们捆成一堆，以下：函数

 
  1. jQuery('#foo).bind({
  2. click:function(){
  3. //dosomething
  4. },
  5. mouseover:function(){
  6. //dosomething
  7. },
  8. mouseout:function(){
  9. //dosomething
  10. }
  11. })
 

这一用法也适用于 “.one()”.工具

4. 动画效果Easing的加强

在jQuery1.4之前版本只能为一个动画指定一种缓动效果。如今你能够为动画的各 个属性参数指定不一样的缓动效果：动画

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

你也能够在一个可选的动画选项对象中为 secialEasing 设置一系列名值对来彻底上面的工做：this

 
  1. jQuery('#foo').animate({
  2. left:500,
  3. top:500
  4. },{
  5. duration:2000,
  6. specialEasing:{
  7. top:'easeOutBounce'
  8. }
  9. });
 

5. 加强版的 live() 事件

jQuery 1.4 添加了对指派 submit ， change ， focus 和 blur 事件的支持。在jQuery中，咱们利用”.live()” 方法指派事件。当你想要为多个元素注册事件处理器时，这会很是有用。并且就算知足选择符的元素是新出现的，这些事件也会继续有效（使用 .live() 比不断重复绑定要省力省心得多）。

不过，小心了！注册 focus 和 blur 事件时你须要用 focusin 和 focusout 做为事件名。

 
  1. jQuery('input').live('focusin',function(){
  2. //dosomethingwiththis
  3. });
 

6. 使用proxy()函数指定this

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

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

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

 
  1. varapp={
  2. config:{
  3. clickMessage:'Hi!'
  4. },
  5. clickHandler:function(){
  6. alert(this.config.clickMessage);
  7. }
  8. };
 

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

 
  1. app.clickHandler();//"Hi!"isalerted
 

不过若是把它看成一个事件处理器：

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

当咱们点击这个锚记时，并无达到预想的效果（没东西 alert 出来）。这是由于 jQuery （以及大部分理智的事件模型），默认地，都会把处理器的上下文指定为目标元素自己。也就是说，this 所表明正是被点击的这个连接。而咱们想的是，this 应该继续表明 app 。在jQuery 1.4中，实现这一目的十分简单：

 
  1. jQuery('a').bind(
  2. 'click',
  3. jQuery.proxy(app,'clickHandler')
  4. );
 

如今点击全部锚记都会弹出“Hi!”了。

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

7. 动画队列延迟

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

 
  1. jQuery('#foo')
  2. .slideDown()//Slidedown
  3. .delay(200)//Donothingfor200ms
  4. .fadeIn();//Fadein
 

若是你想延迟一个除 fx 之外的队列，把队列名做为第二个参数传给 .delay() 就能够了。

8. 使用has()检测元素是否含有特定内容

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

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

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

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

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

9. 给元素剥皮！

很早之前，jQuery 就能够用 .wrap() 给元素裹一层皮。如今， jQuery 1.4 添加了 .unwrap() 方法，用以剥皮。看下面的DOM结构：

 
  1. <div>
  2. <p>
  3. Foo
  4. </p>
  5. </div>
 

来把 p 元素外面的一层皮（div）剥掉：

 
  1. jQuery('p').unwrap();
 

DOM 变成了：

 
  1. <p>
  2. Foo
  3. </p>
 

总而言之，这个方法能够把任意元素的父元素移除。

10. 使用detach()移除元素，而不删除数据

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

当你须要把某个元素从DOM中移除，而后在未来某个场景中从新引入时，这个函数会颇有用。元素的事件句柄和其余全部数据都会被保留。

 
  1. varfoo=jQuery('#foo');
  2. //绑定一个重要的事件处理器
  3. foo.click(function(){
  4. alert('Foo!');
  5. });
  6. foo.detach();//从DOM中移除
  7. //…dostuff
  8. foo.appendTo('body');//从新加入到DOM
  9. foo.click();//弹出alert信息："Foo!"
 

11. index() 的功能加强

jQuery 1.4 为您使用 .index() 提供了两种新方法。之前，你必须把元素做为参数传给它，而后得到一个返回的数值，表明在当前集合中这个元素的索引。如今，若是不传参数过去，返回的值就代 表某元素在其同辈中排行老几。比方说下面的DOM：

 
  1. <ul>
  2. <li>Apple</li>
  3. <li>Banana</li>
  4. <li>Grape</li>
  5. <li>Strawberry</li>
  6. <li>Pear</li>
  7. <li>Peach</li>
  8. </ul>
 

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

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

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

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

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

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

下列方法支持这一功能：

  1. after()
  2. before()
  3. append()
  4. prepend()
  5. addClass()
  6. toggleClass()
  7. removeClass()
  8. wrap()
  9. wrapAll()
  10. wrapInner()
  11. val()
  12. text()
  13. replaceWith()
  14. css()
  15. attr()
  16. html()

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

 
  1. jQuery('li').html(function(i){
  2. return'Indexofthislistitem:'+i;
  3. });
 

还有还有，上面的某些方法还提供第二个参数供你利用。若是你调用的是一个设定型方法（如.html() 和 .attr(’href…) ），你还能取得当前值。例如：

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

如您所见，对于.css() 和 .attr() 方法来讲，之因此要把函数做为 第二个参数传递，是由于第一个参数要用来指定咱们须要修改的是哪个属性：

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

13. 断定对象类型:isEmptyObject、isPlainObject

jQuery 1.4 新增了两个全新的辅助函数（都直接位于 jQuery 命名空间下），能够帮助你判别你正在操纵的是何种对象。

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

 
  1. jQuery.isEmptyObject({});//true
  2. jQuery.isEmptyObject({foo:1});//false
  4. jQuery.isPlainObject({});//true
  5. jQuery.isPlainObject(window);//false
  6. jQuery.isPlainObject(jQuery());//false
 

14. Closest() 的功能加强

jQuery的.closest() 方法如今能够接受一组选择符做为参数。当你须要遍历某一元素的全部上级， 找到一个以上符合特定特征的最近元素时，此功能就能派上用场。

并且，如今它还能接受上下文环境做为第二个参数，也就是说你能够控制DOM遍历的深度或者说远度。虽说你们可能不多会用到这两个新特性，但一旦用 上效果是惊人的！

15. 新事件： focusIn 与 focusOut

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

 
  1. jQuery('form')
  2. .focusin(function(){
  3. jQuery(this).addClass('focused');
  4. });
  5. .focusout(function(){
  6. jQuery(this).removeClass('focused');
  7. });
 

值得说明的是，这两个事件不会传播开来（即所谓的“冒泡”），它们会被捕获住。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程