前段学习篇 - Javascript
1.基础
#引用
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; i10){
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 : b5.函数
匿名函数
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。
Title
Title