码迷,mamicode.com
首页 > Web开发 > 详细

Jquery框架

时间:2015-08-02 18:07:01      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

一:什么是Jquery框架?

jQuery是一套跨浏览器的JavaScript函式库,简化了HTML和JavaScript之间的操作.是一个兼容多浏览器的javascript库。

二、jQuery概述:

jQuery是一个优秀的JavaScript框架

主要提供如下功能:

  访问页面框架的局部

  修改页面的表现

  更改页面的内容

  响应事件

  为页面添加动画

  与服务器异步交互

  简化常用的JavaScript操作

 优点:

1、jQuery实现脚本与页面的分离

在HTML代码中,我们还经常看到类似这样的代码:

  1. <form id="myform" onsubmit=return validate();" > 

即使validate()函数可以被放置在一个外部文件中,实际上我们依然是把页面与逻辑和事件混杂在一起。jQuery让你可以将这两部分分离。借助于jQuery,页面代码将如下所示:

  1. <form id="myform"> 

接下来,一个单独的JS文件将包含以下事件提交代码:

  1. $("myform").submit(function() {  
  2. ...your code here  
  3. )} 

这样我们可以实现灵活性非常强的清晰页面代码。jQuery让JavaScript代码从HTML页面代码中分离出来,就像数年前CSS让样式代码与页面代码分离开一样。

2、最少的代码做最多的事情

最少的代码做最多的事情,这是jQuery的口号,而且名副其实。使用它的高级selector,开发者只需编写几行代码就能实现令人惊奇的效果。开发者无需过于担忧浏览器差异,它除了还完全支持Ajax,而且拥有许多提高开发者编程效率的其它抽象概念。jQuery把JavaScript带到了一个更高的层次。以下是一个非常简单的示例:

  1. $("p.neat").addClass("ohmy").show("slow");  

通过以上简短的代码,开发者可以遍历“neat”类中所有的<p>元素,然后向其增加“ohmy”类,同时以动画效果缓缓显示每一个段落。开发者无需检查客户端浏览器类型,无需编写循环代码,无需编写复杂的动画函数,仅仅通过一行代码就能实现上述效果。

3、性能

在大型JavaScript框架中,jQuery对性能的理解最好。尽管不同版本拥有众多新功能,其最精简版本只有18KB大小,这个数字已经很难再减少。jQuery的每一个版本都有重大性能提高。本篇文章讲的是jQuery未经过任何优化的原始速度。如果将其与新一代具有更快JavaScript引擎的浏览器(如火狐3和谷歌Chrome)配合使用,开发者在创建富体验Web应用时将拥有全新速度优势。

4、它是一个“标准”

之所以使用引号,是以为jQuery并非一个官方标准。但是业内对jQuery的支持已经非常广泛。谷歌不但自己使用它,还提供给用户使用。另外戴尔、新闻聚合网站Digg、WordPress、Mozilla和许多其它厂商也在使用它。微软甚至将它整合到Visual Studio中。如此多的重量级厂商支持该框架,用户大可以对其未来放心,大胆的对其投入时间。

5、插件

基于jQuery开发的插件目前已经有大约数千个。开发者可使用插件来进行表单确认、图表种类、字段提示、动画、进度条等任务。jQuery社区已经成长为一个生态系统。这一点进一步证明了上一条理由,它是一个安全的选择。而且,jQuery正在主动与“竞争对手”合作,例如Prototype。它们似乎在推进JavaScript的整体发展,而不仅仅是在图谋一己之私。

6、节省开发者学习时间

当然要想真正学习jQuery,开发者还是需要投入一点时间,尤其是如果你要编写大量代码或自主插件的话,更是如此。但是,开发者可以采取“各个击破”的方式,而且jQuery提供了大量示例代码,入门是一件非常容易的事情。我建议开发者在自己编写某类代码前,首先看一下是否有类似插件,然后看一下实际的插件代码,了解一下其工作原理。简而言之,学习jQuery不需要开发者投入太多,就能够迅速开始开发工作,然后逐渐提高技巧。

7、让JavaScript编程变得有趣

我发现使用jQuery是一件充满乐趣的事情。它简洁而强大,开发者能够迅速得到自己想要的结果。它解决了许多JavaScript问题和难题。我过去曾讨厌JavaScript编程,但现在却非常喜欢它。通过一些基础性的改进,开发者可以真正去思考开发下一代Web应用,不再因为语言或工具的差劲而烦恼。我相信它的“最少的代码做最多的事情”口号。

缺点:

1.不能向后兼容。每一个新版本不能兼容早期的版本。举例来说,有些新版本不再支持某些selector,新版jQuery却没有保留对它们的支持,而只是简单的将其移除。这可能会影响到开发者已经编写好的代码或插件。

2.插件兼容性。与上一点类似,当新版jQuery推出后,如果开发者想升级的话,要看插件作者是否支持。通常情况下,在最新版jQuery版本下,现有插件可能无法正常使用。开发者使用的插件越多,这种情况发生的几率也越高。我有一次为了升级到jQuery 1.3,不得不自己动手修改了一个第三方插件。

在同一页面上使用多个插件时,很容易碰到冲突现象,尤其是这些插件依赖相同事件或selector时最为明显。这虽然不是jQuery自身的问题,但却又确实是一个难于调试和解决的问题。

3.jQuery的稳定性。它没有让我的浏览器崩溃,我这儿指的是其版本发布策略。jQuery 1.3版发布后仅过数天,就发布了一个漏洞修正版1.3.1。他们还移除了对某些功能的支持,可能会影响许多代码的正常运行。我希望类似修改不要再出现。

4.在大型框架中,jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

如果你还在犹豫是否要学习一个JavaScript框架,并困惑于选择哪一个框架,那么我推荐你选择jQuery。这并非说其它框架不好,只是jQuery可能是最稳妥和最具回报性的选择。

三、  jQuery选择器

1.基本选择器

$(‘a’); //这个选择器匹配所有超链接元素

$(‘#specialID’); //这个选择器匹配idspecialID的元素

$(‘.specialClass’); //这个选择器匹配拥有CSSspecialClass的元素

$(‘a#specialID.specialClass ’); //匹配idspecialID、拥有CSSspecialClass的超链接元素

$(‘p a.specialClass’); //这个选择器匹配拥有CSSspecialClass、在<p>元素中声明的超链接元素。

 

2.子选择器

有时我们只想选择某元素的子节点。

例如,现在有这样一段HTML代码:

<ul><a href=#>link1</a><li><a href=#>link2</a></li></ul>

我们想要选择<ul>标记下的“link1”超链接。利用基本CSS选择器,我们尝试选择器:$(ul a);

不幸的是,“link1”“link2”超链接都会被选中,因为“link2”也是<ul>的后代节点。

更高级的解决办法是利用子选择器,父节点与直接子节以“>”符号隔开,如下所示:

$(‘ul > a’);    这个选择器只匹配<ul>标记下的“link 1”超链接。

 

3.特征选择器

$(‘a[href$=.com]‘); //匹配所有以“.com”作为href属性结尾的超链接。

$(‘a[href*=sina]’); //匹配所有href属性包含“sina”字符串的超链接

$(‘form[method]’);//获取所有包含method属性的表单

$(‘input[type=text]’);//获取所有文本框

 

4.位置选择器

有时候必须根据元素在页面上的位置或者其他元素的关系去选择元素。也许你想要选择页面上的第一个链接、奇数或偶数的段落,或者每个列表的最后一项。jQuery支持实现这个具体选择的机制。

$(‘a:first‘);

$(‘p:odd‘); //代表选择器匹配所有序数为奇数的段落元素

$(‘p:even‘); //代表选择器匹配所有序数为偶数的段落元素

$(‘li:last-child‘); //选择li父节点的最后一个子元素

 

选择器

描述

:first

匹配指定的第一个元素

:last

匹配指定的最后一个元素

:first-child

匹配指定元素的父元素的第一子元素

:last-child

匹配指定元素的父元素的最后一个子元素

:only-child

返回没有兄弟节点的所有元素

:nth-child(n)

第n个子节点(n从1开始)。li:nth-child(2)返回每个列表的第二个<li>元素

:nth-child(even|odd)

奇数或偶数的子节点。li:nth-child(even)返回每个序列的偶数子结点

:nth-child(Xn+Y)

根据传入的公式计算第n个子节点。如果Y为0,则忽略Y,n从0开始,且X不等于0。li:nth-child(3n)返回位置在3的整数倍数的元素,而li:nth-child(5n+1)返回5的倍数的元素的下一项

:even或 :odd

页面范围内偶数或奇数的匹配元素。li:even返回全部偶数<li>项

:eq(n)

第n个匹配元素(n从0开始)

:gt(n)

匹配从第n(不包括n)个元素之后的所有元素

:lt(n)

匹配从第n(不包括n)个元素之前的所有元素

 

 

5.利用元素关系获取元素集合 

jQuery提供了一系列方法允许根据元素集合中某元素与其他元素的层次关系获取新的元素集合

 

 

方法

描述

children()

返回指定包装集每个元素的所有子节点的包装集。

content()

查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容。

next()

返回包装集中每个元素紧邻的后面的同辈元素的包装集。

nextAll()

返回当前元素之后所有的同辈元素。

parent()

取得一个包含着所有匹配元素的唯一父元素的包装集。

parents()

取得一个包含着所有匹配元素的祖先元素的包装集(不包含根元素)。

prev()

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的包装集。

prevAll()

查找当前元素之前所有的同辈元素。

siblings()

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

 

 

 

Jquery框架

标签:

原文地址:http://www.cnblogs.com/JJFF/p/4696347.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!