前端基础之JS（第三天）
JS简介
1.也是一门编程语言，也可以用来写后端代码（node.js）
2.面向对象语言
注释
//
变量
首次定义一个变量名时，需要用关键字声明
var name = "egon";
let name = "jason";
var定义的是全局变量
const pi = 3.14; 定义一个常量
命名规范
变量名只能是字母、数字、下划线、$
推荐使用驼峰式命名
数据类型
数值类型（number）
var a = 11;
var a = 11.11;
NaN 虽然是数值类型，但是表的是不是一个数字，not a number
parseInt(a),parseFloat(b) 强转
字符类型（string）
var s = 'egon'
var s = "egon"
var s = `jason lili${name}` 这样可以定义多行文本，还可格式化定制文本
js中推荐用+做拼接，而python中推荐用join做拼接
常用方法
length()--------len()
trim()----------strip() trim后面不能指定去除的内容
charAt()--------index()
concat()--------join() js可以自动转换数据类型
indexOf()-------index()
substring()-----[] 不识别负数
slice()---------[]
toLowerCase()---lower()
toUpperCase()---upper()
split()---------split() js中split('',2)表示的是只拿切割后的前两个
布尔类型
false:空字符串，null，undenfined，0，NaN
null：表示的值为空，一般都是指定或者清空一个变量时使用
undefined：表示声明了一个变量，但是没有初始化操作（赋值）
函数没有指明返回值的时候，返回的也是undefined
数组（[]）
let arr1 = [1,2,3,4,5]
let arr2 = ["lili",111,2121]
arr1[0]
常用方法length()-------len()
push()---------append()
pop()----------pop()
unshift()------头部追加元素
shift()--------头部删除元素
join()
concat()-------类似于python中的extend()
重要方法
forEach()
arr1.forEach(function(value,index,arr){函数体},arr1)
splice(0,1,333) 从索引0开始删除1个元素，然后添加333
map(function(value,index,arr){},arr1) 映射
自定义对象（{}）
let d1 = {'name':'egon','age':18}
d1['name']，d.name
for循环取值for(let i in d1){console.log(i.name)}
var d2 = new Object()
d2.name = 'jason';d2.age=18;
运算符
算数运算符
x++，先赋值，后做自增
++x，先自增，后做赋值
比较运算符
=，强等于；，弱等于
逻辑运算符
&&，||，！
流程控制
if(){}else if{}else{};
switch(num){case:0 console.log('hehe');break;……}
for(起始条件;循环条件;每次循环都进行的操作){代码块}for(i=0;i<10;i++){console.log(i)};
for(i=0;i<arr1.length();i++){}
while(i<100)
函数
function(){}
function f(参数1,参数2……){函数体代码}
function f(a,b){arguments} 这个arguments可以接受所有的参数
return只能返回单个值
var func1 = v => v; 类似于python中的匿名函数，箭头左边的时形参，右边的是返回值
Date对象
let date1 = new Date();
date1.toLocalString(); 格式化时间
let new Date('2020-12-23')
let new Date(1111,11,11,11,11,11,11); 注意月份是从0开始的
时间对象的具体方法date1.getDate(),getDay(),getMonth(),getFullYear(),getHours(),……
JSON对象
JSON.stringify()------------dumps()
JSON.parse()----------------loads()
RegExp对象，正则对象
var re1 = new RegExp([a-zA-Z][a-zA-Z0-9]{5,11}); // 创建正则对象
let re2 = /[a-zA-Z][a-zA-Z0-9]{5,11}/
re1.test('egondsb')
let sss = 'egonsdb sdb dsb'
sss.match(/s/)
sss.match(/s/g) // 表示全局匹配
re1.test()----true 什么都不传，默认传的是undefined
BOM
window对象，指代的就是浏览器窗口
window.innerHeight 当前浏览器窗口的高度
window.innerWidth 当前浏览器的宽度
window.open(url,'','height=400px,width=300px,top=400px,left=300px')
window.opener() 父子页面通信
window.close() 直接关闭当前网页
window子对象，如果是window子对象，那么window可以省略不写
window.navigator.appName
navigator.appVersion
navigator.userAgent 标志当前是否是浏览器
navigator.platform
history子对象
history.back()
history.forword()
location子对象
location.href 返回当前页面的url
location.href="https://www.baidu.com" 跳转到指定页面
location.reload 重新加载页面
弹出框
alert() 警告框
confirm() 确认框
prompt() 提示框
计时器对象
let t = setTimeout(function(){alert(123)},3000) 3秒钟时候执行函数
clearTimeout(t)
let t1 = setInerval(function(){},3000) 每个3秒钟执行一次函数
clearInerval(t1)
DOM
文档对象模型，通过js代码操作标签
关键字document
当用变量名指代标签对象的时候推荐书写成xxxEle
如何查找标签
直接查找
id：document.getElementById('d1');
类：document.getElementsByClass("c1");
标签：document.getElementsByTag("div");
间接查找
divEle.parentElement
divEle.children
divEle.firstElementChild
divEle.lastElementChild
divEle.nextElementSibling
divEle.previousElementSibling
操作标签
创建img标签，并且添加属性，最后添加到文本中
let imgEle = document.createElement('img');
imgEle.src = "111.png";
imgEle.setAttribute("username","jason"); 这样可以给标签添加私有属性
let divEle = document.getElementById('d1');
divEle.appendChild(imgEle)
divEle.insertBefore(aEle,pEle); 将标签添加到指定位置
除了setAttribute，还有getAttribut，removeAttribute
除了appendChild，还有removeChild，replaceChild
divEle.innerText 拿到标签内部的文本
divEle.innerHTML 拿到标签和文本，可以解析标签
获取值操作
let inputEle = document.getElementById('d1')
inputEle.value 可以拿到input接收到的内容
fileEle.value 拿到的是文件的路径
fileEle.files[0] 拿到的是文件对象本身
class、css操作
divEle.classlist 查看标签类属性
divEle.classlist.remove("bg_red")
divEle.classlist.add()
divEle.classlist.contains()
divEle.classlist.toggle() 有则移除，无则添加
divEle.style.color = 'red';
divEle.style.fontSize = '28px';
事件相关
到达某个事先设定的条件，自动触发的动作
绑定事件的两种方式
let btnEle = document.getElementById('d1');
btnEle.onclick = function(){};
开关灯案例
divEle.classlist.toggle('bg_red');
input框获取焦点，失去焦点案例
inputEle.onfocus = function(){}
inputEle.onblur = function(){}
实时展示当前时间案例
let currentTime = new Date();
t = setInterval(f,3000);
省市联动
文本域变化事件，onchange
let proEle = document.getElementById('pro');
let cityEle = document.getElementById('city');
let proTocity = {
'徐州':['新沂市','邳州市','沛县','丰县'],
'江苏':['南京','扬州','南通','宿迁']};
for(let p in proTocity){
let optEle = document.createElement('option');
optEle.innerText = p;
optEle.value = p;
proEle.appendChild(optEle);
proEle.onchange = function(){
let currentPro = proEle.value
cityEle.innerHTML = ''
let currentCityList = proTocity.currentPro
for(c=0;c<currentCityList.length();c++){
let optionEle = document.creatElement('option');
optionEle.innerText = currentCityList[c];
optionEle.value = currentCityList[c];
cityEle.appendChild(optionEle);
};
};
};
