华清远见重庆中心-前端整体阶段技术总结

1.HTML

        HTML(Hyper Text Markup Langnage)是超文本标记语言。其中标签的类型分为block（块级元素）和inline（行内元素）。

HTML的常用标签，以下标签都是双标签

标签名	作用
h1~h6	块级元素。标题。1最大，6最小。
p	块级元素。段落。
span	行内元素。
pre	块级元素。预处理标签。
i	行内元素，倾斜。
u	行内元素。加下划线。
b	行内元素。加粗。
sub	行内元素。文字下标。
sup	行内元素。文字上标。

插入图片

<img src="图片路径" alt="无法显示图片时显示的文字" title="鼠标悬停时的提示文字" width="宽度" height="高度">

插入列表

无须列表ul
<!--通过type属性修改符号。disc 默认,实心圆。circle 空心圆。square 正方形。none 去掉修饰符号。-->
<ul type="circle">
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ul>
有序列表ol
<!-- 通过type属性修改符号。1 默认数字。a/A 英文字母。i/I 罗马符号。none 去掉修饰符号。 -->
<ol type="a">
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ol>

插入表格

<!-- 其中tr为行，td为单元格，th为特殊加粗单元格。colspan是横跨列，rowapan是横跨行。 -->
<table border="1">
	<tr>
		<th>姓名</th>
		<th colspan="2">电话</th>
	</tr>
	<tr>
		<td rowspan="2">王丹</td>
		<td>123123</td>
		<td>123123</td>
	</tr>
	<tr>
		<td>123456</td>
		<td>123456</td>
	</tr>
</table>

插入音频

<audio controls autoplay loop muted >
    <source src="xxx.mp3" type="audio/mpeg">
</audio>

插入视频

<-- 其中controls开启控制器,autoplay自动播放,loop循环,muted静音 -->
<video width="320" height="240" controls autoplay loop muted >
    <source src="xxx.mp4" type="video/mp4">
</video>

        单标签：水平线<hr>，换行<br>

超链接

<!-- 其中target可以控制要访问的资源在哪里打开。
_self 默认，在当前页面打开。
_blank 在新页面打开
_parent 在父页面打开
指定的name名-->
<a href="https://www.baidu.com" target="_blank">点击跳转</a>

浮动框架

可以根据点击改变ifranme的页面
<a href="https://www.bilibili.com/" target="main">点击跳转</a>
<iframe name="main" src="https://www.baidu.com" width="500px" height="500px"></iframe>

marquee标签

<!-- 
direction="left/right/up/down"朝向。默认left
behavior=""行为。scroll默认重复  slide移动到底后停止  alternate往复
scrollamount=""移动速度。
-->
<marquee scrollamount="10" direction="right" >
   xxxx
</marquee>

表单

        用于接收用户输入的数据。

        action:设置提交路径。可以是一个页面，也可以是后台请求映射

        method:设置提交方式。默认值为get，表示使用get方式提交，提交的数据会暴露在浏览器地址栏中。设置为post方式，提交的数据不会暴露在浏览器地址栏中。

<form method="get" action="http://taobao.com">
	用户名:<input type="text" value="123456" name="username" placeholder="请输入用户名"><br>
	密码:<input type="password" value="123456" name="username" placeholder="请输入密码"><br>
	性别:<input type="radio" name="sex" id="" value="男" />男<input type="radio" name="sex" id="" value="女" checked />女<br>
	爱好:<input type="checkbox" name="hobby" id="" value="游泳" />游泳
	<input type="checkbox" name="hobby" id="" value="旅游" />旅游
	<input type="checkbox" name="hobby" id="" checked value="玩游戏" />玩游戏<br>
	生日:<input type="date" name="birthday" id="" value="2000-01-01" /><br>
	<input type="submit">
</form>

表单元素

常用表单元素

input	单标签，行内元素。通过修改关键属性type，变化为不同的组件
select	双标签，行内元素。下拉菜单
textarea	双标签，行内元素。文本域

input标签中type属性的值

text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
date	日历组件
number	数字组件
hidden	隐藏域
file	上传文件
image	图片提交按钮
submit	提交按钮
reset	重置按钮

表单元素中的属性

name	用于提交数据时设置提交的参数名
value	用于设置组件的默认值
checked	用于设置单选按钮和复选框的默认选中
placeholder	用于设置输入框的提示文字
required	用于设置输入框为必填项
selected	用于设置下拉菜单默认选中
disabled	用于设置某个组件为不可用状态
readonly	用于设置某个组件为只读状态
max/min/step	number独有，用于设置最大值、最小值和步长
rows/cols/	textarea独有，用于设置文本域的行数和列数

div标签

        块级元素，双标签，没有任何特点。页面布局时采用div布局。

2.CSS

        CSS(Cascading Style Sheets)是层叠样式表。用于控制HTML中标签样式的语言。可以精确到像素，美化修饰HTML标签。

选择器

        选择器优先级从高到低

        style属性 ==>id选择器==>类选择器==>元素选择器

id选择器

给标签添加 id属性，对其命名,在 style 标签中通过 #id 名获取

<style>
#test{
}
</style>

class选择器

给标签添加 class属性，对其命名,在 style 标签中通过 .class 名获取

<style>
.test{
}
</style>

元素/html/标签选择器

直接通过标签名获取。 通常用于选择一组元素。

<style>
div{
}
</style>

层次选择器

        通过空格或> 获取某个元素的子元素。

        "元素A 元素 B" 表示获取元素 A 下的所有元素 B

        "元素 A > 元素 B" 表示获取元素 A 下的第一层元素 B

<style>
#father div{
获取其中的所有子元素
}
#father > div{
获取其中的第一层子元素
}
</style>

群组选择器

通过 , 同时选择多个元素

<style>
div,#mp,.mu{
}
</style>

常用样式

尺寸

只能对块级元素设置尺寸。 width :设置块级元素的宽度px 像素或百分比或 vw

                                            height:设置块级元素的高度px像素或百分比或vw

背景background

 边框border

 字体font

 文本text

 列表list

 伪类

表示某个元素的某种状态。

 鼠标样式cursor

 显示方式display

 浮动float

让某个元素脱离原本的位置，朝某个方向对齐。

 盒子模型

 溢出overflow

当子元素超出父元素的范围时，称为溢出。通过 overflow 控制溢出部分的表现。 默认显示溢出部分，溢出部分不会影响后续元素。

盒子模型阴影box-shadow

类似于 text-shadow ，通常设置 4 个值 颜色 左右位置 上下位置 模糊程度 box-shadow:gray 4px 5px 6px 灰色阴影 向右 4px 向下 5px 模糊 6px

定位position

将元素以像素为单位调整位置

配合定位使用样式

文档流

页面中每个元素默认都有自己的位置，这个位置称为文档流。

如果某个元素脱离文档流，就会失去原本所占位置，让后续元素顶替其位置。

可以通过 浮动 float 、 固定定位 fixed 和 绝对定位 absolute 让元素脱离文档流。

脱离文档流后，通过改变元素的 left 、 top 、 bottom 、 right 移动其位置

相对定义relative

让某个元素，相对于原本的位置进行定位。定位原点为元素本身的位置。

元素不会脱离文档流 ( 后续元素不会顶替其位置 ) 。

固定定位fixed

让某个元素脱离文档流，默认根据页面的四个边界进行定位。

通常用于放置一些工具、广告、返回首页等。

绝对定位absolute

让某个元素脱离文档流，根据 已定位的父元素 进行定位。如果没有已定位的父元素，会根据页面定位。

层叠z-index

某个已定位的元素，可以通过 z-index 控制其层叠顺序。

z-index 是一个数字，数字越大，距离视线越近。

不透明度

取值范围[0,1] ，值越大，越不透明 值

        opacity ：独立的样式，修改某个元素的不透明度 opactity：0.5

        rgba ：background-color的值的一种写法， 修改背景的不透明度 background-color：（255,0,0,0.5）

转换transform

过渡transition

设置某个转换效果完成所需的时间等

 

动画animation

1. 定义动画的关键帧

2. 给某个元素设置 animation 样式

3.JavaScript

        JavaScript通常简称为JS，是一门面向对象、轻量级、弱类型的解释型脚本语言。

HTML+CSS+JS 组成前端基本三要素： HTML用于定义页面中的内容。

                                                              CSS用于控制HTML元素的外观和样式。
                                                              JS用来操作HTML元素。

script标签导入.js

1. 新建一个 .js 文件，将 js 代码保存在其中

2. 在也中通过 script 标签引入

JS中的输出语句

1.弹警告框 alert（）；

2.控制台输出 console.log（）；

3.打印在新页面中 document.write（）；

ECMAScript核心语法

        ECMAScript简称为ES，是JS的标准，也是JS的核心语法。

数据类型

变量：var name；

标识符的命名规则： 由字母、数字、下划线和$符号组成 。不能以数字开头。不能使用js中的关键字。

js中的boolean 类型： 0 可以表示 false ，非 0 可以表示 true。 默认 true 为 1 ，所以可以用 true 或 false 当做数字来运算。

数组

1.默认没有给某个位置赋值时，是undefined

2.最大下标决定了数组长度

3.可以保存不同类型的数据

数组遍历：

// length属性可以获取数组长度
// 循环所有下标，没有赋值元素的输出undefined
for (var i = 0; i < list1.length; i++) {
    console.log(list1[i]);
}
// 增强for循环，获取保存了数据的下标
for(var index in list1){
    // 通过下标获取元素
    console.log(list1[index]);
}

常用方法

 函数 function

 一段代码的，能够完成特定的功能，可以被重复的使用 。

<script>
    fun1();//函数调用
    // js代码执行时有一个预处理过程，函数在预处理时候就能识别，
    // 函数调用可以放在任意位置（不要求函数的调用一定要在函数定义之后）
    function fun1(){
        console.log("fun1 被调用");
    }
    fun1();//函数调用
    // 有参数，无返回值
    function fun2(name){
        console.log("你好，" + name);
    }
    fun2("HQYJ");
    fun2();//js函数调用可以传参数，也可以不传，不会报错
    function fun3(a, b){
        return a + b;
    }
    var sum = fun3(3, 2);
    console.log(sum);
</script>

js默认的全局函数

//js自带的全局函数
//字符串转整数
console.log(parseInt("85"));
console.log(parseInt("abc")); //返回结果为NaN （not a number）
console.log(parseInt("99abc"));//99, 数字开头的字符串能把前面的数字转为整数，后面部分的字
符自动丢弃
// 字符串转小数
console.log(parseFloat("3.14"));
console.log(parseFloat("a.14"));// NaN
console.log(isNaN(parseFloat("a.14")));// true, 说明字符不是数字，转换失败
console.log(parseFloat("3.1515927").toFixed(2));//toFixed()对小数保留小数的位数
console.log(parseFloat("3.14xyz"));//3.14
// eval, 把字符串中能执行的内容当语句执行
console.log(eval("3 + 2")); //5

BOM

BOM（Browser Object Model ）为浏览器对象模型。可以通过JS获取浏览器信息和控制浏览器的行为。

弹框

1.警告框，带有提示文字和确认按钮 。alert（）；

2.输入框，带有输入框和确认取消按钮，点击确认，返回值为输入的内容。prompt（）；

3.确认框，带有确认取消按钮，点击确认返回true，否则返回false 。confirm（）；

window对象

 screen对象

 location对象

 history对象

DOM

DOM（Document Object Model ）为文档对象模型 。每个页面都是一个文档树document tree。页面中的每个标签都是这个树的节点node。根节点是htm。document对象是DOM中的核心对象，表示当前页面对象。DOM用于操作(获取设置内容、更改样式等)页面中的节点。

获取节点

 设置节点属性

 创建添加删除节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
			}
		</style>
	</head>
	<body>
		<button id="btn">创建节点</button>
		<div id="context" style="position: relative;"></div>
		<script>
			document.getElementById("btn").onclick = function() {
				//创建节点document.createElement
				//这时是处于"游离状态"
				var md = document.createElement("div");
				md.style.position = "absolute";
				// 随机尺寸
				var width = getRd(100, 150);
				var height = getRd(100, 150);
				md.style.width = width + "px";
				md.style.height = height + "px";
				// 随机位置
				var x = getRd(0, window.innerWidth - width);
				var y = getRd(0, window.innerHeight - height - 50);
				md.style.left = x + "px";
				md.style.top = y + "px";
				// 随机颜色
				md.style.backgroundColor = "#" + getRd(0, 16777215).toString(16);
				
				
				// 删除节点
				
				var del = document.createElement("span");
				
				del.style.cursor="pointer";
				
				del.innerText="x";
				
				del.onclick=function(){
					document.getElementById("context").removeChild(md);
					// del.parentNode.parentNode.removeChild(md);
				}
				
				md.appendChild(del);
				
				
				
				
				
				// 添加div到其他节点中
				document.getElementById("context").appendChild(md);
			}


			function getRd(min, max) {
				return Math.floor(Math.random()*Math.abs(max - min) + Math.min(min, max));
			}
		</script>
	</body>
</html>

事件

常用事件

 event对象

 事件冒泡

        文档中节点如果有重叠的情况，并且这些重叠的节点都有相同的事件。 默认在子节点触发事件时，父节点也会触发事件，这种情况称为事件冒泡。 通过event.stopPropagation();阻止事件冒泡发生。

案例

        提供2 个文本框分别输入歌手名和代表作，点击添加按钮，将数据添加成表格中的一行，该行

有一个 “ 删除 ” 列，点击删除移出该行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			td,th{
				border: 1px solid skyblue;
			}
		</style>
	</head>
	<body>
		<input type="text" name="singer" id="name" placeholder="歌手名" /><input type="text" name="song" id="masterpiece" placeholder="代表作" /><button id="btn">添加</button>

		<table border-collapse="1" id="table">
			<tr>
				<th>歌手名</th>
				<th>代表作</th>
				<th>操作</th>
			</tr>

		</table>
		<script>
			var i=0;
			document.getElementById("btn").onclick = function() {
				// 获取输入值
				var inpname = document.getElementById("name").value;
				var inpmasterpiece = document.getElementById("masterpiece").value;
				// 判断是否为空
				if(inpname==0||inpmasterpiece==0){
					alert("不能为空");
					return;
				}
				// 创建tr
				var tr = document.createElement("tr");
				tr.style.position = "relative";
				// 创建tdname并插入tr
				var tdname = document.createElement("td")
				tdname.innerText=inpname;
				tr.appendChild(tdname);
				// 创建tdmasterpiece并插入tr
				var tdmasterpiece = document.createElement("td");
				tdmasterpiece.innerText=inpmasterpiece;
				tr.appendChild(tdmasterpiece);
				// 创建tddel并插入tr
				var tddel = document.createElement("td")
				tddel.style.cursor="pointer";
				tddel.innerText="删除";
				// 实现点击删除tr
				tddel.onclick=function(){
					document.getElementById("table").removeChild(tr);
				}
				tr.appendChild(tddel);
				
				
				// 将tr插入到table中
				document.getElementById("table").appendChild(tr);
				
				
				
			}
		</script>
	</body>
</html>

4.JQuery

        jQuery是一个轻量级的javascript函数库，封装了很多javascript中的内容。jQuery的本质依然是javacript(一个.js文件)。

作用

• 用于获取文档中的元素，对元素进行操作

• 更强大的选择器

• 支持链式写法

• 封装了ajax，更方便使用

jQuery对象和js对象(dom对象)

在js中，使用document.getElementXXX获取到的是dom对象。

dom对象只能使用如.style、.innerText等属性修改样式或内容，不能使用jQuery对象中的属性或函数。

在jQuery中，使用jQuery选择器获取到的是jQuery对象。

jQuery对象只能使用jQuery中的属性或函数，不能使用dom对象中的属性或函数。

通常在jQuery对象命名时，使用$符号作为前缀，方便区分jQuery对象和dom对象。

二者转换

jQuery对象转换为dom对象。1.jQuery对象[0]。2.jQuery对象.get(0)。

dom对象转换为jQuery。$(dom对象)。

<html>

    <body>
        <h1 id="test"></h1>
    </body>

    <script src="jQuery.js"></script>
    <script>
        $(function(){
            //通过js的方式获取的对象，称为dom对象，只能使用dom对象操作节点的属性和方法
            var test= document.getElementById("test");
            test.innerText="修改文本"；
            //通过jQuery的选择器获取的对象，称为jQuery对象，只能使用jQuery对象操作节点的属性和方法
            //$("#test").innerText="xxx"//无效
            $("#test").text("修改文本");

            //将jQuery对象转换为dom对象
            $("#test")[0].innerText="修改文本";
            //将dom对象转换为jQuery对象
            $(test).text("修改文本");
        });
    </script>
</html>

$符号冲突问题

在页面中引入jQuery.js后，$符号相当于"jQuery"这个单词，有特殊的含义。

如果一个页面中，会引入多个js函数库，并且这些函数库都会用到符号时，就会造成符号冲突。

jQuery提供了一个**noConflict()**函数用于释放对$的使用权。

//直接调用该方法，释放对$的使用权，之后只能使用默认的"jQuery"
$.noConflict();
//$("#md")//这时会无效
jQuery("#md")//只能这样使用

//调用该方法，使用变量接收，释放对$的使用权，用指定的变量名代替$
var jq=$.noConflict();
jq("#md")//将jq当做$使用

jQuery中的选择器

 

 过滤选择器

 

 

 

 操作节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#md{
				width: 500px;
				height: 500px;
				border: 1px solid red;
			}
			
		</style>
	</head>
	<body>
		<div id="md"></div>
		<button>append()</button>
		<button>appendTo()</button>
		<button>prepend()</button>
		<button>prependTo()</button>
		<hr>
		<button>before()</button>
		<button>insertBefore()</button>
		<button>after()</button>
		<button>insertAfter()</button>
		<hr>
		<button>empty()</button>
		<button>remove()</button>
		
	</body>
	<script src="js/jquery-3.6.2.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// 创建节点
			var $a=$("<a href='#'>超链接</a><br>");
			
			$("button:eq(0)").click(function(){
				// 父.append(子)
				$("#md").append($a);
			});
			$("button:eq(1)").click(function(){
				// 子.appendTo(父)
				$a.appendTo($("#md"));
			});
			$("button:eq(2)").click(function(){
				// 父.append(子)
				$("#md").append($a);
			});
			$("button:eq(3)").click(function(){
				// 子.appendTo(父)
				$a.appendTo($("#md"));
			});
			$("button:eq(4)").click(function(){
				// 原.before(新)
				$("#md").before($a);
			});
			$("button:eq(5)").click(function(){
				// 新.insertBefore(原)
				$a.insertBefore($("#md"));
			});
			$("button:eq(6)").click(function(){
				// 原.after(新)
				$("#md").after($a);
			});
			$("button:eq(7)").click(function(){
				// 新.insertAfter(原)
				$a.insertAfter($("#md"));
			});
			$("button:eq(8)").click(function(){
				// 清空子节点
				$("#md").empty();
			});
			$("button:eq(9)").click(function(){
				// 移除指定节点
				$("#md").remove();
			});
            console.log($("div:eq(0)").text());
			console.log($("div:eq(0)").html());
			console.log($("input:eq(0)").val());
			//innerText
			$("div:eq(o)").text("<h1>修改text</h1>");
			//innerHTML
			$("div:eq(1)").htm1("<h1>修改html</h1>");
			//设置单标签中value)属性值
			$("input:eq(g)").val("修改value");
			//获取某个样式的值
			console.log($("div:eq(0)").css("width")
			//同时设置多个样式
			$("div:eq(1)").css({
			"color":"skyblue",
			"font-family":"楷体"，
			"text-decoration":"underline"
			})
		});
	</script>
</html>

预设动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#md{
				width: 200px;
				height: 200px;
				background-color: burlywood;
			}
		</style>
	</head>
	<body>
		<div id="md"></div>
		<button>hide</button>
		<button>show</button>
		<button>toggle</button>
		<hr>
		<button>fadeOut</button>
		<button>fadeIn</button>
		<button>fadeToggle</button>
		<hr>
		<button>slideUp</button>
		<button>slideDown</button>
		<button>slideToggle</button>
	</body>
	<script src="jquery-3.6.2.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// 同时改变宽高从原来到0
			$("button:eq(0)").click(function(){
				// $("#md").hide(2000);
				// 如果希望改变后实现其他代码,两个参数,1.动画执行所需的毫秒数,2.动画执行结束后的回调函数.
				$("#md").hide(2000,function(){
					alert("消失了");
				});
			});
			// 同时改变宽高从0到原来
			$("button:eq(1)").click(function(){
				$("#md").show(2000);
			});
			// 切换show/hide
			$("button:eq(2)").click(function(){
				$("#md").toggle(2000);
			});
			// 同时改变不透明度从原来到0
			$("button:eq(3)").click(function(){
				$("#md").fadeOut(2000);
			});
			// 同时改变不透明度从0到原来
			$("button:eq(4)").click(function(){
				$("#md").fadeIn(2000);
			});
			// 切换fadeOut/fadeIn
			$("button:eq(5)").click(function(){
				$("#md").fadeToggle(2000);
			});
			// 同时改变高度从原来到0
			$("button:eq(6)").click(function(){
				$("#md").slideUp(2000);
			});
			// 同时改变高度从0到原来
			$("button:eq(7)").click(function(){
				$("#md").slideDown(2000);
			});
			// 切换slideUp/slideDown
			$("button:eq(8)").click(function(){
				$("#md").slideToggle(2000);
			});
			
		});
	</script>
</html>

自定义动画

• 使用animate()函数，该函数有四个参数分别为样式组、所需事件、动画函数、回调函数
• animate()函数支持链式写法
• 只支持数值型样式。如尺寸、位置等。字符串型样式不支持，如颜色等

节点.animate({
    "样式":"值",
    "样式":"值"
},2000,linear,function(){
    //动画执行结束后执行
}).animate(...)

事件

绑定事件

js中的事件绑定方式为：

//dom节点.on事件=function(){}
document.getElementById("md").onclick=function(){

}

jquery中的事件绑定方式为：

//jquery节点.事件(function(){});
$("#md").click(function(){

});
或
//jquery节点.bind("事件名",function(){})
$("#md").bind("click",function(){

})

事件函数

案例

打地鼠游戏核心原理

1.使用js画div和开始按钮

2.写好显示图片的样式，如“show”，使用setInterval，每隔一段时间，随机一个div，让其拥有该样式

3.每次只能有一个div有该样式：可以每次先清除“show”后，再添加"show"

4.给每个div添加单击事件，点中了图片(带有"show"的div)，移除样式"show"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#all {
				width: 740px;
				height: 500px;
				/* border: 4px double #0fc844; */
				margin: 100px auto;
				background-color: #0fc844;
			}

			#all div {
				width: 100px;
				height: 100px;
				background-color: #89c8a3;
				float: left;
				margin: 20px 0 0 20px;
			}

			#but {
				
				display: block;
				margin: 30px auto;
				
			}

			.imgds {
				background-image: url(img/地鼠.jpg);
				background-size: cover;
			}
		</style>
	</head>
	<body>
		<script>
			document.write("<div id='all'>");
			for (var i = 0; i < 24; i++) {
				document.write("<div></div>");
			}
			document.write("</div>");
		</script>

		<button id="but">开始游戏</button>
	</body>
	<script src="js/jquery-3.6.2.min.js"></script>
	<script>
		$(function() {
			var myInterval;
			// 得分
			var score;
			// 设置所有div
			var divs = $("#all>div");
			$("button:eq(0)").click(function() {
				score = 0;
				// 设置倒计时,最终10秒钟停止.
				window.setTimeout(function() {
					alert("游戏结束，你的得分为【" + score + "】");
					// 停止执行showImg
					window.clearInterval(myInterval);
				}, 10000);
				// 每0.8秒执行一次showImg
				myInterval = window.setInterval(showImg, 800);
			});

			// 给所有的div添加单击事件.
			divs.click(function() {
				// 如果单击的div有class值为imgds.this表示当前被点击的div(dom对象),$(this)表示将dom对象转换jquery对象
				if ($(this).hasClass("imgds")) {
					// 点击之后直接移除imgds格式
					$(this).removeClass("imgds");
					score++;
				}
			});

			function showImg() {
				// 把所有的格式去掉imgds
				divs.removeClass("imgds");
				// 随机一个0到div.length的数
				var index = Math.floor(Math.random() * divs.length);
				// 把imgds格式加载到div[index]上,用eq("+index+")才可以取index.
				$("#all>div:eq(" + index + ")").addClass("imgds");
			}
		});
	</script>
</html>