jQuery最新1.4 版本的十五个新特性

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 07:22 点击:

 

文章出处:http://www.weboffer.cn/index.php/html/628.html

 

1. 传参给jQuery(…)

 

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

 

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

 

Js代码 

jQuery(‘<a/>’, {  

id: ‘foo’,  

href: ‘http://google.com’,  

title: ‘Become a Googler’,  

rel: ‘external’,  

text: ‘Go to Google!’  

}); 

 

jQuery(‘<a/>’, {

id: ‘foo’,

href: ‘http://google.com’,

title: ‘Become a Googler’,

rel: ‘external’,

text: ‘Go to Google!’

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

 

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

 

Js代码 

jQuery(‘<div/>’, {  

id: ‘foo’,  

css: {  

fontWeight: 700,  

color: ‘green’  

},  

click: function(){  

alert(‘Foo has been clicked!’);  

}  

}); 

 

jQuery(‘<div/>’, {

id: ‘foo’,

css: {

fontWeight: 700,

color: ‘green’

},

click: function(){

alert(‘Foo has been clicked!’);

}

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

 

Js代码 

jQuery(‘<div/>’)  

.attr(‘id’, ‘foo’)   

.css({  

fontWeight: 700,  

color: ‘green’  

})  

.click(function(){  

alert(‘Foo has been clicked!’);  

}); 

 

jQuery(‘<div/>’)

.attr(‘id’, ‘foo’)

.css({

fontWeight: 700,

color: ‘green’

})

.click(function(){

alert(‘Foo has been clicked!’);

});2. 直到遇见你…

 

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

 

Html代码 

<ul> 

<li>Apple</li> 

<li>Banana</li> 

<li>Grape</li> 

<li>Strawberry</li> 

<li>Pear</li> 

<li>Peach</li> 

</ul> 

 

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Grape</li>

<li>Strawberry</li>

<li>Pear</li>

<li>Peach</li>

</ul> 

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

 

Js代码 

jQuery(‘ul li:contains(Apple)’).nextUntil(‘:contains(Pear)’); 

 

jQuery(‘ul li:contains(Apple)’).nextUntil(‘:contains(Pear)’);3. 绑定多个事件处理器

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • Gb2312转utf-8编码的方法(vbs+js)
      • 如何使用Ajax技术开发Web应用程序(1)
      • js跳转路径问题
      • JavaScript模仿桌面窗口
      • 用js检测两个线段是否相交
      • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
      • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
      • 我是如何去了解jquery的(六),案例之幻灯片轮换
      • Jquery封装幻灯片效果
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1