JAVA WEB DAY 07_ jQuery 基础

2022年05月10日 阅读数:14
这篇文章主要向大家介绍JAVA WEB DAY 07_ jQuery 基础,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

jQuery 基础

目标

  • 可以使用 jQuery 的基本选择器
  • 可以使用 jQuery 的层级选择器
  • 可以使用 jQuery 的绑定与解绑方法
  • 可以使用 jQuery 对象的遍历方法
  • 可以使用 jQuery 全局的遍历方法
  • 可以使用 jQuery 的 DOM 操做的方法
  • 可以完成隔行换色
  • 可以完成案例:抽奖程序

01_jQuery 概述和导入-[★★★]

  1. jQuery 是什么: JS 框架:对 JS 代码进行封装,提升开发效率,下降开发难道
  2. jQuery 的导入格式:
    <script src='JS库文件地址'></script>
  • 示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JQ导入</title>

    <!-- 引入JQ库文件
         注意事项:若是script是用来引入另外一个JS文件,则该script标签体不能再编写JS代码
    -->
    <script src="js/jquery-3.3.1.min.js"></script>

    <!--测试JQ库文件是否引入成功-->
    <script>
        // JS写法:当网页加载完毕时执行
        /*window.onload = function () {

        };*/
        // JQ写法:当网页加载完毕时执行
        $(function () {
    
    
            alert("进来啦吗");
        });
    </script>
</head>
<body>

</body>
</html>

02_ jQuery 对象与 JS 对象的转换-[★★★★]

  • JS 对象与 jQuery 对象相互转换的语法
JS对象与jQuery对象相互转换的语法 转换语法
将JS对象 转换为 jQuery对象 $(JS对象)
将jQuery对象 转换为 JS对象 jq对象[索引]
jq对象本质就是数组
  • 需求:页面上有一个文本框,文本框中有值:阿里巴巴。
    1.分别经过js对象和jQuery对象获得值,而且使用alert()方法显示出来。
    2.混合使用是错误的,没有输出效果。
    3.对象转换之后使用各自的方法获得值。
  • 示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JQ对象和JS对象的转换</title>

    <!--导入JQ库文件-->
    <script src="js/jquery-3.3.1.min.js"></script>

    <!--
    需求:页面上有一个文本框,文本框中有值:阿里巴巴。
    1) 分别经过js对象和jQuery对象获得值,而且使用alert()方法显示出来。
    2) 混合使用是错误的,没有输出效果。
    3) 对象转换之后使用各自的方法获得值。
    -->
    <script>
        // 1) 分别经过js对象和jQuery对象获得值,而且使用alert()方法显示出来。
        /*document.getElementById("one").onclick = function () {

        }*/

        // 当网页加载完毕执行
        $(function () {
    
    
            // 监听第1个按钮点击
            $("#one").click(function () {
    
    
                // 根据id获取文本输入框元素对象
                // jsObj:是JS对象
                var jsObj = document.getElementById("user");
                // 得到文本输入框的值
                // alert(jsObj.value);

                // 将JS对象转换为JQ对象
                var jqObj = $(jsObj);
                alert(jqObj.val());
            });

            // 监听第2个按钮点击
            $("#two").click(function () {
    
    
                // 根据id获取文本输入框元素对象
                // jqObj:是JQ对象
                var jqObj = $("#user");
                // 调用JQ对象的方法得到文本输入框的值
                // alert(jqObj.val());

                // 将JQ对象转换为JS对象
                // JQ对象本质就是数组
                var jsObj = jqObj[0];
                alert(jsObj.value);
            });
        });
    </script>

</head>
<body>
    <input id="user" type="text" value="阿里巴巴">
    <input type="button" value="JS获得值" id="one">
    <input type="button" value="JQ获得值" id="two">
</body>
</html>

03_ jQuery 之基本选择器-[★★★★]

  • 基本选择器
基本选择器 语法
ID 选择器 $("#ID")
类选择器 $(".类名")
标签选择器 $(“标签名”)
  • 示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>基本选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        div, span {
    
    
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
    
    
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
    
    
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
</head>
<body>
<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变元素名为 <div> 的全部元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的全部元素的背景色为 红色" id="b3"/>

<h1>有一种奇迹叫坚持</h1>
<div id="one">
    id为one
</div>

<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>

<div id="mover">
    div 动画
</div>

<span class="spanone">class为spanone的span元素</span>
<span class="mini">class为mini的span元素</span>

</body>

<script type="text/javascript">
    // 1) 改变 id 为one的元素的背景色为红色
    $("#b1").click(function () {
    
    
        $("#one").css("background-color","red");
    });
    // 2) 改变元素名为 <div> 的全部元素的背景色为 红色。
    $("#b2").click(function () {
    
    
        $("div").css("background-color","red");
    });
    // 3) 改变 class 为 mini 的全部元素的背景色为 红色
    $("#b3").click(function () {
    
    
        $(".mini").css("background-color","red");
    });
</script>

</html>

04_ jQuery 之层级选择器-[★★★★]

  • 层级选择器
层级选择器 说明 语法
得到A元素内部的全部的B元素 B元素是A元素的子孙元素均可以 $(“A B”)
得到A元素下面的全部B子元素 B元素必须是A元素的子元素 $(“A > B”)
得到A元素同级,下一个B元素 A与B是同级的兄弟元素
若是A是老二,B是老三
$(“A + B”)
  • 示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>层次选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        div, span {
    
    
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
    
    
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
    
    
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
</head>

<body>
    <input type="button" value="改变 <body> 内全部 <div> 的背景色为红色" id="b1"/>
    <input type="button" value="改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
    <input type="button" value="改变 id为two的下一个div兄弟元素的背景色为红色" id="b3"/>
    <h1>有一种奇迹叫坚持</h1>
    <div id="one">
        id为one
    </div>

    <div id="two" class="mini">
        id为two class是 mini
        <div class="mini">class是 mini</div>
    </div>

    <div class="one">
        class是 one
        <div class="mini">class是 mini</div>
        <div class="mini">class是 mini</div>
    </div>

    <div class="one">
        class是 one
        <div class="mini01">class是 mini01</div>
        <div class="mini">class是 mini</div>
    </div>

<span class="spanone">span</span>
</body>

<script type="text/javascript">
    //1) 改变 <body> 内全部 <div> 的背景色为红色
    $("#b1").click(function () {
    
    
        $("body div").css("background-color","red");
    });

    //2) 改变 <body> 内子 <div> 的背景色为 红色
    $("#b2").click(function () {
    
    
        $("body > div").css("background-color","red");
    });

    //3) 改变 id为two的下一个div兄弟元素的背景色为红色
    $("#b3").click(function () {
    
    
        $("#two + div").css("background-color","red");
    });

</script>
</html>

05_ jQuery 之属性选择器-[★★★★]

  • 属性选择器
属性选择器 语法
得到有属性名的元素 标签名[属性名]
得到属性名等于指定值元素 标签名[属性名=属性值]
得到属性名不等于指定值元素 标签名[属性名!=属性值]
复合属性选择器,多个属性同时过滤 标签名[属性1][属性2]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        div, span {
    
    
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
    
    
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
    
    
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
    
    
            display: none;
        }
    </style>
</head>

<body>

<input type="button" value="含有属性title 的div元素背景色为红色" id="b1"/>
<input type="button" value="属性title值等于test的div元素背景色为红色" id="b2"/>
<input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
<input type="button" value="属性title值包含best的div元素背景色为红色" id="b4"/>
<hr/>

<div id="one">
    id为one div
</div>

<div id="two" class="mini" title="test">
    id为two class是 mini div title="test"
    <div class="mini">class是 mini</div>
</div>

<div class="visible">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one" title="test02">
    class是 one title="test02"
    <div class="mini01">class是 mini01</div>
    <div class="mini" style="margin-top:0px;">class是 mini</div>
</div>

<div class="one">
</div>

<div id="mover" title="best">
    id="mover" title="best"
</div>
</body>

<script type="text/javascript">
    //1) 含有属性title 的div元素背景色为红色
    $("#b1").click(function () {
    
    
        $("div[title]").css("background-color","red");
    });

    //2) 属性title值等于test的div元素背景色为红色
    $("#b2").click(function () {
    
    
        $("div[title=test]").css("background-color","red");
    });

    //3) 属性title值不等于test的div元素(没有title属性的也将被选中)背景色为红色
    $("#b3").click(function () {
    
    
        $("div[title!=test]").css("background-color","red");
    });

	//4) 属性title值包含best的div元素背景色为红色
    $("#b4").click(function () {
    
    
        $("div[title=best][id]").css("background-color","red");
    });
</script>
</html>

06_ jQuery 之基本过滤选择器-[★★★★]

基本过滤器选择器是在已经选中的元素中进行过滤javascript

基本过滤选择器 语法
得到选择的元素中的第一个元素 :first
得到选择的元素中的最后一个元素 :last
不包括指定内容的元素 :not()
偶数,从0开始计数 :even
奇数,从0开始计数 :odd
等于第几个 :eq(index)
大于第n个,不含第index个 :gt(index)
小于第n个,不含第index个 :lt(index)
  • 示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<style type="text/css">
			table {
    
    
				margin: auto;
				border-collapse: collapse;
				width: 525px;
			}

			tr {
    
    
				height: 30px;
				text-align: center;
			}

			.girl {
    
    
				width: 260px;
				height: 260px;
				border: 1px solid gray;
				float: left;
			}
	 </style>
	</head>
  <body>
		 <input type="button" value="第一行的背景色为浅灰色"  id="b1"/>
		 <input type="button" value="最后一行的背景色为浅绿色"  id="b2"/>
		 <input type="button" value="除第1行和最后1行的其它行背景色为浅黄色"  id="b3"/>
		 <input type="button" value="索引值为偶数的行背景色为浅粉色"  id="b4"/>
		 <input type="button" value="索引值为奇数的行背景色为aquamarine色"  id="b5"/>
		 <input type="button" value="索引值大于 3 的tr元素的背景色为oldlace色"  id="b6"/>
		 <input type="button" value="索引值等于 3 的tr元素的背景色为antiquewhite"  id="b7"/>
		 <input type="button" value="索引值为小于 3 的tr元素背景色为yellowgreen"  id="b8"/>
		<hr />
		<div style="width: 525px; margin: auto;">
		<table border="1" align="center">
				<caption><h3>学生信息列表</h3></caption>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>家庭住址</th>
					<th>成绩</th>
				</tr>
				<tr>
					<td>1001</td>
					<td>孙悟空</td>
					<td></td>
					<td>72</td>
					<td>花果山</td>
					<td>90</td>
				</tr>
				<tr>
					<td>1002</td>
					<td>猪八戒</td>
					<td></td>
					<td>36</td>
					<td>高老庄</td>
					<td>78</td>
				</tr>
				<tr>
					<td>2002</td>
					<td>沙僧</td>
					<td></td>
					<td>30</td>
					<td>流沙河</td>
					<td>67</td>
				</tr>
				<tr>
					<td>3000</td>
					<td>唐三藏</td>
					<td></td>
					<td>26</td>
					<td>东土</td>
					<td>87</td>
				</tr>
				<tr>
					<td>4000</td>
					<td>白骨精</td>
					<td></td>
					<td>18</td>
					<td>白骨洞</td>
					<td>96</td>
				</tr>
				<tr>
					<td>5000</td>
					<td>蜘蛛精</td>
					<td></td>
					<td>17</td>
					<td>盘丝洞</td>
					<td>95</td>
				</tr>
				<tr>
					<td>总成绩</td>
					<td colspan="5">3045</td>
				</tr>
		</table>
		</div>
		<br />
	</body>

<script type="text/javascript">
	//1) 改变第一行的背景色为浅灰色
    $("#b1").click(function () {
    
    
		$("tr:first").css("background-color","lightgray");
    });

	//2) 改变最后一行的背景色为浅绿色
    $("#b2").click(function () {
    
    
		$("tr:last").css("background-color","lightgreen");
    });

	//3) 改变除第1行和最后1行的其它行背景色为浅黄色
    $("#b3").click(function () {
    
    
		$("tr:not(:first):not(:last)").css("background-color","lightyellow");
    });

	//4) 改变索引值为偶数的行背景色为浅粉色,下标从0开始
    $("#b4").click(function () {
    
    
		$("tr:odd").css("background-color","lightpink");
	});

	//5) 改变索引值为奇数的行背景色为aquamarine色
    $("#b5").click(function () {
    
    
		$("tr:even").css("background-color","aquamarine");
    });

	//6) 改变索引值大于 3 的tr元素的背景色为oldlace色
    $("#b6").click(function () {
    
    
		$("tr:gt(3)").css("background-color","oldlace");
    });

	//7) 改变索引值等于 3 的tr元素的背景色为antiquewhite
    $("#b7").click(function () {
    
    
		$("tr:eq(3)").css("background-color","antiquewhite");
    });

	//8) 改变索引值为小于 3 的tr元素背景色为yellowgreen
    $("#b8").click(function () {
    
    
		$("tr:lt(3)").css("background-color","yellowgreen");
    });
</script>
</html>

07_ jQuery 之表单属性选择器-[★★★★]

表单属性选择器做用:在已选中表单元素中进行过滤css

  • 表单属性选择器
表单属性选择器 语法
可用 :enabled
不可用 :disabled
选中(单选radio,多选checkbox) :checked
选择(下列列表 <select>中的<option> :selected
不可见元素 :hidden
  • 示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>表单属性过滤选择器</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<style type="text/css">

			#myDiv {
    
    
				background-color: red;
				/*
				display属性的做用:控制元素的显示和隐藏
					none:隐藏元素
					inline:显示元素并设置元素为内联元素:不会独占一行
					block:显示元素并设置元素为块级元素:会独占一行
				*/
				display: inline;
			}

		</style>
	</head>

	<body>
		<input type="button" value="val() 方法改变表单内可用文本框元素的值" id="b1" />
		<input type="button" value="val() 方法改变表单内不可用 <input> 元素的值" id="b2" />
		<input type="button" value="length 属性获取(单选和多选)选框选中的个数" id="b3" />
		<input type="button" value="length 属性获取下拉列表选中的个数" id="b4" />
		<input type="button" value="显示隐藏文本输入框" id="b5" />
		<br><br>

		<!--<div id="myDiv">我是div</div>-->

		<input type="text" value="不可用值1" disabled="disabled">
		<input type="text" value="可用值1">
		<input type="text" value="不可用值2" disabled="disabled">
		<input type="text" value="可用值2">
		<input type="text" value="隐藏文本输入框" style="display: none">

		<br><br>
		<input type="checkbox" name="items" value="美容">美容
		<input type="checkbox" name="items" value="IT">IT
		<input type="checkbox" name="items" value="金融">金融
		<input type="checkbox" name="items" value="管理">管理

		<br><br>

		<input type="radio" name="sex" value=""><input type="radio" name="sex" value=""><br><br>
        <!--multiple表示多选 -->
		<select name="job" id="job" multiple="multiple" size=4>
			<option>程序员</option>
            <option>中级程序员</option>
            <option>高级程序员</option>
            <option>系统分析师</option>
		</select>
		<select name="edu" id="edu">
			<option>本科</option>
			<option>博士</option>
			<option>硕士</option>
			<option>大专</option>
		</select>

	</body>

	<script type="text/javascript">
        //1) val() 方法改变表单内可用文本框 <input> 元素的值
        $("#b1").click(function () {
    
    
        	$("input[type=text]:enabled").val("Java4期");
        });

        //2) val() 方法改变表单内不可用 <input> 元素的值
        $("#b2").click(function () {
    
    
			$("input[type=text]:disabled").val("Java41期");
        });

        //3) length 属性获取选框选checked中的个数
        $("#b3").click(function () {
    
    
			var len = $("input[type=checkbox]:checked").length;
			alert(len);
        });

        //4) length 属性获取下拉列表选中的个数
        $("#b4").click(function () {
    
    
			var len = $("select > option:selected").length;
			alert(len);
        });

		//5) 显示隐藏文本输入框
		$("#b5").click(function () {
    
    
			$("input[type=text]:hidden").css("display","inline");
		});

	</script>
</html>

08_ jQuery 经常使用事件概述-[★★★]

  • jQuery 事件名和 JS 事件名的区别:JS 事件名以 on 开头,JQ 没有 on
事件方法 说明
blur() 失去焦点事件
change() 值改变数据
click() 单击事件
dblclick() 双击事件
focus() 得到焦点事件
keydown() 键盘按下事件
keyup() 键盘松开事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
submit() 表单提交事件
hover() 鼠标悬停事件

09_ jQuery 经常使用事件示例-[★★★★]

  • 需求:文本框获得焦点和失去焦点分别显示不一样的背景色,松开按键,将字母转成大写,再显示在文本框中。html

  • 示例代码java

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        /*
        需求:文本框获得焦点和失去焦点分别显示不一样的背景色,
             松开按键,将字母转成大写,再显示在文本框中。
        * */
        $(function () {
    
    
            // 当文本输入框失去焦点执行指定函数
            $("#t1").blur(function () {
    
    
                // this:js对象
                $(this).css("background-color","yellow");
            });

            // 当文本输入框得到焦点执行指定函数
            $("#t1").focus(function () {
    
    
                $(this).css("background-color","red");
            });

            // 监听键盘松开事件
            $("#t1").keyup(function () {
    
    
                // 将字母转成大写,再显示在文本框中。
                // 获取文本输入框内容并转换为大写
               /* var value = $($(this)).val().toUpperCase();
                // 从新给文本输入框设置内容
                $(this).val(value);*/

                // 简化代码
                $(this).val($(this).val().toUpperCase());
            });
        });

    </script>
</head>
    <body>
        用户名:
        <input type="text" id="t1"/>
    </body>
</html>

10_事件切换函数与示例-[★★★★]

  • 事件切换函数
事件切换函数 说明
JQ对象.hover(function, function) 事件切换
参数1:函数:当鼠标移入时触发
参数2:函数:当鼠标移出时触发
  • 需求:建立一个DIV,指定宽和高为500px,边框2px,灰色,实线。当鼠标移入div背景图片发生变化,移出DIV背景图片变成另外一张。使用hover,同时支持两个事件。
  • 示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #girl {
    
    
            height: 500px;
            width: 500px;
            border: 2px solid gray;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        /*
        	需求:建立一个DIV,指定宽和高为500px,边框2px,灰色,实线。当鼠标移入div背景图片发生变化,
        	移出DIV背景图片变成另外一张。使用hover,同时支持两个事件。
        * */
        $(function () {
    
    
            $("#girl").hover(function () {
    
    
                // 鼠标移入时执行
                $(this).css("background-image","url(\"img/adv1.jpg\")")
            },function () {
    
    
                // 鼠标移出时执行
                $(this).css("background-image","url(\"img/adv2.jpg\")")
            });
        })
    </script>
</head>
<body>
    <div id="girl">

    </div>
</body>
</html>

11_ jQuery 中事件的动态绑定和解绑-[★★★]

  • 事件绑定
事件绑定 语法
JQ对象.on(“事件名”, function() {}); 给JQ对象关联的元素动态绑定事件
参数1:事件名
参数2:事件回调函数
  • 事件解绑
事件解绑 语法
JQ对象.off(“事件名1 事件名2”) 解绑JQ对象的指定事件
JQ对象.off() 解绑JQ对象的全部事件

  • 需求:
    有四个按钮,b1按钮使用之前的事件写法,点击弹出信息。b2按钮没有事件。点击绑定事件按钮给b2按钮绑定点击事件。而后点击b2按钮,查看输出的信息。点击解绑事件按钮解除b2按钮的点击事件。jquery

  • 示例代码程序员

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>事件动态绑定和解绑</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="按钮1" id="b1">
<input type="button" value="按钮2" id="b2">
<hr>
<input type="button" value="绑定事件" id="bind">
<input type="button" value="解绑事件" id="unbind">
</body>
<script type="text/javascript">

    /*
    需求:有四个按钮,b1按钮使用之前的事件写法,点击弹出信息。b2按钮没有事件。
        点击绑定事件按钮给b2按钮绑定点击事件。
        而后点击b2按钮,查看输出的信息。
        点击解绑事件按钮解除b2按钮的点击事件。
    * */

    // 命名函数:监听按钮1点击
    function btn01Click() {
    
    
        alert("aaa");
    }

    // 使用匿名函数做为参数
    $("#b1").click(function () {
    
    
        alert("bbb");
    })

    // 监听 bind 按钮点击
    $("#bind").click(function () {
    
    
        // 给按钮2动态绑定点击事件
        // 参数1:事件名
        // 参数2:事件回调函数
        $("#b2").on("click",function () {
    
    
            // alert("哎呀...被点了...");
            console.log("哎呀...被点了...")
        })


        // 给按钮2动态绑定鼠标移入数据
        $("#b2").on("mouseover",function () {
    
    
            // alert("哎呀...进来了...")
            console.log("哎呀...进来了...")
        })
    });

    // 监听 unbind 按钮点击
    $("#unbind").click(function () {
    
    
        // 给按钮2解绑点击事件
        // $("#b2").off("click");

        // 解绑按钮2的全部事件
        $("#b2").off();

    });

</script>
</html>

12_ jQuery 对象的循环遍历-[★★★]

jQuery 对象自己就是数组对象,所以经常须要对 jQuery 对象进行遍历。web

  • jQuery对象遍历方式
jQuery对象遍历方式 说明
JQ对象.each(function(index,element)) 对JQ对象进行遍历
传递回调函数:参数1:索引值,参数2:遍历到的元素
$.each(数组, function(index,element)) 对JQ对象进行遍历
参数1:要遍历的JQ对象
参数2:回调函数:参数1:索引值,参数2:遍历到的元素
  • 需求:对select中的全部option元素进行遍历而且输出HTML内容。
  • 示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery的遍历方式</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<select name="city" id="city">
    <option>广州</option>
    <option>深圳</option>
    <option>东莞</option>
</select>

<input type="button" id="b1" value="jq对象的方法遍历"/>
<input type="button" id="b2" value="jq对象的全局方法"/>

<script type="text/javascript">

    $("#b1").click(function () {
    
    
        // 得到全部option元素:jq对象==>就是一个数组
        var jqArray = $("select > option");
        // jq对象的方法遍历
        // 回调函数须要两个参数
        // 参数1:索引值
        // 参数2:当前遍历的元素对象
        jqArray.each(function (index,element) {
    
    
            // element:JS对象
            // element.innerHTML:获取或设置标签体内容
            // element.innerHTML = "xxx";
            // var content = element.innerHTML;
            alert(index+"==>"+element.innerHTML);
        })
    });

    $("#b2").click(function () {
    
    
        // 得到全部option元素:jq对象==>就是一个数组
        var jqArray = $("select > option");
        // jq全局方法遍历
        // 回调函数须要两个参数
        // 参数1:索引值
        // 参数2:当前遍历的元素对象
        $.each(jqArray,function (index,element) {
    
    
            // element:JS对象
            // element.innerHTML:获取或设置标签体内容
            // element.innerHTML = "xxx";
            // var content = element.innerHTML;
            alert(index+"==>"+element.innerHTML);
        })
    });


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

13_ jQuery 之DOM 操做- html 代码、文本、值-[★★★]

  • 方法
方法名 功能描述
html() 获取元素标签体内容
html(“HTML”) 设置元素标签体内容
text() 获取标签体内容:只是文本
text(“文本”) 设置标签体内容:有子标签会原样输出
val() 获取表单元素的值
val(“值”) 设置表单元素的值
  • 示例代码
<!DOCTYPE html>
<html>
<head>
    <title>html和text和val</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>

</head>
<body>
<input type="button" id="b1" value="设置值value"/>
<input type="button" id="b2" value="获取值value"/>
<input type="button" id="b3" value="设置html"/>
<input type="button" id="b4" value="获取值html"/>
<input type="button" id="b5" value="设置text"/>
<input type="button" id="b6" value="获取text"/>
<hr/>

    <input id="myinput" type="text" name="username" value="张三"/><br/>

    <div id="mydiv">
        <p>
            <a href="#">标题标签</a>
        </p>
    </div>

</body>
<script type="text/javascript">
    $("#b1").click(function () {
    
    
        // 给文本输入框赋值
        $("#myinput").val("小泽");

    });

    $("#b2").click(function () {
    
    
        // 获取文本输入框的值
        alert($("#myinput").val());
    });

    // 设置html
    $("#b3").click(function () {
    
    
        // 设置元素标签体内容:若是内容有标签,则浏览器会解析标签
        // js对象的属性innerHTML:设置或获取标签题内容
        // jq对象的函数html():设置或获取标签题内容
        $("#mydiv").html("<a href='#'>百度一下</a>");
    });

    // 获取值html
    $("#b4").click(function () {
    
    
        // 获取元素标签体内容
        alert($("#mydiv").html());
    });

    // 设置text
    $("#b5").click(function () {
    
    
        // JQ对象的text函数等价于JS对象的innerText属性
        // 设置元素标签体内容:若是内容有标签,则浏览器不会解析标签会原样输出
        $("#mydiv").text("<a href='#'>百度一下</a>");
    });

    //获取text
    $("#b6").click(function () {
    
    
        // 获取元素标签体内容
        alert($("#mydiv").text());
    });
</script>
</html>

14_ jQuery 之 DOM 操做-属性操做-[★★★]

  • 方法
方法名 功能描述
attr(“属性名”) 获取属性值
attr(“属性名”, “属性值”) 修改或添加属性
prop(“属性名”) 获取属性值
prop(“属性名”,”属性值”) 修改或添加属性
removeAttr(“属性名”) 删除属性
removeProp(“属性名”) 删除属性

如何选择attr()prop()数组

  • 若是属性值是boolean类型,使用prop()方法。如:selected, checked等。
  • 其它类型的属性使用attr()。
  • 示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>获取属性</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>

<body>
<input type="button" id="b1" value="获取北京节点的name属性值"/>
<input type="button" id="b2" value="设置北京节点的name属性的值为dabeijing"/>
<input type="button" id="b3" value="新增北京节点的discription属性 属性值是didu"/>
<input type="button" id="b4" value="删除北京节点的name属性"/>
<input type="button" id="b5" value="得到hobby的选中状态"/>

<ul>
    <li id="bj" name="beijing">北京</li>
    <li id="tj" name="tianjin">天津</li>
</ul>
爱好:<input type="checkbox" id="hobby"  value="游泳"/>游泳

</body>

<script type="text/javascript">
    // 获取北京节点的name属性值
    $("#b1").click(function () {
    
    
        alert($("#bj").attr("name"));
    });

    // 设置北京节点的name属性的值为"dabeijing"
    $("#b2").click(function () {
    
    
        $("#bj").attr("name","dabeijing");
    });

    // 新增北京节点的description属性 属性值是didu
    $("#b3").click(function () {
    
    
        $("#bj").attr("description","didu");
    });

    // 删除北京节点的name属性
    $("#b4").click(function () {
    
    
        $("#bj").removeAttr("name");
    });

    // 得到hobby的选中状态
    $("#b5").click(function () {
    
    
        alert($("#hobby").prop("checked"));
    });
</script>

</html>

15_ jQuery 之 DOM 操做-样式操做-[★★★]

  • 方法
方法名 功能描述
addClass(“类样式名”) 添加类样式:先将样式定义在类选择器中
removeClass(“类样式名”) 删除类样式
toggleClass(“类样式名”) 切换类样式:有则删除,无则添加

以上三个方法本质是操做标签元素的class属性浏览器

方法名 功能描述
css(“样式名”) 根据样式名得到样式值
css(“样式名”,”样式值”) 添加指定的样式

以上两个方法本质是操做标签元素的style属性app

  • 示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>样式操做</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<style type="text/css">
		   .one{
    
    
			    width: 200px;
			    height: 140px;
			    margin: 20px;
			    background: red;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}

		 	div{
    
    
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}

			/* 待用的样式 */
			.second{
    
    
				width: 222px;
			    height: 220px;
			    margin: 20px;
			    background: yellow;
			    border: pink 3px dotted;
				float:left;
			    font-size: 22px;
			    font-family:Roman;
			}
	 </style>
	</head>

	<body>
		 <input type="button" value="采用属性增长样式(改变id=one的样式)"  id="b1"/>
		 <input type="button" value=" addClass"  id="b2"/>
		 <input type="button" value="removeClass"  id="b3"/>
		 <input type="button" value=" 切换样式"  id="b4"/>
		 <input type="button" value=" 经过css()得到id为one背景颜色"  id="b5"/>
 		 <input type="button" value=" 经过css()设置id为one背景颜色为绿色"  id="b6"/>
		 <hr/>

		 <h1>有一种奇迹叫坚持</h1>
		 <h2>自信源于努力</h2>

	     <div id="one">
	    	 id为one
		 </div>

	</body>

	<script type="text/javascript">
		// 采用属性增长样式(改变id=one的样式),样式名为second
        $("#b1").click(function () {
    
    
        	// 等价于给元素设置了class=second
			$("#one").addClass("second")
        });

		// addClass
        $("#b2").click(function () {
    
    
			// 等价于给元素设置了class=second
			$("#one").addClass("second")
        });

		// removeClass
        $("#b3").click(function () {
    
    
			$("#one").removeClass("second")
        });

		// 切换样式
        $("#b4").click(function () {
    
    
        	// 有则删除,无则添加
			$("#one").toggleClass("second")
        });

		// 经过css()得到id为one背景颜色
        $("#b5").click(function () {
    
    
			$("#one").css("background-color","red");
        });

 		// 经过css()设置id为one背景颜色为绿色
        $("#b6").click(function () {
    
    
			alert($("#one").css("background-color"));
        });
	</script>

</html>

16_ jQuery 之 DOM 操做-建立和插入-[★★★]

  • 方法
方法名 描述
$(“标签的所有内容”) 建立一个标签元素
相似于document.createElement(“tr”)
写法:$("<tr><td>aa</td></tr>")
父元素.append(子元素) 将元素添加成父元素的最后一个子元素,调用者是父元素
子元素.prependTo(父元素) 将元素添加成父元素的第一个子元素,调用者是子元素
元素.before(元素) 将一个元素添加到另外一个元素的前面,它们是兄弟关系
元素.after(元素) 将一个元素添加到另外一个元素的后面,它们是兄弟关系
  • 示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>

<body>
<input type="button" id="b1" value="将反恐放置到city的后面"/>
<input type="button" id="b2" value="将反恐放置到city的最前面"/>
<input type="button" id="b3" value="将反恐放在天津前面"/>
<input type="button" id="b4" value="将反恐放在天津后面"/>
<input type="button" id="b5" value="建立一个广州的节点"/>
<hr/>

<ol id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="tj" name="tianjin">天津</li>
    <li id="cq" name="chongqing">重庆</li>
</ol>

<ul id="game">
    <li id="fk" name="fankong">反恐</li>
    <li id="xj" name="xingji">星际</li>
</ul>
</body>

<script type="text/javascript">
    // 将反恐放置到city的后面
    $("#b1").click(function () {
    
    
        $("#city").append($("#fk"));
    });

    // 将反恐放置到city的最前面
    $("#b2").click(function () {
    
    
        $("#fk").prependTo($("#city"));
    });

    // 将反恐放在天津前面
    $("#b3").click(function () {
    
    
        $("#tj").before($("#fk"));
    });

    // 将反恐放在天津后面
    $("#b4").click(function () {
    
    
        $("#tj").after($("#fk"));
    });

    // 建立一个广州的节点,加到城市中:<li id="gz" name="guangzhou">广州</li>
    $("#b5").click(function () {
    
    
        // 建立子元素li:广州
        // var li = $("<li id='gz' name='guangzhou'>广州</li>");
        // 添加子元素
        /*$("#city").append($("<li id='gz' name='guangzhou'>广州</li>"));*/

        // 建立li元素
        var li = document.createElement("li"); // <li></li>
        // 设置标签体内容
        li.innerHTML = "广州"; // <li>广州</li>
        // 将li元素添加到city元素上
        $("#city").append($(li));
    });
</script>

</html>

17_ jQuery 之 DOM 操做-删除操做-[★★★]

  • 方法
方法名 说明
元素.remove() 删除元素自己:自杀
父元素.empty() 删除元素下的全部子孙元素:他杀
  • 示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>删除节点</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>

	<body>
	   <input type="button" id="b1" value="从city中删除北京" />
       <input type="button" id="b2" value="删除city中全部的子节点" />
	   <hr/>
		 <ol id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ol>
	</body>

	<script type="text/javascript">
	   //从city中删除<li id="bj" name="beijing">北京</li>节点
       $("#b1").click(function () {
    
    
       	  $("#bj").remove();
       });

	   // 删除city中全部的子节点,观察city自己有没有删除
       $("#b2").click(function () {
    
    
       		$("#city").empty();
       });
	</script>

</html>

18_案例01-隔行换色和全选、全不选-[★★★★]

  • 需求
    1.在网页加载完毕之后执行下面的选择器而且设置css样式
     全部大于0的偶数行,背景色设置为:pink
     全部大于0的奇数行,背景色设置为:yellow
    2.实现全选和所有选功能。

+示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>隔行换色/全选全不选</title>
    <style type="text/css">
        table {
    
    
            border-collapse: collapse;
        }

        tr {
    
    
            height: 35px;
            text-align: center;
        }

        a:link {
    
    
            text-decoration: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        /*
        1. 在网页加载完毕之后执行下面的选择器而且设置css样式
           - 全部大于0的偶数行,背景色设置为:pink
           - 全部大于0的奇数行,背景色设置为:yellow
        2. 实现全选和全不选功能。
        * */

        $(function () {
    
    
            // 全部大于0的偶数行,背景色设置为:pink
            $("tr:gt(0):even").css("background-color","pink");
            // 全部大于0的奇数行,背景色设置为:yellow
            $("tr:gt(0):odd").css("background-color","yellow");


            /* 实现全选和全不选功能。 */
            $("#all").click(function () {
    
    
                // 获取全选复选框的选中状态
                // alert($(this).prop("checked"))
                // 获取下面四个复选框元素对象
                $("input[type=checkbox][name=item]").prop("checked",$(this).prop("checked"));
            });
        });



    </script>
</head>
<body>
<table id="tab1" border="1" width="700" align="center">
    <tr style="background-color: #999999;">
        <td><input type="checkbox" id="all"></td>
        <td>分类ID</td>
        <td>分类名称</td>
        <td>分类描述</td>
        <td>操做</td>
    </tr>
    <tr>
        <td><input type="checkbox"   name="item"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="item"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="item"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="item"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>
</html>

19_案例02-实现购物车-[★★★★]

  1. 添加元素方法:父元素.append(子元素)
  2. 删除元素方法:元素.remove()
  3. 得到父元素属方法:jq对象.parent();
  • 需求
    1.实现添加商品,若是商品名为空,提示:商品名不能为空。若是不为空,则添加成功一行,清空文本框的内容,图片使用固定一张。
    2.实现删除一行商品的功能,删除前弹出确认对话框。

  • 示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车的实现</title>
    <style type="text/css">
        table {
    
    
            width: 400px;
            border-collapse: collapse;
            margin: auto;
        }

        td, th {
    
    
            text-align: center;
            height: 30px;
        }

        .container {
    
    
            width: 400px;
            margin: auto;
            text-align: right;
        }

        img {
    
    
            width: 100px;
            height: 100px;
        }

        th {
    
    
            background-color: lightgray;
        }

        tr:hover {
    
    
            background-color: lightyellow;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        /*
        需求:
        1. 实现添加商品,若是商品名为空,提示:商品名不能为空。若是不为空,
           则添加成功一行,清空文本框的内容,图片使用固定一张。

        2. 实现删除一行商品的功能,删除前弹出确认对话框。
        * */

        // 监听添加按钮点击:添加商品到购物车
        function addProduct() {
    
    
            // 1. 获取文本输入框元素对象
            var inputElement = $("#productName");
            // 2. 获取商品名字
            var productName = inputElement.val();
            // 3. 判断商品名字是否有值
            // trim():去除字符串左右空格
            if (productName.trim().length == 0){
    
    
                alert("商品名字不能为空");
                return;
            }
            // 4. 建立tr元素对象
            var tr = $("<tr><td><img src=\"img/adv1.jpg\"/></td>\n" +
                "  <td>"+productName+"</td>\n" +
                "  <td><input type=\"button\" value=\"删除\" οnclick='deleteRow(this)'></td>\n" +
                "</tr>");

            // 5. 将tr元素添加到表格上
            $("#cart").append(tr);

            // 6. 清空文本输入框内容
            inputElement.val("");
        }

        /* 2. 实现删除一行商品的功能,删除前弹出确认对话框。*/
        function deleteRow(deleteBtn) {
    
    
            // 得到删除按钮的父元素对象:td
            /*var td = $(deleteBtn).parent();
            // 获取td元素的父元素对象:tr
            var tr = td.parent();
            // 删除tr
            tr.remove();*/

            // 弹出确认框
            if (confirm("亲,你真的要删除该商品吗?")) {
    
    
                $(deleteBtn).parent().parent().remove();
            }
        }

    </script>
</head>

<body>
    <div class="container">
        <table border="1">
            <tbody id="cart">
                <tr>
                    <th>
                        图片
                    </th>
                    <th>
                        商品名
                    </th>
                    <th>
                        操做
                    </th>
                </tr>
                <tr>
                    <td><img src="img/sx.jpg"/></td>
                    <td>
                        三星Note7
                    </td>
                    <td>
                        <input type="button" value="删除" onclick="deleteRow(this)">
                    </td>
                </tr>
            <tbody>
        </table>
        <br/>
        商品名:
        <input type="text" id="productName" value=""/>&nbsp;
        <input type="button" value="添加到购物车" onclick="addProduct()"/>
    </div>
</body>
</html>

20_案例03-抽奖程序-[★★★★]

  • 需求:
    1.当用户点击开始按钮时,小像框中的像片快速切换。
    2.当用户点击中止按钮时,小像框中的像片中止切换,大像框中淡入显示与小像框相同的像片。

  • 步骤分析:
    1.将全部的图片地址保存在一个数组中,定义三个全局变量:总计数num,数组长度total,计时器timer
    2.一开始让中止按钮不可用
    3.点开始按钮调用方法imgStart(),点击后让开始按钮不可用,中止按钮可用。
    4.每过25毫秒调用一次切换函数imgChange(),不停的替换小图片中的src地址。
    5.每次替换图片计数总数加1,数组下标计算方法:数组下标=计数总数%数组的长度
    6.点结束按钮调用方法imgStop(),让结束按钮不可用,让开始按钮可用。
    7.imgStop()清除计时器,将小图片中的地址赋值给大图片的地址,先隐藏,再而且淡入显示图片

  • 示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>抽奖程序</title>
    <style type="text/css">
        #small {
    
    
            border: 1px solid blueviolet;
            width: 75px;
            height: 75px;
            margin-bottom: 20px;
        }

        #smallPhoto {
    
    
            width: 75px;
            height: 75px;
        }

        #big {
    
    
            border: 2px solid orangered;
            width: 500px;
            height: 500px;
            position: absolute;
            left: 300px;
            top: 10px
        }

        #bigPhoto {
    
    
            width: 500px;
            height: 500px;
        }

        #btnStart {
    
    
            width: 100px;
            height: 100px;
            font-size: 22px;
        }

        #btnStop {
    
    
            width: 100px;
            height: 100px;
            font-size: 22px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

</head>

<body>

    <!-- 小像框 -->
    <div id="small">
        <img id="smallPhoto" src="img/man00.jpg"/>
    </div>

    <!-- 大像框 -->
    <div id="big">
        <img id="bigPhoto" src="img/man00.jpg"/>
    </div>

    <!-- 开始按钮 -->
    <input id="btnStart" type="button" value="开始">

    <!-- 中止按钮 -->
    <input id="btnStop" type="button"  value="中止">


    <script type="text/javascript">
        // 准备一个一维数组,用户的图片的路径
        var imgs = [
            "img/man00.jpg",
            "img/man01.jpg",
            "img/man02.jpg",
            "img/man03.jpg",
            "img/man04.jpg",
            "img/man05.jpg",
            "img/man06.jpg"
        ];

        // 定义变量记录当前显示的图片索引
        var index = 0;

        // 定义变量接收定时任务id
        var taskId = 0;

        // 设置中止按钮的状态:不可点击
        $("#btnStop").prop("disabled",true);


        // 监听开始按钮点击
        $("#btnStart").click(function () {
    
    
            // 1. 设置开始按钮不可点
            $(this).prop("disabled",true);

            // 2. 设置中止按钮可点击
            $("#btnStop").prop("disabled",false);

            // 3. 开启一个定时器:每隔0.2秒切换小相框图片
            // 参数1:定时器回调函数,用来封装定时任务
            // 参数2:时间间隔:单位毫秒
            // setTimeout开启的按期器只会执行一次
            // setInterval开启的按期器会重复执行
            taskId = setInterval(changeImage,50);
        });

        // 监听中止按钮点击
        $("#btnStop").click(function () {
    
    
            // 1. 设置中止按钮不可点
            $(this).prop("disabled",true);
            // 2. 设置开始按钮可点击
            $("#btnStart").prop("disabled",false);

            // 3. 中止定时任务
            clearInterval(taskId);
            // 4. 将小相框图片显示在大相框上
            // 4.1 隐藏大相框图片
            $("#bigPhoto").hide();
            // 4.2 设置大相框图片
            $("#bigPhoto").attr("src",$("#smallPhoto").attr("src"));
            // 4.3 显示大相框图片
            // $("#bigPhoto").show(3000);
            $("#bigPhoto").fadeIn(5000);
        });



        // 切换图片函数:每隔0.2秒切换小相框图片
        function changeImage() {
    
    
            // 索引加一
            index++;// index > imgs.length
            // 计算真实的索引值
            var i = index % imgs.length; // 10000 % 7 = 0 - 6
            // 根据索引得到要切换的图片
            var img = imgs[i];
            // 根据id获取小相框图片元素对象
            $("#smallPhoto").attr("src",img);
        }

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