目录

一.快速入门

  1. 引入javaScript

    1. 内部标签：

      <script>
    ...
</script>
注：该部分可以在head中或者body里面

    2. 外部引入：

      <script type="text/javascript" src="../js/first.js"></script>
注：type="text/javascript"可以不用显示定义

二.基础知识

  1. 数据类型：

    • number：数值类型，不区分整数小数（特殊：NaN，不是一个数，Infinity，无限大）

    • 字符串：

      1. 正常字符：”abc”,’abc’

      2. 转义字符：\

        1. ‘
        2. \n
        3. \t
        4. \u4e2d \u### Unicode转义字符
        5. \x41 ASCLL转义字符

      3. 多行字符串：

        var i=hhh
ffff
fffa
a

      4. 模板字符串：

        i=1;
${i};模板引出字符串

      5. 字符串长度：str.length

      6. 字符串的可变性：不可变

      7. 大小写方法：

        i.toUpperCase()
i.toLowerCase()

      8. 根据指定字符获取下标：indexOf（’a’）

      9. 字符串截取：substring（）

    • 布尔值：true ，false

    • 逻辑运算：&&，||，！

    • 比较运算符：=（赋值），==（类型不一样值一样也是true） =（类型一样值一样才等于)，注：NaN=NaN不行，必须使用isNaN（NaN）判断是否不是数

    • 浮点数问题：console.log((1/3)===1-(2/3)) –false

    • null和undefined：

      1. null：空
      2. undefined：未定义

    • 数组：

      var a=[1,"hello",null,true]
new Array(1,2,3,4,true,"hello"); 
可以这么定义，如果下标越界了会显示未定义

      1. 长度：arr.length

        注：假如给长度赋值，那么数组大小会动态变化，如果变小数据会丢失，变大会增加空数据，显示查看显示未定义。

      2. 通过下标获得索引：indexOf（）

        注：参数为1和参数为“1”不一样

      3. 截取数组一部分：slice（），会返回一个新的字符串，类似String的substring

      4. 压入数据到数组尾部：push（）

      5. 弹出尾部数据：pop（）

      6. 压入数据到数组头部：unshift（）

      7. 弹出头部数据：shift（）

      8. 排序：sort（）

      9. 元素反转：reverse（）

      10. 拼接：concat（），并没有修改数组，而是返回新的数组

      11. 打印使用特定字符拼接的数组：join（）

      12. 多维数组：

      注：Array可以包含任意数据类型

    • 对象：对象是大括号，数组是中括号

      var person={
    name:张思德,
    age:2,
    tages:['js','java','web']
}
对象定义
取对象值：person.name
      1. 大括号里面表示一个对象，键值对描述属性，多个键值对用逗号隔开，最后一个属性后面最好不要加逗号
      2. 使用一个不存在的属性不会报错，只会undefined
      3. 动态删减属性：通过delete删除属性 delete person.name
      4. 动态属性添加：直接person.sex=’男’即可
      5. js中所有键都是字符串，值是任意对象
      6. 判断属性是否在这个对象中：’age’ in person

  2. 注意事项：

    1. javascript严格区分大小写；
    2. 浏览器调试：image-20220707152359138

  3. javascript严格模式：在脚步语言第一行加入’use strict’;

  4. 分支和循环：

    1. if判断

      if (true){

   }else if(){

   }else{
       
        }

    2. while循环

      while (true){
    
}

    3. for循环

      for (let i=1;i<100;i++)
{
    
}

    4. forEach循环

      .forEach(function (value){
    console.log(value);
})

    5. for…in/for…of

      for(var b in a){//b是下标
    console.log(a[b]);
}

for(var b of a){//b是具体值
    console.log(b);
}

  5. Map和Set

    var map=new Map([['tom',100],['jerry',90],['jack','80']]);
var score=map.get('tom');
map.set('tom',34);
map.delete('tom');

var set=new Set([1,2,3,4,1]);//可以去重，只有一个1
set.add(5);
set.delete(1);
set.has(2);

  6. 遍历集合

    for (var mapElement of map) {//遍历map集合
    console.log(mapElement)
}

for (var number of set) {//遍历set集合
            console.log(number);
        }

三.函数

  1. 定义函数：

    function  abs(x){//方式一
    函数体;
}

//匿名函数
(function (){})

var abs=function (x){//方式二
            
        }

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

  2. 调用函数：

    abs(10);
abs(-10);

    注：javascript可以传递任意个数参数，也可以不传参

    假设不存在参数如何规避：手动抛出异常

    function  abs(x){
    throw 'errow!';
}

  3. arguments：js免费赠送的关键字，将传进来的所有参数形成一个数组为arguments

    var abs=function (x){
    for (var i=0;i<arguments.length;i++){
        alert(arguments[i]);
    }
}

    注：arguments包含所有参数，一些时候想使用多余的参数来进行附加的操作需要排除已有的参数

  4. rest：获取除了已经定义的参数之外的所有参数

    var abs1=function (x,y,...rest){
    alert(rest);
}

    注：rest参数必须写在最后面，必须用…标识

  5. 变量作用域：

    1. 局部变量：

      function abb(){
    var x=1;
}
x=x+1;//x未被定义，假设在函数体中声明，那么在函数外不可以使用

function abb(){
            var x=1;
            function abc(){
                var y=x+1;//内部函数可以访问外部函数的成员，但是外部的不行
            }
            var z=y+1;//报错
        }

function abb(){
            var x=1;
            function abc(){
                var x=2;//如果存在重名的情况，内部的会屏蔽外部的
            }
        }

//js会提升变量的作用域
function abb(){
            var x='x'+y;
            console.log(x)//打印xundefined
            var y='y';//不会报错
        }
//等同于：
function abb(){
            var y;
            var x='x'+y;
            console.log(x)//打印xundefined
            var y='y';//不会报错
注：应该养成js所有的变量都定义在一开始，便于代码的维护

    2. 全局函数（全局对象windows）

      var x=1;//全局变量，全局变量都绑定在windows对象上
function abb(){
    console.log(x);
}

//js原本自带的函数可以被覆盖
var x=1;
var new_alert=alert;
new_alert(x);//可以弹出1
alert(2);//可以弹出2
alert=function (){
    //覆盖alert
}
alert(3);//不可以弹出3，被覆盖了

      注：javascript实际上只有一个全局作用域，任何变量（包括函数），使用时会从函数范围内从内向外查找，如果在全局作用域内都没有找到就会报错。同时由于所有的全局变量都会绑定到windows上，所以为了避免在不同js文件中使用到了相同的全局变量冲突，就规范定义一个唯一的全局变量，然后其他的变量绑定到唯一的全局变量上

      var lpjApp={};
lpjApp.name="zhangsan";
lpjApp.add=function (){
}

    3. 局部作用域let

      1. var的问题：

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

      2. 解决：使用let：

        function aaa(){
    for (let i=1;i<100;i++){
        console.log(i);
    }
    console.log(i);//i未定义
}

      3. 建议：最好都使用let去定义局部变量

    4. 常量：const

      const x=123;
x=12;//会报错

  6. 方法：

    1. 定义方法：即把函数放在对象里面，对象只有属性和方法

      var a={
    name:"111",
    birth:2000,
    age:function (){
        var  now=new Date().getFullYear();
        return now-this.birth;
    }
}
//调用属性：对象.属性
//调用方法：对象.方法()

      注：this始终指向调用它的对象，如果把对象里面的函数拿出来写，那么直接调用其函数时调用对象会变成windows。

      var a={
    name:"111",
    birth:2000,
    age:getAge
}
function getAge(){
    var  now=new Date().getFullYear();
    return now-this.birth;
}
//a.age() 正确
//getAge() NaN 调用者为windows，windows没有birth

    2. apply：所有函数都有该函数，可以指定函数的调用者，即this的指向

      var a={
    name:"111",
    birth:2000,
    age:getAge
}
function getAge(){
    var  now=new Date().getFullYear();
    return now-this.birth;
}
getAge().apply(a,[]);//使this指向a，第一个参数为指定调用对象，第二个参数为对象需要的参数，这里为空

四.内部对象：

  1. 标准对象：

    typeof 123
'number'
typeof '123'
'string'
typeof '123'
'string'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

  2. Date:

    var now=new Date();
now.getFullYear();//年
now.getMonth();//月，从0~11
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳，世界统一

//转换
now.toLocaleDateString()
'2022/7/8'
now.toDateString()
'Fri Jul 08 2022'
now.toLocaleString()
'2022/7/8 14:59:11'
now.toLocaleTimeString()
'14:59:11'

  3. JSON：在js中一切都为对象，任何js支持的类型都可以直接转换为json

    //json字符串和json对象的转换 
var user={
            name:'zhangsna',
            age:12,
            sex:'男'
        }
        var jsonuser=JSON.stringify(user);//对象转换为字符串
        var obj=JSON.parse('{"name":"zhnagsan","age":18,"sex":"男"}')//json字符串转换为对象
        
//注：使用parse函数时，字符串中的键必须使用双引号包括，不能使用单引号，也不能不加，同时如果括号里面使用的双引号，那么括号外面必须使用单引号

五.JS面向对象编程

  1. javascript中的原型：

    //原型
var user={
    name:'zhangsna',
    age:12,
    sex:'男',
    run:function (){
        console.log(this.name+"run...")
    }
}
var xiaoming={
    name:"xiaoming"
}
//小明指向原型，于是小明可以调用原型中的run方法
xiaoming.__proto__=user;

  2. class继承：

    1. 定义一个类（ES6）：

      class Student{
    constructor(name,age) {
        //在此处定义了两个属性name和age，如果为传参那么值为undefined
        this.name=name;
        this.age=age;
    }
    hello(){
        alert("hello");
    }
}
var xm=new Student("小明");

    2. 继承：

      class smallStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    mygrade(){
        console.log("我的成绩");
    }
}

//本质上继承还是使用原型
smallStudent {name: 'xm', age: undefined, grade: 13}
age: undefined
grade: 13
name: "xm"
[[Prototype]]: Student//使用Student的原型
constructor: class smallStudent
mygrade: ƒ mygrade()

  3. 原型链：js类最后都会继承object原型，然后object本身又是指向object原型，形成一个链，无限循环

六.操作BOM对象

  1. BOM：浏览器对象模型

    1. IE 6-11
    2. Chrome
    3. Safarl
    4. FireFox

  2. window(重要)：代表浏览器窗口

    window.innerHeight//窗口高度
323
window.innerWidth//窗口宽度
386

  3. Navigator：封装了浏览器的信息

    navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
navigator.platform
'Win32'

    注：大多数时候不会navigator对象，因为会被认为修改

  4. screen：代表屏幕

    screen.height
1080
screen.width
1920

  5. location（重要）：代表当前页面的URL信息

    host: "localhost:63342"//主机
hostname: "localhost"
href:"http://localhost:63342/study/.idea/%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5/html/index.html?_ijt=nuipp3c41qejo9od7aopg77jab&_ij_reload=RELOAD_ON_SAVE"//当前地址
protocol: "http:"//协议
reload()//刷新网页
location.assign("https://www.baidu.com/")//设置新的地址，跳转百度

  6. document：代表当前的页面，html，DOM文档树

    document.title
'百度一下，你就知道'
document.title="Liupjie"
'Liupjie'

    可以具体的获取文档树节点

    <div id="test1">
    <p>javase</p>
    <p>javaee</p>
</div>
//注：这段js代码写到id定义之后才有用
<script>
    var test1=document.getElementById('test1');
</script>

    获取cookie:

    document.cookie

    服务器端可以设置cookie：httpOnly保证cookie的安全

  7. history（不建议使用）：代表浏览器的历史记录

    history.forward()//浏览器前进
history.back()//浏览器后退

七.操作DOM对象（重点）

DOM：文档对象模型

  1. 核心：浏览器网页就是一个dom树形结构

    1. 更新：更新DOM节点
    2. 遍历dom节点：得到dom节点
    3. 删除：删除一个dom节点
    4. 添加：添加一个新的节点

    注：要操作一个节点就要先获得这个dom节点

  2. 获得dom节点：

    //原生代码
var p1=document.getElementsByClassName("p1");//根据类名
var p2=document.getElementById("p2");//根据id
var ul=document.getElementsByTagName("ul");//根据标签名字
var father=document.getElementById("father")
var  children=father.children//获得父节点下面所有孩子
//注：后面一般都使用jQuery

  3. 更新节点：

    var p2=document.getElementById("p2");//根据id获得节点

p2.innerText="123"//修改文本的值
p2.innerHTML="<strong>123</strong>"//可以识别html的标签

p2.style.color="red"//改样式，此处改字颜色为红色

//注：等号后面加引号

  4. 删除节点：

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

    var father=document.getElementById("father")
var p2=document.getElementById("p2");//根据id
p2.parentElement//通过节点获取父节点
father.removeChild(p2)//通过father删p2

//删除父节点的三个子节点
father.removeChild(father.children[0])
father.removeChild(father.children[0])
father.removeChild(father.children[0])

//注：删除节点上一个动态的过程。

  5. 插入节点：获得了某个节点之后，如果节点内容为空，那么可以直接innerText直接添加内容，如果原本有内容就会覆盖

    apped：

    <p id="p3">javame</p>
<div id="father">
    <p id="p1">javase</p>
    <p id="p2">javaee</p>
</div>
<script>
    var p1=document.getElementById("p1");
    var p2=document.getElementById("p2");
    var father=document.getElementById("father");
    father.appendChild(p3);//父节点后面追加一个已存在的子节点
    
   //追加一个不存在的子节点：创建一个新的标签再追加
    var p4=document.createElement('p');//创建一个p标签
    p4.id ="p4";//将创建的p标签的id设置为p4
    //另一种方式设置id：
    //p4.setAttribute("id","p4");
	//并且通过这种方式可以设置任何属性，第一个参数为属性名字，第二个参数为属性值
    p4.innerText="js";//增加标签的文本
    father.appendChild(p4);
</script>

    insertBefore：

    parentNode.insertBefore(newNode, referenceNode);
//newNode：将要插入的节点
//referenceNode：被参照的节点（即要插在该节点之前）
//parentNode：父节点

八.操作表单（验证）

  1. 获得要提交的信息：

    <form>
    <span>用户名:</span><input type="text" name="username" id="username">
    <span>性别：</span>
    <input type="radio" name="sex" value="man" id="man">男
    <input type="radio" name="sex" value="sex" id="woman">女
</form>
<script>
    var usernaem=document.getElementById("username")
    var man=document.getElementById("man")
    var woman=document.getElementById("woman")
    usernaem1=usernaem.value//获取输入的用户名
    //获得当前选择的性别
    var getChecked=function (){
        if(man.checked==true)
            return "男";
        else
            return "女";
    }

  2. 提交表单：MD5加密，加优化表单

    <form action="index.html" method="post" onsubmit="return exam()">//通过表单提交时触发函数，函数返回boolean值，再return给表单
    <span>用户名:</span><input type="text" name="username" id="username">

//表面上的用户输入的密码框
    <span>密码:</span><input type="password"  id="input-password">

//实际隐藏的密码框，防止加密时密码框数据变动被看出加密
    <input type="hidden" id="password_md5" name="password">
    <input type="submit" value="提交">
</form>
<script>
    var username=document.getElementById("username")
    var password_input=document.getElementById("input-password")
    var password_md5=document.getElementById("md5-password")
    
    function exam(){
        //提前判断用户名或者密码是否为空
        if(username.valueOf().value==="")
            alert("用户名不能为空");
        else if(password.valueOf().value==="")
            alert("密码不能为空");
        //拦截密码通过MD5加密
        password_md5=md5(password_input.valueOf().value);
        return true;//可以判断表单是否提交，true就提交，false就不提交
    }

九.jQuery

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

  1. jQuery下载：https://jquery.com/

    或者直接使用在线链接引入：

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  2. 使用公式：$(selector).action()（selector为选择器，还可以写系统对象比如document，window等等，action为操作，可以写事件或者是函数）

    <a href="" id="a1">点我</a>
   
   <script>
       $('#a1').click(function (){
           alert("你好！")
       })
   </script>

  3. 选择器（selector）：

    //原生js，选择器少，麻烦不好记
document.getElementsByTagName();//标签选择器
document.getElementsByClassName();//类选择器
document.getElementById();//id选择器

//jQuery选择器 css的选择器全部都能使用
$('p').click();//标签选择器
$('#id').click();//id选择器
$('.class').click();//类选择器

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

  4. 事件（action）：

    1. 鼠标事件：onmouseXXX();

      mouse:<span id="s1"></span>
<div id="d1"></div>

<script>
    //$(document).ready(function (){})由于被频繁使用，可如下简写
    $(function (){
        $('#d1').onmousemove(function (e){
            $('#s1').innerText("'x'+e.pageX+'y'+e.pageY")
            }
        )
    })
</script>

    2. 键盘事件：

  5. 操作dom：

    $('#d1 p[name=pp]').text();//获得值
$('#d1 p[name=pp]').text('123334');//设置值
$('#d1 p[name=pp]').html();//获得值
$('#d1 p[name=pp]').html(123);//设置值

//设置css样式
$('#d1 p[name=pp]').css({'color':'red'});//方法一，一次可以改多个
$('#d1 p[name=pp]').css('color','blue');//方法二，一次只能改一改，写多个改第一个

//元素的显示和隐藏，本质：display：none
$('#d1 p[name=pp]').hide()//隐藏
$('#d1 p[name=pp]').show()//显示

十.巩固小技巧

  1. 如何巩固js（看jQuery源码，看游戏源码）
  2. 巩固html，css（扒网站，全部下载下来，然后对应看效果）
版权声明：本文为xiaoye-Blog原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiaoye-Blog/p/16502801.html