前端之JS

作者: ropon 分类: Web前端 发布时间: 2018-11-09 17:29
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul,ol{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		/*.box1{
			width: 100%;
			height: 1000px;
			background-color: red;
		}
		.shuang11{
			width: 50px;
			height: 50px;
			background-color: green;
			position: fixed;
			bottom: 20px;
			right: 20px;
		}
		.shuang11close{
			width: 20px;
			height: 20px;
			background-color: yellow;
			color: red;
			display: block;
			line-height: 20px;
			text-align: center;
			position: absolute;
			left: 30px;
		}
		.hidden{
			display: none;
		}
		.children{
			width: 300px;
			height: 300px;
			background-color: green;
		}
		.active{
			background-color: green;
		}
		.box22{
			width: 100px;
			height: 50px;
			background-color: green;
			position: relative;
		}
		.box22_1{
			width: 100px;
			height: 200px;
			background-color: red;
			position: absolute;
			top: 50px;
			display: none;
		}*/
		/*要浮动一起浮动,overflow: hidden;清除浮动*/
		/*.tab{
			width: 480px;
			height: 260px;
			margin: 20px auto;
			border: 1px solid red;
		}
		ul{
			width: 100%;
			overflow: hidden;
		}
		ul li{
			float: left;
			width: 160px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			background-color: #ccc;
		}
		li.tactive{
			background-color: red;
		}
		p{
			display: none;
			height: 200px;
			background-color: red;
			text-align: center;
			line-height: 200px;
		}
			
		.tactive{
			display: block;
		}*/
		/*#box33{
			width: 100px;
			height: 100px;
			background-color: red;
		}*/
	</style>
	<title>JS</title>
	<script type="text/javascript">
		// ECMAScript5基础语法
		// 申明变量 var a
		// 流程控制 
		// 		if (条件){
		// 			
		// 		}
		// 		else if (条件){
		// 			
		// 		}
		// 		else (条件){
		// 			
		// 		}

		// 		while (条件){
		// 			
		// 		}

		// 		for (var i = 0; i <= 5; i++) {
		// 			console.log(i)
		// 		}

		// 		do/while
		// 		do{
		// 			
		// 		}
		// 		while (条件)

		// 		switch (n){
		// 			case 1:
		// 				xxx
		// 			case 2:
		// 				xxx
		// 			default:
		// 				xxx
		// 		}
		// 		
		// 运算符
		// += -= ++ -- =
		// == 比较的是值
		// === 比较的是值和数据类型
		// != 
		// !== 同理不等于
		// >
		// <
		
		// 数据类型
		// string 字符串
		// number 
		// boolean
		// null
		// undefined
		
		// 复杂数据类型
		// 数组
		// var arr = ['Ropon', 'LuoPeng', 'Pengge'];
		// var arr1 = [];
		// arr1[0] = 'Pengge'
		// var arr2 = new Array();
		// arr2[0] = 'Ropon';
		// console.log(arr);
		// console.log(arr2[0]);
		
		// 对象 json {key1:'value1', key2:'value2'}
		// var person = {
		// 	name:'ropon',
		// 	age:18,
		// 	fn:function(){
		// 		console.log(this.name)
		// 	}
		// };
		// person.fn()
		// console.log(person.age)
		// console.log(person)
			
		// 函数
		// 普通函数
		// function add(x,y){
		// 	return x+y;
		// }
		// var a = add(2,3);
		// console.log(a);
		// 函数对象
		// var add = function(x,y){
		// 	return x+y;
		// }
		// var b = add(4,5);
		// console.log(b);
		
		// arguments 不是一个数组 伪数组 它有数组的索引和length
		// function add(){
		// 	console.log(arguments[2]);
		// 	console.log(arguments.length)
		// }
		// add('Ropon','LuoPeng','Pengge');
		
		// DOM
		// Document Object Model
		//   文档     对象  模型
		  
		// 对象
		// 属性:获取值及赋值
		// 方法:赋值方法、调用方法
			
		//DOM数
		//					document
		//			   		   html
						   
		//		head								body
			
		//title meta link...          div.header div.content div.footer		
			
		//DOM获取
		window.onload = function() {
			//获取document对象
			// console.log(document);
			// 获取html对象
			// console.log(document.documentElement);
			// 获取body对象
			// console.log(document.body);
			// 可以通过以下三种方法获取body中DOM
			// 通过id获取
			// var app = document.getElementById('app')
			// console.log(app)
			// 通过类名获取
			// var footer = document.getElementsByClassName('footer')
			// console.log(footer)
			// 通过标签名获取
			// var a = document.getElementsByTagName('a')
			// console.log(a)
			// 
			// DOM三步走
			// 1.获取事件源
			// 2.事件绑定 onclick onmouseover onmouseout
			// 3.事件驱动
			// 
			// 对标签样式属性的操作
			// oDiv.style.classStyle
			// var oDiv = document.getElementById('id_box1');
			// oDiv.onclick = function() {
			// 	// console.log(oDiv.style);
			// 	oDiv.style.width = '400px';
			// 	oDiv.style.float = 'left';
			// }
			// 对标签属性的操作
			// id
			// class
			// src
			// alt
			// href
			// title
			// type
			// name
			// getAttribute()
			// setAttribute()
			// className
			// 
			// var isHover = true;
			// var oDiv1 = document.getElementById('shop');
			// oDiv1.onclick = function() {
			// 	if (isHover) {
			// 		// console.log(this.src)
			// 		this.src = './images/shop_hover.png';
			// 		this.alt = '购物车'
			// 		isHover = false;
			// 	}
			// 	else {
			// 		this.src = './images/shop.png';
			// 		isHover = true;
			// 	}
			// }
			// 
			// 对值的操作
			// innerText 只获取文件
			// innerHTML 获取文件和标签
			// input value
			// var Children1 = document.getElementById('childen1');
			// console.log(Children1);
			// console.log(Children1.nextElementSibling);
			// var a  = Children1.nextElementSibling  || Children1.nextSibling;
			// console.log(a);
			// console.log(document.getElementById('father').children);
			// console.log(Children1.parentNode);
			// 
			// 对DOM的创建 销毁
			// 创建 document.createElement
			// 	父.appendChild(子)
			// 	父.insertBefore('要插入的节点','参考的子节点')
			// 	销毁 父.removeChild(子)	
			// setTimeout(function() {
			// 	var oFather = document.getElementById('father');
			// 	var oChildren3 = document.createElement('div');

			// 	// oChildren3.className = 'children';
			// 	oChildren3.style.width = '300px';
			// 	oChildren3.style.height = '300px';
			// 	oChildren3.style.background = 'red';

			// 	oFather.appendChild(oChildren3);

			// },5000)
			// 
			// var oBtns = document.getElementsByTagName('button');
			// for (var i = 0; i < oBtns.length; i++) {
			// 	oBtns[i].onclick = function(){
			// 		for (var j = 0; j < oBtns.length; j++) {
			// 			oBtns[j].className ='';
			// 		}
			// 		this.className = 'active';
			// 	}
			// }
			// onmouseover 当穿过父元素和子元素时 会调用
			// onmouseenter 只穿过父元素时 才调用
			// var oBox222 = document.getElementById('box222');
			// oBox222.onmouseenter = function(){
			// 	console.log('enter');
			// 	this.children[0].style.display = 'block';
			// }
			// oBox222.onmouseleave = function(){
			// 	console.log('leave');
			// 	this.children[0].style.display = 'none';
			// }
			// 
			// var olis = document.getElementsByTagName('li');
			// var ops = document.getElementsByTagName('p');
			// for (var i = 0; i < olis.length; i++) {
			// 	olis[i].index = i;
			// 	olis[i].onclick = function(){
			// 		for (var j = 0; j < ops.length; j++) {
			// 			olis[j].className = '';
			// 			ops[j].className = '';
			// 		}
			// 		this.className = 'tactive';
			// 		ops[this.index].className = 'tactive';
			// 	}
			// }
			// 
			// 变量提升
			// var a;
			// console.log(a);
			// a = 2;
			// console.log(a);
			// function test(){
			// 	a = 3;
			// 	console.log(a);
			// }
			// test();
			// console.log(a);
			// 
			// es6
			// function test1(){
			// 	// let 声明的变量不会存在变量提升,属于局部作用域
			// 	let a = 3; 
			// 	console.log(a);
			// }
			// test1();
			// console.log(a);
			
			// let olis = document.getElementsByTagName('li');
			// let ops = document.getElementsByTagName('p');
			// for (let i = 0; i < olis.length; i++) {
			// 	olis[i].onclick = function(){
			// 		for (let j = 0; j < ops.length; j++) {
			// 			olis[j].className = '';
			// 			ops[j].className = '';
			// 		}
			// 		this.className = 'tactive';
			// 		ops[i].className = 'tactive';
			// 	}
			// }
			// 
			// 定时器
			// 一次性定时器
			// var timer = setTimeout(fn,1000);
			// 清除 clearTimeout();
			// 可以做异步定时
			// 循环周期定时器
			// setInterval(fn,1000);
			// 清除 clearInterval();
			// 可以做动画
			// var Start = document.getElementById('start');
			// var timer = null;
			// Start.onclick = function(){
			// 	timer = setTimeout(function(){
			// 		console.log('test');
			// 	},3000);
			// 	console.log('test1');
			// }
			// var Clear = document.getElementById('clear');
			// Clear.onclick = function(){
			// 	clearTimeout(timer);
			// }
			// 
			// var count = 0;
			// var timer = null;
			// var Start = document.getElementById('start');
			// Start.onclick = function(){
			// 	var oDiv = document.getElementById('box33');
			// 	clearInterval(timer);
			// 	timer = setInterval(function(){
			// 		count += 10;
			// 		oDiv.style.marginLeft = count + 'px';
			// 	},100)
			// }
			// var Clear = document.getElementById('clear');
			// Clear.onclick = function(){
			// 	clearInterval(timer);
			// }
			// 
			// 面向对象
			// 使用Object()内置的构造函数来创建对象
			// var person = new Object();
			// person.name = 'Ropon';
			// person.age = 18;
			// person.fn = function(){
			// 	console.log('I am Ropon');
			// }
			// person.fn();

			// json字面量方式创建对象
			// var person = {
			// 	name:'ropon',
			// 	age:18,
			// 	fn:function(){
			// 		console.log('I am Ropon!');
			// 	}
			// };
			// person.fn();
			// 
			// function createPerson(){
			// 	var person = new Object();
			// 	person.name = 'Ropon';
			// 	person.age = 18;
			// 	person.fn = function(){
			// 		console.log('I am Ropon function');
			// 	}
			// 	return person;
			// }
			// var p1 = createPerson();
			// // p1是Object的实例
			// console.log(p1 instanceof Object); 
			// 
			// 自定义构造函数
			// function Person(name,age){
			// 	this.name = name;
			// 	this.age = age;
			// 	this.fn = function(){
			// 		console.log('diy function')
			// 	}
			// }
			// var p1 = new Person('Ropon',18);
			// console.log(p1 instanceof Object);
			// 
			// function Person(name,age){
			// 	this.name = name;
			// 	this.age = age;
			// }
			// // Person.prototype 是Person的父类
			// Person.prototype.showName = function(){
			// 	console.log(this.name)
			// }
			// var p1 = new Person('Ropon',18);
			// console.log(p1);
			// p1.showName();
			// 
			// BOM
			// setTimeout(function(){
			// 	window.open('https://ropon.top','_self');
			// },3000)
			// console.log(window.location);
			// // 全局刷新,尽量少用 局部刷新用ajax
			// window.location.reload();
			// 
			// 三元运算
			var a = 2 == 2 ? 'true' : 'false';
			console.log(a);

		}
		
		// function shuang11(){
		// 	document.getElementById('shuang11-1').style.display = 'none';
		// }

		// window.onhashchange = function() {
		// 	console.log(location.hash);
		// 	switch (location.hash) {
		// 		case '#/home':
		// 			document.getElementById('app').innerHTML = '<h2>我是首页</h2>';
		// 			break;
		// 		case '#/about':
		// 			console.log('test');
		// 			document.getElementById('app').innerHTML = '<h2>我是关于我</h2>';
		// 			break;
		// 		default:
		// 			break;
		// 	}
		// }
	</script>
</head>
<body>
	<!-- <div class="box1" id="id_box1" style=""></div>
	<p>ropon</p>
	<img src="./images/shop.png" alt="" width="100px" id="shop">
	<div class="footer" onclick="test()">test</div> -->
	<!-- <div class="box1">
		<div class="shuang11" id="shuang11-1">
			<a class="shuang11close" href="javascript:;" onclick="shuang11()">X</a>
		</div>
	</div> -->
	<!-- <div id="father">
		<div id="childen1"></div>
		<div id="childen2"></div>
	</div> -->
	<!-- <button>首页</button>
	<button>关于我们</button>
	<button>产品</button>
	<button>新闻</button>
	<button>联系我们</button> -->
	<!-- <div class="box22" id="box222">
		<div class="box22_1"></div>
	</div> -->
	<!-- <a href="#/home">首页</a>
	<a href="#/about">关于我</a>
	<div id="app"></div> -->
	<!-- <div class="tab">
		<ul>
			<li class="tactive">
				<a href="#">首页</a>
			</li>
			<li>
				<a href="#">产品</a>
			</li>
			<li>
				<a href="#">新闻</a>
			</li>
		</ul>
		<p class="tactive">首页内容</p>
		<p>产品内容</p>
		<p>新闻内容</p>
	</div> -->
	<!-- <button id="start">开启定时器</button>
	<button id="clear">清除定时器</button>
	<div id="box33">
		
	</div> -->
</body>
</html>

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!