jQuery知识点讲解

一.学习目标

掌握元素与节点的操作。
掌握 jQuery 事件处理机制。
掌握事件与动画特效的实现。
掌握 jQuery 中 Ajax 的操作。
掌握 jQuery 中插件机制的使用
能够使用 jQuery 实现事件处理。
能够使用 jQuery 实现页面动画效果。
能够实现综合项目实训的消除方块功能。
能够实现综合项目实训的胜负判断功能。

二.jQuery 选择器

jQuery 作为 JavaScript 封装的库，它的目的就是为了简化开发者使用 JavaScript.

使用<script>标记将该文件导入到自己的页面中即可.

<script src="js/jquery-3.5.1.min.js" ></script>

1.第一个 jQuery 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h2>nihao</h2>
    <script>
        $('h2').text('HelloWorld!')//设置页面上h2的文体
    </script>
</body>
</html>

该段代码的作用是使用 jQuery 的 text()方法，为 h2 标题元素设置文本内容“Hello world!”。

第一步:在$()函数中传入字符串 h2，表示 h2 元素
调用操作方法，如带有文本参数的 text(),方法用来给元素设置文本

下面我们通过代码对比 jQuery 和 JavaScript 原生代码的区别。

//jQuery 代码(为了方使对比，将代码分成两行书写)
//获取元素

var h2=$('h2'); //获取页面元素

h2.text('Hello world!'); //对元素操作

// Javascript 原生代码

var h2=document.querySelector('h2'); //获取页面元素

h2.innerText='Hello world!'; //对元素操作

2.jQuery 加载事件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <script>
        $(function(){
            var h2 =$('h2');     //获取页面元素h2 jQuery
            console.log('h2');
            he.text('HelloWorld');//对元素操作
        });
    </script>
</body>
</html>

3.jQuery 对象

将 jQuery 引入后，在全局作用域下会新増“$”和“jQuery”两个全局变量，这两个变量引用的是同一个对象，称为 jQuery 顶级对象。在代码中可以使用 jQuery 代替$，但一般为了方便，通常都直接使用$。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h2>0909</h2>
    <script>
        //使用$
        $(function(){
        $('h2').text('Hello world!');
        });
        //使用 jQuery
    //     jQuery(function(){
    //     jQuery('h2').text('Hello world!');
    // });
    </script>
</body>
</html>

jQuery 顶级对象类似一个构造函数，用来创建 jQuery 实例对象(简称 jQuery 对象)，但它不需要使用 new 进行实例化，它内部会自动进行实例化，返回实例化后的对象。

DOM 对象是用原生JavaScript 的 DOM 操作获取的对象，jQuery 对象是通过 jQuery 方式获取到的对象。这两种对象的使用方式不同，不能混用。

3.1DOM 对象转换成 jQuery 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <script>
        var myh2=document.querySelector('h2'); //获取 DOM 对象
        var h2=$(myh2); //转换成 jQuery 对象
        h2.text('Hello world!'); //使用 jQuery 方法


    </script>
</body>
</html>

3.2jQuery 对象转换成 DOM 对象

//从 jQuery 对象中取出 DOM 对象

$('h2')[0]; //方法 1
$('h2').get(0); //方法 2
//再对 DOM 对象进行操作

$('h2')[0].innerText='Hello world!';
$('h2').get(0).innerText='Hello world!';

4.基本选择器

名称	用法	描述
id 选择器	$("#id")	获取指定 id 的元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	Index 页面的结构文件获取同一类
标签选择器	$("div")	获取相同标签名的所有元素
并集选择器	$("div,p,li")	选取多个元素
交集选择器	$("li.current")	交集元素

4.1jQuery 的基本选择器的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h2 id='color'>颜色列表</h2>
    <div class="red">红色</div>
    <div class="yellow">黄色</div>
    <div class="blue">蓝色</div>
    <h2 id='city'>城市列表</h2>
    <p>常州</p>
    <p>南京</p>
    <h2>水果列表</h2>
    <ul>
        <li class="red">苹果</li>
        <li class="yellow">香蕉</li>
        <li class="blue">蓝莓</li>
        <li class="red">樱桃</li>
    </ul>
    <script>
        console.log($("h2"));
        console.log($("ul"));
        console.log($(".red"));
        console.log($("#city"));
        console.log($("p,li"));
        console.log($("li.red"));
        console.log($("*"));
</script>
</body>
</html>

5.层级选择器

层级选择器可以完成多层级元素之间的获取

名称	用法	描述
子代选择器	$("ul > li")	$("ul > li")子代选择器获取子级元素
后代选择器	$("ul li")	$("ul li")后代选择器获取后代元素

jQuery 层级选择器的使用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div>
        <li>红色</li>
        <li>黄色</li>
        <li>蓝色</li>
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>蓝莓</li>
        </ul>
    </div>
    <li>我是 div 外面的 li</li>
    <script>
        console.log($("div>li")); //获取 div 里的直接子元素 li
        console.log($("div li")); //获取 div 里的所有 li 元素

    </script>
</body>
</html>

代码$("div>li")只选择出 div 里的直接的三个 li 子元素，而代码$("div li")则选择出 div里的所有六个 li 元素

6.筛选选择器

筛选选择器用来筛选元素，通常和别的选择器搭配使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>葡萄</li>
        <li>樱桃</li>
    </ul>
        <div>
            <li>红色</li>
            <li>黄色</li>
            <li>紫色</li>
            <li>红色</li>
        </div>
    <script>
        $('ul li :first').css('color','red');//为匹配的元素设置文字颜色
        $('ul li:last').css('color','red');
        $('ul li:eq(2)').css('color','purple');
        $('div li:even').css('background-color','yellow');
        $('div li:odd').css('background-color','pink');
    </script>
</body>
</html>

代码$('ul li:first')将筛选出 ul 里的第一个 li 元素，即苹果。代码.css('color','red');

方法的作用是为匹配元素设置文本的颜色为红色。代码$('ul li:eq(2)')将筛选出 ul 里的索引为

2 的 li 元素，即葡萄，索引是从 0 开始的。代码$('div li:even')将筛选出 div 里的偶数

li 行，并通过 css('background-color','yellow');设置偶数行的背景色为黄色，注意是从第 0 行开始计算的，并且第 0 行被看作偶数行。代码$('div li:odd').css('background-color','pink');将筛选出 div 里的奇数 li 行，并设置背景色为粉色

实际开发中，有时需要对一个已经用选择器获取到的集合进行筛选，这时可以使用筛选方法

jQuery 的常用筛选方法的使用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h2 id='list1'>水果列表</h2>
    <ul class='fruit'>
        <li>苹果</li>
        <li>香蕉</li>
        <li>葡萄</li>
        <li>樱桃</li>
    </ul>
    <div>
        <h2 id='list2'>城市列表</h2>
            <p>常州</p>
            <p>南京</p>
            <p>无锡</p>
            <p>苏州</p>
    </div>
    <h1 id='list3'>动物乐园</h1>
    <ol>
        <li>猴子</li>
        <li>兔子</li>
        <li>大象</li>
        <li>斑马</li>
    </ol>
    <script>
            console.log($('#list2').parent());
            $('ul').children('li').css('color', 'blue');
            $('body').find('h2').css('color', 'red');
            $('body').find('#list3').css('color', 'pink');
            $('div>p').eq(2).siblings('p').css('font-style','italic');
            $('ol li').eq(0).nextAll().css('font-style','italic');
            $('ol li').eq(3).prevAll().css('text-decoration', 'underline');
            console.log($('ul').hasClass('fruit'));
            console.log($('ol').hasClass('fruit'));
</script>
</body>
</html>

7.其他选择器

(1)获取同级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h2 id="list1"></h2>
    <ul class="fruit">
        <li>苹果</li>
        <li>香蕉</li>
        <li>葡萄</li>
        <li>樱桃</li>
    </ul>
    <ul>
            <p>常州</p>
            <p>南京</p>
            <p>无锡</p>
            <p>苏州</p>
    </ul>
    <script>
        console.log($('h2~ul'));
        $('h2~ul').css('color','blue');
        console.log($('h2+ul'));
        $('h2 + ul').css('color','red');
    </script>
</body>
</html>

(2)筛选元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h2 id='list1'>水果列表</h2>
<ul class="fruit">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
<div>
<h2 id='list2'>城市列表</h2>
<p>常州</p>
<p>南京</p>
<p>无锡</p>
<p>苏州</p>
</div>
<h1 id='list3'>动物乐园</h1>
<ol>
<li>猴子</li>
<li>兔子</li>
<li>大象</li>
<li>斑马</li>
<li></li>
</ol>
<script>
$('p:gt(1)').css('color', 'blue');
$('p:lt(1)').css('color', 'red');
$('ul li:not(li:eq(1))').css('text-decoration', 'underline');
$('li:contains("子")').css('color', 'green');
$('li:empty').css('color', 'red');
console.log($('div:has("h2")'));
console.log($('h2:parent'));
</script>
</body>
</html>

(3)属性选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2 id='list1'>水果列表</h2>
<ul id="fruit">
<li class='fruit'>苹果</li>
<li class='fruit'>香蕉</li>
<li class='fruit'>葡萄</li>
<li class='fruit'>樱桃</li>
</ul>
<div>
<h2 id='list2'>城市列表</h2>
<p class='city1'>常州</p>
<p class='city1'>南京</p>
<p class='city2'>无锡</p>
<p class='city2'>苏州</p>
</div>
<h2 id='list3' class="animal">动物乐园</h2>
<ol>
<li class='animal'>猴子</li>
<li class='animal'>兔子</li>
<li class='animal'>大象</li>
<li class='animal'>斑马</li>
<li class='animal'></li>
</ol>
<script>
    console.log($('li[class]'));
    $('li[class="fruit"]').css('color', 'blue');
    $('li[class^="an"]').css('color', 'red');
    $('p[class*="y2"]').css('color', 'green');
    $('h2[id][class="animal"]').css('color', 'orange');
</script>
    </body>
    </html>

(4).子元素选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2 id='list1'>水果列表</h2>
<ul id="fruit">
<li class='fruit'>苹果</li>
<li class='fruit'>香蕉</li>
<li class='fruit'>葡萄</li>
<li class='fruit'>樱桃</li>
</ul>
<div>
    <h2 id='list2'>城市列表</h2>
        <p class='city1'>常州</p>
        <p class='city1'>南京</p>
        <p class='city2'>无锡</p>
        <p class='city2'>苏州</p>
    </div>
    <h2 id='list3' class="animal">动物乐园</h2>
        <ol>
            <li class='animal'>猴子</li>
            <li class='animal'>兔子</li>
            <li class='animal'>大象</li>
            <li class='animal'>斑马</li>
            <li class='animal'></li>
        </ol>
    <h2 id='list4'>鲜花列表</h2>
    <ul>
        <li>百合花</li>
    </ul>
    <script>
        $('ul li:first-child').css('color', 'blue');
        $('ul li:last-child').css('color', 'red');
        $('ul li:only-child').css('color', 'hotpink');
        $('p:first-of-type').css('text-decoration', 'underline');
        $('p:last-of-type').css('font-style','italic');
        $("ol li:nth-child(odd)").css('color', 'orange');
        $("ol li:nth-child(even)").css('color', 'green');
</script>
</body>
</html>

(5).表单选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <form>
        用户名：<input type="text" width="150px" /><br>
        密&nbsp;&nbsp;&nbsp;码：<input type="password" width="150px" /><br>
        重复密码：<input type="password" width="150px" />
        <hr />
        男<input type="radio" name="rb" checked="checked" />&nbsp;&nbsp;
        女<input type="radio" name="rb" />
        未知<input type="radio" name="rb" /><br />
        足球<input type="checkbox" value="football" />&nbsp;&nbsp;
        篮球<input type="checkbox" value="basketball" />&nbsp;&nbsp;
        羽 毛 球 <input type="checkbox" checked="checked" value="badminton"
        /><br />
        上传头像：<input type="file" />
        <textarea>自我介绍...</textarea>
        <hr />
        按钮：<input type="button" value="form 里的 input 按钮" /><br>
        重置：<input type="reset" value="重置" /><br>
        提交：<input type="submit" value="提交" />
        <hr />
</form>
    下面的都是 form 外的元素。<br />
    <button>ok</button>
<select>
    <option>a</option>
    <option>b</option>
</select>
    <textarea disabled="disabled">我是不可用的文本域。</textarea>
<hr />
<script>
    $(":text").css("border-color", "red");
    $(":password").css("border-color","red");
    $(":submit").css("border-color","red");
    $(":reset").css("border-color","red");
    $(":button").css("border-color","red");
    console.log($(":checkbox"));
    console.log($(":radio"));
    console.log($(":file"));
    console.log($(":disabled"));
    console.log($("form:checked"));
    console.log($(":input"));
    console.log($("form :input"));
</script>
</body>
</html>

三.jQuery 操作 DOM

Query 中的操作元素内容方法，主要包括 html()方法、text()方法和 val()方法。开发者可以根据不同的需求选择使用

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

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

1.操作元素内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素内容</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div>
        <span>我是span1的内容</span>
    </div>
    <div>
        <span>我是span2的内容</span>
    </div>
    <p>我是段落1的内容</p>
    <p>我是段落2的内容</p>
    <input type="text" value="我是默认文本">
    <input type="button" value="提交按扭">
    <script>
        //1.获取设置元素内容html()
        console.log($("div").html());
        $("div").html("<span>hello</span>");
        // 2. 获取设置元素文本内容 text()
        console.log($("p").text());
        $("p").text("我是新的段落内容");
        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $('input').val('我是新值');
    </script>
</body>
</html>

使用 html()方法获取的是第一个 div 中的内容，包含 html 标签的 span

元素，设置的是所有 div 的 html 内容。使用 text()方法获取的是所有 p 元素的文本内容，设置的也是所有 p 元素的文本内容。val()方法获取的是第一个 input 的 value 属性的值，设置的是所有 input 的 value 属性的值

2.jQuery 操作元素样式

jQuery 提供了两种用于样式操作的方法，分别是 css()方法和设置类样式的方法，css()方法可以直接读取或设置元素的样式，如 color、width、height 等，类样式需要通过给元素添加或者删除类名来操作元素的样式。

2.1．css()方法

(1).获取样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css获取样式</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <div>CCIT</div>
    <script>
        console.log($("div").css("width"));//结果为:200px
        console.log($("div").css("fontSize"));//结果为：16px
    </script>
</body>
</html>

$("div").css("width") 用来获取 div 元素的宽度值，结果为 200px ，$("div").css("fontSize")用来获取 div 中文本的字号，如果没有定义字号，则返回当前默认的字号，结果为 16px，其他未明显定义的样式，也可以通过 css()方法来获取样式的默认值。

(2).设置单个样式

css()方法的参数若是由一个属性名和对应的属性值组成，中间以逗号分隔，表示设置一组样式，注意属性必须加引号，值如果是数字，可以不用跟单位和引号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div></div>
    <script>
        $("div").css("width","200px");
        $("div").css("height","200px");
        $("div").css("background-color", "pink");
    </script>
</body>
</html>

(3).设置多个样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div></div>
    <script>
        $("div").css({
            width:200,
            height:200,
            backgroundColor:"pink",
            border:"2px solid blue"
        })
    </script>
</body>
</html>

在 css()方法的参数中设置了四组样式，分别设置 div 的宽、高、背景色和边框样式。宽和高的值是数字，可以不用写引号，也可以写成"200px"的形式

2．类操作

类操作就是通过操作元素的类名进行元素样式操作

而通过写一个类名，把类名加上或去掉就会显得很方便。下面我们通过代码演示类的添加、删除和切换。语法如下。其中 className 表示要添加或删除的类名。

添加类：$(selector).addClass(className)
移除类：$(selector).removeClass(className)
切换类：$(selector).toggleClass(className,switch)

(1).addClass()添加类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <p type="para"data-index='1'>我是段落</p>
    <script>
        $("p").attr("type","paragraph");
        $("p").attr("data-index","2");
        $('p').attr("style","color:red");
        console.log($("p").attr('type'));
        console.log($("p").attr('data-index'));
    </script>
</body>
</html>

代码 addClass('red')为第一个 div 添加了类名 red，使 div 呈现出红色的背景色。代码addClass('border') 为第二个 div 添加了类名 border，使 div 呈现了绿色边框。代码 addClass('redborder')为第三个 div 添加了两个类名，使 div 同时呈现了红色的背景和绿色的边框，注意两个类名要写在一个引号里，用空格隔开。

(2).removeClass()移除类

通过 removeClass 方法给页面元素删除一个或多个指定样式类。

(3).toggleClass()切换类

该方法用来为元素添加或移除某个类，如果类不存在，就添加该类，如果类存在，就移除该类，即在两种状态间进行切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <style>
        div{
              margin: 20px;
              width: 200px;
          }
          .red{
              background-color: red;
          }
          .border{
              border: 2px solid green;
          }   
      </style>
      <div>first div</div>
      <div>second div</div>
      <div>third div</div>
      <script>
        $("div").click(function() {
            $(this).toggleClass("red border");
        });
      </script>
</body>
</html>

使用 click()方法为所选择的多个 div 元素添加单击事件，当单击某个 div 时，使用代码$(this).toggleClass ("red border")检查该 div 元素是否有类 red 和 border，若有则进行移除，若无则进行添加

3 .jQuery 操作元素属性

3.1prop()方法

prop()方法用来设置或获取元素的固有属性值。元素固有属性是指元素本身自带的属性，如 img 元素的 src 属性。具体语法示例如下。

prop()方法获取属性值语法。

$(selector).prop("属性名")

prop()方法设置属性值语法。

$(selector).prop("属性", "属性值")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <a href="http://www.ccit.js.cn" title="无标题">我是超链接</a>
    <p type='para' style='color:red'>我是段落</p>
    <script>
    console.log($("a").prop('href'));
    $("a").prop("title", "首页");
    console.log($("a").prop('title'));
    console.log($("p").prop('type'));
    console.log($("p").prop('style'));
</script>
</body>
</html>

3.2attr()方法

attr()用来设置或获取元素的自定义属性，自定义属性是指用户给元素添加的非固有属性。

attr()方法获取属性值语法： $(selector).attr("属性名")
attr()方法设置属性值语法： $(selector).attr("属性名" , "属性值")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <p type="para"data-index='1'>我是段落</p>
    <script>
        $("p").attr("type","paragraph");
        $("p").attr("data-index","2");
        $('p').attr("style","color:red");
        console.log($("p").attr('type'));
        console.log($("p").attr('data-index'));
    </script>
</body>
</html>

3.3.data()方法

用来在指定的元素上存取数据，数据保存在内存中，并不会修改DOM元素结构；一旦页面刷新，之前存放的数据都将被移除。语法如下。

data()方法获取数据值语法： $(selector).data("数据名")
data()方法设置数据值语法： $(selector).data("数据名" , "数据值")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div>This is a DIV.</div>
    <script>
        $("div").data("uname", "Tom");
        $("div").data({ 
            "gender": "male", 
            "age": 18
        });
        console.log($("div").data("uname"));
        console.log($("div").data("gender"));
        console.log($("div").data("age"));
    </script>
</body>
</html>

4.jQuery操作DOM节点

jQuery提供了一系列方法可以实现对DOM节点进行操作，如对节点进行遍历、创建、添加和删除等。

4.1遍历元素

jQuery本身具有隐式迭代的效果，当一个jQuery对象中包含多个元素时，jQuery会对这些元素进行相同的操作。如果想要对这些元素进行遍历，可以使用jQuery提供的each()方法。

$(selector).each(function(index, domEle) {

//对每个元素进行操作的语句

});

说明：index参数是每个元素的索引号，domEle是每个DOM元素的对象（不是 jQuery对象），如果要想使用 jQuery方法，需要将这个DOM对象转换成为 jQuery对象，即$(domEle)。

(1).each方法遍历元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <script>
        var arr=["20px","25px","30px"];
        $("div").each(function(index,domEle){
            console.log(index);//查看索引号
            console.log(domEle);//查看DOM元素
            $(domEle).css("frontSize",arr[index]);//对每个元素设置字号
            $(domEle).css("marginTop","20px");//对每个元素设置顶外边距
        })
    </script>
</body>
</html>

使用数组 arr 保存了三个像素值。使用 each 方法对获取到的三个 div 进行遍历，分别查看三个 div 元素的索引号和 DOM 元素。代码$(domEle).css("fontSize", arr[index])，用来对每个 div 元素设置文本的字号，值来自于 arr 数组，使用$(domEle).css("marginTop", "20px")对每个元素设置相同的顶外边距。

2).each 方法遍历数组和对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <script>
        // 遍历数组
        var arr = ["JavaScript", "MySQL", "HTML5"];
        $.each(arr, function(index, element) {
            console.log(index); //数组的索引
            console.log(element); //数组元素
        });
        // 遍历对象
        var stud = {
        name: "Tom", gender: "male", age: 20, };
        $.each(stud, function(index, element) {
            console.log(index); //对象中的每个成员名
            console.log(element); //对象中的每个成员的值
        });
    </script>
</body>
</html>

4.2创建元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <script>
        var li=$("<li>new li</li>");
        console.log(li);
    </script>
</body>
</html>

4.3.添加元素

(1).内部添加

内部添加的方式可以实现在元素内部添加元素，并且可以放到内部的最后面或者最前面，分别可以使用 append()和 prepend()实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <ul>
        <li>我是原来的</li>
    </ul>
    <ol>
        <li>我是原来的</li>
    </ol>
        <script>
            var li_1 = $("<li>new li in ul</li>");
            $("ul").append(li_1); // 内部添加,放到 ul 内部的最后面
            var li_2 = $("<li>new li in ol</li>");
            $("ol").prepend(li_2); //内部添加,放到 ol 内部的最前面
        </script>
</body>
</html>

(2).外部添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <ul>
        <li>我是原来的</li>
    </ul>
    <ol>
        <li>我是原来的</li>
    </ol>
    <script>
        var h2 = $("<h2>new h2</h2>");
        $("ul").after(h2);//外部添加，放到ul外部的后面
        var h4 = $("<h4>new h4</h4>");
        $("ol").before(h4); //外部添加,放到 ol 外部的前面
    </script>
</body>
</html>

外部添加就是把元素放入目标元素的后面或者前面，分别使用 after()和 before()方法来实现。

4.删除元素

删除元素分为删除匹配的元素本身、删除匹配的元素里面的子节点两种情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <style>
        ul{
        width: 200px;
        height: 100px;
        background-color: pink;
        }
        ol{
            width: 200px;
            height: 100px;
            background-color: yellow;
            }
    </style>
    </head>
    <body>
        <ul>
            <li>apple</li>
            <li>orange</li>
        </ul>
        <ol>
            <li>红色</li>
            <li>橙色</li>
        </ol>
        <!-- <script>
            $('ul').empty(); //删除匹配的元素里面的子元素
            $('ol').remove(); //删除匹配的元素

        </script> -->
</body>
</html>

四.jQurey事件处理机制

1.页面加载事件

jQuery提供了ready事件作为页面加载事件，它在DOM元素加载完成后就可以被触发，响应速度得到提高。 ready事件的语法如下：

//写法1 $(document).ready(function(){

//页面加载后要执行的代码

});

//写法2 $(function(){

//页面加载后要执行的代码

});

1.1.jQuery的事件方法

常用的事件方法如表所示。大部分事件方法可以接收两个参数，data和handler。其中data为可选参数，当传入data的时候，事件处理程序可以接收到这个参数，并通过事件对象的data属性获取。

大部分事件方法可以接收两个参数，data 和 handler，其中 data 为可选参数，当传入 data的时候，事件处理程序可以接收到这个参数，并通过事件对象的 data 属性获取。

1).change 事件方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <style>
        form {
            width: 400px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <form>
        <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" class="form-control" id="email">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <script>
        $(document).ready(function() {
            var data = {
                name: 'JavaScript', 
                tool: 'jQuery' 
            };
            var email = $('#email');
            email.change(data, function (e) {
                console.log('change 事件被触发');
                console.log('传入的数据为:', e.data);
            });
        });
    </script>
</body>
</html>

2)hover事件方法

相比于其它事件方法，hover()方法比较特殊，它可以接收一个或两个事件处理程序作为参数。

当传入两个事件处理程序时，这两个程序会在鼠标移入（mouseenter）和移出（mouseleave）元素时分别执行
若只传入一个事件处理程序，那么当鼠标移入移出元素时，都执行该事件处理程序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="../js/jquery-3.5.1.min.js"></script>

</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">服务</a></li>
                    <li id="dropdown" class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">社区 <span class="caret"></span></a>
                        <ul id="dropdown-menu" class="dropdown-menu">
                            <li><a href="#">商城</a></li>
                            <li><a href="#">广场</a></li>
                            <li><a href="#">圈子</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <script>
        $(function(){
            $('#dropdown').hover(function(){
                $('#dropdown-menu').show();
            }, function(){
                $('#dropdown-menu').hide();
            });
        });
    </script>
</body>
</html>

左部有一个导航栏，最下面“社区”是一个下拉菜单，通过 hover()事件方法绑定两个事件处理程序，当鼠标移入“社区”时，执行 show()方法，下拉菜单显示出来，当鼠标移出“社区”时，执行 hide()方法，下拉菜单收起。

2.通过 on 方法绑定

(1)on处理方法

on 方法的基本语法如下所示：

$(selector).on( events [, childSelector ] [, data ], handler )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="btn">点击</button>
    <script>
        $('#btn').on('click',function(){
            alert('按钮被点击');
        })
    </script>
</body>
</html>

(2).on 多个事件绑定同一个事件处理程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <input type="text" id="input">
    <script>
        $(function(){
        $('#input').on('focus blur',function(){
            console.log('事件被触发');
        })
    })
    </script>
</body>
</html>

文本输入框同时绑定了 focus 事件和 blur 事件，这里需要使用空格分隔。当文本输入框获得焦点和失去焦点时，调试窗口都会打印出“事件被触发”的字符串。

(3).on 多个事件绑定不同事件处理程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <input type="text" id="input">

    <script>
        $(function(){
            $('#input').on({
                'focus': function(){
                    $(this).css('background', 'pink');
                },
                'blur': function(){
                    $(this).css('background', '');
                }
            });
        });
    </script>
</body>
</html>

on 方法也可以给不同的事件分别绑定不同的事件处理程序，此时 on 方法传入一个对象作为参数，该对象的键（key）为事件类型，值（value）为事件处理程序。

(4)on 事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>on事件委托</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <style>
        form{
            width: 400px;
            height: 20px;
        }
    </style>
</head>
<body>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">表单项</label>
            <div class="col-sm-5">
                <input type="text" class="form-control">
            </div>
            <button type="button" class="btn btn-default btn-add">新增</button>
            <button type="button" class="btn btn-default btn-delete">删除</button>
        </div>

        
        <button type="submit" class="btn btn-primary">提交</button>
        
    </form>
    <script>
        $('form').on('click', '.btn-add', function(){
            var group = $(this).parent('.form-group');
            var clone = group.clone();
            group.after(clone);
        })
        $('form').on('click', '.btn-delete', function(){
            var group = $(this).parent('.form-group');
            group.remove();
        })
    </script>
</body>
</html>

在某些表单中，表单项是不固定的，需要根据自己的需求新增或删除表单项,点击新增按钮会增加一行表单项，点击删除按钮会将当前行删除。

上例在 on 方法中传入了可选参数 childSelector，表示使用事件委托的方式，委托父元素 form 监听新增、删除按钮点击事件。这样做的好处在于，对于因为点击新增按钮而动态生成的表单行，点击这一行的新增或删除按钮，其功能也是有效的。如果是在$(‘.btn-add’)、$(‘.btn-delete’)上绑定事件，因为这两个选择器在绑定事件的瞬间，并不能包含动态生成表单行内的按钮，所以后添加到页面中的按钮不能正常作用，需要做额外的事件处理。

2.事件解绑

off 方法的基本语法如下所示：

$(selector).of ( events [, childSelector ] [, handler] )

1.off 移除单个事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
    <button id="remove">移除click事件</button>
    <script>
        $(function(){
            $('#btn').on({
                'click': function(){
                    console.log('触发click事件');
                },
                'mouseenter': function(){
                    console.log('触发 mouseenter 事件');
                }
            }); //按钮绑定 click 事件和 mouseenter 事件

            $('#remove').on('click', function(){
                $('#btn').off('click'); // 移除 click 事件
            });
        });
    </script>
</body>
</html>

id 为 btn 的按钮绑定了两个事件：click 事件和 mouseenter 事件，当鼠标移到 btn 上并点击时，调试窗口会打印出‘触发 mouseenter 事件’和‘触发 click 事件’的字符串。

id 为 remove 的按钮在点击时会移除 btn 上的 click 事件，而 mouseenter 事件保留，因此鼠标再次移到 btn 上并点击时，调试窗口只会打印出‘触发 mouseenter 事件’。

2.off 移除事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="remove">off移除事件委托</button>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">表单项</label>
            <div class="col-sm-5">
                <input type="text" class="form-control">
            </div>
            <button type="button" class="btn btn-default btn-add">新增</button>
            <button type="button" class="btn btn-default btn-delete">删除</button>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
    <script>
        $('form').on('click', '.btn-add', function(){
            var group = $(this).parent('.form-group');
            var clone = group.clone();
            group.after(clone);
        });
        $('form').on('click', '.btn-delete', function(){
            var group = $(this).parent('.form-group');
            group.remove();
        });
        $('form').on('click', function(){
            console.log('form 被点击');
        });
        $('#remove').on('click', function(){
            $('form').off('click', '**');
        });
    </script>
</body>
</html>

“新增按钮”和“删除按钮”的单击事件委托在了表单 form 的单击事件上，所以点击“新增按钮”会增加表单行，点击“删除按钮”会删除当前表单行。同时表单 form 本身也绑定了点击事件，点击表单 form，控制台会输出“form 被点击”的字符串。

当点击 id 为 remove 的按钮时，会移除委托在 form 上的单击事件，但是不会移除 form本身绑定的单击事件，所以此时再去点击“新增按钮”和“删除按钮”，表单行不会发生增加，但是控制台仍会输出“form 被点击”的字符串。

3.事件触发

trigger 方法

trigger 的基本语法是 $(selector).trigger( 事件类型 ) ，如点击事件可以 $(selector).trigger(‘click’)触发。使用这种方式触发事件和使用事件方法触发事件的效果是相同的。

triggerHandler 方法

trigger 的基本语法是$(selector).triggerHandler(事件类型)。这种方式与前两种方法唯一的区别是不会触发浏览器的默认行为，如文本输入框在获得焦点时不会有光标闪烁等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <input id="input1" type="text">
<button id="btn1">事件方法触发点击 a 标签</button>
<br>
    <input id="input2" type="text">
    <button id="btn2">trigger 触发点击 a 标签</button>
    <br>
    <input id="input3" type="text">
    <button id="btn3">triggerHandler 方法触发点击 a 标签</button>
    <script>
        $(function(){
        $('#input1, #input2, #input3').focus(function(){
            $(this).css('background', 'beige');
        });
        $('#input1, #input2, #input3').blur(function(){
            $(this).css('background', '');
        });
        $('#btn1').click(function(){
            $('#input1').focus(); // 事件方法触发
        });
        $('#btn2').click(function(){
            $('#input2').trigger('focus'); // trigger 方法触发
        });
        $('#btn3').click(function(){
            $('#input3').triggerHandler('focus'); // triggerHandler 方法触发
        });
    });
</script>
</body>
</html>

三个文本输入框都绑定了 focus 事件和 blur 事件，在获得焦点时背景色变为beige 色，在失去焦点时背景色还原。有三个按钮分别用三种方式触发同一行文本框的 focus事件。当使用事件方法触发时，第一个文本框获得焦点，背景色发生改变，光标在文本框内闪烁，如图 6-38 所示；当使用 trigger 方法触发时，第二个文本框获得焦点，背景色发生改变，光标在文本框内闪烁，如图 6-39 所示；当使用 triggerHandler 方法触发时，第三个文本框获得焦点，背景色发生改变，但是文本框内没有光标。

4.事件对象

通过事件对象可以获取事件的状态，如触发事件的元素、绑定事件的元素、按键的键码等。但是由于市面上浏览器种类很多，各浏览器在事件对象的获取方式、事件对象的属性等方面可能存在差异。在此背景下，jQuery 在遵循 W3C 规范的前提下，对事件对象做了统一封装，使得可以兼容各大主流浏览器。在绑定事件处理程序时，jQuery 会将封装过的事件对象作为唯一参数传递给事件处理程序，语法如下所示：

$(selector).on(事件类型, function(event){

console.log(event); // 获取到事件对象

});

阻止冒泡事件的发生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <style>
        #red{
            width:200px;
            height:200px;
            background: red;
        }
        #blue{
            width:400px;
            height:400px;
            background: blue;
        }
        #green{
            width:600px;
            height:600px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="green">
        <div id="blue">
            <div id="red"></div>
        </div>
    </div>
    <script>
        $('#red').on('click', function(e) {
            console.log('点击了红色方块');
        });

        $('#blue').on('click', function(e) {
            console.log('点击了蓝色方块');
            e.stopPropagation();

        });

        $('#green').on('click', function(e) {
                console.log('点击了绿色方块');
            });
        
    </script>
</body>
</html>

这个案例中从外到内嵌套了绿色、蓝色和红色三个方块，当点击最内层的红色方块时，触发了红色方块的点击事件处理程序，随后点击事件向上冒泡，触发蓝色方块的点击事件处理程序，由于这里调用了 jQuery 事件对象的 stopPropagation()方法，阻止了事件的继续冒泡，所以最外层绿色方块上的点击事件处理程序没有触发

五.jQuery 动画和 Ajax 操作

1.jQuery 动画

1.显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            margin: 20px;
            background: red;
        }
    </style>
</head>
<body>
    <button id="showAll" class="btn">全部显示</button>
    <button id="hideAll" class="btn">全部隐藏</button>
    <button id="toggle" class="btn">toggle</button>
    <button id="hideTwo" class="btn">隐藏第2个元素</button>
    <div class="box-ward">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
    </div>
    <script>
        $(function(){
            $('#showAll').click(function(){
                $('.box').show('slow');
            });
            $('#hideAll').click(function(){
                $('.box').hide('fast', 'linear');
            });
            $('#toggle').click(function(){
                $('.box').toggle();
            });
            $('#hideTwo').click(function(){
                $('.box').eq(1).hide(function(){
                    console.log('第二个元素已被隐藏');
                });
            });
        });
    </script>
</body>
</html>

全部显示：

全部隐藏:

当点击“toggle”按钮时，编号为 2 的方块显示，而其它方块都被隐藏

再次点击“toggle”按钮时，编号为 2 的方块被隐藏，而其它方块显示出来.

2上滑和下滑

元素的淡入、淡出也被称为元素的渐显、渐隐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <style>
        .block {
            margin-top: 30px;
            width: 300px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            color: #fff;
            font-size: 30px;
            font-weight: bold;
            background: rgb(29, 93, 212);
        }
    </style>
</head>
<body>
    <button id="slideUp">slideUp</button>
    <button id="slideDown">slideDown</button>
    <button id="slideToggle">slideToggle</button>
    <div class="block">
        方块
    </div>
    <script>
        $(function () {
            $('#slideUp').click(function () {
                $('.block').slideUp();
            });
            $('#slideDown').click(function () {
                $('.block').slideDown();
            });
            $('#slideToggle').click(function () {
                $('.block').slideToggle();
            });
        });
    </script>
</body>
</html>

3.自定义动画

可伸缩导航栏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <style>
        #navigation li a {
            position: relative;
            left: -120px;
            transition: left 0.3s;
        }
        #navigation li:hover a {
            left: 0;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <ul id="navigation">
            <li class="nav0 current_page">
                <a href="#">我的日志</a>
            </li>
            <li class="nav1">
                <a href="#">资源下载</a>
            </li>
            <li class="nav2">
                <a href="#">相册</a>
            </li>
            <li class="nav3">
                <a href="#">人文知识</a>
            </li>
            <li class="nav4">
                <a href="#">标签记录</a>
            </li>
            <li class="nav5">
                <a href="#">友情链接</a>
            </li>
            <li class="nav6">
                <a href="#">联系我们</a>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $('#navigation li').each(function () {
                if (!$(this).hasClass('current_page')) {
                    $('a', this).css('left', '-120px');
                    $(this).hover(function () {
                        $('a', this).animate({left: 0}, 'fast');
                    }, function () {
                        $('a', this).animate({left: '-120px'}, 'fast');
                    });
                }
            });
        });
    </script>
</body>
</html>

使用 animate 方法实现了一个可伸缩的导航栏，当鼠标移动到“我的日志”之外的导航栏时，该导航栏会快速地从左侧页面伸出，而鼠标移开时，该导航栏又会快速地从左侧收回