前端架构师之01_JQuery

水深无声 2023-10-16 16:02 24阅读 0赞

### 1 jQuery快速入门 ###

#### 1.1 什么是jQuery ####

它是一个开源的JavaScript类库 。

常见的JavaScript类库：jQuery、Prototype、ExtJS、Mootools和YUI等。

jQuery的核心理念：write less，do more（写的更少，做的更多）。

jQuery的特点：

*  jQuery是一个轻量级的脚本，其代码非常小巧。
 *  语法简洁易懂，学习速度快，文档丰富。
 *  支持CSS1~CSS3定义的属性和选择器。
 *  跨浏览器，支持的浏览器包括IE6~IE11和Chrome等。
 *  实现了JavaScript脚本和HTML代码的分离，便于后期编辑和维护。
 *  插件丰富，可以通过插件扩展更多功能。

#### 1.2 下载jQuery ####

[jQuery下载链接][jQuery]

*  jQuery 1.x系列：已经停止更新，保持了对早期浏览器的支持，最终版本是jQuery 1.12.4。
 *  jQuery 2.x系列：已经停止更新，不再支持IE6~8浏览器，从而更加轻量级，最终版本是jQuery2.2.4 。
 *  jQuery 3.x系列：只支持最新的浏览器，因此除非特殊要求，一般不会使用此版本。

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_https_3A_2F_2Fgitee.com_2Frawait_2Frwpicgo_2Fraw_2Fmaster_2Fteaching_2F2022-03-25_2F202203251017749.png_pos_id_img-7yvaeDmH-1695883616291]

*  minified 压缩后的生产版、
 *  uncompressed 未压缩的开发版

打开链接 -> 右键，网页另存为（或者 Ctrl + S）-> 选择保存目录

#### 1.3 使用jQuery ####

<script src="jquery-1.12.4.min.js"></script>
    
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

*  方式1引入了当前目录下的jquery-1.12.4.min.js文件。
 *  方式2则通过公共的CDN的优势加快了jQuery文件的加载速度。

在HTML页面中创建含有文本“测试”和属性（align=“center”）的`<h2>`元素。

// 原生JavaScript的实现方式
    var h2 = document.createElement('h2'); 	// 创建h2元素节点
    var text = document.createTextNode('测试'); // 创建文本节点
    var attr = document.createAttribute('align');	// 创建属性节点
    attr.value = 'center'; 			// 为属性节点赋值
    h2.setAttributeNode(attr);  	// 为h2元素添加属性节点
    h2.appendChild(text); 		// 为h2元素添加文本节点
    // 将h2节点追加为body元素的子节点
    document.querySelector('body').appendChild(h2);
    
    // jQuery的实现方式
    $('<h2 align="center">测试</h2>').appendTo('body');

*  美元符号“$”表示jQuery类。
 *  “`$()`”等价于“`jQuery()`”，即jQuery的构造函数，为该构造函数传递一个元素，就可以创建出一个元素对象。

### 2 元素操作 ###

#### 2.1 jQuery对象 ####

jQuery对象：是对DOM对象的一层包装。

作用：是通过自身提供的一系列快捷功能来简化DOM操作的复杂度，提高程序的开发效率。

解决的问题：不同浏览器的兼容问题。

// 创建一个jQuery对象，该对象包装了document对象
    var $doc = $(document);
    // 在控制台中输出jQuery对象
    console.log($doc);

*  `$(document)`表示将document对象转换为jQuery对象。
 *  通过`console.log()`可以查看其内部结构。
 *  jQuery对象内部有3个元素。
 *  下标为0的元素表示其内部的DOM对象，即document对象。
 *  length表示其内部DOM对象的个数，一个jQuery对象中可以包装多个DOM对象。
 *  通过 `__proto__` 可以查看该对象的的原型（即jQuery本身）所具有的属性和方法。

#### 2.2 jQuery选择器 ####

jQuery选择器类似CSS选择器的机制的一种操作HTML元素的方式。

好处：可以轻松的获取DOM元素。

jQuery选择器的基本语法：$(选择器)。

根据选择器获取方式的不同大致可以将其分为以下几类。

*  基本选择器
 *  层级选择器
 *  基本过滤选择器
 *  内容选择器
 *  可见性选择器
 *  属性选择器
 *  子元素选择器
 *  表单选择器

##### 2.2.1 基本选择器 #####

jQuery中基本的选择器，常用的分别为：标签选择器、类选择器和ID选择器。

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>功能描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>element</td> 
   <td>根据指定元素名匹配所有元素</td> 
   <td><code>$("li")</code>选取所有的<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>.class</td> 
   <td>根据指定类名匹配所有元素</td> 
   <td><code>$(".bar")</code>选取所有class为bar的元素</td> 
  </tr> 
  <tr> 
   <td>#id</td> 
   <td>根据指定id匹配一个元素</td> 
   <td><code>$("#btn")</code>选取id为btn的元素</td> 
  </tr> 
  <tr> 
   <td>selector1,selector2,…</td> 
   <td>同时获取多个元素</td> 
   <td><code>$("li,p,div")</code>同时获取所有<code>&lt;li&gt;、&lt;p&gt;和&lt;div&gt;</code>元素</td> 
  </tr> 
 </tbody> 
</table>

##### 2.2.2 层级选择器 #####

层级选择器，通过一些指定符号，如空格、>、+和~完成多层级元素之间的获取。

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>功能描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>selector selector1</td> 
   <td>选取祖先元素下的所有后代元素</td> 
   <td><code>$("div .test")</code> 选取<code>&lt;div&gt;</code>下所有class名为test的元素（多级）</td> 
  </tr> 
  <tr> 
   <td>parent &gt; child</td> 
   <td>获取父元素下的所有子元素</td> 
   <td><code>$(".box &gt;.con")</code> 选取class名为box下的所有class名为con的子元素（一级）</td> 
  </tr> 
  <tr> 
   <td>prev + next</td> 
   <td>获取当前元素紧邻的一下同级元素</td> 
   <td><code>$("div + .title")</code>获取紧邻<code>&lt;div&gt;</code>的下一个class名为title的兄弟节点</td> 
  </tr> 
  <tr> 
   <td>prev~siblings</td> 
   <td>获取当前元素后的所有同级元素</td> 
   <td><code>$(".bar ~ li")</code>获取class名为bar的元素后的所有同级元素节点<code>&lt;li&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

##### 2.2.3 基本过滤选择器 #####

基本过滤选择器，表示对获取到的元素进行筛选，如偶数行中的元素等。

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>功能描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:first</td> 
   <td>获取指定选择器中的第一个元素</td> 
   <td><code>$("li :first")</code>获取第1个<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:last</td> 
   <td>获取指定选择器中的最后一个元素</td> 
   <td><code>$("li :last")</code>获取最后1个<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:even</td> 
   <td>获取索引为偶数的指定选择器中的奇数行数据，索引默认从0开始</td> 
   <td><code>$("li :even")</code>获取所有li元素中，索引为偶数的奇数行数据，如索引为0,2,4的第1个、第3个和第5个<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:odd</td> 
   <td>获取索引为奇数的指定选择器中的偶数行数据，索引默认从0开始</td> 
   <td><code>$("li :odd")</code>获取所有<code>&lt;li&gt;</code>元素中，索引为奇数的偶数行数据，如索引为1,3,5的第2个、第4个和第6个<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:eq(index)</td> 
   <td>获取索引等于index的元素，默认从0开始</td> 
   <td><code>$("li:eq(3)")</code>获取索引为3的<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:gt(index)</td> 
   <td>获取索引大于index的元素</td> 
   <td><code>$("li:gt(3)")</code>获取索引大于3的所有<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:lt(index)</td> 
   <td>获取索引小于index的元素</td> 
   <td><code>$("li:lt(3)")</code>获取索引小于3的所有<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:not(seletor)</td> 
   <td>获取除指定的选择器外的其他元素</td> 
   <td><code>$("li:not(li:eq(3))")</code>获取除索引为3外的所有<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:focus</td> 
   <td>匹配当前获取焦点的元素</td> 
   <td><code>$("input:focus")</code>匹配当前获取焦点的<code>&lt;input&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:animated</td> 
   <td>匹配所有正在执行动画效果的元素</td> 
   <td><code>$("div:not(:animated)")</code>匹配当前没有执行动画的<code>&lt;div&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:target</td> 
   <td>选择由文档URI的格式化识别码表示的目标元素</td> 
   <td>若URI为<code>http://example.com/#foo</code>，则<code>$("div:target")</code>将获取<code>&lt;div id="foo"&gt;</code>元素</td> 
  </tr> 
 </tbody> 
</table>

##### 2.2.4 内容选择器 #####

根据元素的内容完成指定元素的获取。例如，获取所有元素内容不为空的`<li>`等。

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>功能描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:contains(text)</td> 
   <td>获取内容包含text文本的元素</td> 
   <td><code>$("li:contains('js')")</code>获取内容中含“js”的<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:empty</td> 
   <td>获取内容为空的元素</td> 
   <td><code>$("li:empty")</code>获取内容为空的<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:has(selector)</td> 
   <td>获取内容包含指定选择器的元素</td> 
   <td><code>$("li:has('a')")</code>获取内容中含<code>&lt;a&gt;</code>元素的所有<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:parent</td> 
   <td>获取内容不为空的元素（特殊）</td> 
   <td><code>$("li:parent")</code>获取内容不为空的<code>&lt;li&gt;</code>元素</td> 
  </tr> 
 </tbody> 
</table>

##### 2.2.5 可见性选择器 #####

为了方便开发，jQuery中还提供了可见或隐藏元素的获取。

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>功能描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:hidden</td> 
   <td>获取所有隐藏元素</td> 
   <td><code>$("li:hidden")</code>获取所有隐藏的<code>&lt;li&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:visible</td> 
   <td>获取所有可见元素</td> 
   <td><code>$("li:visible")</code>获取所有可见的<code>&lt;li&gt;</code>元素</td> 
  </tr> 
 </tbody> 
</table>

*  当指定元素的display设置为none时，可以通过“:hidden”获取隐藏的元素。
 *  当指定元素的display设置为block时，可以通过“:visible”获取可见的元素。

##### 2.2.6 属性选择器 #####

根据元素的属性获取指定元素的方式。如获取class值为current的`<div>`元素等。

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>功能描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[attr]</td> 
   <td>获取具有指定属性的元素</td> 
   <td><code>$("div[class]")</code>获取含有class属性的所有<code>&lt;div&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>[attr=value]</td> 
   <td>获取属性值等于value的元素</td> 
   <td><code>$("div[class=current]")</code>获取class等于current的所有<code>&lt;div&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>[attr!=value]</td> 
   <td>获取属性值不等于value的元素</td> 
   <td><code>$("div[class!=current]")</code>获取class不等于current的所有<code>&lt;div&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>[attr^=value]</td> 
   <td>获取属性值以value开始的元素</td> 
   <td><code>$("div[class^=box]")</code>获取class属性值以box开始的所有<code>&lt;div&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>[attr$=value]</td> 
   <td>获取属性值以value结尾的元素</td> 
   <td><code>$("div[class$=er]")</code>获取class属性值以er结尾的所有<code>&lt;div&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>[attr*=value]</td> 
   <td>获取属性值包含value的元素</td> 
   <td><code>$("div[class*='-']")</code>获取class属性值中含有“-”符号的所有<code>&lt;div&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>[attr~=value]</td> 
   <td>获取元素的属性值包含一个value，以空格分隔</td> 
   <td><code>$("div[class~='box']")</code>获取class属性值等于“box”或通过空格分隔并含有box的<code>&lt;div&gt;</code>元素，如“t box”</td> 
  </tr> 
  <tr> 
   <td><code>[attr1][attr2]...[attrN]</code></td> 
   <td>获取同时拥有多个属性的元素</td> 
   <td><code>$("input[id][name$='usr']")</code>获取同时含有id属性和属性值以usr结尾的name属性的<code>&lt;input&gt;</code>元素</td> 
  </tr> 
 </tbody> 
</table>

##### 2.2.7 子元素选择器 #####

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>功能描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:nth-child(index/even/odd/公式)</td> 
   <td>索引index默认从1开始，匹配指定index索引、偶数、奇数、或符合指定公式（如2n，n默认从0开始）的子元素</td> 
  </tr> 
  <tr> 
   <td>:first-child</td> 
   <td>获取第一个子元素</td> 
  </tr> 
  <tr> 
   <td>:last-child</td> 
   <td>获取最后一个子元素</td> 
  </tr> 
  <tr> 
   <td>:only-child</td> 
   <td>如果当前元素是唯一的子元素，则匹配</td> 
  </tr> 
  <tr> 
   <td>:nth-last-child(index/even/odd/公式)</td> 
   <td>选择所有它们父元素的第n个子元素。计数从最后一个元素开始到第一个</td> 
  </tr> 
  <tr> 
   <td>:nth-of-type(index/even/odd/公式))</td> 
   <td>选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素</td> 
  </tr> 
  <tr> 
   <td>:first-of-type</td> 
   <td>选择所有相同的元素名称的第一个子元素</td> 
  </tr> 
  <tr> 
   <td>:last-of-type</td> 
   <td>选择所有相同的元素名称的最后一个子元素</td> 
  </tr> 
  <tr> 
   <td>:only-of-type</td> 
   <td>选择所有没有兄弟元素，且具有相同的元素名称的元素</td> 
  </tr> 
  <tr> 
   <td>:nth-last-of-type(index/even/odd/公式)</td> 
   <td>选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个</td> 
  </tr> 
 </tbody> 
</table>

带有“of-type” 与未带有“of-type”项的选择器有一定的区别。

##### 2.2.8 表单选择器 #####

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>功能描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:input</td> 
   <td>获取页面中的所有表单元素，包含<code>&lt;select&gt;</code>以及<code>&lt;textarea&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>:text</td> 
   <td>选取页面中的所有文本框</td> 
  </tr> 
  <tr> 
   <td>:password</td> 
   <td>选取所有的密码框</td> 
  </tr> 
  <tr> 
   <td>:radio</td> 
   <td>选取所有的单选按钮</td> 
  </tr> 
  <tr> 
   <td>:checkbox</td> 
   <td>选取所有的复选框</td> 
  </tr> 
  <tr> 
   <td>:submit</td> 
   <td>获取submit提交按钮</td> 
  </tr> 
  <tr> 
   <td>:reset</td> 
   <td>获取reset重置按钮</td> 
  </tr> 
  <tr> 
   <td>:image</td> 
   <td>获取<code>type="image"</code>的图像域</td> 
  </tr> 
  <tr> 
   <td>:button</td> 
   <td>获取button按钮，包括<code>&lt;button&gt;&lt;/button&gt;</code>和<code>type="button"</code></td> 
  </tr> 
  <tr> 
   <td>:file</td> 
   <td>获取<code>type="file"</code>的文件域</td> 
  </tr> 
  <tr> 
   <td>:hidden</td> 
   <td>获取隐藏表单项</td> 
  </tr> 
  <tr> 
   <td>:enabled</td> 
   <td>获取所有可用表单元素</td> 
  </tr> 
  <tr> 
   <td>:disabled</td> 
   <td>获取所有不可用表单元素</td> 
  </tr> 
  <tr> 
   <td>:checked</td> 
   <td>获取所有选中的表单元素，主要针对radio和checkbox</td> 
  </tr> 
  <tr> 
   <td>:selected</td> 
   <td>获取所有选中的表单元素，主要针对select</td> 
  </tr> 
 </tbody> 
</table>

选择器`$("input")`与`$(":input")`虽然都可以获取表单项，但是它们表达的含义有一定的区别，前者仅能获取表单标签是`<input>`的控件，后者则可以同时获取页面中所有的表单控件，包括表单标签是`<select>以及<textarea>`的控件。

#### 2.3 元素遍历 ####

在操作HTML文档中的DOM元素时，经常需要进行元素遍历。

jQuery提供的方法：`each()`。

<ul>
        <li>PHP</li><li>iOS</li>
        <li>Java</li><li>UI</li>
    </ul>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $('li').each(function(index, element) {
          
            console.log('第' + (index + 1) + '个:' + $(element).text());
        });
    </script>

> 提示：在回调函数内部还可以直接使用`$(this)`来表示当前元素。

#### 2.4 元素内容 ####

元素内容的操作有两种：获取和设置。

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>html()</td> 
   <td>获取第一个匹配元素的HTML内容</td> 
  </tr> 
  <tr> 
   <td>html(content)</td> 
   <td>设置第一个匹配元素的HTML内容</td> 
  </tr> 
  <tr> 
   <td>text()</td> 
   <td>获取所有匹配元素包含的文本内容组合起来的文本</td> 
  </tr> 
  <tr> 
   <td>text(content)</td> 
   <td>设置所有匹配元素的文本内容</td> 
  </tr> 
  <tr> 
   <td>val()</td> 
   <td>获取表单元素的value值</td> 
  </tr> 
  <tr> 
   <td>val(value)</td> 
   <td>设置表单元素的value值</td> 
  </tr> 
 </tbody> 
</table>

<div class="desc">
        <font color="red"><b>Smiles to the rocky</b></font>
        <ul>
            <li>天生我材必有用，千金散尽还复来。</li>
            <li>行到水穷处，坐看云起时。</li>
        </ul>
    </div>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        var desc = $('.desc');     // 获取class为desc的元素
        var html = desc.html();    // 获取desc的HTML内容（含有标签）
        var text = desc.text();    // 获取desc的文本内容
        console.log(html);
        console.log(text);
    </script>

`val()`方法还可以操作表单（select、radio和checkbox）的选中情况，当要获取的元素是`<select>`元素时，返回结果是一个包含所选值的数组；当要为表单元素设置选中情况时，可以传递数组参数。

#### 2.5 元素样式 ####

元素样式操作是指获取或设置元素的style属性。

在jQuery中，可以很方便的设置元素的样式、位置、尺寸等属性。

例如，通过`css()`方法可以设置背景色。

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>css(name)</td> 
   <td>获取第一个匹配元素的样式</td> 
  </tr> 
  <tr> 
   <td>css(properties)</td> 
   <td>将一个键值对形式的对象设置为所有匹配元素的样式</td> 
  </tr> 
  <tr> 
   <td>css(name, value)</td> 
   <td>为所有匹配的元素设置样式</td> 
  </tr> 
  <tr> 
   <td>width()</td> 
   <td>获取第一个匹配元素的当前宽度值（返回数值型结果）</td> 
  </tr> 
  <tr> 
   <td>width(value)</td> 
   <td>为所有匹配的元素设置宽度样式（可以是字符串或数字）</td> 
  </tr> 
  <tr> 
   <td>height()</td> 
   <td>获取第一个匹配元素的当前高度值（返回数值型结果）</td> 
  </tr> 
  <tr> 
   <td>height(value)</td> 
   <td>为所有匹配的元素设置高度样式（可以是字符串或数字）</td> 
  </tr> 
  <tr> 
   <td>offset()</td> 
   <td>获取元素的位置，返回的是一个对象，包含left和top属性</td> 
  </tr> 
  <tr> 
   <td>offset(properties)</td> 
   <td>利用对象设置元素的位置，必须包含left和top属性</td> 
  </tr> 
 </tbody> 
</table>

> css()方法中传递的参数若是对象，则需要去掉CSS属性中的“-”，将第2个单词的首字母变为大写。

<div style="width:100px; height:100px; background-color: red"></div>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        var ele = $('div');
        var w = ele.css('width');
        var h = ele.css('height');
        ele.css({
          border: '2px solid black', backgroundColor: '#ccc'});
        console.log('div元素的宽：' + w + '，高：' + h);
    </script>

#### 2.6 元素筛选 ####

jQuery提供的元素过滤和查找方法可提供元素个性化的处理，增强对文档的控制能力。

查找方法：

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>find(expr)</td> 
   <td>搜索所有与指定表达式匹配的元素</td> 
  </tr> 
  <tr> 
   <td>parents([expr])</td> 
   <td>取得一个包含所有匹配元素的祖先元素的元素集合（不包含根元素）</td> 
  </tr> 
  <tr> 
   <td>parent([expr])</td> 
   <td>取得一个包含所有匹配元素的唯一父元素的元素集合</td> 
  </tr> 
  <tr> 
   <td>siblings([expr])</td> 
   <td>获取所有同级元素（不分上下）</td> 
  </tr> 
  <tr> 
   <td>next([expr])</td> 
   <td>匹配紧邻的同级的下一个元素</td> 
  </tr> 
  <tr> 
   <td>prev([expr])</td> 
   <td>匹配紧邻的同级的上一个元素</td> 
  </tr> 
 </tbody> 
</table>

过滤方法：

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>eq(index)</td> 
   <td>获取第N个元素</td> 
  </tr> 
  <tr> 
   <td>filter(expr|obj|ele|fn)</td> 
   <td>使用选择器、对象、元素或函数完成指定元素的筛选</td> 
  </tr> 
  <tr> 
   <td>hasClass(class)</td> 
   <td>检查当前的元素是否含有某个特定的类，如果有，则返回true</td> 
  </tr> 
  <tr> 
   <td>is(expr)</td> 
   <td>用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true</td> 
  </tr> 
  <tr> 
   <td>has(expr)</td> 
   <td>保留包含特定后代的元素，去掉那些不含有指定后代的元素</td> 
  </tr> 
 </tbody> 
</table>

<div>
        <ul><li>Spring</li><li>summer</li></ul>
        <ul><li>autumn</li><li>winter</li></ul>
    </div>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        // 获取div下的所有ul
        $uls = $('div').find('ul');
        // 为下标为1的ul设置背景色
        $uls.eq(1).css('background-color', '#ccc');
    </script>

#### 2.7 元素属性 ####

基本属性的操作有三种：获取、设置和删除。

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>attr(name)</td> 
   <td>取得第一个匹配元素的属性值，否则返回undefined</td> 
  </tr> 
  <tr> 
   <td>attr(properties)</td> 
   <td>将一个键值对形式的对象设置为所有匹配元素的属性</td> 
  </tr> 
  <tr> 
   <td>attr(name, value)</td> 
   <td>为所有匹配的元素设置一个属性值</td> 
  </tr> 
  <tr> 
   <td>attr(name, function)</td> 
   <td>将函数的返回值作为所有匹配的元素的name属性值</td> 
  </tr> 
  <tr> 
   <td>prop(name)</td> 
   <td>取得第一个匹配元素的属性值，否则返回undefined</td> 
  </tr> 
  <tr> 
   <td>prop(properties)</td> 
   <td>将一个键值对形式的对象设置为所有匹配元素的属性</td> 
  </tr> 
  <tr> 
   <td>prop(name, value)</td> 
   <td>为所有匹配的元素设置一个属性值</td> 
  </tr> 
  <tr> 
   <td>prop(name, function)</td> 
   <td>将函数的返回值作为所有匹配的元素的name属性值</td> 
  </tr> 
  <tr> 
   <td>removeAttr(name)</td> 
   <td>从每一个匹配的元素中删除一个属性</td> 
  </tr> 
 </tbody> 
</table>

*  `attr()`和`prop()`方法只能获取第一个匹配元素的属性值。
 *  要获取所有匹配元素的属性值，则需要配合jQuery提供的`each()`方法进行元素遍历。

> 在获取或设置属性时，建议操作元素的状态，如checked、selected或disabled时使用prop()方法，其他的情况使用attr()方法。

虽然attr()方法可完成基本的属性操作，但是对于class属性的操作却不够灵活。

因此，为了方便操作，jQuery专门提供了针对class属性操作的方法。

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>作用</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>addClass(class)</td> 
   <td>追加样式</td> 
   <td>为每个匹配的元素追加指定的类名</td> 
  </tr> 
  <tr> 
   <td>removeClass(class)</td> 
   <td>移除样式</td> 
   <td>从所有匹配的元素中删除全部或者指定的类</td> 
  </tr> 
  <tr> 
   <td>toggleClass(class)</td> 
   <td>切换样式</td> 
   <td>判断指定类是否存在，存在则删除，不存在则添加</td> 
  </tr> 
  <tr> 
   <td>hasClass(class)</td> 
   <td>判断样式</td> 
   <td>判断元素是否具有class样式</td> 
  </tr> 
 </tbody> 
</table>

*  `addClass()`和`removeClass()`方法经常一起使用来切换元素的样式。
 *  若要为匹配到的元素添加和移除多个样式类名，则样式类名之间可使用空格进行分隔。

#### 2.8 练习作业 ####

*  折叠菜单
    
     *  编写网页，设置CSS完成折叠菜单的结构和样式设置。
     *  通过层级选择器、基本过滤选择器以及查找的方法获取指定的元素对象。
     *  通过`css()`方法设置需要折叠以及需要展开的菜单的display值。

### 3 DOM节点操作 ###

#### 3.1 节点追加 ####

节点追加指的是在现有的节点树中，进行父子或兄弟节点的追加。

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>作用</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>父子节点</td> 
   <td>append(content)</td> 
   <td>把content内容追加到匹配的元素内容尾部</td> 
  </tr> 
  <tr> 
   <td>父子节点</td> 
   <td>prepend(content)</td> 
   <td>把content内容追加到匹配的元素内容头部</td> 
  </tr> 
  <tr> 
   <td>父子节点</td> 
   <td>appendTo(content)</td> 
   <td>把匹配到的内容插入到content内容的尾部</td> 
  </tr> 
  <tr> 
   <td>父子节点</td> 
   <td>prependTo(content)</td> 
   <td>把匹配到的内容插入到content内容的头部</td> 
  </tr> 
  <tr> 
   <td>兄弟节点</td> 
   <td>after(content)</td> 
   <td>把content内容插入到元素的尾部</td> 
  </tr> 
  <tr> 
   <td>兄弟节点</td> 
   <td>before(content)</td> 
   <td>把content内容插入到元素的头部</td> 
  </tr> 
  <tr> 
   <td>兄弟节点</td> 
   <td>insertAfter(content)</td> 
   <td>把所有匹配的内容插入到content元素的尾部</td> 
  </tr> 
  <tr> 
   <td>兄弟节点</td> 
   <td>insertBefore(content)</td> 
   <td>把所有匹配的内容插入到content元素的头部</td> 
  </tr> 
 </tbody> 
</table>

*  父子节点添加指的是在匹配到的元素内部添加指定的content内容。
 *  兄弟节点指的是在匹配到的元素外部添加指定的content内容。

#### 3.2 节点替换 ####

节点替换是指将选中的节点替换为指定的节点。

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>replaceWith(content)</td> 
   <td>将所有匹配的元素替换成指定的HTML或DOM元素</td> 
  </tr> 
  <tr> 
   <td>replaceAll(selector)</td> 
   <td>用匹配的元素替换掉所有selector匹配到的元素</td> 
  </tr> 
 </tbody> 
</table>

replaceWith()方法的参数是一个函数时，它的返回值类型必须是字符串类型，用于完成指定元素的替换操作。

#### 3.3 节点删除 ####

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>empty()</td> 
   <td>清空元素的内容，但不删除元素本身</td> 
  </tr> 
  <tr> 
   <td>remove([expr])</td> 
   <td>清空元素的内容，并删除元素本身（可选参数expr用于筛选元素）</td> 
  </tr> 
  <tr> 
   <td>detach([expr])</td> 
   <td>从DOM中删除所有匹配的元素（保留所有绑定的事件、附加的数据等）</td> 
  </tr> 
 </tbody> 
</table>

*  `empty()`方法仅能删除匹配元素的文本内容，而元素节点依然存在。
 *  `remove()`方法则可以同时删除匹配元素本身和文本内容。

#### 3.4 节点复制 ####

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>clone([false])</td> 
   <td>复制匹配的元素并且选中这些复制的副本，默认参数为false</td> 
  </tr> 
  <tr> 
   <td>clone(true)</td> 
   <td>参数设置为true时，复制元素的所有事件处理</td> 
  </tr> 
 </tbody> 
</table>

开发中若在复制元素节点时，想要同时复制该节点的所有事件的处理，则可以将`clone()`方法的操作设置为true，否则节点复制时使用默认操作false即可。

#### 3.5 练习作业 ####

*  左移与右移
    
     *  编写网页，设置CSS完成左移右移的结构和样式设置。
     *  通过层级选择器和表单选择器获取选中的操作项。
     *  通过`append()`方法将匹配到的内容追加到指定元素的尾部。

### 4 事件操作 ###

#### 4.1 常用事件 ####

标签中通过属性设置事件，每个属性都由一个on和事件名组成。例如，点击事件对应的属性为onclick。

在jQuery中则可直接使用其提供的与事件类型同名的方法。例如，点击事件对应的方法为`click()`。

这些事件方法允许重复绑定处理程序，按照绑定顺序依次执行。

若省略参数，则表示触发事件。

<table> 
 <thead> 
  <tr> 
   <th>分类</th> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>表单事件</td> 
   <td>blur([[data],function])</td> 
   <td>当元素失去焦点时触发</td> 
  </tr> 
  <tr> 
   <td>表单事件</td> 
   <td>focus([[data],function])</td> 
   <td>当元素获得焦点时触发</td> 
  </tr> 
  <tr> 
   <td>表单事件</td> 
   <td>change([[data],function])</td> 
   <td>当元素的值发生改变时触发</td> 
  </tr> 
  <tr> 
   <td>表单事件</td> 
   <td>focusin([data],function)</td> 
   <td>在父元素上检测子元素获取焦点的情况</td> 
  </tr> 
  <tr> 
   <td>表单事件</td> 
   <td>focusout([data],function)</td> 
   <td>在父元素上检测子元素失去焦点的情况</td> 
  </tr> 
  <tr> 
   <td>表单事件</td> 
   <td>select([[data],function])</td> 
   <td>当文本框（包括<code>&lt;input&gt;</code>和<code>&lt;textarea&gt;</code>）中的文本被选中时触发</td> 
  </tr> 
  <tr> 
   <td>表单事件</td> 
   <td>submit([[data],function])</td> 
   <td>当表单提交时触发</td> 
  </tr> 
  <tr> 
   <td>键盘事件</td> 
   <td>keydown([[data],function])</td> 
   <td>键盘按键被按下时触发</td> 
  </tr> 
  <tr> 
   <td>键盘事件</td> 
   <td>keypress([[data],function])</td> 
   <td>键盘按键（Shift等非字符键除外）被按下时触发</td> 
  </tr> 
  <tr> 
   <td>键盘事件</td> 
   <td>keyup( [[data],function ])</td> 
   <td>键盘按键被松开时触发</td> 
  </tr> 
  <tr> 
   <td>鼠标事件</td> 
   <td>mouseover([[data],function])</td> 
   <td>当鼠标移入对象时触发</td> 
  </tr> 
  <tr> 
   <td>鼠标事件</td> 
   <td>mouseout([[data],function])</td> 
   <td>在鼠标从元素上离开时触发</td> 
  </tr> 
  <tr> 
   <td>鼠标事件</td> 
   <td>click([[data],function])</td> 
   <td>当单击元素时触发</td> 
  </tr> 
  <tr> 
   <td>鼠标事件</td> 
   <td>dblclick([[data],function])</td> 
   <td>当双击元素时触发</td> 
  </tr> 
  <tr> 
   <td>鼠标事件</td> 
   <td>mousedown([[data], function])</td> 
   <td>当鼠标指针移动到元素上方，并按下鼠标按键时触发</td> 
  </tr> 
  <tr> 
   <td>鼠标事件</td> 
   <td>mouseup([[data], function])</td> 
   <td>当在元素上放松鼠标按钮时，会被触发</td> 
  </tr> 
  <tr> 
   <td>浏览器事件</td> 
   <td>scroll([[data],function])</td> 
   <td>当滚动条发生变化时触发</td> 
  </tr> 
  <tr> 
   <td>浏览器事件</td> 
   <td>resize([[data], function])</td> 
   <td>当调整浏览器窗口的大小时会被触发</td> 
  </tr> 
 </tbody> 
</table>

*  参数function表示触发事件时执行的处理程序（函数）。
 *  参数data用于为事件处理函数传递数据。（可在事件处理函数中使用“事件对象.data”获取）

$('input[type=text]').focus(function() {
         // 文本框获取焦点
        var tips = $('<span></span>');
        tips.html('请按要求输入');
        $('input:focus').after(tips);
    });
    $('input[type=text]').blur(function() {
          // 文本框失去焦点
        $(this).next().remove();
    });

// div块的移动
    // 事件对象.which：获取当前按下键盘的对应码值keyCode
    // 通过offset()获取当前按下键盘时div元素的位置（left和top值）
    // 根据码值修改div元素位置（ left和top值）
    // 提示：37（左）、38（上）、39（右）、40（下）
    $(document).keydown(function(event) {
        
        var opt = event.which;            // 获取当前按下键盘的对应码值keyCode
        var item = $('.boxes');           // 获取操作的元素
        var left = item.offset().left;    // 获取元素距离文档左侧的位置，单位像素
        var top = item.offset().top;      // 获取元素距离文档上面的位置，单位像素
        switch(opt) {
        
            case 37: item.offset({
        left: left - 1, top: top}); break;    // 左
            case 38: item.offset({
        left: left, top: top - 1}); break;    // 上
            case 39: item.offset({
        left: left + 1, top: top}); break;    // 右
            case 40: item.offset({
        left: left, top: top + 1}); break;    // 下
        }
    });

// 鼠标移入
    $('.hit').mouseover(function() {
        
        $(this).css('background-color', 'green');
    });
    // 鼠标移出
    $('.hit').mouseout(function() {
        
        $(this).css('background-color', '');
    });

#### 4.2 页面加载事件 ####

<table> 
 <thead> 
  <tr> 
   <th>类比选项</th> 
   <th><code>window.onload</code></th> 
   <th><code>$(document).ready()</code></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>执行时机</td> 
   <td>必须等待网页中的所有内容加载完成后（包括外部元素，如图片）才能执行</td> 
   <td>网页中的所有DOM结构绘制完成后就执行（可能关联内容并未加载完成）</td> 
  </tr> 
  <tr> 
   <td>编写个数</td> 
   <td>不能同时编写多个</td> 
   <td>能够同时编写多个</td> 
  </tr> 
  <tr> 
   <td>简化写法</td> 
   <td>无</td> 
   <td>$()</td> 
  </tr> 
 </tbody> 
</table>

jQuery中的ready与JavaScript中的onload相比，不仅可以在页面加载后立即执行，还允许注册多个事件处理程序。

// jQuery中的页面加载事件方法有3种语法形式，具体如下。
    $(document).ready(function() {
          });  // 语法方式1
    $().ready(function() {
          });		     // 语法方式2
    $(function() {
          });			         // 语法方式3

#### 4.3 事件绑定与切换 ####

事件处理机制，即事件绑定和事件切换，统一了事件处理的各种方法。

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>on(events,[selector],[data],function)</td> 
   <td>在匹配元素上绑定一个或多个事件处理函数</td> 
  </tr> 
  <tr> 
   <td>off(events,[selector],[function])</td> 
   <td>在匹配元素上移除一个或多个事件处理函数</td> 
  </tr> 
  <tr> 
   <td>one(events,[data],function)</td> 
   <td>为每个匹配元素的事件绑定一次性的处理函数</td> 
  </tr> 
  <tr> 
   <td>trigger(type,[data])</td> 
   <td>在每个匹配元素上触发某类事件</td> 
  </tr> 
  <tr> 
   <td>triggerHandler(type,[data])</td> 
   <td>同trigger()，但浏览器默认动作将不会被触发</td> 
  </tr> 
  <tr> 
   <td>hover([over,]out)</td> 
   <td>元素鼠标移入与移出事件切换</td> 
  </tr> 
 </tbody> 
</table>

*  参数events表示事件名（多个用空格分隔）。
 *  参数selector表示选择器。
 *  参数data表示将要传递给事件处理函数function的数据。
 *  参数type表示为元素添加的事件类型（多个用空格分隔）。
 *  参数over和out分别表示鼠标移入移出时的事件处理函数。

// 事件的绑定
    $('div').on('click', function() {
        
        console.log('已完成单点击');
    });
    // 事件的取消
    $('div').off('click');
    // 绑定单次事件
    $('div').one('click', function() {
        
        console.log('已完成1次单点击');
    });
    // 多个事件绑定同一个函数
    $('div').on('mouseover mouseout', function() {
        
        console.log('鼠标移入或移出');
    });
    // 多个事件绑定不同的函数
    $('div').on({
        
        mouseover: function() {
        
            console.log('鼠标移入');
        },
        mouseout: function() {
        
            console.log('鼠标移出');
        }
    });
    // 为以后创建的元素委派事件
    $('body').on('click', 'div', function() {
        
        console.log('收到');
    });
    //测试：创建<div>元素
    $('body').append('<div>测试</div>');
    // 鼠标移入移出事件切换
    $('div').hover(function() {
        
        console.log('鼠标移入')
    }, function() {
        
        console.log('鼠标移出');
    });

> `on()`方法与`off()`方法是jQuery从1.7版本开始新增的方法。jQuery官方推荐使用on()方法进行事件绑定，在新版本中已经取代了`bind()`、`delegate()`和`live()`方法。

#### 4.4 练习作业 ####

*  手风琴效果
    
     *  编写网页，设置CSS完成手风琴的结构和样式设置。
     *  为所有图片添加鼠标移入与移出事件。
     *  鼠标移入时，将当前元素的width设为图片的原宽，`其他图片的width= (<div>的宽度 - 图片的原宽) / 剩余图片元素个数`。
     *  鼠标移出时，`所有图片的width=<div>的宽度 / 所有图片的个数`。

### 5 动画特效 ###

#### 5.1 常用动画 ####

<table> 
 <thead> 
  <tr> 
   <th>分类</th> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>基本特效</td> 
   <td>show([speed,[easing],[fn]])</td> 
   <td>显示隐藏的匹配元素</td> 
  </tr> 
  <tr> 
   <td>基本特效</td> 
   <td>hide([speed,[easing],[fn]])</td> 
   <td>隐藏显示的匹配元素</td> 
  </tr> 
  <tr> 
   <td>基本特效</td> 
   <td>toggle([speed],[easing],[ fn])</td> 
   <td>元素显示与隐藏切换</td> 
  </tr> 
  <tr> 
   <td>滑动特效</td> 
   <td>slideDown([speed],[easing],[ fn])</td> 
   <td>垂直滑动显示匹配元素（向下增大）</td> 
  </tr> 
  <tr> 
   <td>滑动特效</td> 
   <td>slideUp([speed,[easing],[ fn]])</td> 
   <td>垂直滑动显示匹配元素（向上减小）</td> 
  </tr> 
  <tr> 
   <td>滑动特效</td> 
   <td>slideToggle([speed],[easing],[ fn])</td> 
   <td>在slideUp()和slideDown()两种效果间的切换</td> 
  </tr> 
  <tr> 
   <td>淡入淡出</td> 
   <td>fadeIn([speed],[easing],[ fn])</td> 
   <td>淡入显示匹配元素</td> 
  </tr> 
  <tr> 
   <td>淡入淡出</td> 
   <td>fadeOut([speed],[easing],[ fn])</td> 
   <td>淡出隐藏匹配元素</td> 
  </tr> 
  <tr> 
   <td>淡入淡出</td> 
   <td>fadeTo([[speed],opacity,[easing],[ fn]])</td> 
   <td>以淡入淡出方式将匹配元素调整到指定的透明度</td> 
  </tr> 
  <tr> 
   <td>淡入淡出</td> 
   <td>fadeToggle([speed,[easing],[ fn]])</td> 
   <td>在fadeIn()和fadeOut()两种效果间的切换</td> 
  </tr> 
 </tbody> 
</table>

*  参数speed表示动画的速度，可设置为动画时长的毫秒值（如1000），或预定的3种速度（slow、fast和normal）。
 *  参数easing表示切换效果，默认效果为swing，还可以使用linear效果。
 *  参数fn表示在动画完成时执行的函数。
 *  参数opacity表示透明度数值（范围在0~1之间，0代表完全透明，0.5表示50%透明，1代表完全不透明）。

#### 5.2 自定义动画 ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>animate(params [,speed] [,easing] [,fn])</td> 
   <td>用于创建自定义动画的函数</td> 
  </tr> 
  <tr> 
   <td>$.speed([speed] [,settings])</td> 
   <td>创建一个包含一组属性的对象用来定义自定义动画</td> 
  </tr> 
  <tr> 
   <td>queue([queueName])</td> 
   <td>显示被选元素上要执行的函数队列</td> 
  </tr> 
  <tr> 
   <td>delay(speed [,queueName])</td> 
   <td>设置一个延时来推迟执行队列中之后的项目</td> 
  </tr> 
  <tr> 
   <td>clearQueue([queueName])</td> 
   <td>从尚未运行的队列中移除所有项目</td> 
  </tr> 
  <tr> 
   <td>dequeue([queueName])</td> 
   <td>从队列移除下一个函数，然后执行函数</td> 
  </tr> 
  <tr> 
   <td>finish([queueName])</td> 
   <td>停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画</td> 
  </tr> 
  <tr> 
   <td>stop([clearQueue] [, jumpToEnd])</td> 
   <td>停止所有在指定元素上正在运行的动画</td> 
  </tr> 
 </tbody> 
</table>

*  参数params表示一组包含动画最终属性值的集合。
 *  参数settings是easing与fn组成的一个对象集合。
 *  参数queueName表示队列名称，默认值为fx（标准效果队列）。
 *  参数clearQueue与jumpToEnd都是布尔类型，默认值为false，前者规定是否停止被选元素所有加入队列的动画，后者规定是否立即完成当前的动画。

<input id="btn" type="submit" value="开始动画"><div></div>
    <script>	
        $('#btn').click(function () {
          
            $('div').css({
          background: 'red', width: 0, height: 0});
            var params = {
          width: '100px', height: '100px'};
            var settings = $.speed(2000, 'linear');
            $('div').animate(params, settings);
        });
    </script>

// 动画队列
    $('div').show('slow')
        .animate({
        left: '+=200'}, 2000)
        .animate({
        left: '-=200'}, 1500)
        .slideUp('normal', runQue);
    // 队列长度
    $('div').queue('fx').length;

div.show('slow')
        .animate({
        left: '+=200'}, 2000)
        .queue(function() {
        
        // 为队列添加额外操作
        $(this).css('background', 'green').dequeue();
    })
        .animate({
        left: '-=200'}, 1500)
        .slideUp('normal', runQue)
        .queue(function() {
        
        // 为队列添加额外操作
        $(this).css('background', 'red').dequeue();
    });

#### 5.3 练习作业 ####

*  无缝轮播图
    
     *  焦点图的各个图片（即需要轮播的图片）依次横向排列。
     *  设置焦点图的外边框的宽度以及超出隐藏，限定其只能显示一张图片。
     *  切换到下一张时，只需要修改焦点图外层样式中的left值，就可以将焦点图整体向左移动，从而显示第2张图片。
     *  当焦点图显示到最后一张图片时，再向左切换就会回到第一张图片，这就是无缝切换效果。
     *  为了实现这种效果，将第一张图片连接到最后一张图片的后面，然后等这张图片向左移动直到完全显示之后，立即将焦点图的left值设为0，就切换到第1张图片了。

### 6 jQuery操作Ajax ###

传统的Ajax是通过XMLHttpRequest实现的，不仅代码复杂，而且浏览器兼容问题也比较多。

jQuery中通过对Ajax操作的封装，极大地简化了Ajax操作的开发过程。

<table> 
 <thead> 
  <tr> 
   <th>分类</th> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>高级应用</td> 
   <td><code>$.get(url[,data][,fn][,type])</code></td> 
   <td>通过远程HTTP GET请求载入信息</td> 
  </tr> 
  <tr> 
   <td>高级应用</td> 
   <td><code>$.post(url[,data][,fn][, type])</code></td> 
   <td>通过远程HTTP POST请求载入信息</td> 
  </tr> 
  <tr> 
   <td>高级应用</td> 
   <td><code>$.getJSON(url[,data][,fn])</code></td> 
   <td>通过HTTP GET请求载入JSON数据</td> 
  </tr> 
  <tr> 
   <td>高级应用</td> 
   <td><code>$.getScript(url[,fn])</code></td> 
   <td>通过HTTP GET请求载入并执行一个JavaScript文件</td> 
  </tr> 
  <tr> 
   <td>高级应用</td> 
   <td><code>元素对象.load(url[,data] [,fn])</code></td> 
   <td>载入远程HTML文件代码并插入至DOM中</td> 
  </tr> 
  <tr> 
   <td>底层应用</td> 
   <td><code>$.ajax(url[,options])</code></td> 
   <td>通过HTTP请求加载远程数据</td> 
  </tr> 
  <tr> 
   <td>底层应用</td> 
   <td><code>$.ajaxSetup(options)</code></td> 
   <td>设置全局Ajax默认选项</td> 
  </tr> 
 </tbody> 
</table>

*  参数url表示待请求页面的URL地址。
 *  data表示传递的参数。
 *  参数fn表示请求成功时，执行的回调函数。
 *  参数type用于设置服务器返回的数据类型，如XML、JSON、HTML、TEXT等。
 *  参数options用于设置Ajax请求的相关选项。

<table> 
 <thead> 
  <tr> 
   <th>选项名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>处理Ajax请求的服务器地址</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>发送Ajax请求时传递的参数，字符串类型</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Ajax请求成功时所触发的回调函数</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>发送的HTTP请求方式，如get、post</td> 
  </tr> 
  <tr> 
   <td>datatype</td> 
   <td>期待的返回值类型，如xml、json、script或html数据类型</td> 
  </tr> 
  <tr> 
   <td>async</td> 
   <td>是否异步，true表示异步，false表示同步，默认值为true</td> 
  </tr> 
  <tr> 
   <td>cache</td> 
   <td>是否缓存，true表示缓存，false表示不缓存，默认值为true</td> 
  </tr> 
  <tr> 
   <td>contentType</td> 
   <td>请求头，默认值为application/x-www-form-urlencoded; charset=UTF-8</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>当服务器URL接收完Ajax请求传送的数据后触发的回调函数</td> 
  </tr> 
  <tr> 
   <td>jsonp</td> 
   <td>在一个jsonp请求中重写回调函数的名称</td> 
  </tr> 
 </tbody> 
</table>

$.post('index.php', {
        'id': 2, 'name': 'JS'}, function(msg) {
        
        console.log(msg.id + '-' + msg.name);    // 输出结果：2-JS
    }, 'json');

上述代码表示处理当前Ajax请求的地址是同级目录下的index.php，在Ajax请求成功后，接收index.php返回的JSON格式的数据并在控制台进行输出。

*  在jQuery中对Ajax的操作方法中，`$.ajax(url,[options])`是底层方法。
 *  通过该方法的options参数，可以实现`$.get()`、`$.post()`、 ‘ . g e t J S O N ( ) ‘ 和 ‘ \`.getJSON()\`和\` ‘.getJSON()‘和‘.getScript()\`方法同样的功能。
 *  下面列举`$.ajax()`方法的3种常用方式。
    
     *  只发送GET请求
        
            $.ajax('index.php');
     *  只配置setting参数，同样实现Ajax操作
        
            $.ajax('index.php',{
                    
                data: {
                    'book': 'PHP', 'sales': 2000},  // 要发送的数据
                success:function(msg){
                    // 请求成功后执行的函数
                    alert(msg);
                }
            });
     *  发送GET请求并传递数据，接收返回结果
        
            $.ajax({
                    
                type: 'GET
                url: 'index.php',
                data: {
                    'id': 2, 'name': 'JS'},
                success: function(msg) {
                    
                    console.log(msg);
                }
            });
            
            $.ajaxSetup({
                    
                type: 'GET',
                url: 'index.php',
                data:{
                    'id': 2, 'name': 'JS'},
                success: function(msg) {
                    
                    alert(msg);
                }
            });
            $.ajax();

除此之外，在jQuery中还为操作Ajax额外的提供了一些辅助的函数以及相关的Ajax事件处理方法，方便开发。

<table> 
 <thead> 
  <tr> 
   <th>分类</th> 
   <th>方法/函数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>辅助函数</td> 
   <td>$.param(obj)</td> 
   <td>创建数组或对象的序列化表示</td> 
  </tr> 
  <tr> 
   <td>辅助函数</td> 
   <td>serialize()</td> 
   <td>通过序列化表单值，创建URL编码文本字符串</td> 
  </tr> 
  <tr> 
   <td>辅助函数</td> 
   <td>serializeArray()</td> 
   <td>通过序列化表单值，创建对象数组（名称和值）</td> 
  </tr> 
  <tr> 
   <td>Ajax事件</td> 
   <td>ajaxComplete(fn)</td> 
   <td>Ajax请求完成时触发的事件执行函数</td> 
  </tr> 
  <tr> 
   <td>Ajax事件</td> 
   <td>ajaxError(fn)</td> 
   <td>Ajax请求发生错误时触发的事件执行函数</td> 
  </tr> 
  <tr> 
   <td>Ajax事件</td> 
   <td>ajaxSend(fn)</td> 
   <td>Ajax请求发送前触发的事件执行函数</td> 
  </tr> 
  <tr> 
   <td>Ajax事件</td> 
   <td>ajaxStart(fn)</td> 
   <td>Ajax请求开始时触发的事件执行函数</td> 
  </tr> 
  <tr> 
   <td>Ajax事件</td> 
   <td>ajaxStop(fn)</td> 
   <td>Ajax请求结束时触发的事件执行函数</td> 
  </tr> 
  <tr> 
   <td>Ajax事件</td> 
   <td>ajaxSuccess(fn)</td> 
   <td>Ajax请求成功时触发的事件执行函数</td> 
  </tr> 
 </tbody> 
</table>

// 序列化对象
    var data = {
        'id': 2, 'name': 'Lucy', skill: ['PHP', 'JS']};
    var seri_data = $.param(data);
    var deseri_data = decodeURIComponent(seri_data);
    // 输出结果：id=2&name=Lucy&skill%5B%5D=PHP&skill%5B%5D=JS
    console.log(seri_data); 
    // 输出结果：id=2&name=Lucy&skill[]=PHP&skill[]=JS
    console.log(deseri_data);

上述代码表示处理当前Ajax请求的地址是同级目录下的index.php，在Ajax请求成功后，接收index.php返回的JSON格式的数据并在控制台进行输出。

// 序列化表单数据
    $('input[type=button]').on('click', function () {
        
        console.log($('form').serialize());
        console.log($('form').serializeArray());
    });

Ajax各个事件处理的先后顺序为`ajaxStart() > ajaxSend() > ajaxSuccess()、ajaxError() > ajaxComplete() > ajaxStop()`。

根据Ajax请求是否发生错误在Ajax发送后执行ajaxSuccess()还是ajaxError()方法进行相关的处理。

$(document).ajaxError(function() {
        
        console.log('ajaxError');
    });
    $.post('index.php', {
        'id': 2, 'name': 'JS'}, function(msg) {
        
        console.log(msg.id + '-' + msg.name);
    }, 'xml');

### 7 插件机制 ###

#### 7.1 自定义插件 ####

*  封装jQuery对象方法
    
        // 在插件中封装1个方法
        (function($){
              
            $.fn.方法名 = function() {
              
                // 实现插件的代码
                ……
            };
        })(jQuery);
    
     *   . f n 是 j Q u e r y 的原型对象（相当于 .fn是jQuery的原型对象（相当于 .fn是jQuery的原型对象（相当于.prototype）。
     *  通过“$.fn.方法名”的方式将封装的功能方法对每一个jQuery实例都有效，成为jQuery的插件。
     *  jQuery的简写“ ”是可以被修改的，为了避免影响到插件中的代码，建议将插件方法放在“ ‘ ( f u n c t i o n ( ”是可以被修改的，为了避免影响到插件中的代码，建议将插件方法放在“\`(function( ”是可以被修改的，为了避免影响到插件中的代码，建议将插件方法放在“‘(function()\{……\})(jQuery);\`”这个包装函数中，该函数的参数$就表示jQuery全局对象。
    
        // 在插件中封装多个方法
        jQuery.fn.extend({
              
            方法名1:function(参数列表) {
              
                // 实现插件的代码
                ……
            },
            方法名2:function(参数列表) {
              
                // 实现插件的代码
                ……
            }
        });
    
     *  若要在一个插件中封装多个方法，则可以借助extend()方法，为该方法传递对象类型的参数。
     *  参数的设置按照JavaScript对象语法的编写方式即可实现多个方法的封装。
     *  插件文件的名称建议遵循“jquery.插件名.js”的命名规则，防止与其他JavaScript库插件混淆。
 *  定义全局函数
    
        // 定义全局函数的插件
        jQuery.extend({
              
            方法名1: function(参数列表){
              
                // 实现插件的代码
                ……
            },
            方法2: function(参数列表){
              
                // 实现插件的代码
                ……
            }
        });
    
     *  将自定义函数附加到jQuery命名空间下，从而作为一个公共的全局函数使用。
     *  例如，jQuery的ajax()方法就是利用这种途径内部定义的全局函数。
 *  自定义选择器
    
        $.expr[":"].方法名称 = function(obj) {
              
            // 自定义选择器代码
            return 匹配HTML元素的条件;
        };
    
     *  用户可以利用jquery.expr实现选择器的自定义。
     *  obj表示进行匹配的HTML元素对应的jQuery对象。
     *  根据需要对jQuery对象的属性进行判断，并使用return返回匹配结果。

#### 7.2 jQuery插件库 ####

随着jQuery的发展，诞生了许多优秀的插件。

网站地址为：http://plugins.jquery.com/。

通过在搜索框中输入插件名即可搜索需要的插件。

#### 7.3 jQuery UI ####

*  jQuery UI是在jQuery基础上新增的一个库。
 *  特点： 拥有强大的可扩展功能，具有吸引人的漂亮页面，能够更轻松地在网页中添加专业级的UI元素。
 *  举例：日历、菜单、拖拽、调整大小等交互效果。
 *  [下载地址][Link 1]

<script src="jQuery-1.12.4.min.js"></script>
    <script src="jquery-ui/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="jquery-ui/jquery-ui.css">
    
    <div id="datepicker"></div>
    
    
    <script>
        $('#datepicker').datepicker();
        
        // 自定义日历显示样式
        $('#datepicker').datepicker({
          
            changeMonth: true,      	// 下拉列表方式选择月份
            changeYear: true,       	// 下拉列表方式选择年
            firstDay: 1,            	// 星期显示顺序为：“Mo Tu We Th Fr Sa Su”
            showOtherMonths: true, // 当前月中空白的日期利用相邻月日期填充
        });
        
        // 自定义中文显示
        var m = ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'];
        var d = ['日', '一', '二', '三', '四', '五', '六'];
        $('#datepicker').datepicker({
          
            ……
            monthNamesShort: m,
            dayNamesMin: d,
        });
    </script>

> 在实际项目中若只做中文开发，则每次使用时都配置这些属性会比较麻烦，建议将中文相关的配置保存到一个JavaScript文件中，每次使用时直接引用即可。

#### 7.4 练习作业 ####

*  自定义全选与反选插件
    
     *  编写表格展示数据，为其提供“全选”、“反选”和“全不选”操作按钮。
     *  引入jQuery文件以及自定义的插件文件（待编写）。
     *  编写自定义插件文件，利用封装jQuery对象方法的方式实现插件。
     *  在HTML中，调用插件封装的方法，实现全选、反选以及全不选的功能。

ery-ui.min.js">

> 在实际项目中若只做中文开发，则每次使用时都配置这些属性会比较麻烦，建议将中文相关的配置保存到一个JavaScript文件中，每次使用时直接引用即可。
    
    
    
    ### 7.4 练习作业
    
    - 自定义全选与反选插件
      - 编写表格展示数据，为其提供“全选”、“反选”和“全不选”操作按钮。
      - 引入jQuery文件以及自定义的插件文件（待编写）。
      - 编写自定义插件文件，利用封装jQuery对象方法的方式实现插件。
      - 在HTML中，调用插件封装的方法，实现全选、反选以及全不选的功能。

[jQuery]: https://releases.jquery.com/
[20230724024159.png_origin_url_https_3A_2F_2Fgitee.com_2Frawait_2Frwpicgo_2Fraw_2Fmaster_2Fteaching_2F2022-03-25_2F202203251017749.png_pos_id_img-7yvaeDmH-1695883616291]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2Frawait%2Frwpicgo%2Fraw%2Fmaster%2Fteaching%2F2022-03-25%2F202203251017749.png&pos_id=img-7yvaeDmH-1695883616291
[Link 1]: https://jqueryui.com/