前段学习篇 - Javascript

 1.基础

#引用
<script src="myscript.js"></script>

2.函数

// var str = ' hello world    '
// console.log(str.trim())
// console.log(str.charAt(4))
// console.log(str.indexOf('o',5)) //这里第一个元素要用引号引起来
// console.log(str.slice(1,5));
// console.log(str.split(' ',3))

这里我们把JS看成是对象，对象有很多的方法，就是对象.方法

3.循环

var a = [10,20,30,40,50]

for (var i = 0; i<a.length;i++){
	console.log(a[i])
}

for (var i  in a){
	console.log(a[i])
}

var a = {"name":"alex","age":18}

console.log(a.name)
console.log(a['age'])

for (var i in a){
	console.log(i)
	console.log(a[i])
	console.log(i,a[i])
}


var a = 10

if (a>10){
	console.log('11')
}else if(a = 10){
	console.log('10')
}else{
	console.log('9')
}

var i = 0
while(i <10){
	console.log(i)
	i++
}

4. 三元一次

var a = 1;
var b = 2;
var c = a > b ? a : b

5.函数

匿名函数
var sum = function(a,b){
	return a+b
}

console.log(sum(1,2))

(function(a, b){
	return a+b
})(1,2);

立即执行函数
(function(a, b){
  console.log(a + b)
})(1, 2); 


var f = v => v;
等同于
var f = function(v){
	return v;
}
console.log(f(5))//5

// 　函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

// 　　函数的全局变量和局部变量
// 　　　　局部变量：

// 　　　　　　在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

// 　　　　全局变量：

// 　　　　　　在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

// 　　　　变量生存周期：

// 　　　　　　JavaScript变量的生命期从它们被声明的时间开始。

// 　　　　　　局部变量会在函数运行以后被删除。

// 　　　　　　全局变量会在页面关闭后被删除。

// 　　作用域
// 　　　　首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

6.词法分析

// var age = 18;
// function foo(){
//   console.log(age);
//   var age = 22;
//   console.log(age);
//   function age(){   #发现age这个函数名也是变量，将OA上的变量给替换了，那么函数在执行的时候，去OA上找，发现OA是个函数，然后执行到age=22的时候，age才被重新赋值
//     console.log("呵呵");
//   }
//   console.log(age);
// }
// foo();  // 执行后的结果是？

// // 结果：
// // 　　function age(){
// // 　　　　console.log("呵呵");
// // 　　}
// // 　　22
// // 　　22

// 词法分析过程：
// 1、分析参数，有一个参数，形成一个 AO.age=undefine;
// 2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
// 3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};
// 函数和参数的机制是不一样的，变量是有则不改变，函数是有则覆盖  重点

// 最终，AO上的属性只有一个age，并且值为一个函数声明

// 执行过程：
// 注意：执行过程中所有的值都是从AO对象上去寻找

// 1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
// 2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 22
// 3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了

// 这些内容就是好多人搞不明白的，经常写js代码的时候，发现自己的结果不对啊，什么情况，就是因为这个没搞清楚~~~

7, js序列化和反序列化

//将JSON对象转化为JSON字符
var str = {'name':'color','site':'www.color.com'}

str_pre = JSON.stringify(str)
console.log(str_pre)

//将json字符转化为JS对象
var obj = JSON.parse(str_pre)
console.log(obj)

8.前段基础 BOM 和 DOM

BOM

window.innerHeight - 浏览器的内部高度

window.innerWidth - 浏览器的内部宽度

window.open() -- 打开新窗口

window.close() -- 关闭当前窗口

history 对象

history.forward() //前进一页，相当于 window.history.forward()

history.back()

location对象

location.href 获取URL

localtion.href = 'URL' 跳转到指定页面

localtion.reload() 重新加载页面，就是刷新页面

setTimeout() 一段时间做一些事情

语法： var t = setTimeout('JS语句'，毫秒) 第一个参数语句写一个函数，返回值是一个t,这个t是浏览器自动给你分配的

var timer = setTimeout(function() { alert(123); }, 3000)

//取消setTimeout设置

clearTimeout(timer)

setInterval() 每隔一段时间做一些事情

var timer = setInterval(function () {console.log(123)} ,3000)

//取消 setInterval 设置

clearInterval(timer);

 

DOM 对一套文档内容进行抽象和概念化方法

当网页被加载时，浏览器会创建页面文档对象模型

查找标签：

document.getElementById('d1')

document.getElementsByClassName('c1') //根据class属性获取，返回一个数组

document.getElementsByTagName('p') //根据标签名获取标签集合

间接查找

parentElement 父节点标签元素

children 所有子标签

firstElementChild 第一个子标签元素

lastElementChild 最后一个子标签元素

nextElementSibling 下一个兄弟标签元素

previousElementSibling 下一个兄弟标签元素

 

节点操作

var divEle = document.createElement('div') //创建一个DIV

divEle.innerText = 'xxx' //给DIV添加字

添加节点

追加一个子节点，在最后

somenode.appendChild(newnode);

把增加的节点放到某个节点的前面

somenode.insertBefore(newnode,某个节点);

 

删除节点

获得要删除的元素，通过父元素调用该方法删除

somenode.removeChild(要删除的节点)

 

替换节点

somenode.replaceChild(newnode,某个节点);

somenode是父级标签

 

属性节点

获取文本属性节点

var divEle = document.getElementById("d1")

divEle.innerText #这个是获取该标签内所有的文本内容

divEle.innerHTML #获取标签内所有内容，包括文本和标签

 

class 的操作

className 获取所有样式的类名

 

首先获取标签对象

标签对象.classList.remove(cls)

classList.add(cls) //添加类

classList.contains(cls) //存在返回true,否则返回false

classList.toggle(cls) //toggle切换，有了就给你删除，否则就给你添加一个

 

指定CSS操作

obj.style.backgroundColor = "red"

 

1.对于中间没有横线的CSS，一般直接使用style.属性名即可

obj.style.margin

obj.style.width

2.对于有横线的css属性，将中间横线后的第一个字母换成大写

obj.style.marginTop

obj.style.fontFamily

 

 

事件

 

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。
​
onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
​
onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
​
onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
<div id="time_in">
    <input type="text" id ="inp">
    <input  type="button" value="开始" id="t_start">
    <input  type="button" value="结束" id="t_end">
</div>
​
<script>
    var div_t = document.getElementById("inp");
​
    var t_start = document.getElementById("t_start");
    t_start.onclick = function(){
        var mytime = setInterval(function(){
            var myDate = new Date();
            var mytime = myDate.toLocaleTimeString();
            atime = myDate.toLocaleString()
            div_t.value = atime;
        });
​
        var t_end = document.getElementById("t_end");
​
        t_end.onclick = function(){
            clearInterval(mytime)
        };
    };
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select id="province">
  <option id = 'fir'>请选择省:</option>
</select>

<select id="city">
  <option>请选择市:</option>
</select>

<script>

     data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

     var pro_id = document.getElementById('province');
     var fir = document.getElementById('fir');

     var city = document.getElementById('city');

     for(var i in data){
         var opt = document.createElement('option')
         opt.innerHTML = i; //将省份的数据添加到option标签中
         pro_id.appendChild(opt);//将option标签添加到select标签中
     }

     pro_id.onchange  = function(){
         //selectedIndex  select 选项中被选中的选项
         //option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。
         pro = (this.options[this.selectedIndex]).innerHTML;
         var citys = data[pro];
         city.innerHTML = '';

         for(var i = 0;i<citys.length;i++){
            var opt1 = document.createElement('option');
            opt1.innerHTML = citys[i]
            city.appendChild(opt1)
         }
     }
</script>

</body>
</html>