web前端-js

1. js基础语法

　　声明变量

　　　　var a = 10;

　　查看变量类型

　　　　typeof a;

　　打印,测试语句

　　　　alert(a);　　　　　　　　　　　　　　#使用弹出框显示

　　　　console.log(a);　　  　　　　　　　　 #使用console日志打印

　　　　var isdelete = confirm(a);　　　　 　　#弹框选择 ,isdelete会取到bool值 ,a提示信息

　　数据类型

　　　　基础数据类型,以及转换数据类型(不可变)

1)number(0可以做分子)
    var a = String(a);　　　　　　 #将a转换为字符串

2)string
    var a = Number(a);　　　　　 #将a转换为数值类型
　　拼接:使用+号
　　内置方法:
　　　　返回指定索引的值charAt()
　　　　　　a = 'quguanwen';a.charAt(3);
　　　　拼接字符串concat
　　　　　　var a ='good';var b ='nice';var c =a.concat(b);c;
　　　　字符串元素替换replace
　　　　　　var a='good';var b =a.replace('od','ll');b;
　　　　字符串分割列表split返回数组
　　　　　　var b='goll';var arr1 = b.split('o');arr1;
　　　　

3)underfined
    var a;　　　　　　　　　    　#仅声明的都是underfined类型　

4)boolean
    任何类型都可以转boolean　　#仅0 ,null,NaN,underfined为false

5)null空对象

　　　　引用数据类型(可变数据类型)　　　

1)function函数
　　普通函数
　　　　function count(a,b,c){return a+b+c;}
　　　　console.log(count(1,2,3));
　　匿名函数(没有函数名,把函数给了一个变量)
　　　　var counts = function () {return 666;}
　　　　counts();
　　自执行函数(直接调用自己)
　　　　(function add(a,b){return a+b})(1,2);

2)Array数组(类似列表)
　　定义数组
　　　　var arr1 = [1,2,3,null,'polp'];
　　指定索引
　　　　console.log(arr1[2]);
　　打印长度
　　　　console.log(arr1.length);
　　方法
　　　　合并数组concat(类似extend)
　　　　　　var arr1=[1,2];var arr2=[3,4];arr1.concat(arr2);
　　　　拼接字符串join(类似join)
　　　　　　var arr1=['q','a'];var arr2 = arr1.join('+');arr2;　
　　　　末尾追加元素push(类似append)
　　　　　　var b1=[1,2,3];b1.push(4);b1;
　　　　末尾删除元素pop
　　　　　　var b1=[1,2,3];b1.pop();b1;
　　　　起始写入元素unshift ,返回值是数组长度
　　　　　　var arr1=['a','10','1a0'];arr1.unshift('lp');
　　　　起始删除元素shift,返回被删除的值
　　　　　　var arr1=['a','10','1a0'];arr1.unshift('lp');arr1.shift('lp');　　　　
　　　　切片slice(起始索引,长度)
　　　　　　var arr1=[1,2,3,4,5,6];arr1.slice(0,2);
　　　　删除splice(起始索引,长度),返回值是被删除的值
　　　　　　var arr1=[1,2,3,4,5,6];arr1.splice(0,2);
　　　　添加元素splice(添加到的索引位置,0,内容1,内容2)
　　　　　　var arr1=[1,2,3,4,5,6];arr1.splice(3,0,'ll','oo');
　　　　替换元素splice(替换起始索引,替换个数,替换内容);
　　　　　　var ki = [1,2,3,4,5,6,7,8,9];arr1.splice(3,2,'oo','tt');arr1;
　　　　排序数组sort()(不区分类型顺序0-9,A-Z,a-z)
　　　　　　var ab=[1,2,65,3,43,1,2,'a','d','f','ba','ab','VB','A1','0'];ab.sort();
　　　　判断是否为数组
　　　　　　var arr1=[1,2,3];Array.isArray(arr1);
　　　　数组长度
　　　　　　var arr1=[1,2,3];arr1.length;

3)object对象(类似dict,就是个类,定义属性,定义方法)
　　var person = {"name":'quguanwen','age':10,func1:function(a,b){alert(a+b)}}
　　person.func1(0,19);　　　　　　#执行函数

4)date
　　创建当前时间对象
　　　　var newdate = new Date();
　　时间对象拿出年份
　　　　var year = newdate.getFullYear();year;
　　时间对象拿出月份(getMoth能取到是0-11)
　　　　var month = newdate.getMonth();month+1;
　　时间对象拿出日
　　　　var date = newdate.getDate();date;
　　时间对象拿出星期(0-6 ,其中0是周日)
　　　　var day1 = newdate.getDay();day1;
　　时间对象取出小时
　　　　var hour = newdate.getHours();hour;
　　时间对象取出份
　　　　var min = newdate.getMinutes();min;
　　时间对象取出秒
　　　　var s = newdate.getSeconds();s;

　　运算符

　　　　赋值运算符: =

　　　　算数运算符: + - * / %  -- ++

　　　　比较运算符:  ==(数值相等即可,不考虑数据类型)   ===(数值相等,数据类型也要相等)  !=(数值不等为真)  !==(数值不等的同时类型不同才为真)

　　流程控制

// if-else
var isdelete = confirm('确定与取消');
arr1 = [1, 2, 3, 4];
if (isdelete) {
    alert('确定')
} else {
    alert('取消')
}

// while　　　　　　　　　　#三步走：1初始化条件变量 2.判断循环条件 3.改变变量
var a = 0;
while (a < 10 ) {
    console.log(12);
    a++;
}

// switch　　　　　　　　　　#类似shell的case语句，常用于对标键盘执行操作
switch（code）
　　case 12：
　　　　执行操作
　　　　break；
　　case 20；
　　　　执行操作1
　　　　break；
　　default：
　　　　都不满足走default；

// for　　　　　　　　　　  #三步走：1初始化条件变量 2.判断循环条件 3.改变变量

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

　　Math内置对象

　　　　向上取整  var a = 11.9; Math.ceil(a)

　　　　向下取整  var a = 11.9; Math.floor(a)

　　　　比较取大  Math.max(1,2,3,4,10);

　　　　比较取小  Math.min(1,2,3,4,10);

　　　　随机数 (仅有0-1之间数字)

　　　　　　随机数100-500 :Math.random()*400+100;

　　　　　　随机数0-300 :Math.random()*300;

2. 制作动态时间显示

　　1) 指定想要在哪个dom标签进行操作

　　 2) 完成生成当前时间的函数 ,并对dom操作 ,显示内容

　　 3) 使用定时器触发函数

<h2 id="time1"></h2>
    <script>
        //第一步绑定一个标签对象,通过id绑定
        var mytime = document.getElementById('time1');
        //第二步我们写一个函数,每次执行函数 ,函数对dom对象做一次操作!!
        function timetemplate() {
            var myDate = new Date();
            var year = myDate.getFullYear();
            var mouth = myDate.getMonth()+1;
            var date = myDate.getDate();
            var hour = myDate.getHours();
            var min=myDate.getMinutes();
            var sec = myDate.getSeconds();
            var datetime = `${year}-${mouth}-${date} ${hour}:${min}:${sec}`;
            console.log(datetime);
            mytime.innerText = datetime;
        }
        //第三步我们写一个定时器,要求每个1000毫秒即1秒执行一次函数,那么页面就在不停变化
        setInterval(function () {
            timetemplate();
        },1000)
    </script>

3.定时器使用

　　setInterval　　　　　　#周期循环定时器

　　setTimeout　　　　　  #延时定时器 ,仅执行一次

　　clearInterval(obj)　　　#清空周期定时器对象

　　clearTimeout(obj)　　  #清空延时定时器

　　定时器没有垃圾回收机制 ,所以创建的定时器对象都回保留 ,所以每次需要清除定时器, 因为代码执行顺序 ,如果代码出现clear可能定时器还没到执行就被清空了

　　定时器中是一个函数

<script>
    settime2 = setInterval(function () {
        console.log(888)
    }, 1000);

    settime1 = setTimeout(function () {
        clearInterval(settime2)
    }, 3000);

    clearTimeout(settime1)

</script>

4.js变量提升

　　使用var声明变量时会出现一个问题 ,js会先将变量声明在最前面 ,如var a ,类型也就是undefine .所以我们使用let声明变量

5.DOM操作-文档对象模型

　　HTML文档被解析成DOM树模型，可以用DOM提供的API去获取操纵HTML文档上的元素 ,如document.getElementById("id")，这个就是一个DOM里的API，用于获取HTML标签元素 ,再用js操作

　　 获取文档对象模型

　　　　由于代码加载顺序 ,一般将script标签写在后面 ,当script写在代码前面的时候可以使用window.onload回调函数

<script>
    window.onload = function () {
        var test = document.getElementById('a2');
        test.action = 'www.qq.com'
    };
</script>
<form id="a2" action="www.baidu.com" type=""></form>

　　获取DOM三种方式

　　　　1).通过id找到标签, 唯一

　　　　　　var obj = document.getElementById('box1')

　　　　2).通过class找到标签, 不唯一 ,得到一个对象集合(就算仅一个对象也是一个集合) ,可以通过索引取到dom ,也可以遍历

　　　　　　var test = document.getElementsByClassName('a1');

　　　　　　test[0]　　　　　　　　　　　　　　　　　　　　#集合中的一个对象

　　　　3).通过标签找到标签 ,也不唯一

　　　　　　var test = document.getElementsByTagName('a');　　　　　　

　　对值的操作　　

　　　　1) 仅对标签中的文字进行替换操作

　　　　　　dom对象.innerText = '值'

　　　　 2) 对标签实现替换操作

　　　　　　dom对象.innerHTML = '<input type="text">'　　　　　　# 这个dom对应的标签就变成了input了

　　 对属性操作

　　　　dom对象.title = ''　　　　　　　　#改变悬浮提示

　　　　 dom对象.className = ''　　　  　#直接改变了class选择器

　　　　 dom对象.name = ''　　　　　  　 #改变name属性,input标签中的name

　　　　 dom对象.value= ''　　　　　　　 #改变value属性,input标签中的value

　　　　 dom对象.id= ''　　　　　　　　　#改变标签id选择器

　　　　 dom对象.src= ''　　　　　　　　  #更改image的src

　　　　 dom对象.href= ''　　　　　　　　 #对a标签的跳转修改

　　　　 dom对象.自定义属性= ''　　　　    #对自定义属性

　　　　 dom对象.action= ''　　　　　　　  #form标签的动作 ,修改提交表单地址

　　　　dom对象.type= ''　　　　　　　　 #对input标签类型操作修改

　　　　 dom对象.method= ''　　　　　　   #对表单的请求类型操作

　　　　dom对象.style.margin = ''　　　　  #对标签css样式操作

6.dom操作事件驱动

　　事件封装函数 ,函数中定义操作dom对象 ,当事件触发后执行函数

　　onclick (单击事件)

　　ondblclick (双击事件)

　　onmouseenter (鼠标悬浮事件)

　　oninput (实时监听输入事件)

　　语法: dom对象.事件 = 函数　　　　　　　　　　#重点 函数中可以调用this ,这个this就像self ,是dom对象本身

####点击事件触发函数
<div style="width: 20px;height: 20px;background-color: burlywood" class="d1">n</div>
<script>
    let test = document.getElementsByClassName('d1');
    test[0].onclick = function () {
        alert(this.innerText);
    }
</script>

####鼠标悬浮事件触发函数实现盒子移动

<div style="width: 200px;height: 200px;background-color: burlywood" class="d1">n</div>
<script>
    let test = document.getElementsByClassName('d1')[0];
    let num = 0;
    let timer1= null;
    test.onmouseenter = function () {
        clearInterval(timer1);
        timer1 = setInterval(function () {
            num += 10;
            test.style.marginLeft = num + 'px';
        }, 50);
    };
</script>

####实时输入监听

<div style="width: 200px;height: 200px;background-color: burlywood" class="d1"></div>
<input type="text" id="i1">
<script>
    let test = document.getElementsByClassName('d1')[0];
    let test1 = document.getElementById('i1');

    test1.oninput = function () {
        test.innerText = this.value;
    }
</script>

####实现多选条件按钮 ,按钮点击会出现选中状态 ,可以多选 ,当点击全部按钮 ,仅全部按钮变色 ,最好是通过添加class来渲染按钮

<div>
    <input type="button" value="全部" id="s1">
    <input type="button" value="篮球" class="like" id="s2">
    <input type="button" value="rap" class="like" id="s3">
    <input type="button" value="唱跳" class="like" id="s4">
</div>
<script>
    let s1 = document.getElementById('s1');
    let like = document.getElementsByClassName('like');
    for (let i = 0; i < like.length; i++) {
        like[i].numi = i;
        like[i].onclick = function () {
            this.style.backgroundColor = 'burlywood';
            s1.style.backgroundColor = 'cornflowerblue';
        }
    }

    s1.onclick = function () {
        for (let x = 0; x < like.length; x++) {
            like[x].style.backgroundColor = 'cornflowerblue';
        }
        this.style.backgroundColor = 'burlywood';
    }

</script>

7.dom的创建添加删除

　　前后端交互思想 ,数据驱动试图 ,根据后端给的数据 ,决定前端展示的标签和内容

　　document.getElementById　　　　　　　　　　　　　　 #选中html中的标签dom对象

　　document.createElement(' html标签 ')　　　　　　　　    #创建dom对象

　　父dom对象.appendChild(dom对象)　　　　　　　　　　　  #为dom对象创建子标签 ,子标签也要是dom对象

　　父dom对象.removeChild(dom对象)　　　　　　　　　　　　#移除指定的子对象

<body>
<ol id="ol1"></ol>
<script>
    //获取dom
    let testol = document.getElementById('ol1');
    //后端数据,驱动页面
    dataarry = [900, 700, 300, 400];
    //forEach 每个对象 ,和对应索引传给函数
    dataarry.forEach(function (item, index) {
        //创建dom
        let testli = document.createElement('li');
        testli.num = index;
        testli.innerHTML = `<h1>${item}</h1>
            <button class="del">删除</button>`;
        //dom中追加子元素
        testol.appendChild(testli);
    });

    let odel = document.getElementsByClassName('del');
    for(let i=0;i<odel.length;i++){
        odel[i].onclick = function () {
            //移除dom ,ol标签的dom对象移除自己的子对象那就是li标签, 通过odel这个dom对象的父标签就是li标签 ,使用this.parentNode可直接获取li标签
            testol.removeChild(this.parentNode);
        }
    }
</script>
</body>

8.BOM浏览器对象模型

　　hostname　　　　　　　　　　　　　　#获得服务器主机名

　　port　　　　　　　　　　　　　　　　  #获得服务器的端口

　　pathname　　　　　　　　　　　　　　#获得请求的页面的路径名

　　protocol　　　　　　　　　　　　　　    #获得协议

　　search　　　　　　　　　　　　　　　  #获得请求参数

　　reload()　　　　　　　　　　　　　　　#重新载入页面

<script>
    console.log(window.location.hostname);
    console.log(window.location.port);
    console.log(window.location.pathname);
    console.log(window.location.protocol);
    console.log(window.location.search);
    window.location.reload();
</script>