JAVA WEB DAY 07_ jQuery 基础

2022年05月10日阅读数：14

这篇文章主要向大家介绍JAVA WEB DAY 07_ jQuery 基础,主要内容包括基础应用、实用技巧、原理机制等方面，希望对大家有所帮助。

文章目录

jQuery 基础

jQuery 基础

目标

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

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

jQuery 是什么: JS 框架：对 JS 代码进行封装，提升开发效率，下降开发难道

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-实现购物车-[★★★★]

添加元素方法：父元素.append(子元素)

删除元素方法：元素.remove()

得到父元素属方法：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>

标签： javascript css html java jquery 程序员 web 数组浏览器 app

原文地址：https://blog.csdn.net/NTT0101/article/details/108694701

JAVA WEB DAY 07_ jQuery 基础

文章目录

jQuery 基础

目标

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐

热门标签