前端-js基础

HTML三把利剑之一，浏览器具有解析js的能力

一、js基础

在HTML中可以将JavaScript/JS的代码写在head中，被script标签所包裹，当浏览器解释HTML时，遇到style标签时，按照CSS规则解释，遇到Script标签时，按照JavaScript的语法规则解释。

引入JavaScript代码，类似于Python的import

head中引入JS与body中引入JS区别

html代码从上而下解析，如果在head中引入JS，影响页面打开的速度，存在风险，所以通常放在htmlbody的最下方，这样页面内容先展示，最后在加载JS。注：写在最下面要有底线，写在body内部的最底下。

注释

单行注释通过 // 多行通过 /* */

1.1 js变量

const a = 1//定义常量，不可以修改

let name = 'xiaolin'//定义变量，没有预解析

var name1 = 'xiaoxiaolin'//定义变量，预解析，提前给定义为undefined,

1.2 字符串

//定义字符串

        var str = '你开心就好';

        var name='疯狂的石头';

        //字符串的拼接

        var name_str = name+str;

        //字符串操作

        str.charAt(0)//根据角标获取字符串中的某一个字符  char字符

        str.substring(1,3) //根据角标获取 字符串子序列 顾头不顾尾（大于等于x  小于y ）

        str.length //获取字符串长度

        str.concat('五月天')  //拼接字符串

        str.indexOf('五月')//获取子序列的位置

        str.slice(0,1)//切片 开始，结束 顾头不顾尾

        str.toLowerCase()//变为小写

        str.toUpperCase()//变为大写

        str.split(',')//以指定的字符串进行分割，返回数组，参数2为取分割后数组的前多少个元素

1.3 数字类型

var age=19;

        var score = 89.5;

        number = '18';

        //字符串转换

        var n = parseInt(number);

        //转换为小数

        f = parseFloat(number);

        //布尔类型

        var t = true;

        var f = false;

1.4 数组类型

// 第一种创建方式

var list = new Array();

list[0] = '李四';

list[1] = '王五'; 

// 第二种创建方式

var list2 = new Array('李四','王五'); 

// 第三种创建方式

var list3 = ['李四','牛教授']; 

数组操作

var list4 = ['李四','王五'];

list3.length;// 数组的长度 

list3.push('dsx');// 尾部追啊参数 

list3.shift();// 头部获取一个元素 并删除该元素 

list3.pop();// 尾部获取一个元素 并删除该元素 

list3.unshift('dsx');// 头部插入一个数据 

list3.splice(start, deleteCount, value);// 插入、删除或替换数组的元素 

list3.splice(n,0,val) ;//指定位置插入元素 

list3.splice(n,1,val);// 指定位置替换元素 

list3.splice(n,1);// 指定位置删除元素 

list3.slice(1,2);// 切片;

list3.reverse() ;//反转 

list3.join('-') ;//将数组根据分割符拼接成字符串 

list3.concat(['abc']);// 数组与数组拼接 

list3.sort() ;//排序

1.5 对象类型（等同于Python的字典）

var dict = {name:'dsx',age:18,sex:'男' };

var age = dict.age;

var name = dict['name'];

delete dict['name'] 删除

delete dict.age 删除

1.6 js条件判断语句

var score = 89

if(score>=90){

    console.log('优秀')

}else if(score>=80 && score<90){

    console.log('良好')

}else if(score>=60 && score<80){

    console.log('中等')

}else{

    console.log('不及格')

}

switch (score) {

    case 90:

        console.log('优秀')

        break;

    case 80:

        console.log('良好')

        break;

    default;

1.7 js循环语句

//第一种循环

//循环的是角标

tmp = ['宝马', '奔驰', '尼桑'];

tmp = '宝马奔驰尼桑';

tmp = {'宝马': 'BMW', '奔驰': 'BC'};

for (var i in tmp) {

    console.log(tmp[i])

}

//第二种循环

//不支持字典的循环

for (var i = 0; i < 10; i++) {

    console.log(tmp[i])

}

//第三种循环

while (1 == 1) {

    console.log(111)

}

1.8函数

// 普通函数

function funcName(name,age) {

}

funcName('lis',78);

//匿名函数，函数即变量

var funcNameTwo = function(){

};

funcNameTwo()

二、DOM

DOM（Document Object Model 文档对象模型）

一个web页面的展示，是由html标签组合成的一个页面，dom对象实际就是将html标签转换成了一个文档对象。可以通过dom对象中js提供的方法，找到html的各个标签。通过找到标签就可以操作标签使页面动起来，让页面动起来。

2.1 获取标签

//直接获取标签

document.getElementById('id1');//根据id获取标签

document.getElementsByName('elname');//根据属性name获取标签数组

document.getElementsByTagName('div');//根据标签名称获取标签数组

document.getElementsByClassName('c1');根据属性class获取标签数组

//间接获取标签

var temp = document.getElementById('id1');

temp.parentElement;//父节点标签元素

temp.children;//所有子节点

temp.firstElementChild;//第一个子标签元素

temp.lastElementChild;//最后一个标签元素

temp.nextElementSibling;//下一个兄弟标签元素

temp.previousElementSibling;//上一个兄弟标签元素

2.2 文本内容操作

//文本内容操作：

// innerHTML和innerText

temp.innerText;//获取标签中的文本内容

temp.innerHTML;//获取标签中的所有内容，包括html代码

temp.innerText='fdsfsfs';//修改标签中的文本内容

temp.innerHTML='<input type="text">fdsfsfs</input>'//可以将html格式的字符串变为标签

//input textarea标签

temp.value;//获取input，textarea的值

temp.value='fdsfsfs';//修改input，textarea的值

//select标签

tmp.value; //获取select标签的value参数

tmp.value = '选项' // 修改select选项

tmp.selectedIndex; // 获取select标签的选项下标

tmp.selectedIndex = 1 // 通过下标更改select的选项

2.3 事件

<!--    直接绑定-->

<input type="button" id="b1" onclick="show()">

function show() {

    alert('fdsfsdlfsjflskjdf')

}

<!--间接绑定-->

<input type="button" id="b2" >

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

b2.onmouseover = function () {

    b2.style.backgroundColor='red'

}

// 间接绑定的this代指，getElementById找到的这个标签

var obj = document.getElementById('b2');

obj.onmouseout = function () {

    this.style.background = '';

}

巴特西