JQuery文档

一、  认识jQuery

随着Web 2.0的兴起,JavaScript越来越受到重视,一系列的JavaScript库也蓬勃发展起来。从早期的Prototype、Dojo到2006年的jQuery,再到2007年的Ext JS,互联网正在掀起一场JavaScript风暴。jQuery以其独特优雅的姿态,始终处于这场风暴的中心,受到越来越多的人的追捧。

1.1           JavaScript和JavaScript库

1.1.1       JavaScript简介

在正式介绍jQuery之前,有必要先了解一下JavaScript。

JavaScript是Netscape公司开发的一种脚本语言(scripting language)。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系,使网页包含更多活跃的元素和更加精彩的内容。JavaScript自身存在3个弊端,即复杂的文档对象模型(DOM),不一致的浏览器实现和缺乏便捷的开发、调试工具。

正当JavaScript从开发者的视线中渐渐隐去时,一种新型的基于JavaScript的Web技术-Ajax(AsynchronousJavaScript And XML,异步的JavaScript和XML)诞生了。而使人们真正认识到Ajax技术的强大的导火索是Google公司推出的一系列新型Web应用,例如Gmail、Google Suggest和Google Map等。互联网基于JavaScript的应用也越来越多,使JavaScript不再是一种仅仅用于制作Web页面的简单脚本。

1.1.2  JavaScript库作用及对比

为了简化JavaScript的开发,一些JavaScript库诞生了。JavaScript库封装了很多预定义的对象和实用函数,能帮助使用者轻松建立有高难度交互的Web2.0特性的富客户端页面,并且兼容各大浏览器。下面是目前几种流行的JavaScript库的介绍和对比。

Prototype:Prototype是最早成型的JavaScript库之一,对JavaScript的内置对象(例如String对象、Array对象等)做了大量的扩展。现在还有很多项目使用Prototype。Prototype可以看做是把很多好的、有用的JavaScript的方法组合在一起而形成的JavaScript库。使用者可以在需要的时候随时将其中的几段代码抽出来放进自己的脚本里。但是由于Prototype成型年代早,从整体上对于面向对象的编程思想把握不是很到位,导致了其结构的松散。不过现在Prototype也在慢慢改进。

Dojo:Dojo的强大之处在于Dojo提供了很多其他JavaScript库所没有提供的功能。例如离线存储的API、生成图标的组件、基于SVG/VML的矢量图形库和Comet支持等等。Dojo是一款非常适合企业级应用的JavaScript库,并且得到了IBM、SUN和BEA等一些大公司的支持。但是Dojo的缺点也是很明显的:学习曲线陡,文档不齐全,最严重的就是API不稳定,每次升级都可能导致已有的程序失效。但是自从Dojo的1.0.0版出现以后,情况有所好转。Dojo还是一个很有发挥潜力的库。

YUI:YUI是由Yahoo公司开发的一套完备的、扩展项良好的富交互网页程序工具集。YUI封装了一系列比较丰富的功能,例如DOM操作和Ajax应用等,同时还包括了几个核心的CSS文件。该库本身文档极其完备,代码编写也非常规范。

Ext JS:Ext JS常简称为Ext,原本是对YUI的一个扩展,主要用于创建前端用户界面,如今已经发展到可以利用包括jQuery在内的各种JavaScript框架作为基础库,而Ext作为界面的扩展库来使用。Ext可以用来开发富有华丽外观的富客户端应用,能使B/S应用更加具有活力。但是由于Ext侧重于界面,本身比较臃肿,所以使用之前请先权衡利弊。另外,需要注意的事,Ext并非完全免费,如果用于商业用途,需要付费获得授权许可。

MooTools:MooTools是一套轻量、简洁、模块化和面向对象的JavaScript框架。MooTools的语法几乎和Prototype一样,但却提供了更为强大的功能、更好的扩展性和兼容性。其模块化思想非常优秀,核心代码大小只有8KB。无论用到哪个模块都可及时导入,即使是完整版大小也不超过160KB。MooTools完全彻底的面向对象的编程思想,语法简洁直观,文档完善,是一个非常不错的JavaScript库。

jQuery:jQuery同样是一个轻量级的库,拥有强大的选择器,出色的DOM操作,可靠的事件处理、完善的兼容性和链式操作等功能。这些优点吸引了一批批的JavaScript开发者去学习它、研究它。

总之,每个JavaScript库都有各自的优点和缺点,同时也有各自的支持者和反对者。自从jQuery诞生那天起,其关注度就一直在稳步上升,jQuery已经逐渐从其他JavaScript库中脱颖而出,成为Web开发人员的最佳选择。

1.2 jQuery

1.2.1  jQuery简介

jQuery是继Prototype之后有一个优秀的JavaScript库,是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站设计维护人员。团队中由3个核心人物:John Resig、Brandon Aaron 和 Jorn Zaefferer。

jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之,无论是网页设计师、后台开发者、业余爱好者是项目管理者,也无论是JavaScript初学者还是JavaScript高手,都又足够都的理由去学习jQuery。

1.2.2  jQuery的优势

jQuery强调的理念是写的少,做得多(write less,do more)。jQuery独特的选择器、链式的DOM操作、事件处理机制和封装完善的Ajax都是其他JavaScript库望尘莫及的。概括起来,jQuery有以下优势。

(1)轻量级。

jQuery非常轻巧,采用Dean Edwards编写的Parker压缩后,大小不到30KB。如果使用Min版并且在服务器启用Gzip压缩后,大小只有18KB。

(2)强大的选择器。

jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器。由于jQuery支持选择器这一特性,因此有一定CSS经验的开发人员可以很容易地切入到jQuery的学习中来。

(3)出色的DOM操作的封装。

jQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery轻松地完成各种原本非常复杂的操作,让JavaScript新手也能写出出色的程序。

(4)可靠的事件处理机制

吸取了JavaScript专家Dean Edwards编写的事件处理函数的精华,使得jQuery在处理事件绑定的时候相当可靠。在预留退路(graceful degradation)、循序渐进以及非入侵式(Unobtrusive)编程思想方法,jQuery也做的非常不错。

(5)完善的Ajax

jQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

(6)不污染顶级变量。

jQuery只建立一个名为jQuery的对象,其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权,绝对不会污染其他的对象。该特性使jQuery可以与其他JavaScript库共存,在项目中放心的引用而不需要考虑到后期可能的冲突。

(7)出色的浏览器兼容性。

作为一个流行的JavaScript库,浏览器的兼容性是必须具备的条件之一。jQuery能够在IE6.0+、FF2+、Safari2.0+和Opera9.0+下正常运行。jQuery同时修复了一些浏览器之间的差异,是开发者不必在开展项目前建立浏览器兼容性。

(8)链式操作方式。

jQuery中最有特色的莫过与它的链式操作方式——即对发生在同一个jQuery对象上的一组动作,可以直接连接写而无需重复获取对象。这一特点使jQuery的代码无比优雅。

(9)隐式迭代

当用jQuery找到带有“.myClass”类的全部元素,然后隐藏它们时,无需循环遍历每一个返回的元素。相反,jQuery里的方法都被设计成自动操作对象的对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,从而大幅地减少了代码量。

(10)行为层与结构层的分离。

开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。这种将行为层与结构层完全分离的思想,可以使jQuery开发人员和HTML或其他页面开发人员各司其职,摆脱过去开发冲突或个人单干的开发模式。同时,后期维护也非常方便,不需要在HTML代码中寻找某些函数和重复修改HTML代码。

(11)丰富的插件支持。

jQuery的易扩展性,吸引了来自全球的开发者来编写jQuery的扩展插件。目前已经有超过几百种的官方插件支持,而且还不断有新插件面世。

 (12)完善文档。

jQuery的文档非常丰富,现阶段多为英文文档,中文文档相对较少。很多热爱jQuery团队都在努力完善jQuery的中文文档,例如jQuery的中文API,图灵教育的翻译的《Learning jQuery》等等。

(13)开源。

jQuery是一个开源的产品,任何人都可以自由地使用并提出改进意见。

1.3 jQuery代码的编写

JQuery不需要安装,把下载的jquery-1.4.1.js放到网站上的一个公共的位置,想要在某各页面上使用jQuery时,只需要在相关的HTML文档中引入该库文件即可。在实际项目中,读者可以根据实际需要调整jQuery库路径。

1.3.1  第一个jQuery程序(Hello World!)

在开始编写第一个jQuery程序之前,首先应该明确一点,在jQuery库中,$就是jQuery的一个简写形式,例如$(“#foo”)和jQuery(“#foo”)是等价的,如果没有特殊说明,程序中的$符号都是jQuery的一个简写形式。

第一个jQuery程序的主要代码如下:

      

运行结果如图1-1所示。

图1-1 输出Hello World

在上面的代码中有一个陌生的代码片段,如下:

$(document).ready(function(){

//…………

       });

这段代码的作用类似于传统JavaScript中的window.onload方法,不过与window.onload还是有些区别。表格1-1对它们进行了简单对比。

表1-1  window.onload与$(document).ready()的对比

 

Window.onload

$(document).ready();

执行时机

必须等待网页中所有内容加载完毕后(包含图片)才能执行

网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完

编写个数

不能同时编写多个以下代码无法正确执行:window.οnlοad=function(){

    alert("test1")

};

window.οnlοad=function(){

   alert("test2")

};

结果只会输出“test2”

能同时编写多个

以下代码正确执行

$(document).ready(function(){

         alert("Hello World!");

});

$(document).ready(function(){

         alert("Hello again!");

});

结果两次都输出

简化写法

$(document).ready(function(){

         …………….

})

简写成:

$( function(){

……………..

})

1.4 jQuery对象和DOM对象

1.4.1  DOM对象和jQuery对象简介

刚开始学习jQuery,经常分辨不清哪些是jQuery对象,哪些是DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系。

1.     DOM对象

DOM(Document ObjectModel,文档对象模型),每一份DOM都可以表示成一棵树。下面来构建一个基本的网页,网页代码如下:

 

初始化效果如图1-2所示。

可以把上面的HTML结构描述成一棵DOM树,如图1-3所示。


图1-2 基本网页运行结果

图1-3 网页元素可看成一棵树


在这棵DOM树中,

    以及
      的3个
    • 子节点都是DOM元素节点。可以通过JavaScript中的getElementByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法,

      示例代码如下:

      var domObj =document.getElementsById("id"); // Dom对象

      var ObjHTML = domObj.innerHTML;  //使用JavaScript中的innerHTML方法

      2.     jQuery对象

      jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。例如:

      $("#foo").html();//获取id为foo的元素内的html代码。

      这段代码等同于:

      document.getElementById("foo").innerHTML;

      在jQuery对象中无法使用DOM对象的任何方法。例如$("#id").innerHTML和$("#id").checked之类的写法都是错误的,可以用$("#id").html()和$("#id").attr("checked")之类的jQuery方法代替。同样,DOM对象也不能使用jQuery里的方法,例如document.getElementById("id").html()也会报错,只能用document.getElementById("id").innerHTML语句。

      1.4.2  jQuery对象和DOM对象的相互转换

      在讨论jQuery对象和DOM对象的相互转换之前,先约定好定义变量的风格。如果获取的对象是jQuery对象,那么在变量前面加上$,例如:

      var $variable = jQuery对象;

      如果获取的是DOM对象,则定义如下:

      var varible = DOM对象;

      1.     jQuery对象转成DOM对象

      jQuery对象不能使用DOM中的方法,但如果对jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法,不得不适用DOM对象的时候,有以下处理方法。

      jQuery提供了两种方法将一个jQuery对象爱那个转换成DOM对象,即[index]和get(index).

      (1)jQuery对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象。jQuery代码如下:

      var $cr = $("#cr");   //jQuery对象;

      var cr = $cr[0];      //DOM对象;

      alert(cr.checked);

      (2)另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象。jQuery代码如下:

      var $cr=$("#cr");   //jQuery对象

      var cr = $cr.get(0);  //DOM对象

      alert(cr.checked);    //检测这个checkbox是否被选中了

      2. DOM对象转换成jQuery对象

      对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。方式为 $(DOM对象)。

      jQuery代码如下:

      var cr=document.getElementById("cr");  //DOM对象

      var $cr = $(cr);                         //jQuery对象

      转换后,可以任意使用jQuery中的方法。

      通过以上方法,可以任意地相互转换jQuery对象和DOM对象。

      最后再次强调,DOM对象才能使用DOM中的方法,jQuery对象不可以使用DOM中的方法,但jQuery对象提供了一套更加完善的工具用于操作DOM,关于jQuery的DOM操作将在后面进行详细讲解。

      注意:平时用到的jQuery对象都是通过$()函数制造出来的,$()函数就是一个jQuery对象的制造工厂。

      1.4.3  实例研究

      下面举个简单的例子,来加深对jQuery对象和DOM对象的理解。

      有些论坛在用户注册的时候,必须先要同意论坛的规章制度,才可以进行下一步操作。

      编写一段简单的代码来实现这个功能。新建一个空白页面,然后添加以下HTML代码:

      HTML代码初始效果如图1-4所示。

      图1-4 初始效果

      然后编写JavaScript部分。前面讲过,没有特殊声明,jQuery库是默认导入的。

      通过$("#cr")获取到复选框元素,然后通过判断复选框是否被选中,来执行下一步操作。

      首先,用DOM方式来判断复选框是否被选中,代码如下:

      $(document).ready(function(){

            var$cr = $("#cr");  //jQuery对象

            varcr = $cr.get(0); //DOM对象,获取 $cr[0]

            $cr.click(function(){

                   if(cr.checked){//DOM方式判断

                          alert("感谢你的支持!你可以继续操作!");

                   }

            })

      });

      实现上述代码后,选中“我已经阅读了上面制度”复选框,如图1-5所示。

       

      图1-5 选中选项后的效果图

      换一种方式,使用jQuery中的方法来判断选项是否被选中,代码如下:

      $(document).ready(function(){

            var$cr = $("#cr");  //jQuery对象

            $cr.click(function(){

                   if($cr.is(":checked")){    //jQuery方式判断

                          alert("感谢你的支持!你可以继续操作!");

                   }

            })

      });

      上面的例子简单地演示了DOM对象和jQuery对象的不同,但最终效果一样的。

      二、  jQuery选择器

      选择器是jQuery的根基,在jQuery中,对事件的处理、遍历DOM和Ajax操作都依赖于选择器。如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。

      2.1 jQuery选择器是什么

      jQuery中的选择器完全继承了css的风格。利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为他们添加相应的行为,而无需担心浏览器是否支持这一选择器。学会使用选择器是学习jQuery的基础,jQuery的行为规则都必须在获取到元素后才能生效。

      下面来看一个简单的例子,代码如下:

      点击我

      本段代码的作用是为

      元素设置一个onclick事件,当单击此元素时,会弹出一个对话框。

      像上面这样把JavaScript代码和html代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以建议使用下面的方法,代码如下:

      jQuery Demo

      此时,可以对css的写法和jQuery的写法进行比较。

      Css获取到元素的代码如下:

      .demo{                                     //给class为demo的元素添加样式

            …….

      }

      jQuery获取到元素的代码如下:

      $(“.demo”{                                              //给class为demo的元素添加行为

      …………

      jQuery选择器的写法与css选择器的写法十分类似,只不过两者的作用效果不同,css选择器找到元素后是添加样式,而jQuery选择器找到元素后是添加行为。需要特别说明的是,jQuery中涉及操作css样式部分比单纯的css功能更为强大,并且拥有跨浏览器的兼容性。

      2.2 jQuery选择器的优势

      1.   简洁的写法

      $()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中也不例外。其中,$(“#ID”)用来代替document.getElementById()函数,即通过ID获取元素;$(“tagName”)用来代替document.getElementByTagName()函数,即通过标签名获取HTML元素。

      2.支持css1到css3选择器

      jQuery选择器支持css1,css2的全部和css3的部分选择器,同时他也有少量独有的选择器,因此对拥有一定css基础的开发人员来说,学习jQuery选择器是件非常容易的事,而对没有接触过css技术的开发人员来说,在学习jQuery选择器的同时也可以掌握css选择器的基本规则。

      使用css选择器时,开发人员需要考虑是否支持某些选择器。而在jQuery中,开发人员则可以放心的使用jQuery选择器而无需考虑浏览器是否支持这些选择器。

      3.完善的处理机制

      使用jQuery选择器不仅比用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误。看下面这个例子,代码如下:

      test

      运行上面的代码,浏览器就会报错,原因是网页中没有id为“tt”的元素。

      改进后的代码如下:

      test

      这样就可以避免浏览器报错,但如果要操作的元素很多,可能对每个元素都要进行一次判断,大量重复的工作会使开发人员感到厌倦,而jQuery在这方面问题上的处理是非常不错的,即使用jQuery获取网页中不存在的元素也不会报错,看下面的例子,代码如下:

      test

      有了这个预防措施,即使以后因为某种原因删除网页上某个以前使用过的元素,也不用担心这个网页的JavaScript代码会报错。

      需要注意的是,$(“#tt”)获取的永远是对象,即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时,不能使用以下代码:

      If($(“#tt”)){

            //dosomething

      }

      而应该根据获取到元素的长度来判断,代码如下:

      if($(“tt”).length>0){

            //dosomething

      }

      或者转换成DOM对象来判断,代码如下:

      If($(“tt”)[0]){

            //dosomething

      }

      2.3 jQuery选择器

      jQuery选择器分为基本选择器,层次选择器,过滤器选择器和表单选择器。在下面的章节中将分别用不同的选择器来查找HTML代码中的元素并对其进行简单的操作。为了能更清晰,直观的讲解选择器,首先需要设计一个简单的页面,里面包含各种

      元素和元素,然后使用jQuery选择器来匹配元素并调整他们的样式。

      新建一个空白页面,输入以下html代码:

      然后用CSS对这些元素进行初始化大小和背景颜色的设置,CSS代码如下:

      根据以上HTML+CSS代码,可以生成图2-1所示的页面效果。

      图2-1 初始状态

      2.3.1  基本选择器

      基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能使用一次,class允许重复使用。基本选择器的介绍说明如表2-1所示。

      表2-1 基本选择器

      选择器

      描述

      返回

      示例

      #id

      根据给定的id匹配一个元素

      单个元素

      $(“#test”)选取id为test的元素

      .class

      根据给定的类名匹配元素

      集合元素

      $(“.test”)选取所有class为test的元素

      element

      根据给定的元素名匹配元素

      集合元素

      $(“p”)选取所有的

      元素

      *

      匹配所有元素

      集合元素

      $(“*”)选取所有的元素

      selector1, selector2,……, selectorN

      将每一个选择器匹配到的元素合并后一起返回

      集合元素

      $(“div,span,p.myClass”)选取所有

      ,和拥有class为myClass的

      标签的一组元素

      可以使用这些基本选择器来完成绝大多数的工作。下面用它们来匹配刚才HTML代码中的

      等元素并进行操作(改变背景色),示例如表2-2所示。

      表2-2 基本选择器示例

      功能

      代码

      执行后

      改变id为one的元素的背景色

      $(“#one”).css(“background”,”#bbffaa”);

      改变class为mini的所有元素的背景色

      $(“.mini”).css(“background”,”#bbffaa”);

      改变所有元素名是

      的所有元素的背景色

      $(“div”).css(“background”,”bbffaa”);

      改变所有元素的背景色

      $(“*”).css(“background”,”bbffaa”);

      改变所有的元素和id为two的元素的背景色

      $(“span,#two”).css(“background”,”bbffaa”);

      2.3.2  层次选择器

      如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和兄弟元素等,那么层次选择器是一个非常好的选择。层次选择器的介绍说明如表2-3所示。

      表2-3 层次选择器

      选择器

      描述

      返回

      示例

      $(“ancestor  descendant”)

      选取ancestor元素里的所有descendant(后代元素)

      集合元素

      $(“div span”)选取

      里的所有的元素

      $(“parent>child”)

      选取parent元素下的child(子)元素

      集合元素

      $(“div > span”)选取

      元素下元素名是的子元素

      $(“prev+next”)

      选取紧接在prev元素后的next元素

      集合元素

      $(“.one+div”)选取class为one的下一个

      元素

      $(“prev~siblings”)

      选取prev元素之后的所有siblings元素

      集合元素

      $(“#two~div”)选择id为two的元素后面的所有

      兄弟元素

      继续沿用刚才例子中的HTML和CSS代码,然后用层次选择器来对网页中的

      等元素进行操作,示例如表2-4所示。

      表2-4 层次选择器示例

      功能

      代码

      执行后

      改变内所有

      的背景色

      $(“body div”).css(“background”,”#bbffaa”);

      改变内子

      元素的背景色

      $(“body>div”) .css(“background”,”#bbffaa”);

      改变class为one的下一个

      元素背景色

      $(“.one+div”) .css(“background”,”#bbffaa”);

      改变id为two的元素后面的所有

      兄弟元素的背景色

      $(“#two~div”) .css(“background”,”#bbffaa”);

      在层次选择器中,第1个和第2个选择器比较常用,而后面两个因为在jQuery里可以用更加简单的方法代替,所以使用的几率相对少些。

      可以用next()方法来代替$(“prev+next”)选择器,$(“.one+div”)就等价于$(“.one”).next(“div”)。可以用nextAll()方法来代替$(“prev~siblings”)选择器,$(“#prev~div”)就等价于$(“#prev”).nextAll(“div”)。

      在此将siblings()方法与$(“prev~siblings”)选择器进行比较。

      $(“#prev~div”)选择器只能选择”#prev”元素后面的同辈

      元素。而siblings()方法与前后位置无关,只要是同辈元素节点就都能匹配。

      $(“#prev~div”).css(“background”,”#bbffaa”);//选取#prev之后的所有同辈div元素

      $(“#prev”).nextAll(“div”).css(“background”,”#bbffaa”);//同上

      $(“#prev”).siblings(“div”).css(“background”,”#bbffaa”);//选取#prev所有的同辈div元素,无论前后位置

      2.3.3  过滤选择器

      过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

      1.     基本过滤选择器

      表2-5 基本过滤选择器

      选择器

      描述

      返回

      示例

      :first

      选取第一个元素

      单个元素

      $(“div:first”)选取所有

      元素中第一个
      元素

      :last

      选取最后一个元素

      单个元素

      $(“div:last”)选取所有

      元素中最后一个
      元素

      :not(selector)

      去除所有与给定选择器匹配的元素

      集合元素

      $(“input:not(.myClass)”)选取class不是myClass的元素

      :even

      选取索引是偶数的所有元素,索引从0开始

      集合元素

      $(“input:even”)选取索引是偶数的元素

      :odd

      选取索引是奇数的所有元素,索引从0开始

      集合元素

      $(“input:odd”)选取索引是奇数的元素

      :eq(index)

      选取索引等于index的元素(index从0开始)

      单个元素

      $(“input:eq(1)”)选取索引等于1的元素

      :gt(index)

      选取索引大于index的元素(index从0开始)

      集合元素

      $(“input:gt(1)”)选取索引大于1的元素(注:大于1,而不包括1)

      :lt(index)

      选取索引小于index的元素(index从0开始)

      集合元素

      $(“input:lt(1)”)选取索引小于1的元素(注:小于1,而不包括1)

      :header

      选取所有的标题元素,例如h1,h2,h3等等

      集合元素

      $(“:header”)选取网页中所有的

      ,

      ……

      :animated

      选取当前正在执行动画的所有元素

      集合元素

      $(“div:animated”)选取正在执行动画的

      元素

      接下来,使用这些基本过滤选择器来对网页中的

      等元素进行操作,示例如表2-6所示。

      表2-6 基本过滤选择器示例

      功能

      代码

      执行后

      改变第1个

      元素的背景色

      $(“div:first”).css(“background”,”#bbffaa”);

      改变最后一个

      元素的背景色

      $(“div:last”).css(“background”,”#bbffaa”);

      改变class不为one的

      元素的背景色

      $(“div:not(.one)”).css(“background”,”#bbffaa”);

      改变索引值为偶数的

      元素的背景色

      $(“div:even”).css(“background”,”#bbffaa”);

      改变索引为奇数的

      元素的背景色

      $(“div:odd”).css(“background”,”#bbffaa”);

      改变索引等于3的

      元素的背景色

      $(“div:eq(3)”).css(“background”,”#bbffaa”);

      改变索引值大于3的

      元素的背景色

      $(“div:gt(3)”).css(“background”,”#bbffaa”)

      改变索引值小于3的

      元素的背景色

      $(“div:lt(3)”).css(“background”,”#bbffaa”);

      改变所有的标题元素,例如:

      ,

      .

      …这些元素的背景色

       $(“:header”).css(“background”,”#bbffaa”);

      改变当前正在执行动画的元素的背景色

      $("#mover").click(function(){  $(this).animate({"width":"+=100", "height": "+=100" }, "slow");        $(":animated").css("background", "#bbffaa");})

      2.     内容过滤选择器

      内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。内容过滤选择器的介绍说明如表2-7所示。

               表2-7 内容过滤选择器

      选择器

      描述

      返回

      示例

      :contains(text)

      选取含有文本内容为text的元素

      集合元素

      $(“div:contains(‘我’)”)选取含有文本“我”的

      元素

      :empty

      选取不包含子元素或者文本的空元素

      集合元素

      $(“div:empty”)选取不包含子元素(文本元素)的

      空元素

      :has(selector)

      选取含有选择器所匹配的元素的元素

      集合元素

      $(“div:has(p)”)选取含有

      元素的

      元素

      :parent

      选取含有子元素或者文本的元素

      集合元素

      $(“div:parent”)选取拥有子元素(包含文本元素)的

      元素

      接下来使用内容过滤选择器来操作页面中的元素,示例如表2-8所示。

      表2-8 内容过滤器示例

      功能

      代码

      执行后

      改变含有文本“di”的

      元素的背景色    

      $(‘div:contains(di)’).css(“background”,”#bbffaa”);

      改变不包含子元素(文本元素)的

      空元素的背景色

      $(‘div:empty’) .css(“background”,”#bbffaa”);

      改变含有class为mini元素的

      元素的背景色    

      $(‘div:has(.mini)’).css(“background”,”#bbffaa”);        

      改变含有子元素(文本元素)的

      元素的背景色

      $(‘div:parent’) .css(“background”,”#bbffaa”);

      3.     可见性过滤器

      可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。可见性过滤选择器的介绍说明如表2-9所示。

      表2-9 可见性过滤选择器

      选择器

      描述

      返回

      示例

      :hidden

      选取所有不可见的元素

      集合元素

      $(“:hidden”)选取所有不可见的元素。包括,

      等元素。如果只想选取元素,可以使用$(“input:hidden”)

      :visible

      选取所有可见的元素

      集合元素

      $(“div:visible”)选取所有可见的

      元素

             在例子中使用这些选择器来操作DOM元素,示例如表2-10所示。

      表2-10 可见性过滤选择器示例

      功能

      代码

      执行后

      改变所有可见的

      元素的背景色

      $(“div:visible”).css(“background” ,”#FF6500”)        

      显示隐藏的

      元素

      $(“div:hidden”) .show(3000);

      在可见性选择器中,需要注意选择器:hidden,它不仅包括样式属性display为“none”的元素,也包括文本隐藏域()和visibility:hidden之类的元素。

      4.     属性过滤选择器

      属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。属性过滤选择器的介绍说明如表2-11所示。

      表2-11 属性过滤选择器

      选择器

      描述

      返回

      示例

      [attribute]

      选取拥有此属性的元素

      集合元素

      $(“div[id]”)选取拥有属性id的元素

      [attribute=value]

      选取属性的值为value的元素

      集合元素

      $(“div[title=test]”)选取属性title为“test”的

      元素

      [attribute!=value]

      选取属性的值不等于value的元素

      集合元素

      $("div[title!=test]”)选取属性title不等于“test”的

      元素(注意:没有属性title的
      元素也会被选取)

      [attribute^ =value]

      选取属性的值以value开始的元素

      集合元素

      $("div[title^=test]")选取属性title以“test”开始的

      元素

      [attribule$=value]

      选取属性的值以value结束的元素

      集合元素

      $("div[title$=test]“)选取属性title以“test”结束的

      元素

      [attribute*=value]

      选取属性的值含有value的元素

      集合元素

      $(“div[title*=test]”)选取属性title含有“test”的

      元素

      [selectorl][selectm2][selectorN]

      用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围

      集合元素

      $(“div[id] [title$=’test’]”)选取拥有属性id,并且属性title以”test”结束的

      元素

      接下来使用属性过滤器来对

      等元素进行操作,示例如表2-12所示。

      表2-12 属性过滤选择器示例

      功能

      代码

      执行后

      改变含有属性title的

      元素的背景色

      $(‘div[title]’).css("background","#bbffaar);

      改变属性title值等于“test”的元素的背景色        

      $(‘div[title=test]’).css(“background”,”#bbffaa”);

      改变属性title值不等于“test”的

      元素的背景色

      $(‘div[title!=test]’).css(“background”,” #bbffaa”);

      改变属性title值以“te”开始的

      元素的背景色

      $(“div[title^=te]”).css(“background”,” #bbffaa”);

      改变属性title值以“est”结束的

      元素的背景色

      $(“div[title$=est]”) .css(“background”,” #bbffaa”);

      改变属性title值含有“es”的

      元素的背景色

      $(“div[title*=es]”).css(“background”, “#bbffaa”);

      改变含有属性id,并且属性title值含有”es”的

      元素的背景色

      $(“div[id][title*=es]”) .css(“background”,” #bbffaa”);

      5.     子元素过滤选择器

      子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂,不过没关系,只要将元素的父元素和子元素区分清楚,那么使用起来也非常简单。另外还要注意它与普通的过滤选择器的区别。

      子元素过滤选择器的介绍说明如表2-13所示。

      表2-13 子元素过滤选择器

      选择器

      描述

      返回

      示例

      :nth-child(index/even/odd/equation)

      选择每个父元素下的第index个子元素或者奇偶元素(indes从1算起)

      集合元素

      :eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0算起的

      :first-child

      选取每个父元素的第1个元素

      集合元素

      :first只返回单个元素,:first-child选择副符将为每个父元素匹配第1个子元素。例如$(“ul li:first-child”);选取每个

        中第1个
      • 元素

      :last-child

      选取每个父元素的最后个元素

      集合元素

      同样,:last只返回单个元素,而:last-child选择符将为每个父元素匹配最后一个子元素 例如$(“ul li:last-child”);选择每个

        最后一个
      • 元素

      :only-child

      如果某个元素是它父元素的唯一的子元素,那么将会被匹配。如果父元素中含有其它元素,则不会被匹配

      集合元素

      $(“ul li:only-child”)在

        中选取是唯一子元素的
      • 元素

      :nth-child()选择器是很用的子元素过滤选择器,详细功能如下。

      (1):nth-child(even)能选取每个父元素下的索引值是偶数的元素。

      (2):nth-child(odd) 能选取每个父元素下的索引值是奇数的元素。

      (3):nth-child(2)能选取每个父元素下的索引值等于2的元素。

      (4):nth-child(3n) 能选取每个父元素下的索引值是3的倍数的元素,(n从0开始)。

      (5):nth-child(3n+1) 能选取每个父元素下的索引值是(3+1)的元素。(n从0开始)

      接下来利用刚才所讲的选择器来改变

      元素的背景色,示例如表2-14所示。

      表2-14 子元素过滤选择器示例

      功能

      代码

      执行后

      改变每个class为one的

      父元素下的第2个子元素的背景色

      $(“div.one  :nth-child(2)”) .css(“background”,”#bbffaa”);

      改变每个class为One的

      父元素下的第1个子元素的背景色

      $(“div.one :first-child).css(“background”,”#bbffaa”);

      改变每个class为One的

      父元素下的最后一个子元素的背景色

      $(“div.one :last-child“).css(“background”,”#bbffaa”);

      改变每个class为One的

      父元素下只有一个子元素,那么则改变这个子元素的背景色

      $(“div.one :only-child”).css(“background”,”#bbffaa”);

      6.     表单对象属性过滤选择器

      此选择器主要是对所选择的表单元素进行过滤,例如选择被选中的下拉框,多选框等等。表单对象属性过滤选择器的介绍说明如表2-15所示。

      表2-15 表单对象属性过滤选择器

      选择器

      描述

      返回

      示例

      :enabled

      选取所有可用元素

      集合元素

      $(“#forml  :enabled”);选取id为“forml”的表单内的所有可用元素

      :disabled

      选取所有不可用元素

      集合元素

      $(“#form2  :disabled”)选取id为“form2” 的表单内的所有不可用元素

      :checked

      选取所有被选中的元素(单选框,复选框)   

      集合元素

      $(“input:checked”);选取所有被选中的元素

      :selected

      选取所有被选中的选项元素(下拉列表)

      集合元素

      $(“select :selected”);选取所有被选中的选项元素

      为了演示这些选择器,需要制作一个包含表单的网页,里面要包含文本框、多选框和下拉列表,HTML代码如下:

            重置所有表单元素

           

       

       

           

           可用元素: 

           不可用元素:

           可用元素:

             不可用元素:

             

           多选框:

             test1

          test2

          test3

          test4

          test5

             

             

           下拉列表1:

          

           下拉列表2:

             

         

       

      生成的效果图如图2-2所示。

      图2-2 初始状态

      现在用jQuery的表单过滤选择器来操作它们,示例如表2-16所示。

      表2-16 表单对象属性过滤示例

      功能

      代码

      执行后

      改变表单内可用元素的值

      $(”#forml input:enabled").val(”这里变化了!”);

      改变表单内不可用元素的值

      $ ("#forml  input:disabled").val(”这里变化了!”);

      获取多选框选中的个数

      $ ("input:checked") .length;

      获取下拉框选中的内容

      $ ("select :selected") .text () ;

      2.3.4  表单选择器

      为了使用户能够更加灵活地操作表单,jQuery中专门加入了表单选择器,能极其方便地获取到表单的某个或某类型的元素。

      表单选择器的介绍说明如表2-17所示。

      表2-17 表单对象属性过滤示例

      中的,将选择符改成如下代码:

      $(function(){

                   $("tbody>tr:odd").addClass("odd");//先排除第一行,然后给奇数行添加样式

                   $("tbody>tr:even").addClass("even");//先排除第一行,然后给偶数行添加样式

            })

      显示效果如图5-16所示。


      图5-15 普通的隔行变色

      图5-16 表格隔行变色


      如果还需要将某一行变为高亮显示状态,那么可以使用contains选择起来实现。例如“王五”这行,代码如下:

      $("tr:contains('王五')").addClass("selected");

      效果如图5-17所示。

      图5-17 高亮显示“王五”这行

      2.单选框控制表格行亮度

      在以上表格的基础上,在第一列前加上一列单选框,如图5-18所示:

      图5-18 带单选框的表格

      当单击某一行后,此行被选中高亮显示,并且单选框被选中。实现该过程需要以下几个步骤。

      (1)为表格行添加单击事件。

      (2)给单击的当前行添加高亮样式,然后将他的兄弟行的高亮样式去掉,最后将当前行里的单选框设置为选中。

      根据分析,可以写出如下jQuery代码:

      $('tbody>tr').click(function() {

                          $(this).addClass('selected')

                                 .siblings().removeClass('selected')

                                 .end().find(':radio').attr('checked',true);

                   });

      这样,就可以通过单击每行来实现表格行高亮,同时此行所在的单选框也被选中。

      上面代码中使用了end()方法,当前对象是$(this), 当前行addClass(“selected”)操作时,对象并未发生变化,当执行siblings().removeClass(“selected”)操作时,对象已经变为$(this).siblings(),因此后面的操作都是针对这个对象的,如果需要重新返回到$(this)对象,就可以使用end()方法,这样后面的

      .find(':radio').attr('checked',true);

      操作就是:

      $(this).find(':radio').attr('checked',true);

      而不是:

      $(this).siblings().find(':radio').attr('checked',true);

      另外,初始化表格的时候,如果默认已经以有单选框被选中,那么也需要处理,代码如下:

      $('table:radio:checked').parent().parent().addClass('selected');

      这样 当初始化表格的时候,默认已经选中的行将被高亮显示,如图5-19所示。

      图5-19 默认选中行被高亮显示

      注意:$('table:radio:checked').parent().parent().addClass('selected');是通过parent()方法逐步向父节点获取相应的元素的,也可以使用parent()方法直接获取:

      $('table:radio:checked').parent(“tr”).addClass('selected');

      此外,如果通过has选择器也可以进一步简化,表示含有选中的单选框的

      行将被高亮显示:

      $(‘tbody>tr:has(:checked)’).addClass(‘selected’);

      3.复选框控制表格行高亮

      复选框控制表格行与单选框不同,复选框能选择多行变色,并没有限制被选择的个数。当单击某行时,如果已经高亮了,则移除高亮样式并去掉当前行复选框的选中状态;如果还没有亮,则添加高亮样式并将当前行的复选框选中。

      判断是否已经高亮,可以使用hasClass()方法来完成。JQuery代码如下:

      $('tbody>tr').click(function() {

                          if($(this).hasClass('selected')) {

                                 $(this).removeClass('selected')

                                        .find(':checkbox').attr('checked',false);

                          }else{

                                 $(this).addClass('selected')

                                        .find(':checkbox').attr('checked',true);

                          }

                   });

      显示效果如图5-20所示。

      图5-20 复选框控制行高亮

      此外,在不改变设计思路的前提下,上面的代码还可以再简化成如下代码:

                   $('tbody>tr').click(function(){

                          //判断当前是否选中

      var hasSelected=$(this).hasClass('selected');

                          //如果选中,则移出selected类,否则就加上selected类

                          $(this)[hasSelected?"removeClass":"addClass"]('selected')

                                 //查找内部的checkbox,设置对应的属性。

                                 .find(':checkbox').attr('checked',!hasSelected);

                   });

      当用户刚进入页面时,也要处理已经被选中的表格行。jQuery代码如下:

      $('tbody>tr:has(:checked)').addClass('selected');

      5.2.1  表格展开关闭

      在上例的人员表格的基础上,增加人员分类。

      HTML代码如下:

           

      选择器

      描述

      返回

      示例

      :input

      选取所的

         

       

      根据以上HTML代码,可以生成图2-3所示的页面效果。

      图2-3 初始状态

      如果想得到表单内表单元素的个数,代码如下:

      $(“#form1 :input”).length;     //注意与$(“#form1 input”)的区别

      如果想得到表单内单行文本框的个数,代码如下:

      $(“#form1 :text”).length;

      如果想得到表单内密码框的个数,代码如下:

      $(“#form1 :password”).length;

      同理,其他表单选择器的操作与此类似。

      2.4选择器中的一些注意事项

      2.4.1  选择器中含有特殊符号的注意事项

      1.选择器中含有“.”、“#”、“(”或“]”等特殊字符

      2.根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符,如果按照普通的方式去处理出来的话就会出错。解决此类错误的方法是使用转义符转义。

      HTML代码如下:

      bb

      c

      如果按照普通的方式来获取,例如:

      $(‘#id#b’);

      $(‘#id’[1]);

      以上代码不能正确获取元素,正确的写法如下:

      $(‘#id\\#b’);                      //转义特殊字符“#”

      $(‘#id\\[1\\]’);                    //转义特殊字符“[  ]”

      2.4.2  选择器中含有空格的注意事项

      选择器中的空格也是不容忽视的,多一个空格或少一个空格也许会得到截然不同的结果。

      看下面的例子,它的HTML代码如下:

           

               aa

               bb

              

      cc

              

           

            ee

            ff

      使用如下的jQuery选择器分别获取它们。

      var $t_a = $('.test :hidden');          //带空格的Jquery选择器

      var $t_b = $('.test:hidden');           //不带空格的Jquery选择器

      var len_a = $t_a.length;

      var len_b = $t_b.length;

      alert("$('.test :hidden') ="+len_a);  //输出 4

      alert("$('.test:hidden') ="+len_b);  //输出 3

      之所以会出现不同的结果,是因为后代选择器与过滤器的不同。

      var $t_a = $('.test :hidden');          //带空格

      以上代码是选取class为“test”的元素里面的隐藏元素

      而代码

      var $t_b = $('.test:hidden');           //不带空格

      则是选取隐藏的class为“test”的元素。

      2.5 案例研究——某网站品牌列表的效果

      实现某网站上的一个品牌列表的展示效果,用户进入该页面时,品牌列表默认是精简显示的(即不完整的品牌列表)。

      用户可以单击“显示全部品牌”按钮来显示全部的品牌。

      单击“显示全部品牌”按钮的同时,列表会将推荐的品牌的名字高亮显示,按钮里的文字也换成了“精简显示品牌”。

      为了实现这个例子,首先需要设计它的HTML结构。HTML代码如下:

      • 佳能(30440)
      •             

      • 索尼(27220)
      •             

      • 三星(20808)
      •             

      • 尼康(17821)
      •             

      • 松下(12289)
      •             

      • 卡西欧(8242)
      •             

      • 富士(14894)
      •        

      • 柯达(9520)
      •             

      • 宾得(2195)
      •             

      • 理光(4114)
      •             

      • 奥林巴斯(12205)
      •             

      • 明基(1466)
      •             

      • 爱国者(3091)
      •             

      • 其它品牌相机(7275)
      •      

           

                   显示全部品牌

           

      然后为上面的HTML代码添加CSS样式。

      页面初始化的效果如图2-4所示。

      图2-4 品牌展示列表(精简)

      接下来为这个页面添加一些交互效果,

      要做的工作有以下几项。

      (1) 从第7条开始隐藏后面的品牌(最后一条“其它品牌相机”除外)。

      (2) 当用户单击“显示全部品牌”按钮时,将执行以下操作。

      ①  显示隐藏的品牌。

      ②“显示全部品牌”按钮文本切换成“精简显示品牌”。

      ③ 高亮推荐品牌。

      (3) 当用户单击“精简显示品牌”按钮时,将执行以下操作。

      ①从第5条开始隐藏后面的品牌(最后一条“其它品牌相机”除外)。

      ②“精简显示品牌”按钮文本切换成“显示全部品牌”。

      ③去掉高亮显示的推荐品牌。

      (4) 循环进行第(2)步和第(3)步。

      下面逐步来完成以上的效果。

      (1)  从第5条开始隐藏后面的品牌(最后一条“其他品牌相机”除外)。

      var $category =$(“ul li:gt(5):not(:last)”);

            $category.hide();                             // 隐藏上面获取到的jQuery对象。

      $(“ul li:gt(5):not(:last)”)的意思是先获取

                  

                         

                  

                  

                          前台设计组

                         

                         

                          前台开发组

                         

                          后台开发组

                         

                         

                  

           

      姓名性别暂住地
      张山浙江宁波
      李四浙江杭州
      王五湖南长沙
      找六浙江温州
      Rain浙江杭州
      MAXMAN浙江杭州

      显示效果如图5-21所示。

      图5-21 人员分类

      现在需要实现的是当单击分类行是,可以关闭相应的内容。例如单击“前台设计组”行,则它对应的“张山和李四”两行将收缩。

      在这个表格中,给每个元素设置属性是非常重要的,读者可以在HTML代码中看出一些规则,即给分类行设置了class=“parent”属性,同时也分别给它们设置了id值,而在它们下面的行,只设置了class属性,并且这个class的值是在id值的基础上通过加上 “child_”来设置的。基于以上规则,jQuery实现代码如下:

      $(function(){

            $('tr.parent').click(function(){   // 获取所谓的父行

                          $(this).toggleClass("selected")   // 添加/删除高亮

                                 .siblings('.child_'+this.id).toggle();  // 隐藏/显示所谓的子行

            });

      })

      运行代码后,当单击表格的父行后,相应的子行会收缩,如图5-22所示。

      图5-22 单击某行,对应的子行会收缩

      5.2.3  表格内容筛选

      在下面的例子中,如果要高亮显示”王五”那一行,可以使用contains选择器来完成,代码如下:

      $(“tr:contains(‘王五’)”).addclass(“selected”);

        //选择器contains,能匹配包含指定文本的元素

      利用该选择器再结合jQuery的filter()筛选方法,可以实现表格内容的过滤。

      例如使用下面的jQuery代码就可以筛选出含有文本“李”的表格行。

           $("table tbody tr").hide().filter(":contains(李)").show();

      显示效果如图5-23所示。

      图5-23 筛选之后效果

      首先在表格上方添加一个文本框,用于根据用户输入的内容来筛选表格内容,然后为文本框绑定keyup事件,代码如下:

      $(function(){

            $("#filterName").keyup(function(){

                 //…

               })

        })

       最后将flter(":contains(李)")代码中的“李”用变量值代替,代码如下:

        $(function(){

            $("#filterName").keyup(function(){

                  $("table tbody tr")

                                        .hide()

                                        .filter(":contains('"+($(this).val() )+"')")

                                        .show();

               })

        })

      当在文本框中输入“王”时,就会筛选出相应的表格行,显示效果如图5-24所示。

      注意表单元素有个特点,就是刷新网页后,其值会保持不变。例如在刚才筛选操作后,刷新网页,则会出现图5-25所示的现象,表单元素的值还存在,但表格内容已经被刷新了。

      图5-24 根据用户输入的文本来筛选

      图5-25 刷新后显示的表格数据

      要解决这个问题,只需要在DOM刚加载完时,为表单元素绑定事件并且立即触发该事件即可。

      $(function(){

            $("#filterName").keyup(function(){

                  $("table tbody tr")

                                        .hide()

                                        .filter(":contains('"+($(this).val() )+"')")

                                        .show();

               }).keyup();

        })

      这样,当页面被刷新后,就会立即执行id为"#filterName"的keyup事件,因此表格内容就会保持刚才筛选出来的结果。

      5.3 其他应用

      5.3.1  网页字体大小

      在某些网站经常有“放大”和“缩小”字号的控制按钮,通过单击它们,可以使网页的文字呈现不同的大小。

      首先在空白的网页上添加两个字号控制按钮和一些文字,HTML代码如下:

           

                   放大

                   缩小

           

           

                  

                   Thisis some text. This is some text. This is some text. This is some text. This issome text. This is some text. This is some text. This is some text. This issome text. This is some text. This is some text. This is some text. This issome text.This is some text. This is some text. This is some text. This is sometext. This    is some text. This is sometext.

                  

           

      显示效果如图5-26所示。

      表5-26 网页初始化效果

      当单击这两个按钮时可以分别控制文本字体的放大和缩小。因此,需要对“放大”按钮和“缩小”按钮进行相应的处理,代码如下:

      $(function(){

                   $("span").click(function(){

                          varthisEle = $("#para").css("font-size");

                          vartextFontSize = parseFloat(thisEle , 10);

                          varunit = thisEle.slice(-2); //获取单位

                          varcName = $(this).attr("class");

                          if(cName== "bigger"){

                                        textFontSize+= 2;

                          }elseif(cName == "smaller"){

                                        textFontSize-= 2;

                          }

                          $("#para").css("font-size",  textFontSize + unit );

                   });

            });

      下面详细讲解以上代码所完成的操作。

      $(function(){

                   $("span").click(function(){

                          //…

                   });

            });

      当文档加载完毕后,为所有的元素绑定单击事件。

      var thisEle =$("#para").css("font-size");

      var textFontSize = parseFloat(thisEle ,10);

      获取id为“para”的元素的字体大小。获取的值是将返回的数字和单位,即16px。然后使用parseFloat()方法去掉单位,因此16px就变成了16。 parseFloat()方法的第2个参数表示进制,代码表示的是10进制。

      var unit = thisEle.slice(-2);

      上面这段代码是获取单位,slice()方法返回字符串中从指定的字符开始的一个子字符串。因为这里使用的度量单位px是两个字符,所以指定字符串应该从倒数第2个字符开始。在后面再次设置字体大小是,就可以直接把单位拼接上。

      var cName =$(this).attr("class");

                          if(cName== "bigger"){

                                        textFontSize+= 2;

                          }elseif(cName == "smaller"){

                                        textFontSize-= 2;

                          }

      If语句用于判断当前被单击的元素的class是否为“bigger”。如果是“bigger”,则需要为字体变量 (textFontSize) 增加 2px。如果单击的是 “smaller”,则要为字体变量(textFontSize) 减掉2px。

      textFontSize +=2;的写法等价于textFontSize =textFontSize +2;

      $("#para").css("font-size",  textFontSize + unit );

      最后,再次获取“pava”元素并为它的font-size属性赋予新的值  (textFontSize ),并且一定要拼接上单位。

      如果发现无限放大和缩小不太合适,可以判断一下最小字体和最大字体,代码如下:

      //…省略代码

      if(cName == "bigger"){

                                    if( textFontSize <= 22 ){

                                               textFontSize+= 2;

                                        }

                          }elseif(cName == "smaller"){

                                    if( textFontSize >= 12  ){

                                               textFontSize-= 2;

                                        }

                          }

                          $("#para").css("font-size",  textFontSize + unit);

      显示效果如图5-27所示。

      图5-27 字体大小变化

      5.3.2  网页选项卡

      制作选项卡的原理比较简单,通过隐藏和显示来切换不同的内容。

      与前面的例子相同,首先构建HTML结构,代码如下:

           

                  

        时事

                           

      • 体育
      •                    

      • 娱乐
      •             

           

           

                    

      时事

                    

      体育

                    

      娱乐

           

      应用样式后,网页呈现效果如图5-28所示。

      图5-28 选项卡效果

      默认是选项卡的第1个选项被选中,然后下面区域显示相应的内容。例如图5-28所示,当单击“体育”选项卡时,“体育”选项卡将处于高亮状态,同时下面的内容也切换成“体育”了。当单击“娱乐”选项卡时,也显示相应的内容。下面将详细介绍实现选项卡的过程。

      首先需要为

    • 元素邦定单击事件,代码如下:

      var $div_li =$("div.tab_menu ulli");

                $div_li.click(function(){

                      //…

                   })

      绑定事件后,需要将当前单击的

    • 元素高亮,然后去掉其他同辈
    • 元素的高亮。

      $(function(){

              var $div_li =$("div.tab_menu ulli");

              $div_li.click(function(){

                   $(this).addClass("selected")            //当前

    • 元素高亮

                   .siblings().removeClass("selected");  //去掉其它同辈

    • 元素的高亮

                   })

            })

      单击选项卡后,当前

    • 元素处于高亮状态,而其他的
    • 元素已去掉了高亮状态。但选项卡下面的内容还没被切换,因此需要将下面的内容也对应切换。显示效果如图5-29所示。

      从选项卡的基本结构可以知道,每个

    • 元素都分别对应一个
      区域。因此可以根据当前单击的
    • 元素在所有
    • 元素中的索引,然后通过索引来显示对应的区域,代码如下:

        var $div_li =$("div.tab_menu ul li");

            $div_li.click(function(){

                   $(this).addClass("selected")            //当前

    • 元素高亮

                   .siblings().removeClass("selected");  //去掉其它同辈

    • 元素的高亮

            var index = $div_li.index(this);  // 获取当前点击的

    • 元素 在 全部li元素中的索引。

                   $("div.tab_box> div")   //选取子节点。不选取子节点的话,会引起错误。如果里面还有div

                   .eq(index).show()   //显示

    • 元素对应的
      元素

                   .siblings().hide();//隐藏其它几个同辈的

      元素

            })

      这样,当单击

    • 元素后,选项卡相应的内容也将切换,效果如图5-30所示。


图5-29 内容没被切换

图5-30 对应的内容被切换


在上面的代码中,要注意$(“div.tab_box>div”)这个子选择器,如果用$(“div.tab_box div”)子选择器,当子节点里再包含

元素的时候,就会引起程序错乱。因此获取当前选项卡下的子节点,才是这个例子所需要的。

至此制作选项卡的过程就完成了。如果读者还想加强些效果,例如光标滑入滑出效果,可以添加hover事件,代码如下:

$(function(){

      var$div_li =$("div.tab_menu ul li");

      $div_li.click(function(){

             $(this).addClass("selected")            //当前

  • 元素高亮

                 .siblings().removeClass("selected");  //去掉其它同辈

  • 元素的高亮

          var index = $div_li.index(this);  // 获取当前点击的

  • 元素 在 全部li元素中的索引。

                 $("div.tab_box> div")   //选取子节点。不选取子节点的话,会引起错误。如果里面还有div

                 .eq(index).show()   //显示

  • 元素对应的
    元素

                 .siblings().hide();//隐藏其它几个同辈的

    元素

          }).hover(function(){

                 $(this).addClass("hover");

          },function(){

                 $(this).removeClass("hover");

          })

    })

    这样当光标滑过其他选项时,选项的样式会发生变化,如图5-31所示。

    图5-31 滑过“娱乐”选项

    5.3.3  网页换肤

    自从Web 2.0开始流行后,很多网站更加注重用户自定义,例如在网页上用户可以自定义新内容,可以任意拖动网页内容,也可以给网页选择一套自己喜欢的颜色等。

    网页换肤的原理就是通过调用不同的样式表文件来实现不同皮肤的切换,并且需要将换好的皮肤记入Cookie中,这样用户下次访问时,就可以显示用户自定义的皮肤了。

    首先设置HTMl的结构,在网页中添加皮肤选择按钮(

  • 元素)和基本内容,代码如下:

                   灰色

                   紫色

                   红色

    • 天蓝色
    •              橙色

                   淡绿色

           

         

                

                        时事新闻

                

  •      

         

                

                        娱乐新闻

                

         

    然后根据HTML代码预定义几套换肤用的样式,分别有灰色、紫色、红色等6套。默认是灰色。

    在设计HTML代码时,用了一些小技巧,就是将皮肤选择器按钮

  • 元素的id与网页皮肤的样式文件名称设置的相同。这样就可以使完成换肤操作简化很多。

    然后为HTML代码添加样式,注意HTML结构要有一个带id的样式表链接,通过操作该连接的href属性的值,从而实现换肤。代码如下:

    运行后网页的初始化效果如图5-32所示。

    图5-32 初始化效果

    最后为皮肤选择按钮添加单击事件,有如下两个步骤。

    (1)当皮肤选择按钮被单击后,当前皮肤就被勾选。

    (2)将网页内容换肤。

    首先完成第1步,它与前面选项卡例子中高亮当前选项的代码相同,代码如下:

      var$li =$("#skin li");

    $li.click(function(){

           $("#"+this.id).addClass("selected")                //当前

  • 元素选中

                 .siblings().removeClass("selected");  //去掉其它同辈

  • 元素的选中

          })

    然后完成第2步,即设置网页内容皮肤。前面为元素设置的id,此时可以通过attr()方法为元素的href属性设置不同的值,代码如下:

      var$li =$("#skin li");

    $li.click(function(){

          $("#"+this.id).addClass("selected")                //当前

  • 元素选中

                 .siblings().removeClass("selected");  //去掉其它同辈

  • 元素的选中

                        $("#cssfile").attr("href","css/"+this.id+".css");//设置不同皮肤

          })

    完成后,当单击皮肤选择按钮时,就可以切换网页皮肤了,如图5-33所示,但是当用户刷新网页或者关闭浏览器后,皮肤又会被初始化,因此需要将当前选择的皮肤进行保存。

    图5-33 单击按钮后换肤

    在jQuery中有一款cookie插件,此处就将其引入,代码如下:

      

         

       将当前皮肤保存进Cookie后,代码如下:

        var $li =$("#skin li");

            $li.click(function(){

                 $("#"+this.id).addClass("selected")         //当前

  • 元素选中

                 .siblings().removeClass("selected");//去掉其它同辈

  • 元素的选中

                 $("#cssfile").attr("href","css/"+(this.id) +".css"); //设置不同皮肤

                        $.cookie("MyCssSkin" ,  this.id , {path: '/', expires: 10 });

                 });

    保存进Cookie后,就可以通过Cookie来获取当前的皮肤了。如果Cookie确实存在,则将当前皮肤设置为Cookie记录的值,代码如下:

    //…省略代码

          varcookie_skin = $.cookie( "MyCssSkin");

          if(cookie_skin) {

           $("#"+cookie_skin).addClass("selected")    //当前

  • 元素选中

                        .siblings().removeClass("selected");//去掉其它同辈

  • 元素的选中

                 $("#cssfile").attr("href","css/"+cookie_skin +".css"); //设置不同皮肤

                 $.cookie("MyCssSkin" ,  cookie_skin  , { path: '/', expires: 10 });

          }

    //…省略代码

    完成的jQuery代码如下:

    $(function(){

          var$li =$("#skin li");

          $li.click(function(){

          $("#"+this.id).addClass("selected")    //当前

  • 元素选中

                 .siblings().removeClass("selected");  //去掉其它同辈

  • 元素的选中

          $("#cssfile").attr("href","css/"+(this.id) +".css"); //设置不同皮肤

          $.cookie("MyCssSkin" ,  this.id , {path: '/', expires: 10 });

          });

          varcookie_skin = $.cookie( "MyCssSkin");

          if(cookie_skin) {

                 $("#"+cookie_skin).addClass("selected")     //当前

  • 元素选中

                   .siblings().removeClass("selected"); //去掉其它同辈

  • 元素的选中

                 $("#cssfile").attr("href","css/"+cookie_skin +".css");   //设置不同皮肤

                 $.cookie("MyCssSkin" ,  cookie_skin  , { path: '/', expires: 10 });

                 }

          })

    此时,网页换肤功能不仅能正常切换,而且也能保存到Cookie中,当用户刷新网页后,仍然是当前选择的皮肤。

    在Click事件中的函数内容与if(cookie_skin){}内的判断内容类似,只是有一个变量不同,因此可以通过给函数传递不同的参数,这样就可以多次调用(抽象化),代码如下:

     function switchSkin(skinName){

          $("#"+skinName).addClass("selected")    //当前

  • 元素选中

                 .siblings().removeClass("selected");//去掉其它同辈

  • 元素的选中

          $("#cssfile").attr("href","css/"+skinName +".css"); //设置不同皮肤

          $.cookie("MyCssSkin" ,  skinName , {path: '/', expires: 10 });

          }

    然后在单击事件和if(cookie_skin){}内分别调用对应的参数:

    $(function(){

                        var$li =$("#skin li");

                        $li.click(function(){

                               switchSkin(this.id );

                        });

                        varcookie_skin = $.cookie( "MyCssSkin");

                        if(cookie_skin) {

                               switchSkin(cookie_skin );

                        }

                 });

    至此,网页换肤功能就完成了,效果如图5-34所示。

    图5-34 网页换肤完成

    六、    jQuery与Ajax的应用

    Ajax 全称为“Asynchronous Javascript and XML”(异步JavaScript和XML),它并不是指一种单一的技术,而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。它的出现,揭开了无刷新更新页面的新时代,并有代替传统的Web方式和通过隐藏的框架来进行异步提交的趋势,是Web开发应用的一个里程碑。

    6.1  Ajax的优势和不足

    6.1.1  Ajax的优势

    1.   不需要插件支持

    Ajax不需要任何浏览器插件,就可以被绝大多数主流浏览器所支持,用户只需要允许JavaScript在浏览器上执行即可。

    2.   优秀的用户体验

    这是Ajax技术的最大优点,能在不刷新整个页面的前提下更新数据,这使得Web应用程序能更为迅速地回应用户的操作。

    3.提高Web程序的性能

    与传统模式相比,Ajax模式在性能上的最大区别就在于传输数据的方式,在传统模式中,数据提交是通过表单(Form)来实现的,而数据获取是靠全页面刷新来重新获取整页的内容。而Ajax模式只是通过XmlHttpRequest对象向服务器端提交希望提交的数据,即按需发送。

    4.减轻服务器和宽带的负担

    Ajax的工作原理相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。它在客户端创建Ajax引擎,把传统方式下的一些服务器负担的工作转移到客户端,便于客户端资源来处理,减轻服务器和带宽的负担。

    6.1.2  Ajax的不足

    世界上并没有完美的事物,同样Ajax也并不是一项非常完美的技术。Ajax主要有以下几点不足之处。

    1.   浏览器对XMLHttpRequest对象的支持度不足

    Ajax的不足之一首先来自于浏览器。InternetExplorer在5.0及以后的版本才支持XmlHttprequest对象(现阶段大部分客户端上的IE浏览器是IE6及以上),Mozilla、Netscape等浏览器支持xmlhttprequest则更在其后。为了使得Ajax应用能在各个浏览器中正常运行,程序员必须花费大量的精力编码以兼顾各个浏览器之间的差别,来让Ajax应用能够很好地兼容各个浏览器。这使得Ajax开发的难度比普通的Web开发高出很多,许多程序员因此对Ajax望而生畏。

    2.   破坏浏览器“前进”、“后退”按钮的正常功能

    在传统的网页中 ,用户经常会习惯性的使用浏览器自带的“前进”和“后退”按钮,然而Ajax改变了此web浏览习惯。在Ajax中“前进”和“后退”按钮的功能都会失效,虽然可以通过一定的方法(添加锚点)来使得用户可以使用“前进”和“后退”按钮,但相当于传统的方式却麻烦了很多,对于大多数程序员来说宁可放弃前进、后退的功能,也不愿在繁琐的逻辑中去处理该问题。然而,对于用户来说,他们经常会碰到这种情况,当单击一个按钮触发一个Ajax交互后又觉得不想这样做,接着就去习惯性地单击“后退”按钮,结果发生了最不愿意看到的结果,浏览器后退到先前的一个页面,通过Ajax交互得到的内容完全消失了。

    3.   对搜索引擎的支持不足

    对于搜索引擎的支持也是Ajax的一项缺憾。通常搜索引擎都是通过爬虫程序来对互联网上的数以亿计的海量数据来进行搜索整理的,然而爬虫程序现在还不能理解那些奇怪的Javascript代码和因此引起的页面内容的变化,这使得应用Ajax的站点在网络推广上相对于传统站点明显处于劣势。

    4.   开发和调试工具的缺乏

    JavaScript是Ajax的的重要组成部分,在目前,由于缺少很好的javaScript开发和调试工具,使很多web开发者对JavaScript望而生畏,这对于编写Ajax代码就更加困难了。同时,目前许多Web开发者已经习惯使用可视化的工具,对亲自动手编写代码有畏惧感,这也在一定程度上影响了大家对Ajax的应用。

    6.2 Ajax的XMlhttpRequest对象

    Ajax的核心是XMlhttpRequest对象,它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。XMLHttpRequest对象最早是在Microsoft  Internet Explorer 5.0ActiveX组件中被引入的,之后各大浏览器厂商都以JavaScript内置对象的方式来实现XmlHttpRequest对象。虽然大家对它的实现方式有所区别,但绝大多数浏览器都提供了类似的属性和方法,而且在实际脚本编写方法上的区别也不大,实现得到的效果也基本相同。目前W3C组织正致力于制定一个各浏览器厂商可以统一遵照执行的XmlHttpRequest对象标准,用来推进Ajax技术的推广与发展。

    6.3编写第1个Ajax例子

    正式接触jQuery地Ajax操作之前,先看一个用传统的JavaScript实现的Ajax例子。例子描述:单击一个按钮,然后通过传统的JavaScript的Ajax的方式从服务器端取回一个“Hello Ajax!”的字符串并显示在页面上。

    首先在前台页面中书写HTML代码,代码如下:

    本段代码将生成图6-4所示的页面。

    图6-4 评论初始化页面

    将姓名和内容填写好后,就可以准备提交评论了。如图6-5所示。

    图6-5 填写好数据

    (1)  使用参数

    首先,需要确定请求页面的URL 地址。代码如下:

    $("#send").click(function(){

                        $.get("get1.ashx"    data参数,回调函数);

    });

    然后,在提交之前,需要获取“姓名”和“内容”的值作为data参数传递给后台, 代码如下:

    $("#send").click(function(){

                        $.get("get1.ashx",{

                                             username:  $("#username").val() ,

                                             content:  $("#content").val()

    },回调函数 );

    });

    如果服务器端接收到传递的data 数据并成功返回,那么就可以通过回调函数将返回的数据显示到页面上。

    $.get()方法的回调函数只有两个参数,代码如下:

    Function (data,  textStatus){

          //data  :  返回的内容,可以是XML文档、JSON文件、HTML 片段等等

    //textStatus : 请求状态:success,error,notmodified.timeout 4种

    }

    data参数代表请求返回的内容, textStatus参数代表请求状态,而且回调函数只有当数据成功返回(success)后才被调用,这点与load()方法不一样。

    (2)  数据格式

    服务器上返回的格式有多种,它们都可以完成同样的任务,以下是几种返回格式的对比.

    ·HTML片段

    由于服务器端返回的数据格式是HTML片段,因此不需要经过处理就可以将新HTML

    数据插入主页面中。JQuery代码如下:

    $(function(){

             $("#send").click(function(){

                        $.get("get1.ashx",{

                                             username:  $("#username").val() ,

                                             content:  $("#content").val() 

                                      },function (data, textStatus){

                           $("#resText").html(data); // 把返回的数据添加到页面上

                                      }

                        );

             })

          })

    HTML片段实现起来只需要很少的工作量,但这种固定的数据结构并不一定能够在其他的web应用程序中的到重用。

    ·XML文档

    由于服务器端返回的数据格式是XML文档,因此需要对返回的数据进行处理,前面的章节已经介绍过jQuery强大的DOM处理能力,处理XML文档与处理HTML文档一样,也可以使用常规的attr()、find()、filter()以及其他方法,JQuery代码如下:

          $(function(){

             $("#send").click(function(){

                        $.get("get2.ashx ", {

                                      username:  $("#username").val() ,

                                      content:  $("#content").val() 

                        },function (data, textStatus){

                                      varusername = $(data).find("comment").attr("username");

                                      varcontent = $(data).find("comment content").text();

                        vartxtHtml= "

    "+username+":
    "+content+"

    ";

              $("#resText").html(txtHtml); // 把返回的数据添加到页面上

                        });

             })

       })

    返回数据格式为XML文档的过程实现是想起来比HTML片段要稍微复杂些,但XML文档的可移植性是其他数据格式无法比拟的,因此以这种格式提供的数据的重用性将极大提高。例如del.icio.us(http://del.icio.us),Flickr(http://flickr.com)和某些开放平台都是以XML格式输出的数据,读者可以利用它们提供的API,将获得的内容整合到自己的网站中(Mashup应用),不过,XML文档体积相对较大,与其他格式相比,解析和操作他们的速度都要慢一些。

    ·JSON文件

    之所以出现这种数据格式的文件,很大程度上是因为XML文档体积大和难以解析,JOSN文件和XML文档一样,也可以方便的被重用。而且,JSON文件非常简洁,也容易阅读。想了解更多的JSON文档知识,可以访问http://json.org/网址。

    由于服务器端返回数据格式是JSON文件,因此需要对返回的数据进行处理之后,才可以将新的HTML数据添加到主页面中。JQuery代码如下:

    $(function(){

             $("#send").click(function(){

                        $.get("get3.ashx ", {

                                             username:  $("#username").val() ,

                                             content:  $("#content").val() 

                                      },function (data, textStatus){

                                          var username = data.username;

                                             varcontent = data.content;

    var txtHtml = "

    "+username+":
    "+content+"

  • ";

              $("#resText").html(txtHtml); // 把返回的数据添加到页面上

                                      },"json");

                 })

             })

    在上面代码中,将$.get()方法的第4个参数(type)设置为“json”来代表期待服务器端返回的数据格式.

    以上3种返回方式都可以达到图6-6所示的效果。

    通过对3种数据格式的优缺点进行分析,可以得知在不需要与其它应用程序共享数据的时候,使用HTML片段来提供返回数据一般来说是最简单的,如果数据需要用,那么JSON文件是不错的选择,它的性能和文件的大小方面具有优势,而当远程应用程序未知时,XML是明智的选择,它是Web服务领域的“世界语”,具体选择哪种格式,并没有严格的规定,读者可以根据需求来选择最合适的返回格式来进行开发。

    图6-6 将返回的数据添加到页面上

    2.$.post()方法

    它与$.get()方法的结构和使用方式都相同,不过他们之间仍然有以下区别。

    (1) GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息实体内容发送给Web服务器。当然,在Ajax请求中,这种区别对用户是不可见的。

    (2) GET方式对传输的数据有大小的限制(通常不能大于2KB),而使用的POST方式传递的数据量要比GET方式大得多(理论上不受限制).

    (3) GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这种数据,列如账号和密码等。在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说就可以避免这种情况。

    (4) GET方式和POST方式传递的数据在服务器端的获取也不相同,在PHP中,GET方式的数据可以用$_GET[]获取,而POST方式可以用$ _POST[]获取,两种方式可以用$ _REQUEST[];来获取。

    由于POST和GET方式提交的所有数据都可以通过$_REQUEST[];来获取,因此只需要改变jQuery函数,就可以将程序在GET请求和POST请求之间切换,代码如下:

    $(function(){

             $("#send").click(function(){

                        $.post("get1.ashx ", {

                                             username:  $("#username").val() ,

                                             content:  $("#content").val() 

                                      },function (data, textStatus){

                        $("#resText").append(data); // 把返回的数据添加到页面上

                                      }

                        );

             })

          })

    另外,当load()方法带有参数传递时,会使用POST方式发送请求。因此也可以使用load()方法来完成同样的功能。代码如下:

       $(function(){

             $("#send").click(function(){

                    $("#resText").load("get1.ashx ",{

                                             username:  $("#username").val() ,

                                             content:  $("#content").val() 

                          })

             })

          })

    上面使用load()、$.get()和$.post()方法完成了一些常规的Ajax程序,如果还需要编写一些复杂的Ajax程序,那么就需要用到JQuery中的$.ajax()方法。$.ajax()方法不仅能实现与load()、$.get()和$.post()同样的功能,而且还可以设定beforeSend(提交前回调函数)、error(请求失败后处理)、success(请求成功后处理)以及complete(请求完成后处理)回调函数,通过这些回调函数,可以给用户更多的Ajax提示信息。另外,还有一些参数,可以设置Ajax请求的超时时间或者页面的“最后更改”状态等等。关于$.ajax()方法将在后面的章节中进行讲解。

    6.4.3  $.getScript()方法和$.getJson()方法

    1.$.getScript()方法

    有时候,在页面初次加载时就取得所需要的全部javaScript文件是完全没有必要的。虽然可以在需要哪个javaScript文件时,动态的创建

    你可能感兴趣的:(jquery,jquery知识点)