`

13333

 
阅读更多
jQuery 1.4十大新特性解读及代码示例(1)
2010-05-13 08:57 Ethan Ethan Woo的博客 我要评论(0) 字号:T | T

今年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>  
注意,这个方法处理比较简单,它会移掉任何元素的父节点。
分享到:
评论

相关推荐

    13333 财务管理-企业内部控制与风险管理培训教材(PPT 150页).ppt

    13333 财务管理-企业内部控制与风险管理培训教材(PPT 150页).ppt

    2021-2022计算机二级等级考试试题及答案No.13333.docx

    2021-2022计算机二级等级考试试题及答案No.13333.docx

    pierced.zip

    内网穿透工具,可以实现代理本地端口生成域名,可以通过此域名访问本地服务,在公众号等需要提供外网回调地址的场景下,本地开发人员可以使用此工具生成域名配置简单使用,支持linux、mac、win64

    钉钉内网穿透.zip

    【钉钉内网穿透】是钉钉团队推出的一款开源内网穿透工具,旨在帮助用户解决在内网环境下访问外部网络或者让外部网络访问内网服务的问题。内网穿透,也称为NAT穿透,是一种网络技术,用于允许位于内部网络(通常无法...

    web应用开发技术 课件

    本课件“13333-Web应用开发技术-电子教案”旨在为学习者提供全面而深入的Web应用开发知识体系。 首先,Web应用的基本架构通常包括客户端(浏览器)和服务器端两部分。客户端主要负责用户交互,通过HTML、CSS和...

    python常用库(带源码、详细解释、效果图!!!pandas、Matplotlib、爬虫相关的request库和bs4等。)

    print("{:.1f}".format(0.13333)) # 使用round()函数进行四舍五入 print(round(0.13333, 1)) # 使用格式化字符串直接嵌入变量和格式化选项 print('{0}{1:.2f}'.format('Pi=', 3.1415)) ``` 以上知识点涵盖了...

    混凝土行业设备.docx

    这些设备符合GB/T13333-2021《商品混凝土泵》和JGJ/T10-95《商品混凝土泵送施工技术规程》的技术标准,同时也满足国家环保要求。 设备特点方面,液压系统采用了德国力士乐公司的主油泵,具有恒功率控制,确保高可靠...

    矿山合作开发热门协议书_0.doc

    在此案例中,乙方拥有合法的矿权,面积约20亩,具体坐标明确,合作项目占地面积约为13333.4平方米。这些详细信息对于界定合作范围和避免权属纠纷至关重要。 其次,协议书规定了合作开发方式。合作期限设定为一定...

    财务管理试题(卷)5套(附答案解析).doc

    这里的机会成本 = (100000/最佳持有量) * 200 * 10% / 360,转换成本 = 最佳持有量 / (最佳持有量/200) * 200,计算得最佳现金持有量 = 13333.33元,机会成本 = 833.33元,转换成本 = 833.33元,最低现金相关总成本 ...

    年产5000吨火锅底料生产项目环境影响报告表

    该项目位于眉山市仁寿县文林工业园区B区,占地面积13333.73平方米,建筑面积9531.71平方米,总投资5500万元,其中环保投资181万元,占总投资的3.29%。项目计划新建一条年产能为5000吨的火锅底料生产线,以满足市场...

    年加工3万吨食用植物油生产线项目.doc

    项目占地13333平方米,总建筑面积6618平方米,包括办公楼、标准化厂房、仓库、宿舍楼以及配套设施如食堂、变电所、锅炉房和绿化工程。预计总投资1422.21万元,其中环保投资42万元,占总投资的3.0%,体现了公司在环保...

    百分数的应用复习题.doc

    设现在价格为x,则原价为x / 75% = x / 0.75,所以现在10000元对应的原价为10000 / 0.75 = 13333.33元。 4. 求解比例问题: 在修路的问题中,我们可以通过比例关系来解决问题。例如,第一个B问题,设公路总长为x米...

    建设项目基本情况南大港产业园区管理委员会.doc.pdf

    项目占地13333.33平方米,属仓储业和服务业类别,具体为G59其他仓储业及O81其他服务业。项目总投资4200万元,环保投资109万元,占总投资的2.5%。 【建设内容与规模】 项目计划新建建筑面积8500平方米,包括8座950...

    数据分析1

    在示例中,数据经过Mapper处理后,形成了键值对,如“13333-20181010”表示电话ID和日期,“1”表示通话次数,“10”表示通话时长,然后Reduce阶段将相同键的值聚合在一起,生成最终的汇总结果。 在数据分析过程中...

    人教版2017年八年级物理压强单元测试题.doc

    12. 血压与水银柱高度关系:100mmHg的收缩压相当于约13333帕的压强。 13. 抽气实验:抽气前气球内的气体压强大于大气压;抽气时气球膨胀,表明其内部气体压强大于瓶内气体压强,因此瓶内气体压强小于大气压。 14. ...

    C#文件剪切工具源码

    CoFilesShear_ae75e0e0-c937-48b7-86e7-d49ac13333ec可能是一个项目文件或者编译后的可执行文件,用户可以通过它来运行或查看工具的运行效果。 总的来说,这个C#文件剪切工具源码的学习和分析将涵盖C#语言基础、...

    变频器说明书系列-CAT1333(BFV5)-EN.pdf

    其中的Bulletin13333/4标识可能是指该型号变频器的具体子类或变种型号,而20HP则是指该变频器所能驱动的电机的最大功率。 手册中的一个重要部分是关于用户的重要信息说明。由于变频器的种类繁多以及其与机电设备...

    Python程序设计课后习题答案.pdf

    2. `(a + b + c)**3`对应(13333)。 3. `3*a + b + c`对应3a + b + c。 对于特定的Python表达式编写要求: 1. 将整数k转换为实数:`float(k)` 2. 求实数x的小数部分:`x - int(x)` 3. 求正整数m的百位数字:`(m // ...

Global site tag (gtag.js) - Google Analytics