前端基础之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){console.log(i);i++}

函数

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);
};
};
};