JavaScript

1JS

（JS）是一种脚本语言，主要用于 Web。它用于增强 HTML 页面，通常可以嵌入 HTML 代码中。JavaScript 是一种解释型语言。因此，它不需要编译。JavaScript 以交互式和动态的方式呈现网页。这允许页面对事件做出反应，展示特殊效果，接受可变文本，验证数据，创建 cookie，检测用户的浏览器等。

一个合格的java工程师必须学好JS

 

2快速入门

2.1如何导入js代码

<!--script标签中，写JavaScript代码-->
<!--<script>-->
    <!--alert("Hello World");-->
<!--</script>-->
​
<!--外部引入-->
<!--注意：script标签必须成双出现-->
<script src="js/dabai.js"></script>

2.2基础语法

<!--JavaScript严格区分大小写-->
<script>
    //1.定义变量       变量类型  变量名=变量值
    var score=90;
    //alert(num);
    //2.条件控制
    if(score>60&&score<70){
        alert("中等");
    }else if(score>70&&score<80){
        alert("良好");
    }else{
        alert("other");
    }
​
    //console.log(score) 在浏览器的控制台打印变量！ System.out.print()

<script>
    //Person p=new Person{1,2,3,4,5}
    var person={
        name:"dabai",
        age:23,
        tags:['java','html','css']
    }
</script>
//console.log(person.name);  在console控制台可以输出人名
​

2.3严格检查模式

<!--
前提：IEDA需要设置支持ES6的语法
'use strict';  严格检查模式，预防JS的随意性导致的一些问题
必须放在第一行
局部变量都建议使用let来定义
-->
<script>
    'use strict';
    //i=1;
    let i=1;
</script>

 

3数据类型

3.1字符串

<script>
    'use strict';
    let name='dabai';
    let age=23;
    let msg=`你好呀，${name}`       //`键在tab键上面，里面可以包含多个字符串
</script>

3.2数组

Array可以包含任意的数据类型

var arr=[1,2,3,4,5];   //通过下标取值和赋值
arr[0]
arr[0]=1

1.长度

arr.length

2.indexOf 通过元素获取下标索引

arr.indexOf(2)
1

字符串“1”和数字1是不一样的

3.slice() 截取Array的一部分，返回一个新数组，类似与String中的subString

4.push() pop() 尾部

push   压入的尾部
pop    弹出尾部的一个元素

5.unshift() shift() 头部

unshift:压入到头部
shift:弹出头部的第一个元素

6.排序 sort()

7.元素反转 reverse()

8.concat() 拼接数组，没有修改原数组，只是返回一个新数组

9.join 打印拼接数组，使用特定的连接符连接

var arr=['a','b','c']
arr.join('-')
arr=["a-b-c"]

 

3.3对象

若干键值对

var 对象名={
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}
​
var person={
            name:"kuangshen",
            age:23,
            emali:"2234455@qq.com"
        }

js中对象用{.....}表示 属性之间用逗号隔开，最后一个不加逗号

JS中所有的键都是字符串，值是任意类型

1.动态的删减属性，通过delete删除对象属性

delete person.name
true

2.多态的添加属性,直接给新的属性添加值即可

person.haha="haha"
"haha"

3.判断属性值是否在这个对象中 xxx in xxx

'age' in person
true

 

3.4流程控制

for....in //尽量不用

var arr=[11,22,33,44,55,66];
//for(var index in Object)
for(var num in arr){
    if(arr.hasOwnProperty(num)){
        console.log("存在");
        console.log(arr[num]);
    }
}

 

3.5Map和Set

Map

/Es6  Map
 //学生的成绩，学生的姓名
 //var name=["tom","jack","haha"];
 //var score=[100,90,80];
​
 var map=new Map([['tom',100],['jack',90],['haha',80]]);
 var score=map.get('tom');   //通过key获取value
 map.set('admin',89);
 console.log(score);

Set:无序不重复的集合

set.add(2);//添加
set.delete(1);//删除
set.has(3);//判断是否包含

 

3.6Iterator

遍历数组

//通过for of遍历数组     for  in 是遍历下标
var arr=[1,2,3];
for(var x of arr){
   console.log(x);
}

遍历map

var map=new Map([['tom',100],['jack',90],['haha',80]]);
for(let x of map){
    console.log(x);
}

 

 

4函数

4.1定义函数

定义方式一

绝对值函数

function abs(x){
   if(x>0){
   return x;
   }else{
   return -x;
   }
}

一旦执行到return 代码函数执行结束，返回结果

如果没有执行return 函数也会返回结果，结果就是undefined

 

定义方式二

var abs=function(x){
   if(x>0){
   return x;
   }else{
   return -x;
   }
}

可以通过abs调用 函数

 

参数传递问题

假设不存在参数，如何规避

var abs=function(x){
    //手动抛出异常来判断
    if(typeof x!=='number'){
               throw 'Not a number';
    }
    if(x>0){
               return x;
      }else{
               return -x;
    }
}

 

arguments

arguments是一个JS免费赠送的关键字

代表，传递进来的所有参数，是一个数组

var abs=function(x){
    console.log("x=>"+x);
    for(var i=0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
    if(x>0){
        return x;
    }else{
        return -x;
    }
}

问题：arguments包含所有的参数，我们有时候想用多余的参数做附加的操作，需要排除已有的参数~

 

rest

eS6引入的新特性，获取处理已经定义的参数之外的所有参数

function aaa(a,b,...rest) {
            console.log("a=>"+a);
            console.log("b=>"+b);
            console.log(rest);
        }

rest参数只能写在最后面，必须用...标识

 

4.2变量的作用域

在JS中，var定义变量实际上是有作用域的

假设在函数体中声明，则在函数体外不可以使用 (非要使用的话，可以使用闭包)

function aaa() {
    var x=1;
    x=x+1;
}
x=x+2;   //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function aaa() {
    var x=1;
    x=x+1;
}
function bbb() {
    var x='A';
    x=x+1;
}

内部函数可以访问外部函数的成员，反之不行

 

提升变量的作用域

function db() {
    var x="x"+y;
    console.log(x);
    var y="y";
}

结果 x is not defined

说明JS执行引擎，自动提升了y的声明，但不会提升y的赋值

注意规范：将函数的声明都写在头部

 

 

规范

由于我们所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，就会冲突~

如何减少冲突

//唯一的全局变量
var kuangshen={}；
​
//定义全局变量
kuangshen.name='kuangshen';
kuangshen.add=function (a,b) {
    return a+b;
}

把自己的代码全部放到自己定义的唯一空间名字中，降低全局命名冲突问题

 

 

局部作用域

function aaa() {
    for(var i=0;i<100;i++){
        console.log(i);
    }
    console.log(i+1);   //问题  i出了作用域还可以使用
}

ES6 let关键字

function aaa() {
    for(let i=0;i<100;i++){
        console.log(i);
    }
    console.log(i+1);   //不会执行
}

 

const常量

 

 

4.3方法

定义方法

方法就是把函数放在对象里面，对象只有两个东西，属性和方法

var kuangshen={
    name:'kuangshen',
    brith:1997,
    age:function () {
        //今年-出生
        var now=new Date().getFullYear();
        return now - this.brith;
    }
}
//属性
kuangshen.name
//方法 一定要带（）
kuangshen.age()

apply

可以控制this的指向

 

5内部对象

5.1Date

<script>
    var now=new Date();
    now.getFullYear();//年
    now.getMonth();//月
    now.getDate();//天
    now.getDay(); //星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒
    now.getTime();//时间戳 全世界统一
</script>

5.2JSON

在JS一切都为对象，任何JS支持的类型都可以用JSON来表示

对象都用{}

数组都用[]

所有的键值对都是用 key:value

 

JSON与JS的转换

<script>
    var user={
        name:"dabai",
        age:23,
        sex:"男"
    }
    //对象转换为json字符串
    var jsonuser=JSON.stringify(user);      //{"name":"dabai","age":23,"sex":"男"}
    //json字符串转化为字符串
    var obj=JSON.parse('{"name":"dabai","age":23,"sex":"男"}');
</script>

 

 

6面向对象编程

6.1

<script>
    var Student={
        name :"dabai",
        age :23,
        run:function () {
            console.log(this.name+"run...");
        }
    }
​
    var xiaoming={
        name :"xiaoming"
    }
​
    //xiaoming的原型是Student
    xiaoming._proto_=Student;     //就可以调用Student中的run方法
</script>

 

class继承

class关键字，是在es6引入的

1.定义一个类，属性，方法

//定义一个学生类
class Student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert("hello");
    }
}
var xiaoming=new Student(xiaoming);
var xiaohong=new Student(xiaohong);
xiaoming.hello();

2.继承

//定义一个学生类
class Student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert("hello");
    }
}
​
class xiaoStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade=grade;
    }
    myGrade(){
        alert("我是一名小学生");
    }
}
​
var xiaoming=new Student(xiaoming);
var xiaohong=new xiaoStudent(xiaohong,1);

 

 

7操作BOM对象（重点）

浏览器介绍

JS与浏览器的关系？

JS的诞生就是为了能够让它在浏览器中运行

BOM：浏览器对象模型

IE6-11

Chrome

Opera...

 

window

window代表浏览器窗口

window.alert(1)
window.innerHeight

 

Navigator

Navigator ,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"

大多时候，我们不会使用navigator对象，因为会被人修改

 

screen

代表屏幕的尺寸

screen.width
1366
screen.height
768

 

location(重要)

location 代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload:f reload() //刷新网页
//设置新的地址
location.assign("https://blog.kuangstudy.com/")

 

document

document代表当前页面，HTML DOM文档树

document.title
"百度一下，你就知道"
document.title='狂神说'
"狂神说"

获取具体的文档树节点

<dl id="app">
    <dt>
        <dd>JavaSE</dd>
        <dd>JavEE</dd>
    </dt>
</dl>
​
<script>
    var d1=document.getElementById('app');
</script>

获取cookie

document.cookie

 

history

代表浏览器的历史纪录

history.back()  //后退
history.forward //前进

 

 

8操作DOM对象（重点）

核心

浏览器网页就是一个DOM树型结构

更新：更新DOM节点

遍历DOM节点：获得DOM节点

删除：删除DOM节点

添加：添加一个新节点

要操作一个DOM节点，首先要获得这个节点

 

获得DOM节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应CSS选择器
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementById('father');
​
    var childrens=father.children;   //获取父节点下的所有子节点
    
</script>

 

更新节点

<div id="id1">
​
</div>
​
<script>
     var id1=document.getElementById('id1');
</script>

操作文本

id1.innerText='123' 修改文本的值

id1.innerHTML='<strong> 123 </strong>' 可以解析HTML文本标签

操作JS

id1.style.color='yellow';
id1.style.fontSize='20px';
id1.style.padding='2em';

 

删除节点

删除节点的步骤：先获取父节点，在通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
   var self=document.getElementById('p1');
   var father=p1.parentElement;
   father.removeChild(self);
   
   //删除是一个动态的过程
   father.removeChild(father.childer[0]);
   father.removeChild(father.childer[1]);//此时1已经变为0
   father.removeChild(father.childer[2]);//此时2已经变为1
</script>

 

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们就不能这么干了，会产生覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
​
​
<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    list.appendChild(js);//追加到后面
</script>

 

创建一个新标签，实现插入

<script>
    var js=document.getElementById('js'); //已经存在的节点
    var list=document.getElementById('list');
    //list.appendChild(js);
​
    //通过JS创建一个新的节点
    var newP=document.createElement('p'); //创建一个p标签
    newP.id='newP';
    newP.innerText='hello,kuangshen';
    list.appendChild(newP);
</script>

 

创建一个新标签，实现插入

<script>
    var js=document.getElementById('js'); //已经存在的节点
    var list=document.getElementById('list');
    //list.appendChild(js);
​
    //通过JS创建一个新的节点
    var newP=document.createElement('p'); //创建一个p标签
    newP.id='newP';
    newP.innerText='hello,kuangshen';
    //list.appendChild(newP);
​
    //创建一个标签节点
    var myScript=document.createElement('script');
    myScript.setAttribute('type','text/javascript');
​
    //可以创建一个Style标签
    var myStyle=document.createElement('style');  //创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML='body{}';  //设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle);
    
    
</script>

 

insert

var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
//要包含的点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

 

 

9操作表单（验证）

表单是什么 form DOM树

文本框 text

下拉框 <select>

单选框 radio

多选框 checkbox

隐藏域 hidden

密码框 password

.......

 

<form action="post">
    <p>
         <span>用户名：</span><input type="text" id="username">
    </p>
    <!--多选框的值，就是定义好的value-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>
</form>
​
<script>
    var input_text=document.getElementById('username');
    var boy_radio=document.getElementById('boy');
    var girl_radio=document.getElementById('girl');
    //得到输入框的值
    input_text.value;
    //修改输入框的值
    input_text.value='123';
    
    
    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;  //查看返回的结果，是否为true,如果为true，则被选中
    girl_radio.checked=true;  //赋值
</script>

 

提交表单

    <title>Title</title>
    <!--MD5工具类 加密用的-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit=绑定一个提交检测的函数，true,false
将这个结果返回给表单，使用onsubmit接收
onsubmit="return aaa()"
-->
<form action="#" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="input_password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <!--绑定事件 onclick被点击-->
    <button type="submit">提交</button>
​
    <script>
        function aaa() {
            var uname=document.getElementById('username');
            var pwd=document.getElementById('input_password');
            var md5pwd=document.getElementById('md5-password');
            md5pwd.value=md5(pwd.value);
            //可以检验判断表单内容，true就是通过提交，false就是阻止提交
            return true;
        }
    </script>

 

 

10jQuery

JavaScript

jQuery库，里面存在大量的JS函数

获取jQuery

https://jquery.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 //cdn导入
    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<body>
​
</body>
</html>

 

公式 ： $(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
​
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<!--
公式 ： $(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
    //选择器就是css的选择器
    $('#test-jquery').click(function () {
      alert('hello,jQuery');  
    })
</script>
</body>
</html>

 

选择器

<script>
  //原生JS，选择器少，麻烦不好记
  //标签
    document.getElementsByTagName();
   //id
    document.getElementById();
    //类
    document.getElementsByClassName();
    
    //jQuery css中的选择器它全部都可以用
    $('p').click();//标签选择器
    $('#id1').click();//id选择器
    $('.class1').click();//类选择器
</script>

文档工具站：https://jquery.cuishifeng.cn/

 

事件

鼠标事件，键盘事件，其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
    <style>
        #divMove{
             500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
​
<script>
    //当网页元素加载完毕后，响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
        })
    });
</script>
</body>
</html>

 

操作DOM

节点文本操作

$('#test_ul li[name=python]').text();//获得值
$('#test_ul li[name=python]').text('设置值');//设置值

css的操作

$('#test_ul li[name=python]').css("color","red")

元素的显示和隐藏：本质 display:none;

$('#test_ul li[name=python]').show();
$('#test_ul li[name=python]').hide();

 

小技巧

1.如何巩固JS（看jQuery源码，看游戏源码）

2.巩固HTML,CSS（扒网站，全部down下来，然后对应修改看效果）

 

 

Layer弹窗组件

Element-ui