首页 > 网站 > WEB开发 > 正文

第十七章:jQuery类库

2024-04-27 14:11:21
字体:
来源:转载
供稿:网友

第十七章:jQuery类库

javascript的核心API设计的很简单,但由于浏览器之间的不兼容性,导致客户端的API过于复杂。IE9的到来缓解了这种情况。然而使用Javascript的框架或者工具类库,能简化通用操作,处理浏览器之间的差异,这让很多程序员在开发web应用时变得更简单。

jQuery类库被广泛的使用,作为web开发者,我们必须熟悉它:即便没有在自己的代码中遇到,也可能在别人的代码中遇见。幸运的是,jQuery代码足够小巧和稳定,本章就能将它讲述清楚。jQuery能让你在文档中轻松找到关心的元素,并对这些元素进行操作:添加内容、编辑HTML属性和CSS属性、定义事件处理程序,以及执行动画。它还拥有Ajax工具来动态发起HTTP请求,以及一些通用的工具函数来操作对象和数组。

正如其名,jQuery类库聚焦于查询。一个典型的查询使用CSS选择器来识别一组文档元素,并返回一个对象来表示这些元素。返回的对象提供了大量的方法来批量操作匹配的元素。这些方法会尽可能返回调用对象本身,这使得简洁的链式调用成为可能。jQuery如此强大和好用,关键得益于以下特性:

  • 丰富强大的语法(CSS选择器),用来查询文档
  • 高效的查询方法,用来找到与CSS选择器匹配的文档元素集
  • 一套有用的方法,用来操作选中的元素
  • 强大的函数式编程技巧,用来批量材质元素集,而不是每次只操作单个
  • 简洁的语言语法(链式调用),用来表示一系列顺序操作

本章首先会介绍如何使用jQuery来实现 简单的查询并操作其结果。接下来的章节会讲解:

  • 如何设置HTML属性,CSS样式和类、HTML表单的值和元素内容、位置高宽,以及数据
  • 如何改变文档结构:对元素进行插入、替换、包装和删除操作
  • 如何使用jQuery的跨浏览器事件模型
  • 如何用jQuery来实现动画视觉效果
  • jQuery的Ajax工具,如何使用脚本来发起HTTP请求
  • jQuery的工具函数
  • jQuery选择器的所有语法,以及如何使用jQuery的高级选择方法
  • 如何使用和编写插件来对jQuery进行扩展
  • jQuery UI类库

1.jQuery基础

jQuery类库定义了一个全局函数:jQuery()。该函数使用频繁,因此在 类库中还给它定义了一个别名:$,这是jQuery在全局命名空间中定义的唯一两个变量。(如果你在自己的代码中有使用$作为变量,或者引入了PRototype等使用$作为全局变量的类库,这时,为了避免冲突,可以使用jQuery.noConflict()来释放$变量,让其指向原始值。)这个拥有两个名字的全局方法是jQuery的核心查询方法,例如下面的代码能获取jQuery文档中的所有<div>元素:

var divs = $("div")

改方法返回的值表达零个或多个DOM元素,这就是jQuery对象。注意:jQuery()是工厂函数,不是构造函数,它返回一个新创建的对象,但并没有和new关键字一起使用。jQuery对象定义了很多方法,可以用来操作它们表示这组元素,本章中的大部分文字来阐述这些方法。例如:下面的这组代码用来找到拥有details类的p元素,将其高亮显示,并将其中隐藏的p元素快速显示出来。

$("p.details").css("background-color","yellow").show("fast");

上面的css()方法调用操作的jQuery对象是由$()返回的,css()方法返回的这个也是这个对象,因此可以继续调用show()方法,这就是链式调用,很简洁紧凑。在jQuery编程中,链式调用这个习惯用语很普遍。再举个例子,下面的代码可以找到文档中拥有"clicktohide"CSS类的所有元素,并给每一个元素都注册一个事件处理函数。当用户单击元素时,会调用事件处理程序,使得元素缓慢向上收缩,最终消失。

$(".clicktohide").click(function(){$(this).slideUp("slow");});

i.jQuery()函数

在jQuery类库中,最重要的方法是jQuery()方法,(也就是$())。它的功能很强大,有四种不同的调用方式。

第一种也是最常用的调用方式是传递CSS选择器(字符串)给$()方法。当通过这种方式调用时,$()方法会返回当前文档中匹配该选择器的元素集。jQuery支持大部分css3选择器语法,还支持一些自己的扩展语法。8小节i节将阐述jQuery选择器的语法。还可以将一个元素或jQuery对象作为第二个参数传递给$()方法,这时返回的是该特定元素或元素的子元素中匹配选择器的部分。第二个参数是可选的,定义了元素的查询的起点,经常称为上下文(context)。

第二种调用方式是传递一个Element、Document或window对象给$()方法。在这种情况下,$()方法只须简单地将Element、Document或window对象封装成jQuery对象并返回。这样可以使得能用jQuery方法来操作这些元素而不使用原生的DOM方法。例如,在jQuery程序中,经常可以看见$(document)或$(this)。jQuery对象可以表示文档中多个元素,也可以传递一个元素数组给$()方法。在这种情况下,返回的jQuery对象表示该数组中的元素集。

第三种调用方式是传递HTML文本字符串给$()方法。这这种情况下,jQuery会根据传入的文本创建好HTML元素并封装为jQuery对象返回。jQuery不会将刚创建的元素自动插入文档中,可以使用第3节描述的jQuery方法将元素插入到想要的地方。注意,在这种调用下,不可传入纯文本,因为jQuery会把纯文本当做是CSS选择器来解析。当使用这种调运风格时,传递给$()字符串必须至少包含一个带尖括号的HTML标签。

通过第三种方式调用时,$()接受可选的第二参数。可以传递Document对象来指定与所创建关联的文档。(比如,当创建的元素要插入iframe里时,需要显式的指定iframe的对象。)第二参数还可以是object对象。此时。假设该对象的属性表示HTML属性的键/值对,这些属性将设置到所创建的对象上。当第二参数对象的属性名是css,html,text,width,heigeht,offset,val,data或者属性名是jQuery事件处理程序注册方法名时,jQuery将调用新创建元素上的同名方法,并传入属性值。(css(),html(),text()等方法将在第2节讲述,事件处理程序注册方法将在第4节讲述),例如:

            var img = $("<img>", //新建一个<img>元素                {                    src: url, //具有html属性                    css: {borderWidth: 5}, //css样式                    click: handClick //和事件处理程序                });

第四种调用方式是传入一个函数给$()方法。此时,当文档加载完且DOM程序可以操作时,传入函数将被调用。这是常见onLoad()函数的jQuery版本。在jQuery程序中,在jQuery()里定义一个匿名函数非常常见:

            jQuery(function(){//文档加载完毕时调用                //所有的代码放在这里            });

有时候我们还可以看见老式的写法$(f)和完整的写法

$(document).ready(f)

传递给jQuery()的函数在被调用时,this指向document对象,唯一的的参数指向jQuery函数 。这意味这可以释放全局的$()函数,但在内部依旧可以延续该习惯:

            jQuery.noConflict();//还原$()为初始值            jQuery(function($){ //让$()成为jQuery对象的局部别名                //jQuery代码            });

通过$注册的函数将在DOMContentLoaded事件触发时由jQuery触发。当浏览器不支持该事件时,会在load事件触发时由jquery触发。这意味这文档已经完毕,但图片等外部资源还有可能未加载完。如果DOM准备就绪后再传递函数给$(),传递的函数会在$()返回之前立刻调用。

jQuery类库还使用jQuery()函数作为其命名空间,在下面定义了不少的工具函数和属性。比如jQuery.noConflict();就是其中的一个工具函数。还包括遍历的jQuery.each(),以及用来解析JSON文本的jQuery.parseJSON()。第7节例举了这些通用函数,jQuery的其它函数在本章中都会提及。

jQuery术语

在本章中会提到一些重要的术语和短语,我们来看下其定义

jQuery对象:

jQuery函数是jQuery或$()的值。该函数可以用来创建jQuery对象,用来注册DOM就绪时需要调用的处理程序,还用做jQuery命名空间。我们常用$()来引用它。它可以用来做命名空间,因此,jQuery函数也可称为"全局jQuery对象",但要千万注意,不要把它和"jQuery对象"混淆。

jQuery对象

jQuery对象是由jQuery函数返回的对象。一个jQuery对象表示一组文档元素,也叫“jQuery结果”,“jQuery集”或“包装集”。

jQuery函数

jQuery函数是指定义在jQuery命名空间中的函数,比如jQuery.noConflict()。jQuery函数也称为“静态方法”。

jQuery方法

jQuery方法是由jQuery函数返回的jQuery对象的方法。jQuery类库最重要的部分就是它定义的这些强大的方法,

jQuery函数和jQuery方法有时很难区分,因此有部分函数和方法的名称是一样的:注意以下两行代码的差异:

        //jQuery的each()函数用来对数组a中的每一个元素都调用一次函数f        $.each(a,f);                //调用jQuery()函数获取表示文档中所有<a>元素的jQuery对象        //然后调用该jQuery对象的each()方法,对选中的每一个元素调用一次函数f        $("a").each(f)

ii.查询与查询结果

传递css选择器字符串给$(),它返回的jQuery对象表示匹配(或称为“选中”)的元素集。css选择器在13.2.iiiii介绍过

$()返回值是一个jQuery对象,jQuery对象是类数组,它们拥有length属性和介于0~length-1之间的数值属性。(7章11节有更多类数组对象的信息),这意味着可以使用标准的数组标识方括号来访问jQuery对象的内容。

        $("body").length //=>1  文档只要一个唯一的body元素        $("body")[0] //等于document.body

如果不想把数组标识用来jQuery对象上,可以使用size()方法来替代length属性,用get()方法来代替方括号索引。可以使用toArray方法来讲jQuery对象转化为真实数组。除了length属性,jQuery对象还有三个挺有趣的属性。selector属性是创建jQuery对象时选择器字符串(如果有的话)、context属性是上下文对象,是传递给$()方法第二参数,如果没有,默认是Document对象。最后,所有jQuery对象都在一个名为jquery的属性,检测改属性是否存在可以简单便捷地将jQuery对象与其他类数组对象区分开来。jQuery属性值是字符串形式的jQuery版本号

        //获取document body中的所有<script>元素        var bodyscript = $("script",document.body);        bodyscript.selector;//=>script        bodyscript.context; //=>document.body        bodyscript.jquery;//=> "1.8.3"

$()与querySelectorAll()

$()函数与13章2节iiiii节描述的Document对象的querySelectorAll()方法类似:两者都有css选择器作为参数,并且返回类数组对象来存放匹配选择器的元素。在支持querySelectorAll()的浏览器中,jQuery实现调用会调用querySelectorAll()方法,然而,在代码中使用$()代替querySelectorAll()依旧是很好的选择:

  • querySelectorAll()在新近的浏览器中才实现能,$()在新老浏览器中都能跟踪
  • jQuery可以通过手动实现选择,因此$()支持的css3选择器在所有的浏览器中,而不是支持css3的浏览器
  • $()返回类 数组对象(Jquery对象),吧querySlectctorAll()返回的类数组对象(NodeList)更加有用

想要遍历jQuery对象中的所有元素时,可以调用each()方法来代替for循环,each()方法有点类似ECMAScript5(ES5)中的forEach()数组方法。它接受一个回调函数作为唯一的参数,然后对jQuery对象的中每一个元素(按照文档中的顺序)调用回调函数。回调函数作为匹配元素的方法来调用,因此,在回调函数里this关键字指代Element对象。each()方法还会将索引值和该元素作为第一个和第二个参数传递给回调函数。注意:this和第二参数都是原生文档元素,而不是jQuery对象;如果想使用jQuery方法来操作该元素,需要先用$()封装它。

jQuery的each()方法和forEach()有一个显著的区别:如果回调函数在任一个元素上返回false,遍历将在该元素中止(就像在普通循环中使用break关键字一样)。each()返回调用自身的jQuery对象,因此它可以用于链式调用。下面这个例子(使用prepend方法将在第三小节阐述):

            //给文档中的div元素标号,从开始一直到div#last(包含边界值)            $("div").each(function(idx){//找到div元素,然后遍历它们                $(this).prepend(idx + ":");//找到没一个元素前面插入索引值                if(this.id === "last") return false;//碰到#last元素时终止            });

尽管each()方法很强大,但是用的并不多,因为jQuery方法通常隐式遍历匹配元素集并操作它们。需要使用到each()的典型场景需要不同的方式操作匹配的元素集并操作它们。需要使用each()的典型场景是需要不同的方式来操作匹配的元素。即便如此,也不需要调用each(),因为jQuery的一些方法允许传递回调函数。

在ECMAScript数组方法规范之前,jQuery类库就已经存在了。jQuery定义了几个方法,其功能和ECMAscript5方法功能类似。jQuery的map()方法和Array.prototype.map()的方法很相近。

它接受回调函数作为参数,并为jQuery对象中的没一个元素都调用回调函数,同时将回调函数的返回值收集起来,并将这些返回值封装成一个新的jQuery对象返回。map()调用回调函数的方式和each()方法相同:元素作为this值和第二参数传入,元素的索引值作为第一参数传入。如果回调函数返回null或undefined,该值将被忽略,在本次调用中不会有任何新元素添加到新的jQuery对象中。如果回调函数返回数组或类数组对象(比如jQuery对象),将会扁平化它并将其中的元素一个个添加到新的jQuery对象中。注意:由map()返回的jQuery对象可以不包含文档元素,但它依旧可以像类数组对象一样使用:例如

            //找到所有标题元素,映射到它们的id,并转化为真实数组,然后排序            $(":header").map(function(){return this.id;}).toArray().sort();

除了each()和map()之外,jQuery的另外一个基础方法是index()。该方法接受一个元素作为参数,返回值是该元素在此jQuery对象中的索引值,如果找不到的话,则返回-1。显然,受jQuery的典型风格影响,index()方法有多个重载版本。传递一个jQuery对象作为参数,index()方法会对该对象的第一个元素进行搜索。如果传入的是字符串,index()会把它当成css选择器,并返回该jQuery对象中匹配该选择器的一组元素中的第一个元素的索引值。如果什么参数都不传入,index()方法返回该jQuery对象中第一个毗邻元素的索引值。

这里要讨论的最后一个通用的jQuery方法是is()。它接收一个选择器作为参数,如果选中元素中至少有一个匹配该选择器时,则返回true。可以在each()回调函数中使用它,例如:

                if($(this).is(":hidden")) return;//跳过隐藏元素                //对可见元素做点什么            });

2.jQuery的getter和setter

jQuery对象上最简单、

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表