Welcome to Xin YAO's blog

ajax

2018-09-29

Web

ajax

ajax = Asynchronous + JavaScript + And + XML（现在XML慢慢已经被JSON取代）

Asynchronous：异步请求（没有中断浏览器的用户体验）从服务器获取数据。 JSON ：通过DOM操作对页面进行局部刷新

ajax作用：异步加载数据 + 局部刷新页面

效果一：利用api查看美女图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="beauty">换一组</button><br/>
		<script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#beauty").on("click",function(){
					$("a").empty();
					var url = "http://api.tianapi.com/meinv/?key=3cedb24a8f5af4277b3de0b9c841e1d6&num=20"
					$.getJSON(url,function(jsonOBJ){
						for (var i = 0; i < jsonOBJ.newslist.length ; i += 1){
							$(document.body).append(
								$("<a>").html(jsonOBJ.newslist[i].title+"<br/>").attr("href",jsonOBJ.newslist[i].picUrl).attr("width","400")
	
							);
						}
					});
				});
			});
		</script>
	</body>
</html>

效果二：api-周公解梦

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>周公解梦在线版</title>
		<style type="text/css">
			#main{
				position: absolute;
				margin: 100px 200px;
				float: left;
				width: 800px;
				height: 400px;
				border: solid black;
			}

		</style>
	</head>
	<body>
		<div id="main">
			<span>解梦：</span>
			<input placeholder="输入您想查询梦的关键字" id="text">
			<button id="confirm">查询</button>
			<hr />
			<span>解析：</span>
			
		</div>
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
		<script>
			$(function(){
				$("#confirm").on("click",function(){
					var content = $("#text").val().trim();
					if (content.length>0){
						
						//getJSON方法
//						var str1 = encodeURIComponent(content,"utf-8");
//						var url = "http://api.tianapi.com/txapi/dream/?key=3cedb24a8f5af4277b3de0b9c841e1d6&word=" + str1;
//						$.getJSON(url,function(jsonOBJ){
//							$("#main>p").empty();
//							if (jsonOBJ.code == 250){
//								alert("未检索到相关信息！")；
//							}else{	
//								$("#main").append($("<p>").text(jsonOBJ.newslist[0].result))；
//							}
//						});

						//ajax方法
						$.ajax({
							"url":"http://api.tianapi.com/txapi/dream/",
							"type":"get",
							"data":{
								"key":"3cedb24a8f5af4277b3de0b9c841e1d6",
								"word":content
							},
							"dataType": "json",
							"success": function(jsonOBJ){
								if (jsonOBJ.code == 250) {
									alert("未检索到相关信息！");
								}else{
									$("#main").append($("<p>").text(jsonOBJ.newslist[0].result));
								}
							}
					
						});
					}
					

				});
			});
		</script>
	</body>
</html>

Bootstrap响应式布局 Bootstrap

Read All

jQuery

2018-09-28

Web

jQuery
口号：Write Less Do More ***** 1.解决了浏览器兼容性问题 2.封装了常用的操作，用更少的代码做更多的事。

引入jQuery

1.使用自己项目中的jquery.min.js。 2.使用CDN服务器上的jQuery文件。

如何使用jQuery

jQuery对象的本质是一个伪数组
- 有length属性
- 可以通过下标获取数据
window.jQuery属性 –> $

1、$函数的参数是一个函数 - 传入的函数是页面加载完成之后要执行的回调函数

2、$函数的参数是选择器字符串 - 获得页面上的标签而且转换成JQuery对象。 说明：为什么要获取jQuery对象 - 因为jQuery对象有更多封装好的方法可供调用。
- 绑定/反绑定：on()/off()/one()
- 获取/修改标签内容：text()/html()
- 获取/修改标签属性：attr(name, value)
- 添加子节点：append()后 / prepend()前面
- 删除/清空节点：remove() / empty()
- 修改样式表：css({‘color’:’red’,……}) - 修改多个样式（一个参数是读样式，两个是修改样式）
- 获取节点：parent() / children() / prev() /next()
- 后两个是兄弟节点
3、$函数的参数是标签字符串 - 创建标签并且返回对应的jQuery对象。

4、$函数的参数是原生JS对象 - 将原生JS对象转换成JQuery对象。
- 如果bar是一个jQuery对象可以通过bar[0] / bar.get[0]
四种$使用方法例子：
```
		<script>
			$(function(){
				function deleteItem(evt){
					$(evt.target).parent().remove();
				}
				$("#fruits a").on("click",deleteItem);
				$("#ok").on("click",function(){
					var fruitName = $("#container input[name=fruit]").val().trim();
					if (fruitName.length > 0)	{
						$("#fruits").append($("<li>").text(fruitName).append($("<a>").text("x").attr("href","javascript:viod(0);").on("click",deleteItem)));
					}
				});
			});
		</script>
```
具体jQuery用法可以参考：jQuery API 手册
Read All
jQuery

2018-09-28

Web

jQuery
口号：Write Less Do More ***** 1.解决了浏览器兼容性问题 2.封装了常用的操作，用更少的代码做更多的事。

引入jQuery

1.使用自己项目中的jquery.min.js。 2.使用CDN服务器上的jQuery文件。

如何使用jQuery

jQuery对象的本质是一个伪数组
- 有length属性
- 可以通过下标获取数据
window.jQuery属性 –> $

1、$函数的参数是一个函数 - 传入的函数是页面加载完成之后要执行的回调函数

2、$函数的参数是选择器字符串 - 获得页面上的标签而且转换成JQuery对象。 说明：为什么要获取jQuery对象 - 因为jQuery对象有更多封装好的方法可供调用。
- 绑定/反绑定：on()/off()/one()
- 获取/修改标签内容：text()/html()
- 获取/修改标签属性：attr(name, value)
- 添加子节点：append()后 / prepend()前面
- 删除/清空节点：remove() / empty()
- 修改样式表：css({‘color’:’red’,……}) - 修改多个样式（一个参数是读样式，两个是修改样式）
- 获取节点：parent() / children() / prev() /next()
- 后两个是兄弟节点
3、$函数的参数是标签字符串 - 创建标签并且返回对应的jQuery对象。

4、$函数的参数是原生JS对象 - 将原生JS对象转换成JQuery对象。
- 如果bar是一个jQuery对象可以通过bar[0] / bar.get[0]
四种$使用方法例子：
```
		<script>
			$(function(){
				function deleteItem(evt){
					$(evt.target).parent().remove();
				}
				$("#fruits a").on("click",deleteItem);
				$("#ok").on("click",function(){
					var fruitName = $("#container input[name=fruit]").val().trim();
					if (fruitName.length > 0)	{
						$("#fruits").append($("<li>").text(fruitName).append($("<a>").text("x").attr("href","javascript:viod(0);").on("click",deleteItem)));
					}
				});
			});
		</script>
```
具体jQuery用法可以参考：jQuery API 手册
Read All

JS修改元素标签

2018-09-27

Web

根据拿到元素访问其他节点 元素访问子节点 - children 元素访问父节点 - parentNode 元素访问兄弟节点 - previousSibling / nextSibling

JS中拿到元素的的一些操作

1、修改元素样式

var closeBtn = document.getElementById("closeBtn"); 可以直接对closeBtn对元素样式进行操作 closeBtn.parentNode.style.display = "none"; //关闭父节点的显示 区别： closeBtn.parentNode.style.visibility = "hidden"; //隐藏父节点，但是位置还占着

2、读取元素样式

读样式方法，通过document.defaultView.getComputedStyle()来读取样式。

var ad = document.getElementById("ad");
var currentStyle = document.defaultView.getComputedStyle(ad);
consle.log(currentStyle.width)
consle.log(currentStyle.height)

流氓广告– 无法关闭，点击后广告变大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#ad{
			background-color:blueviolet;
			float: right;
			right: 0;
			position: fixed;
			width: 200px;
			height: 200px;
		}
		#ad button{
			float: right;	
		}
	</style>
	<body>
		
		<div id="ad">
			这里是广告
			<button id="closeBtn">关闭</button>
		</div>
		
		
		<script type="text/javascript">				
			var closeBtn = document.getElementById("closeBtn");
			closeBtn.addEventListener("click",function(){				
//				拿到元素的style属性只能进行修改,不能读取
//				closeBtn.parentNode.style.display = "none"; //点击关闭按钮关闭广告
//				closeBtn.parentNode.style.visibility = "hidden"; //隐藏div，但是位置还占着
								
//				读样式方法，通过得到的currentStyle来读取样式。
				var ad = document.getElementById("ad");
				var currentStyle = document.defaultView.getComputedStyle(ad);
				//	点击广告变大
				ad.style.width = (parseInt(currentStyle.width) + 20) + "px";
				ad.style.height = (parseInt(currentStyle.height) + 20) + "px";
			});
		
		</script>
	</body>
</html>

3、删除

必须父元素操作，才能删除子元素 ul.removeChild(li); //删除子标签li

4、添加

必须是父元素才能对子元素进行添加操作

var div = document.createElement("div"); // 创建元素,然后对创建的元素进行操作
divFather.appendChild(div);    //添加子标签(加在最后)
divFather.insertBefore(div,位置);   //添加子标签（指定位置）

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#main{
				width: 800px;
				height: 400px;
				margin: 10px auto;
				border:black solid;
				overflow: hidden;
			}
			#button1{
				width: 50px;
				height: 30px;
				font-size: 18px;
				margin-left: 300px;
			}
			#button2{
				width: 50px;
				height: 30px;
				font-size: 18px;
				margin-left:500px;
			}
			#main div{
				width: 80px;
				height:80px;
				float:left;
			}
			
		</style>
	</head>
	<body>
		<div>
			<div id="main"></div>
			<button id="button1">添加</button>
			<button id="button2">闪烁</button>
		</div>
		
		
		<script type="text/javascript">
			var main = document.getElementById("main");
			var button1 = document.getElementById("button1");
			var button2 = document.getElementById("button2");
			var flag = true;
			var glint1 = 0;
			button1.addEventListener("click",function(){
				var div1 = document.createElement("div");
				div1.style.backgroundColor = randomColor();
				main.insertBefore(div1,main.firstChild);					
			})
			
			button2.addEventListener("click",function(){
				if (flag){
					glint1 = setInterval(glint,200);			
				}else{
					clearInterval(glint1);
				}
				button2.innerHTML = flag?"暂停":"闪烁";
				flag = !flag;
			});
			
			
			function glint(){
						var divAll = document.querySelectorAll("#main div");
						for (var i = 0; i<divAll.length; i+=1){
							divAll[i].style.backgroundColor = randomColor();
						};
					}
			
			function randomColor(){
				var red = parseInt(Math.random()*256);
				var green = parseInt(Math.random()*256);
				var blue = parseInt(Math.random()*256);
				return "rgb(" + red + ", " + green + ", " + blue + ")";
			}
		</script>
	</body>
</html>

效果：

练习 1、鼠标按住拖动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: #5F9EA0;
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		
		<script type="text/javascript">
			var div1 = document.getElementById("div1");
			var originalX = 0;
			var originalY = 0;
			var flag = false;
			
			div1.addEventListener("mousedown",function(evt){
				originalX = evt.clientX - div1.offsetLeft;   //记录事件发生的鼠标到left的距离
				originalY = evt.clientY - div1.offsetTop;
				flag = true;
			});
			
			
			div1.addEventListener("mousemove",function(evt){
				if (flag){
					div1.style.left = (evt.clientX - originalX)+"px";
					div1.style.top = (evt.clientY - originalY)+"px";	
				}
			});
			
			
			div1.addEventListener("mouseup",function(evt){
				flag = false;
			});
		</script>
	</body>
</html>

效果：

Read All

JS修改元素标签

2018-09-27

Web

根据拿到元素访问其他节点 元素访问子节点 - children 元素访问父节点 - parentNode 元素访问兄弟节点 - previousSibling / nextSibling

JS中拿到元素的的一些操作

1、修改元素样式

2、读取元素样式

读样式方法，通过document.defaultView.getComputedStyle()来读取样式。

var ad = document.getElementById("ad");
var currentStyle = document.defaultView.getComputedStyle(ad);
consle.log(currentStyle.width)
consle.log(currentStyle.height)

流氓广告– 无法关闭，点击后广告变大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#ad{
			background-color:blueviolet;
			float: right;
			right: 0;
			position: fixed;
			width: 200px;
			height: 200px;
		}
		#ad button{
			float: right;	
		}
	</style>
	<body>
		
		<div id="ad">
			这里是广告
			<button id="closeBtn">关闭</button>
		</div>
		
		
		<script type="text/javascript">				
			var closeBtn = document.getElementById("closeBtn");
			closeBtn.addEventListener("click",function(){				
//				拿到元素的style属性只能进行修改,不能读取
//				closeBtn.parentNode.style.display = "none"; //点击关闭按钮关闭广告
//				closeBtn.parentNode.style.visibility = "hidden"; //隐藏div，但是位置还占着
								
//				读样式方法，通过得到的currentStyle来读取样式。
				var ad = document.getElementById("ad");
				var currentStyle = document.defaultView.getComputedStyle(ad);
				//	点击广告变大
				ad.style.width = (parseInt(currentStyle.width) + 20) + "px";
				ad.style.height = (parseInt(currentStyle.height) + 20) + "px";
			});
		
		</script>
	</body>
</html>

3、删除

必须父元素操作，才能删除子元素 ul.removeChild(li); //删除子标签li

4、添加

必须是父元素才能对子元素进行添加操作

var div = document.createElement("div"); // 创建元素,然后对创建的元素进行操作
divFather.appendChild(div);    //添加子标签(加在最后)
divFather.insertBefore(div,位置);   //添加子标签（指定位置）

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#main{
				width: 800px;
				height: 400px;
				margin: 10px auto;
				border:black solid;
				overflow: hidden;
			}
			#button1{
				width: 50px;
				height: 30px;
				font-size: 18px;
				margin-left: 300px;
			}
			#button2{
				width: 50px;
				height: 30px;
				font-size: 18px;
				margin-left:500px;
			}
			#main div{
				width: 80px;
				height:80px;
				float:left;
			}
			
		</style>
	</head>
	<body>
		<div>
			<div id="main"></div>
			<button id="button1">添加</button>
			<button id="button2">闪烁</button>
		</div>
		
		
		<script type="text/javascript">
			var main = document.getElementById("main");
			var button1 = document.getElementById("button1");
			var button2 = document.getElementById("button2");
			var flag = true;
			var glint1 = 0;
			button1.addEventListener("click",function(){
				var div1 = document.createElement("div");
				div1.style.backgroundColor = randomColor();
				main.insertBefore(div1,main.firstChild);					
			})
			
			button2.addEventListener("click",function(){
				if (flag){
					glint1 = setInterval(glint,200);			
				}else{
					clearInterval(glint1);
				}
				button2.innerHTML = flag?"暂停":"闪烁";
				flag = !flag;
			});
			
			
			function glint(){
						var divAll = document.querySelectorAll("#main div");
						for (var i = 0; i<divAll.length; i+=1){
							divAll[i].style.backgroundColor = randomColor();
						};
					}
			
			function randomColor(){
				var red = parseInt(Math.random()*256);
				var green = parseInt(Math.random()*256);
				var blue = parseInt(Math.random()*256);
				return "rgb(" + red + ", " + green + ", " + blue + ")";
			}
		</script>
	</body>
</html>

效果：

练习 1、鼠标按住拖动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: #5F9EA0;
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		
		<script type="text/javascript">
			var div1 = document.getElementById("div1");
			var originalX = 0;
			var originalY = 0;
			var flag = false;
			
			div1.addEventListener("mousedown",function(evt){
				originalX = evt.clientX - div1.offsetLeft;   //记录事件发生的鼠标到left的距离
				originalY = evt.clientY - div1.offsetTop;
				flag = true;
			});
			
			
			div1.addEventListener("mousemove",function(evt){
				if (flag){
					div1.style.left = (evt.clientX - originalX)+"px";
					div1.style.top = (evt.clientY - originalY)+"px";	
				}
			});
			
			
			div1.addEventListener("mouseup",function(evt){
				flag = false;
			});
		</script>
	</body>
</html>

效果：

Read All

JS中的事件处理

2018-09-26

Web

一、JavaScript中的事件处理

1、在标签上使用onXXX属性来进行事件绑定（不推荐使用）

		<button onclick="sayHello()">按钮1</button>
		<script type="text/javascript">
			function sayHello(){
				alert("Hello!");
			}

2、通过代码获取标签绑定onXXX属性（不推荐使用）

		<button id="button1">按钮1</button>
		
		<script type="text/javascript">
			var button1 = document.getElementById("button1");
			button1.textContent = "点我呀！";
			button1.onclick = sayHello;
			function sayHello(){
				alert("Hello!");
			}
		</script>

3、通过diamante获取标签然后使用addEventListener绑定事件（推荐）

方法一：内部JS

		<button id="button1">按钮1</button>
		
		<script type="text/javascript">
			var button1 = document.getElementById("button1");
			//判断因为IE浏览器低版本不兼容
			if (button1.addEventListener){
				button1.textContent = "点我呀！";
				button1.addEventListener("click",sayHello);
				button1.addEventListener("click",sayGoodbye);
				button1.addEventListener("click",function(){
					button1.removeEventListener("click",sayHello); //移除事件监听
					button1.removeEventListener("click",sayGoodbye);
				})
			}else{ 
				//低版本IE浏览器使用的代码
				button1.attachEvent("onclick",sayHello);
				button1.attachEvent("onclick",sayGoodbye);
				button1.attachEvent("click",function(){
					button1.detachEvent("onclick",sayHello); //移除事件监听
					button1.detachEvent("onclick",sayGoodbye);
				})
			}

			function sayHello(){
				alert("Hello!");
			}
			function sayGoodbye(){
				alert("Goodbye！")
			}
		</script>

方法二：外部封装JS函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button id="button1">按钮1</button>
		
		<script src="js/new_file.js"></script>
		<script type="text/javascript">
			var button1 = document.getElementById("button1");
			// 绑定事件的回调函数（callback function）
			// 你知道事件发生的时候，但是不知道事件什么时候发生，只是进行绑定。
			bind(button1, "click", sayHello);
			bind(button1, "click", sayGoodbye);
			bind(button1, "click", function(){
				onbind(button1, "click", sayHello);
			})

			function sayHello(){
				alert("Hello!");
			}
			function sayGoodbye(){
				alert("Goodbye！")
			}
		</script>
	</body>
</html>

//js文件
function bind(elem, event, fn){
	if (elem.addEventListener){
		elem.addEventListener(event, fn);
	}else{
		elem.attachEvent("on" + event, fn);
	}
}

function onbind(elem, event, fn){
	if (elem.removeEventListener){
		elem.removeEventListener(event, fn);
	}else{
		elem.detachShader("on" + event, fn);
	}
}

在事件回调函数中获取事件源（易错点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="buttons">
			<button>button1</button>
			<button>button2</button>
			<button>button3</button>
			<button>button4</button>
			<button>button5</button>
		</div>
		
		<script src="js/javascript.js"></script>
		<script type="text/javascript">
			var buttons = document.querySelectorAll("#buttons>button");
			for (var i = 0; i<buttons.length; i+=1){
			//如果希望在事件回调函数中获得事件源
			//应该通过事件对象的target属性去获取事件源		
				bind(buttons[i], "click", function(evt){   
					//取事件源不能用下标去获取
					evt = evt || window.event; //兼容ie代码
					evt.target.textContent = "欧耶";
				})
			}

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

二、事件回调函数和事件对象

绑定事件监听器的函数都需要传入事件的回调函数，程序员因为事件发生的时候要做什么，但是不知道什么时候发生，所以传入一个函数在将来发生事件的时候，由事件调用，这种就叫回调函数。

回调函数的第一个参数代表事件对象（封装了和事件相关的所有信息），对于低版本的IE，可以通过window.event来获取事件对象。

事件对象的属性和方法： 1、target / srcElement(IE) - 事件源（引发事件的标签）

2、阻止事件的默认行为，比如：a标签 –> preventDefault()

					if (evt.preventDefault){
						evt.preventDefault();
					}else{
						evt.returnValue = false; //兼容ie
					}

3、事件的捕获和冒泡 事件冒泡内 –> 外（子代–>父代）（默认 false）事件捕获外 –> 内（true）

停止事件传播（捕获和冒泡） – stopPropagation() IE浏览器只有冒泡 – cancelBubble = true

猜数字游戏（网页版）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>
	<body>
	
		<input type="number" id="input" placeholder="猜0~10的数字"/>
		<input type="button" id="confirm" value="确定">	
		
		<script type="text/javascript">
			var count = 0;
			var num = parseInt(Math.random()*11);
			var guess = document.getElementById("input");
			var confirm = document.getElementById("confirm");
			confirm.addEventListener("click", guess_number);
			// 判断回车
			guess.addEventListener("keydown",function(evt){
				evt = evt || window.event;
				if (evt.keyCode == 13 || evt.which == 13){
					guess_number();
				}
			})
			
			function guess_number(){
				var thyAnswer = parseInt(guess.value);
				count += 1;
				if (thyAnswer > num){
					alert("大了大了~");
				}else if(thyAnswer < num){
					alert("小了小了~");
				}else if(thyAnswer == num){
					alert("恭喜你猜对了，一共猜了"+count+"次！");
					confirm.disabled = true; //禁止按钮
					guess.disabled = true;  //禁止输入框
				}
				guess.value = "";  //清除文本框内容
				guess.focus();  //获得焦点
	
			}
		</script>
	</body>
</html>

效果：

三、JS中创建对象常用方法

1、

2、

练习

一.图片3s自动切换，鼠标事件触发停止切换。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#span{
				color: #008000;
				text-align: center;
				font-size: 20px;
			}
			#pic{
				margin-left: 120px;
			}
		</style>
	</head>
	<body>
		<p id="span">每3s切换一次图片,鼠标放上停止切换，离开时继续切换</p><br/>
		<img src="img/slide-1.jpg" id="pic"/>
		
		<script type="text/javascript">
			var slipeImg = document.getElementById("pic");
			var timer = setInterval(slipe,3000);
			var count = 1;
			slipeImg.addEventListener("mouseover",overSlipe);
			slipeImg.addEventListener("mouseout",outSlipe);
			
			function overSlipe(){
				clearInterval(timer);
			}
			function outSlipe(){
				timer = setInterval(slipe,3000);
			}
			function slipe(){
				if (count == 4){
					count = 1
					slipeImg.src="img/slide-" + count + ".jpg";
				}else{
					count += 1;
					slipeImg.src="img/slide-" + count + ".jpg";
				}
			}
		</script>
	</body>
</html>

效果：

二、实现上题的功能的前提下，点击小图标可以切换到对应的图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#pic{
				margin-left: 450px;
			}
			#pic_small{
				margin-left: 460px;	
			}
		</style>
	</head>
	<body>
		
		<img src="img/pic1.jpg" id="pic"/>
		<div id="pic_small">
			<img src="img/thumb-1.jpg" id="small1"/>
			<img src="img/thumb-2.jpg" id="small2"/>
			<img src="img/thumb-3.jpg" id="small3"/>
		</div>
		
		<script type="text/javascript">
			var slipeImg = document.getElementById("pic");
			var timer = setInterval(slipe,3000);
			var count = 1;
			slipeImg.addEventListener("mouseover",overSlipe);
			slipeImg.addEventListener("mouseout",outSlipe);
			
			var thumbs = document.querySelectorAll("#pic_small>img");
			thumbs[0].addEventListener("click",fun1);
			thumbs[1].addEventListener("click",fun2);
			thumbs[2].addEventListener("click",fun3);


			function fun1(){
				slipeImg.src="img/pic1.jpg";
			}
			function fun2(){
				slipeImg.src="img/pic2.jpg";
			}	
			function fun3(){
				slipeImg.src="img/pic3.jpg";
			}
			
			function overSlipe(){
				clearInterval(timer);
			}
			function outSlipe(){
				timer = setInterval(slipe,1000);
			}
			function slipe(){
				if (count == 3){
					count = 1
					slipeImg.src="img/pic" + count + ".jpg";
				}else{
					count += 1;
					slipeImg.src="img/pic" + count + ".jpg";
				}
			}
		</script>
	</body>
</html>

效果：

Read All

5/13

Welcome to Xin YAO's blog

ajax

jQuery

引入jQuery

如何使用jQuery

jQuery

引入jQuery

如何使用jQuery

JS修改元素标签

JS中拿到元素的的一些操作

1、修改元素样式

2、读取元素样式

3、删除

4、添加

JS修改元素标签

JS中拿到元素的的一些操作

1、修改元素样式

2、读取元素样式

3、删除

4、添加

JS中的事件处理

一、JavaScript中的事件处理

1、在标签上使用onXXX属性来进行事件绑定（不推荐使用）

2、通过代码获取标签绑定onXXX属性（不推荐使用）

3、通过diamante获取标签然后使用addEventListener绑定事件（推荐）

二、事件回调函数和事件对象

三、JS中创建对象常用方法