回顾上一节内容：

①.函数的使用：

系统的函数：

parseInt(); parseFloat(); evel(); isNaN('123a');

自定义函数：

可以利用function 对象创建函数:

var mysum = new Function('num1=1','num2=2','return num1+num2');

②.BOM编程

window--顶层对象

alert()；网页弹窗，类似于syso的打印

console.log('无参数函数');控制台

prompt()；输入框

confirm()；确认框

open("index.html");打开网页

open("Index.html",'now','height=xx,width='');

close();

//创建的定时器（两个）
循环性
setInterval(function(){},1000)；
一次性
setTimeout(function(){},1000);

//清除的定时器
clearInterval();
clearTimeout();

//设置或者获取URL地址（location）
location.href ='www.baidu.com';
console.log(location.href);
location.reload();//刷新

模拟历史记录（history）
forward();下一页
back();返回
go();参数为正数 下一页（ 1） 1代表上一夜， 2代表上两页
     参数为负数 下一页（-1）-1代表下一页，-1代表下两页

数组
var a = [];

Date:
getFullYear();//获得不用加1900的时间值

Math---Random();//随机数

JS重载的方法：

// 任意一个函数中都会存在一个arguments参数，可以存储函数的参数个数

	function add(){
		if(arguments.length == 0){
			console.log("无参数函数");
		}else if(arguments.length == 1){
			console.log("1个参数函数");
		}else if(arguments.length == 2){
			console.log("2个参数函数");
		}
	}

	add();

	add(1);

	add(1,2);

本节内容：

节点是什么：

<a href="">内容</a>

DOM编程之元素获取：

根据ID属性获取标签对象：document.getElementById();

<input type="text" id="oInput">
<button id="oBtn1">点击获取value值</button>
<script type="text/javascript">
	//根据ID属性获取标签对象（元素）
	var oBtn1 = document.getElementById('oBtn1');
	console.log(oBtn1);
	//调用点击事件的属性
	oBtn1.onclick = function(){
		//根据ID属性获取输入项标签对象
		var oInput = document.getElementById('oInput');
		alert(oInput.value);
	};

根据标签名获取一组标签合集：document.getElementsByTagName();

[0]获取伪数组第一个的值

<ul>
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
	<li>item4</li>
	<li>item5</li>
</ul>
<ol>
	<li>item01</li>
	<li>item02</li>
	<li>item03</li>
	<li>item04</li>
	<li>item05</li>
</ol>
<script type="text/javascript">
	//根据标签名一次性获取一组同类型的标签对象
	var oLis = document.getElementsByTagName('li');
	console.log(oLis);
	//打印所有li中的文本内容
	for(var i = 0;i<oLis.length;i++){
		console.log(oLis[i].innerHTML);
	}

	//获取指定li（OL）
	var oL = document.getElementsByTagName('ol')[0];
	var oLisDemo = oL.getElementsByTagName('li');
	console.log(oLisDemo);
</script>

根据标签上的name属性可以获取同一组标签对象:document.getElementsByName('name属性值')

<input name = 'cs' type="text" value = "hello1"> <br/>
<input name = 'cs' type="text" value = "hello2"> <br/>
<input name = 'cs' type="text" value = "hello3"> <br/>
<input name = 'cs' type="text" value = "hello4"> <br/>
<input name = 'cs' type="text" value = "hello5"> <br/>
<script type="text/javascript">
	//根据name属性获取一组input标签
	var oInputs = document.getElementsByName('cs');
	console.log(oInputs[0].value);
	for(var i = 0;i<oInputs.length;i++){
		console.log(oInputs[i].value);
		if(i === 1 || i === 3){
			oInputs[i].value = 'demo'
		}
	}

HTML5.0版本以上的获取元素的方式（选择器： ID选择器（#）类选择器（.）标签选择器）

innerHTML获取非表单内容

<button id="oBtn2">点击获取1</button>
<button class="oBox">点击获取2</button>
<button>点击获取3</button>
<script type="text/javascript">
    var oBtn2 = document.querySelector('#oBtn2');
    console.log(oBtn2);
    var oBox = document.querySelector('.oBox');
    console.log(oBox);
    //如果参数是标签选择器  获取的是页面上的第一个button按钮
    var btn = document.querySelector('button');
    console.log("result = "+btn.innerHTML);
</script>

根据选择器获取一组元素 document.querySelectorAll()；

<h5>根据选择器获取一组元素 document.querySelectorAll()</h5>
<input type="checkbox" class = 'oInputs'>
<input type="checkbox" class = 'oInputs'>
<input type="checkbox" class = 'oInputs'>
<input type="checkbox" class = 'oInputs'>
<input type="checkbox" class = 'oInputs'>
<script type="text/javascript">
	//根据选择器获取一组元素
	var oInputs = document.querySelectorAll('.oInputs');
	console.log(oInputs.length);

根据ID属性获取元素对象

innerText 获取内容时，不包括该标签中的子标签

//innerHTML? 获取内容时，包括标签

<script type="text/javascript">
	//根据ID属性获取元素对象
	//innerText 获取内容时，不包括该标签中的子标签
	var oDiv = document.getElementById('oDiv');
	console.log(oDiv.innerText);//Text 文本
	//innerHTML  获取内容时，包括标签
	console.log(oDiv.innerHTML);

</script>

<div class="oBox">

</div>
<script type="text/javascript">
	var oBox = document.querySelector('.oBox');
	//innerText设置时  标签时无效的。
	// oBox.innerText = '<h1>好好学习</h1>'
	// innerHTML设置时 标签是有效的
	oBox.innerHTML = '<h1>好好学习</h1>'
</script>

设置图片大小的，图片属性（实现实现图片的手动切换）

将图片地址赋值到输入框里面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img{
			width:200px;
			height: 200px
		}
	</style>
</head>
<body>
	<img src="img/1.jpg" alt=""> <br>
	<input type="text"><br>
	<button id="oBtn1">点击获取src属性</button>

	<button id="oBtn2">点击设置src属性</button>

	<script type="text/javascript">
		var oBtn1 = document.getElementById('oBtn1');
		oBtn1.onclick = function(){
			//获取img标签
			var oImg = document.querySelector('img');
			// alert(oImg.src)
			// 获取input
			var oInput = document.querySelector('input');
			oInput.value = oImg.src;
		};

		var oBtn2 = document.getElementById('oBtn2');
		oBtn2.onclick = function(){
			//获取img标签
			var oImg = document.querySelector('img');
			// alert(oImg.src)
			oImg.src = 'img/2.jpg'
			// 获取input
			var oInput = document.querySelector('input');
			oInput.value = oImg.src;
		};
	</script>


</body>
</html>

简单的图片轮播（手动、自动与停止切换）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img{
			width: 300px;
			height: 300px;
		}
	</style>
</head>
<body>
	<h3>简易图片轮播器</h3>
	<hr>
	<img src="img/1.jpg" alt="">
	<br>
	<br>
	<button onclick="nextImg();">下一张</button>
	<button onclick = "autoImg();">自动切换图片</button>
	<button onclick = "stopImg();">停止自动切换图片</button>
	<script type="text/javascript">
		//定义数组  存储所有的图片名称  通过下标获取
		var imgs = [
			'img/1.jpg',
			'img/2.jpg',
			'img/3.jpg',
			'img/4.jpg'
		];



var index = 0;
	//设置nextImg函数
	function nextImg(){
		//获取img标签
		var oImg = document.querySelector('img');
		index++;
		if(index>=imgs.length){
			index = 0;//归0
		}
		oImg.src = imgs[index];
		console.log(index);//检查控制台是否报错
	};

	//自动切换
	var timer = null;
	function autoImg(){
		timer = window.setInterval(function(){
			nextImg();
		},1000);
	}
	//停止定时器
	function stopImg(){
		window.clearInterval(timer);
	}

设置鼠标触碰事件（进行图片的切换）

方法在上面的代码段：！！！！！

//获取img标签
	var oImg = document.querySelector('img');
	oImg.onmouseover = function(){
		stopImg();
	};
	oImg.onmouseout = function(){
		autoImg();
	};
	//当页面加载完毕后自动播放图片
	window.onload = autoImg();

控制元素（标签）隐藏与显示的两种方法

行内样式优先级高

第一种：

	visibility属性    visible	表示元素是可见的	hidden	表示元素是不可见的
			object.style.visibility="值"

第二种：

display属性	none	表示此元素不会被显示	block	表示此元素将显示为块级元素，
此元素前后会带有换行符
		object.style.display="值"

两者的区别在于--前者会将?属性隐藏时? 会占用位置，后者则反之。

两者使用的代码如下：

 -->
 <h3>控制标签的显示与隐藏</h3>
 <!-- 对于visibility属性以及display属性都需要借助style属性才能进行调用 -->
 <img src="img/1.jpg" alt="">
 <img src="img/2.jpg" alt="">
 <img src="img/3.jpg" alt="">
 <br>
 <button id="oBtn1">控制隐藏（visibility属性）</button>
 <button id="oBtn2">控制显示（visibility属性）</button>
 <script type="text/javascript">
 	var oBtn1 = document.querySelector('#oBtn1');
 	oBtn1.onclick = function() {
 		// var oImg2 = document.getElementsByTagName('img')[1];
 		var oImg2 = document.querySelectorAll('img')[1];
 		// alert(oImg2.src);
 		// visibility 属性隐藏时  会占用位置
 		oImg2.style.visibility = 'hidden';
 	};

 	var oBtn2 = document.querySelector('#oBtn2');
 	oBtn2.onclick = function() {
 		// var oImg2 = document.getElementsByTagName('img')[1];
 		var oImg2 = document.querySelectorAll('img')[1];
 		// alert(oImg2.src);
 		// visibility 属性隐藏时  会占用位置
 		oImg2.style.visibility = 'visible';
 	};
 </script>

 <hr>
 <img src="img/1.jpg" alt="">
 <img src="img/2.jpg" alt="">
 <img src="img/3.jpg" alt="">
 <br>
 <button id="oBtn3">控制隐藏（display属性）</button>
 <button id="oBtn4">控制显示（display属性）</button>

 <script type="text/javascript">
 	var oBtn3 = document.querySelector('#oBtn3');
 	oBtn3.onclick = function() {
 		// var oImg2 = document.getElementsByTagName('img')[1];
 		var oImg2 = document.querySelectorAll('img')[4];
 		// display 属性隐藏时  不会占用位置
 		oImg2.style.display = 'none';
 	};

 	var oBtn4 = document.querySelector('#oBtn4');
 	oBtn4.onclick = function() {
 		// var oImg2 = document.getElementsByTagName('img')[1];
 		var oImg2 = document.querySelectorAll('img')[4];
 		// alert(oImg2.src);
 		// display 属性隐藏时  bu 会占用位置
 		// display  inline  block  inline-block
 		oImg2.style.display = 'inline-block';
 	};
 </script>


 </script>

?//根据style获取属性值? 有bug（不兼容）
??? ? ?? ?//style属性只能获取行内式样式

 <hr>

 <img style="border: 10px solid red;" id="oImgBox" src="img/1.jpg" alt="">
 <button id="oBtnBox">点击设置样式</button>
 <br><br><br><br><br><br><br>
 <script type="text/javascript">
 	 var oBtnBox = document.querySelector("#oBtnBox");
 	 oBtnBox.onclick = function(){
 	 	var oImgBox= document.querySelector('#oImgBox');
 	 	// oImgBox.style.border = '10px solid red';
 	 	// oImgBox.style.width = '500px';
 	 	//根据style获取属性值  有bug（不兼容）
 	 	//style属性只能获取行内式样式
 	 	// alert(oImgBox.style.border);
 	 	alert(oImgBox.style.width);
 	 };