1、第12章 回头重看jQuery核心及工具,到现在为止，读者已经看到了jQuery中的大部分内容，包括选择器、动画、AJAX支持等。孔子曾说，“学而时习之，不亦乐乎”。因此，时常回头看看已经学过的东西，可以让我们更加深刻的理解。本章将较为系统的介绍前面章节中多次使用的jQuery核心函数，并对jQuery中较常用的工具类函数进行介绍。,12.1 核心函数,jQuery核心函数可以说是jQuery中最重要的一种函数了，jQuery的核心功能都是通过这个函数实现的。jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。本节将详细介绍jQuery核心函数的各种形式以及使用方法。,12
2、.1.1 核心函数形式,jQuery核心函数的默认形式如表所示，其最基本的用法就是向它传递一个表达式（例如可以是一个CSS选择器表达式），然后根据这个表达式来查找所有匹配的元素。,12.1.2 使用核心函数,jQuery核心函数jQuery(expression,context)的最简单的使用方式就是只带一个参数。这个参数可以是一个表达式（通常由CSS选择器组成），也可以为XML文档或Window对象，甚至还可以为一段HTML代码。它还可以有第二个参数，用来设置其作用范围。,1参数为表达式 使用12.1.1节的测试页面，现希望修改页面上class为first的标签元素的显示样式，可以有如下代码
3、。$(“.first“).addClass(“indianred“); /* 核心函数使用 */ ,12.1.2 使用核心函数,2参数为XML文档或Window对象 jQuery核心函数的参数还可以为XML文档或Window对象，如有下面的代码。$(document.body).css( “background“, “white“ ); /* 核心函数使用 */该段代码将设置页面的背景色为白色，document.body用来定位到页面上的标签。,12.1.2 使用核心函数,3参数为HTML代码 jQuery核心函数还可以根据提供的原始HTML标记字符串，动态创建由jQuery对象包装的DOM元
4、素。可以传递一个手写的HTML字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过AJAX加载过来的字符串。如针对下面的代码。/* 核心函数使用 */$(“我是刚被 添加的“).appendTo(“#div1“); ,12.1.2 使用核心函数,12.2 jQuery对象访问,使用jQuery可以很容易地得到页面上的元素，并可以使用相应的API获得元素的属性。前面章节中已经介绍了jQuery选择器以及过滤器的使用，本节将介绍几个jQuery中较常用的进行对象访问及操作的方法和属性，分别用来获得jQuery对象的长度，获得页面中某个对象或者迭代某个对象集。,12.2.1 获得长度,所谓jQ
5、uery对象的长度即是指该页面上能够匹配该jQuery对象的元素的个数。在jQuery中，有两种方式用来获得jQuery对象的长度，一种是使用length属性直接获得，还有一种是使用size()函数。使用本章的测试页面。,12.2.2 获得其中某个对象,jQuery中用于获得页面中某个对象的方法有两个，get()函数以及index函数，下面将结合实例介绍。 1get()函数 get()函数可以带有一个参数或者不带参数，不带参数时将返回一个DOM元素的集合，带有一个参数的时候，参数表示匹配的DOM元素集合中的索引，函数原型如表12.2所示。,2index()函数 使用get(index)函数可以
6、根据已有的index定位匹配的元素位置，同样，如果在已经得到元素的情况下也可以查询其在某DOM元素数组中的位置，这就需要使用jQuery的index(subject)函数。,12.2.2 获得其中某个对象,12.2.3 遍历对象集,jQuery还提供了一个特殊的函数，用于遍历使用jQuery选择器得到的对象数组，这就是each(callback)函数。,12.3 数据缓存,在网页设计中，针对页面元素的数据保存一直是个容易被人忽视的问题。本节将介绍jQuery中特有的数据缓存机制以及其使用方式。,12.3.1 隐藏数据,在很多时候，都会有这种需求，需要为某个页面元素预留出一些特定的值（如默认值）
7、，但是又找不到地方保存。最常见的就是在一个提交表单当中，可以有用户输入框，可以有文本框，但是有些信息是不适合显示给用户的，这个时候一般的处理方式就是使用 type=“hidden“的标签，其作用就可以简单的看做是为了保存一些数据。,12.3.2 设置和获取元素的缓存数据,jQuery中用于设置元素的缓存数据的函数为data(name,value) 。,用于获取使用data(name,value)函数设置的数据的函数依然是data()函数。不过其只有一个参数，用于表示存储的数据名，也就是上面提到的变量名。,12.3.2 设置和获取元素的缓存数据,12.3.3 删除缓存数据,可以设置或者获得对应页
8、面上某元素的缓存数据，当然，也可以删除对应的缓存数据，jQuery中用于删除缓存数据的函数是removeData(name) 。,12.4 jQuery常用工具类,本节将介绍jQuery中提供的一些工具类，这些工具类使jQuery的功能更加强大，如用于检查浏览器版本信息，操作数据或者字符串等。,12.4.1 浏览器相关,jQuery中用一个专门的属性browser来标识浏览器内核，其信息是根据navigator.userAgent读取。此属性在DOM树加载完成前即有效，可用于为特定浏览器设置ready事件。浏览器对象检测技术与此属性共同使用可提供可靠的浏览器检测支持。jQuery.browse
9、r的可用值有： safari： opera： msie： mozilla：,12.4.2 数组与对象相关,几乎在所有的编程语言中，数组都是个十分重要的概念，在JavaScript中也不例外。因此，jQuery中专门针对数组以及对象实现了一系列的函数，来满足用户操作数组及对象的需要。 1each()：遍历数组或对象操作 jQuery中可以使用jQuery.each(obj,callback)函数对数组中的所有元素进行遍历。,2extend()：扩展数组 在对数组进行操作时，经常会需要对多个数组进行合并等操作，或者需要对一个数组进行元素内容的扩充，jQuery中用来扩充数组元素的函数是extend
10、。,12.4.2 数组与对象相关,3grep()：筛选数组元素 jQuery中的grep函数用于定义一些限制条件对数组的元素进行过滤筛选。,12.4.2 数组与对象相关,4inArray()：判定是否在数组中 jQuery中的inArray函数用于判断某元素是否存在于已知数组中。,12.4.2 数组与对象相关,5makeArray()：生成数组 jQuery中的makeArray函数可以用来自定义数组，它可以用来把一些分散的值组合成一个数组对象。,12.4.2 数组与对象相关,6map()：数组元素映射 jQuery还提供了用于数组间映射的函数，即jQuery.map(array,callba
11、ck)。使用map函数可以建立两个数组之间的一一对应关系。,12.4.2 数组与对象相关,7unique()：删除重复元素 jQuery中的jQuery.unique(array)函数用于删除制定数组中的重复元素。,12.4.2 数组与对象相关,12.4.3 其他功能性函数,jQuery的工具类函数中，除了上面介绍的浏览器相关函数以及数组对象相关的函数之外，还有一些其他的工具类函数，如测试对象是否为函数的函数，以及去除字符串头尾中的空格的函数等。 1isFunction()：测试对象是否为函数 isFunction()函数用于测试给定的对象是否是一个函数，其带有一个参数，即要测试的对象名。,2
12、trim()：去除字符串头尾中的空格 jQuery.trim(str)函数用于去掉字符串起始和结尾的空格。该函数只有一个参数，即要处理的字符串，这个函数在对用户输入的数据进行格式化时十分有用。,12.4.3 其他功能性函数,12.5 jQuery插件机制,jQuery之所以如此流行，在很大程度上得益于其开放性以及可扩展性。jQuery出现至今已经有大量优秀的插件出现。这些插件不但丰富和加强了jQuery的功能，也为使用者提供了更加便捷的方式来创建更加优秀可用性强的网站。本节将对jQuery中的插件机制作简单介绍。 jQuery具有很强的可扩展性，不但可以定义插件来对其进行扩展，甚至可以对jQu
13、ery对象本身进行扩展。jQuery中提供了与插件机制相关的两种方式。 jQuery.extend(object) jQuery.fn.extend(object),12.5.1 使用jQuery.extend(object),jQuery中没有提供用于比较两个数字大小的函数。这里，笔者将自己来对jQuery对象本身进行扩展，定义两个函数max()以及min()用来获得两个数字中的最大值和最小值,15.5.2 jQuery.fn.extend(object),jQuery.fn.extend(object)方法用于扩展jQuery元素集来提供新的方法。目前很多插件都是基于这种机制来实现的。,12.6 小结,本章对jQuery的核心方法进行了回顾，并介绍了jQuery中对象访问的通用函数，以及jQuery中的数据缓存机制和插件机制，同时，对jQuery中的常用工具类也进行了介绍，使用这些工具类，可以更方便地完成对浏览器检测、获得及处理数组与对象等操作。,
