第12章 回头重看jQuery——核心及工具.pptVIP

第12章 回头重看jQuery——核心及工具 到现在为止，读者已经看到了jQuery中的大部分内容，包括选择器、动画、AJAX支持等。孔子曾说，“学而时习之，不亦乐乎”。因此，时常回头看看已经学过的东西，可以让我们更加深刻的理解。本章将较为系统的介绍前面章节中多次使用的jQuery核心函数，并对jQuery中较常用的工具类函数进行介绍。 12.1 核心函数 jQuery核心函数可以说是jQuery中最重要的一种函数了，jQuery的核心功能都是通过这个函数实现的。jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。本节将详细介绍jQuery核心函数的各种形式以及使用方法。 12.1.1 核心函数形式 jQuery核心函数的默认形式如表所示，其最基本的用法就是向它传递一个表达式（例如可以是一个CSS选择器表达式），然后根据这个表达式来查找所有匹配的元素。 12.1.2 使用核心函数 jQuery核心函数jQuery(expression,[context])的最简单的使用方式就是只带一个参数。这个参数可以是一个表达式（通常由CSS选择器组成），也可以为XML文档或Window对象，甚至还可以为一段HTML代码。它还可以有第二个参数，用来设置其作用范围。 12.1.2 使用核心函数 1．参数为表达式 使用12.1.1节的测试页面，现希望修改页面上class为first的p标签元素的显示样式，可以有如下代码。 script type=text/JavaScript $(.first).addClass(indianred); /* 核心函数使用 */ /script 12.1.2 使用核心函数 2．参数为XML文档或Window对象 jQuery核心函数的参数还可以为XML文档或Window对象，如有下面的代码。 script type=text/JavaScript $(document.body).css( background, white ); /* 核心函数使用 */ /script 该段代码将设置页面的背景色为白色，document.body用来定位到页面上的body标签。 12.1.2 使用核心函数 3．参数为HTML代码 jQuery核心函数还可以根据提供的原始HTML标记字符串，动态创建由jQuery对象包装的DOM元素。可以传递一个手写的HTML字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过AJAX加载过来的字符串。如针对下面的代码。 script type=text/JavaScript /* 核心函数使用 */ $(“div class=‘test’p我是刚被 添加的/p/div).appendTo(#div1); /script 12.2 jQuery对象访问 使用jQuery可以很容易地得到页面上的元素，并可以使用相应的API获得元素的属性。前面章节中已经介绍了jQuery选择器以及过滤器的使用，本节将介绍几个jQuery中较常用的进行对象访问及操作的方法和属性，分别用来获得jQuery对象的长度，获得页面中某个对象或者迭代某个对象集。 12.2.1 获得长度 所谓jQuery对象的长度即是指该页面上能够匹配该jQuery对象的元素的个数。在jQuery中，有两种方式用来获得jQuery对象的长度，一种是使用length属性直接获得，还有一种是使用size()函数。使用本章的测试页面。 12.2.2 获得其中某个对象 jQuery中用于获得页面中某个对象的方法有两个，get()函数以及index函数，下面将结合实例介绍。 1．get()函数 get()函数可以带有一个参数或者不带参数，不带参数时将返回一个DOM元素的集合，带有一个参数的时候，参数表示匹配的DOM元素集合中的索引，函数原型如表12.2所示。 12.2.2 获得其中某个对象 2．index()函数 使用get(index)函数可以根据已有的index定位匹配的元素位置，同样，如果在已经得到元素的情况下也可以查询其在某DOM元素数组中的位置，这就需要使用jQuery的index(subject)函数。 12.2.3 遍历对象集 jQuery还提供了一个特殊的函数，用于遍历使用jQuery选择器得到的对象数组，这就是each(callback)函数。 12.3 数据缓存 在网页设计中，针对页面元素的数据保存一直是个容易被人忽视的问题。本节将介绍jQuery中特有的数据缓存机制以及其使用方式。 12.3.1 隐藏数据 在很多时候，都会有这种需求，需要为某个页面元素预留出一些特定的值（如默认值），但是又找不到地方保存。最常见的就