2018-11-09
前端之JS

<!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
   
//headbody

//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>