前端之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>JavaScript Study</title>
</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> -->
	<div class="test">
		<dd>
		<a href="" target="_blank" id="westflag">测试点击</a>
		</dd>
		<script>
			document.getElementById("westflag").onclick=function() {
				document.getElementById("westflag").href="https://www.ropon.top";
			};	
		</script>
	</div>
	<script type="text/javascript">
		// ECMAScript5基础语法
		// 申明变量 var
		// 全局变量
		// name = "Ropon";
		// 局部变量
		// var age = 18;
		// 
		// 注释
		// 单行注释 //
		// 多行注释 /* ... */
		// 
		// 常见数据类型
		// 1.数字(Number) 
		// 不区分整数和浮点数 所有数字都采用浮点值表示
		// var age = 18;
		// var score = Number(18);
		// 批量定义变量
		// var a1 = 1, a2 = 2, a3 = 3;
		// 
		// 将某个值转换为数字 不成功则为NaN
		// parseInt("3.6")
		// 将某个值转换为浮点数 不成功则为NaN
		// parseFloat("3.6")
		// 
		// NaN 非数字 可通过 isNan(value) 判断 非数字返回true 否则false
		// Infinity 无穷大 可通过 isFinite(value) 判断 非数字 正负无穷大的数 返回false 否则true
		// 
		// 查看数据类型
		// typeof(value) 
		// 
		// 2.字符串(String) 
		// var name = "Ropon";
		// var name = String("Pengge");
		// var ageStr = String(18);
		// 
		// 常用方法
		// 
		// 根据索引取值
		// var firstChar = name[0];
		// var sencondChar = name.charAt(1);
		// 获取字符串长度
		// var len = name.length;
		// 去除首尾空白
		// var name2 = name.trim();
		// 切割
		// var subString = name.substring(start,end);
		// 
		// Lesson 跑马灯
		// 开启定时器
		// setInterval(function() {
		// 	// 获取网页标题
		// 	var title = document.title;
		// 	// 获取标题字符串长度
		// 	var len = title.length;
		// 	// 取标题最后一个字符
		// 	// var lastChar = title[len-1];
		// 	// // 截取开始到倒数2个子字符串
		// 	// var preString = title.substring(0, len-1);
		// 	// var newTitle = lastChar + preString;

		// 	// 反向
		// 	var firstChar = title[0];
		// 	var preString = title.substring(1, len);
		// 	var newTitle = preString + firstChar;

		// 	// 将新字符串赋值给标题
		// 	document.title = newTitle;
		// }, 1000);
		// 
		// 3.布尔类型(Boolean) 
		// var status = true;
		// var flag = false;
		// 
		// 比较
		// == 比较值相等
		// != 值不等于
		// === 比较值和类型相等
		// !== 值和类型不等于
		// || 或
		// && 且
		// 
		// Example
		// var a = 18;
		// var b = String(18);
		// a == b true
		// a === b false
		// a != b false
		// a !== b true
		// 
		// 4.数组(Array)
		// var names = ["Ropon", "Pengge", "Rencai"];
		// var names = Array("Ropon", "Pengge", "Rencai");
		// 
		// 常用方法
		// 
		// 根据索引取值
		// var firstName = names[0];
		// 末尾追加元素
		// names.push("Lisi");
		// 可以追加多个
		// names.push("Rencai", "Wanger");
		// 末尾删除一个元素 返回删除的元素
		// var name = name.pop();
		// 开始插入元素
		// names.unshift("Wanger");
		// 开始删除一个元素 返回删除的元素
		// names.shift();
		// 指定索引位置插入元素
		// names.splice(2, 0, "Niubi");
		// 指定索引位置替换元素
		// names.splice(2, 1, "666");
		// 指定索引删除元素
		// names.splice(2, 1);
		// 切片
		// names.slice(1, 3);
		// 反转
		// names.reverse();
		// 将数组元素连接成字符串 默认以,连接
		// names.join();
		// 连接数组
		// names.concat(arr1);
		// 排序
		// names.sort();
		// 
		// 5."字典"(对象Object)
		// var userinfo = {
		// 	name: "Ropon",
		// 	age: 18
		// };
		// 
		// 常用方法
		// 
		// 取值
		// var val = userinfo["name"];
		// 修改值
		// userinfo["name"] = "Pengge";
		// 新增值
		// userinfo["gender"] = "male";
		// 删除值
		// delete userinfo["age"]; 
		// console.log(userinfo);
		// 
		// 6.null undefined
		// null是JavaScript语言中的关键字 描述空值
		// undefined 只声明未定义
		//
		// 流程控制 
		// 		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
		// 		}
		// 
		// 	异常处理
		/*
		try {
			// 正常执行代码 如果遇到异常 该代码块结束运行
			var name = "test";
			console.log(name);
		}
		catch (e) {
			// 如果try代码块抛出异常 catch代码块就会被执行
			console.log(e);
		}
		finaly {
			// 无论是否抛出异常 catch代码块都会被执行
			console.log("111");
		}
		*/
		// 						
		// 运算符
		// += -= ++ -- =
		// == 比较的是值
		// === 比较的是值和数据类型
		// != 
		// !== 同理不等于
		// >
		// <
		
		// 数据类型
		// 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)
		// 
		// json序列化
		// 序列化
		var userinfo = {
			name: "Ropon",
			age: 18
		};
		var jsonStr = JSON.stringify(userinfo);
		console.log(jsonStr);
		// 反序列化
		var userinfo2 = JSON.parse(jsonStr);
		console.log(userinfo2);

		// 函数
		// 普通函数
		// 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>
</body>
</html>

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