jQuery新手入门教材

欢迎学习jQuery。jQuery是一个JavaScript库，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的框架体系。要想用jQuery，首先要安装上jQuery的开发环境。

首先下载jQuery

在jQuery官网：<a href=”http://jquery.com”>http://jquery.com</a>中下载最新版本的jQuery。

引入jQuery

<ol class="linenums" style="box-sizing:border-box;margin-top:0px;margin-bottom:0px;">
    
    <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
        <span class="tag" style="box-sizing:border-box;color:#1E347B;"><script</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="atn" style="box-sizing:border-box;color:teal;">src</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">=</span><span class="atv" style="box-sizing:border-box;color:#DD1144;">"http://libs.baidu.com/jquery/1.9.0/jquery.js"</span><span class="tag" style="box-sizing:border-box;color:#1E347B;">></script></span>
    </li>

</ol>

您是否很疑惑为什么我们没有在 script 标签中使用 type=”text/javascript” ？在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

jQuery语法

jQuery 语法是为HTML元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义jQuery
选择符(selector)”查询”和”查找”HTML元素
jQuery的action()执行对元素的操作

示例：

    <ol class="linenums" style="box-sizing:border-box;margin-top:0px;margin-bottom:0px;">
        
        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">this</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">hide</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">()-</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">隐藏当前元素</span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"p"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">hide</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">()-</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">隐藏所有段落</span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">".test"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">hide</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">()-</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">隐藏所有</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">class</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">=</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="str" style="box-sizing:border-box;color:#DD1144;">"test"</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">的所有元素</span>
        </li>

        <li class="L3" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"#test"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">hide</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">()-</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">隐藏所有</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> id </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">=</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="str" style="box-sizing:border-box;color:#DD1144;">"test"</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">的元素</span>
        </li>

    </ol>

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合，接下来我们将讲解更多的选择器的知识。

传说中的hello world

在学习新的编程知识的时候，往往都从一个“hello world”例子开始，那么学习jQuery，我们也从先从一个“hello world”开始。

    <ol class="linenums" style="box-sizing:border-box;margin-top:0px;margin-bottom:0px;">
        
        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="tag" style="box-sizing:border-box;color:#1E347B;"><title></span><span class="pln" style="box-sizing:border-box;color:#48484C;">传说中的hello world</span><span class="tag" style="box-sizing:border-box;color:#1E347B;"></title></span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="tag" style="box-sizing:border-box;color:#1E347B;"><script</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="atn" style="box-sizing:border-box;color:teal;">src</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">=</span><span class="atv" style="box-sizing:border-box;color:#DD1144;">"http://libs.baidu.com/jquery/1.9.0/jquery.js"</span><span class="tag" style="box-sizing:border-box;color:#1E347B;">></script></span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="tag" style="box-sizing:border-box;color:#1E347B;"><script</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="atn" style="box-sizing:border-box;color:teal;">type</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">=</span><span class="atv" style="box-sizing:border-box;color:#DD1144;">"text/javascript"</span><span class="tag" style="box-sizing:border-box;color:#1E347B;">></span>
        </li>

        <li class="L3" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="pln" style="box-sizing:border-box;color:#48484C;">document</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">ready</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span>
        </li>

        <li class="L4" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> alert</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"hello world!"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span>
        </li>

        <li class="L5" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">});</span>
        </li>

        <li class="L6" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="tag" style="box-sizing:border-box;color:#1E347B;"></script></span>
        </li>

    </ol>

    <ol class="linenums" style="box-sizing:border-box;margin-top:0px;margin-bottom:0px;">
        
        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="pln" style="box-sizing:border-box;color:#48484C;">document</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">ready</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//代码段</span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">});</span>
        </li>

    </ol>

可以简化成：

    <ol class="linenums" style="box-sizing:border-box;margin-top:0px;margin-bottom:0px;">
        
        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//代码段</span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">});</span>
        </li>

    </ol>

jQuery的优势：

轻量级。jQuery非常轻巧，最新的jQuery版本压缩后，大小保持在80k左右。
强大的选择器。jQuery允许使用从CSS1到CSS3几乎所有的选择器，以及jQuery自己的高级而复杂的选择器。甚至你可以编写属于自己的选择器。我们将在第二章中详细讲解。
出色的DOM操作的封装；jQuery封装了大量常用的DOM操作，让你能轻松地完成各种原本非常复杂的操作。第三章将重点介绍jQuery的DOM操作。
可靠的事件处理机制；第四章中我们将详细讲解。
完善的Ajax；jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关系复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。在第六章将会重点介绍。
出色的浏览器兼容性等等。但是jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

什么是选择器：

jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法快速轻松地对页面进行设置。了解jQuery选择器是打开jQuery之门的钥匙。

典型的jQuery选择器句法形式:

$(selector).methodName();

selector是一个字符串表达式，由于识别DOM中的元素，然后使用jQuery提供的方法集合加以设置。

根据所获取页面中元素的不同。可以将jQuery选择器分为几类：

基本选择器
层次选择器
过滤选择器
简单过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象属性过滤选择器4. 表单选择器

基础选择器

基础选择器是jQuery中使用最频繁的选择器，它由元素id、class、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找，如下表格：

选择器	功能	返回值
#id	根据给定的id匹配一个元素	单个元素
element	根据给定的元素名匹配所有元素	元素集合
.class	根据给定的类匹配元素	元素集合
*	匹配所有元素	元素集合
selector1,selectorN	将每一个选择器匹配到的元素合并后一起返回	元素集合

示例如下：

(1)描述

所有的元素标记全部显示，然后通过jQuery基础选择器隐藏相对应的页面标记。

(2)代码实现

    <ol class="linenums" style="box-sizing:border-box;margin-top:0px;margin-bottom:0px;">
        
        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">...省略代码</span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;"><</span><span class="pln" style="box-sizing:border-box;color:#48484C;">script type</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">=</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"text/javascript"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">></span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//id匹配元素</span>
        </li>

        <li class="L3" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"#divOne"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"display"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"none"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span>
        </li>

        <li class="L4" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L5" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//元素名匹配元素</span>
        </li>

        <li class="L6" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"div span"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"display"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"none"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span>
        </li>

        <li class="L7" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L8" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//类匹配元素</span>
        </li>

        <li class="L9" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">".clsFrame .clsOne"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"display"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"none"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span>
        </li>

        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//匹配所有元素</span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"*"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"display"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"none"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span>
        </li>

        <li class="L3" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L4" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//合并匹配元素</span>
        </li>

        <li class="L5" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"#divOne,span"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"display"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"none"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span>
        </li>

        <li class="L6" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L7" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;"><</span><span class="str" style="box-sizing:border-box;color:#DD1144;">/script></span>
        </li>

        <li class="L8" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="str" style="box-sizing:border-box;color:#DD1144;"> ...jQuery控制的代码</span>
        </li>

        <li class="L9" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="str" style="box-sizing:border-box;color:#DD1144;"> <div class="clsFrame"></span>
        </li>

        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="str" style="box-sizing:border-box;color:#DD1144;"> <div id="divOne">ID</</span><span class="pln" style="box-sizing:border-box;color:#48484C;">div</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">></span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;"><</span><span class="pln" style="box-sizing:border-box;color:#48484C;">div </span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">class</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">=</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"clsOne"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">></span><span class="pln" style="box-sizing:border-box;color:#48484C;">CLASS</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;"><</span><span class="str" style="box-sizing:border-box;color:#DD1144;">/div></span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="str" style="box-sizing:border-box;color:#DD1144;"> <span>SPAN</</span><span class="pln" style="box-sizing:border-box;color:#48484C;">span</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">></span>
        </li>

        <li class="L3" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;"></</span><span class="pln" style="box-sizing:border-box;color:#48484C;">div</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">></span>
        </li>

    </ol>

<!DOCTYPE HTML>
<html>
<head>
    <title> 使用jQuery基本选择器 </title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
    <div class="clsFrame">
        <div id="divOne">ID</div>
        <div class="clsOne">CLASS</div>
        <span>SPAN</span>
    </div>
</body>
</html>

jQuery层次选择器

层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，详细说明如下表：

选择器	功能	返回值
ancestor descendant	根据祖先元素匹配所有的后代元素	元素集合
parent > child	根据父元素匹配所有的子元素	元素集合
prev + next	匹配所有紧接在prev元素后的相邻元素	元素集合
prev ~ siblings	匹配prev元素之后的所有兄弟元素	元素集合

提示：ancestor descendant 与 parent > child 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外 prev + next 可以使用 .next() 代替，而prev ~ siblings可以使用nextAll()代替。

示例如下：

(1)描述

所有的元素标记初始全部显示，然后通过jQuery层次选择器隐藏相对应的页面标记。

(2)代码实现

    <ol class="linenums" style="box-sizing:border-box;margin-top:0px;margin-bottom:0px;">
        
        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> </span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="tag" style="box-sizing:border-box;color:#1E347B;"><script</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="atn" style="box-sizing:border-box;color:teal;">type</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">=</span><span class="atv" style="box-sizing:border-box;color:#DD1144;">"text/javascript"</span><span class="tag" style="box-sizing:border-box;color:#1E347B;">></span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//匹配后代元素</span>
        </li>

        <li class="L3" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"div span"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"display"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"none"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//隐藏div中所有的<span>标记</span>
        </li>

        <li class="L4" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L5" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//匹配子元素</span>
        </li>

        <li class="L6" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"div>span"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"display"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"none"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//隐藏div中子span标记</span>
        </li>

        <li class="L7" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L8" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//匹配后面元素</span>
        </li>

        <li class="L9" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"#divMid + div"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"display"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"none"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//隐藏id为divMid元素后的下一个div</span>
        </li>

        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"#divMid"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">next</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">().</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"display"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"none"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//匹配所有后面元素</span>
        </li>

        <li class="L3" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"#divMid ~ div"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"display"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"none"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//隐藏id为divMid元素后的所有div</span>
        </li>

        <li class="L4" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"#divMid"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">nextAll</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">().</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"display"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"none"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span>
        </li>

        <li class="L5" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L6" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//匹配所有相邻元素</span>
        </li>

        <li class="L7" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"#divMid"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">siblings</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"div"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"display"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"none"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//隐藏id为divMid元素的所有相邻div</span>
        </li>

        <li class="L8" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L9" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="tag" style="box-sizing:border-box;color:#1E347B;"></script></span>
        </li>

    </ol>

’
<!DOCTYPE HTML>
<html>
<head>
    <title> 使用jQuery层次选择器 </title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
    <div class="clsFraA">Left</div>
    <div class="clsFraA" id = "divMid">
        <span>
            <span class="clsFraC" id="Span2">Span</span>
        </span>
    </div>
    <div class="clsFraA">Right_1</div>
    <div class="clsFraA">Right_2</div>
</body>
</html>

jQuery 简单过滤选择器

过滤选择器根据某类g过滤规则进行元素的匹配，书写时都以冒号（:）开头；简单过滤选择器是过滤选择器中使用最广泛的一种，详细如下表：

选择器	功能	返回值
first()或 :first	获取第一个元素	单个元素
parent >last() 或 :last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:odd	获取所有索引值为奇数的元素，索引号从0开始	元素集合
:eq(index)	获取指定索引值得元素，索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
:lt(index)	获取所有小于给定索引值的元素，索引号从0开始	元素集合
:header	获取所有标题类型的元素，如h1、h2……	元素集合
:animated	获取正在执行动画效果的元素	元素集合

下面将通过示例来讲解如何通过过滤选择器定位DOM元素的方法。

示例如下：

(1)描述

通过简单过滤选择器获取元素，将选中的元素改变其类名称，从而突出其被选中的状态

(2)代码实现

    <ol class="linenums" style="box-sizing:border-box;margin-top:0px;margin-bottom:0px;">
        
        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">...省略代码</span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;"><</span><span class="pln" style="box-sizing:border-box;color:#48484C;">script type</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">=</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"text/javascript"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">></span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//增加第一个元素的类别</span>
        </li>

        <li class="L3" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"li:first"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">addClass</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"GetFocus"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//</span>
        </li>

        <li class="L4" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L5" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//增加最后一个元素的类别 </span>
        </li>

        <li class="L6" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"li:last"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">addClass</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"GetFocus"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//</span>
        </li>

        <li class="L7" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L8" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//增加去除所有与给定选择器匹配的元素类别</span>
        </li>

        <li class="L9" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"li:not(.NotClass)"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">addClass</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"GetFocus"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//</span>
        </li>

        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//增加所有索引值为偶数的元素类别，从0开始计数</span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"li:even"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">addClass</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"GetFocus"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//</span>
        </li>

        <li class="L3" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L4" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//增加所有索引值为奇数的元素类别，从0开始计数</span>
        </li>

        <li class="L5" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"li:odd"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">)</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">.</span><span class="pln" style="box-sizing:border-box;color:#48484C;">addClass</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"GetFocus"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">// </span>
        </li>

        <li class="L6" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L7" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//增加一个给定索引值的元素类别，从0开始计数</span>
        </li>

        <li class="L8" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"li:eq(1)"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">addClass</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"GetFocus"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">// </span>
        </li>

        <li class="L9" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//增加所有大于给定索引值的元素类别，从0开始计数</span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"li:gt(1)"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">addClass</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"GetFocus"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">// </span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L3" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//增加所有小于给定索引值的元素类别，从0开始计数</span>
        </li>

        <li class="L4" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"li:lt(4)"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">addClass</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"GetFocus"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">// </span>
        </li>

        <li class="L5" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L6" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//增加标题类元素类别</span>
        </li>

        <li class="L7" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"div h1"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">css</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"width"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"238"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">// </span>
        </li>

        <li class="L8" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">":header"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">addClass</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"GetFocus"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">// </span>
        </li>

        <li class="L9" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L0" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;">$</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(){</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//增加动画效果元素类别</span>
        </li>

        <li class="L1" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> animateIt</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">();</span>
        </li>

        <li class="L2" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"#spanMove:animated"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">addClass</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"GetFocus"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="com" style="box-sizing:border-box;color:#93A1A1;">// </span>
        </li>

        <li class="L3" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">})</span>
        </li>

        <li class="L4" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="kwd" style="box-sizing:border-box;color:#1E347B;">function</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> animateIt</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">()</span><span class="pln" style="box-sizing:border-box;color:#48484C;"> </span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">{</span><span class="com" style="box-sizing:border-box;color:#93A1A1;">//动画效果</span>
        </li>

        <li class="L5" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pln" style="box-sizing:border-box;color:#48484C;"> $</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"#spanMove"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">).</span><span class="pln" style="box-sizing:border-box;color:#48484C;">slideToggle</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">(</span><span class="str" style="box-sizing:border-box;color:#DD1144;">"slow"</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">,</span><span class="pln" style="box-sizing:border-box;color:#48484C;">animateIt</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">);</span>
        </li>

        <li class="L6" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">}</span>
        </li>

        <li class="L7" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;"></</span><span class="pln" style="box-sizing:border-box;color:#48484C;">script</span><span class="pun" style="box-sizing:border-box;color:#93A1A1;">></span>
        </li>

        <li class="L8" style="box-sizing:border-box;padding:0px;color:#BEBEC5;text-shadow:#FFFFFF 0px 1px 0px;">
            <span class="pun" style="box-sizing:border-box;color:#93A1A1;">...省略主体代码</span>
        </li>

        <li>
            
        </li>

    </ol>