JavaScript学习后的总结

最新推荐文章于 2024-07-26 20:46:33 发布

乐幼

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量780

点赞数 25

文章标签： javascript

本文链接：https://blog.csdn.net/leyou921/article/details/135087339

版权

JavaScript

引入js

内部标签

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script>
      alert("你好！！！！")
   </script>
</head>
<body>

</body>
</html>

在js文件中写，html导入即可

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="index.js"></script>
</head>
<body>

</body>
</html>

js流程控制

<script>
   const num = "aj";
   if (num < 11) {
      alert("小于11！！！");
   } else if (num == 10) {
      alert("等于10！！！");
   } else {
      alert("其他");
   }
   console.log("这是一个最好的时代，\n科技的发展给予了每个人创造价值的可能性；\n这也是一个最充满想象的时代，\n每一位心怀梦想的人，终会奔向星辰大海。\n百度与你们一起仰望星辰大海，携手共筑未来！\n");
   console.log("%c嘻嘻","color:red");
</script>

js浏览器如何调试
1. f12打开检查
2. 选择source
3. 选择资源，点击源码左侧（断点）
4. 刷新页面即可触发断点进行调试
js创建对象

let person = {
   name : "lx",
   age : 18
}

使用严格检查模式 ‘use strict’

//使用严格检查模式，预防JavaScript的随意性会产生的一些问题
//前提是idea支持ES6语法
<script>
   //放在第一行！！
   'use strict';
</script>

js操作数组常用

<script>
   //Array数组可以包含任意对象的数据类型
   let arr = [1,2,3,null,5,6];

   //循环数组(number是索引)
   for (let number in arr) {
   console.log(arr[number])
}

   //数组foreach循环
   arr.forEach(value => {
   console.log(value)
})

   //数组长度
   console.log(arr.length);

   //获取指定值在元素中的索引
   console.log(arr.indexOf(5));

   //slice截取数组是生成了一个新的数组
   //截取数组，从下标2开始截止到尾
   console.log(arr.slice(2));
   //截取数组，从下标1开始，截止到下标3（前包后不包）
   console.log(arr.slice(1,4));

   //往数组最后面放入一个数据
   arr.push(88);
   console.log(arr)

   //将数组中最后一个数据弹出
   arr.pop();
   console.log(arr);

   //往数组最前面放入一个数据
   arr.unshift(66);
   console.log(arr);

   //将数组中第一个数据弹出
   arr.shift();
   console.log(arr);

   //concat将一个新的数组拼接到另一个数组（会生成一个新的数组）
   console.log(arr.concat([66, 77, 88]));

   //数组排序
   console.log(arr.sort());

   //数组反转
   console.log(arr.reverse());

   //打印拼接数组，可以使数组用指定的字符串连接
   console.log(arr.join("*"));

   //多维数组
   let arr2 = [[1,1],[2,2],[3,3]];
   console.log(arr2);

</script>

js操作对象

<script>
   //使用严格检查模式，预防JavaScript的随意性会产生的一些问题
   //前提是idea支持ES6语法
   'use strict';
   //建议使用let定义局部变量
   let i = 1;
   let person = {
      name :"lx",
      age:1,
      hobbys:[1,2,3,true,null,'str']
   }
   //对象新增属性
   person.height = 180;
   person["sex"] = '男'

   //删除对象属性
   delete person.hobbys;
   delete person["sex"];

   //判断一个属性是否在对象中，属性需要双引号扩起来，js中key都是字符串类型，value可以是任意类型
   console.log("name" in person);
   console.log(person);
</script>

ES6新特性Map和Set集合

<script>
        'use strict';

        //ES6新特性map和set

        //map中key不重复
        let maps = new Map([["lx",99],["hwq",100]]);
        //根据key获取map中对应的值
        maps.get('hwq');
        //map中新增或修改key、value
        maps.set("hei",100);
        //map中删除指定key
        maps.delete('hei');

        //set无序不重复集合
        let sets = new Set([1,2,3,3,3,4,"hwq",'ha']);
        //判断一个元素是否处于set集合中
        sets.has(1);
        //Set中新增元素
        sets.add("lx");
        //删除Set集合中指定元素
        sets.delete('ha');
        
        //遍历数组：1：for in获得的是索引  2：for of可以直接获取到值
        
        //不建议使用for in，有bug存在
        // let arr = [1,2,3];
        // arr.name = 6;
        // for (let arrKey in arr) {
        //    console.log(arrKey);
        // }
        // 上面结果会输出0，1，2，name。
        
        
        //通过for of遍历map集合
        for (let map of maps) {
           console.log(map);
        }

        //通过for of遍历set集合
        for (let s of sets) {
           console.log(s);
        }
</script>

函数定义以及多余参数获取

<script>
        //定义函数
        //第一种
        function appendStr(val) {
            console.log(val + '-----');
        }

        //第二种
        var appendStr1 = function (val) {
            console.log(val + '********');
        }

        //这样传多个参数也不会报错，那么怎么获取这些多余的参数呢
        appendStr(1, 2, 3, 4, 5, 6, 7);

        // arguments可以获取到所有的参数，进行附加操作的判断
        function appendStr(val) {
            console.log(arguments);
            if (arguments.length > 1) {
                let value = arguments[1];
                //todo
            }
        }

        //但是arguments包含了我们需要用到的参数，只想获取多余的参数可以用 ...rest来获取，...rest必须放到参数最后面
        function appendStr(val, ...rest) {
            for (let restElement of rest) {
                //打印出除了val本身外，其他附带的参数
                console.log(restElement);
            }
            console.log(val + '-----');
        }
</script>

作用域

定义在函数范围内，只能生效于函数内，函数外使用会报错

<script>
    function a(){
        var num = 1;
    }
    console.log(num);
</script>
//Uncaught ReferenceError: num is not defined

如果多个函数中使用了相同名字的变量，之间互不影响

<script>
    function a(){
        var num = 1;
        console.log(num);
    }
    function b(){
        var num = 1;
        console.log(num);
    }
    a();//输出1
    b();//输出1
</script>

内部函数可以调用外部函数的变量，但是外部函数不能调用内部函数变量

<script>
    function a() {
        var num = 1;
        function b() {
            num1 = num + 1;
        }
        var num2 = num1 + 1;
    }
    a();
</script>
//Uncaught ReferenceError: num1 is not defined

假设内部和外部变量名称重复

<script>
    function a() {
        var val = '外';
        function b() {
            var val = '内';
            console.log(val);
        }
        b();
        console.log(val);
    }
    a();
    //输出内、外
</script>
//js函数变量从自身查找是，会按照由内向外进行查找，如果内部变量和外部变量相同，则内部变量会屏蔽外部变量

养成规范

所有的变量定义都要放在函数头部，不要乱放，便于代码维护

function a(){
    var x = 1,
        y = 1,
        z,a,b,c;//undefined
}

定义全局变量

<script>
    'use strict';
    var x = 1;//x为全局变量，定义在函数外边的即是全局变量
    
    function f() {
        console.log(x);
    }
</script>

定义的全局变量，默认都会绑定到window对象下

<script>
    'use strict';
    var lx = 1;

    function f() {
        console.log(lx);
    }
    f();//输出1
    console.log(window.lx);//输出1
</script>

绑定到window下是不安全的，极有可能出现重名的现象（一般自定义对象，减少重名的可能）

<script>
    'use strict';
    //定义唯一全局变量
    var person = {};

    person.name = 'lx';
    person.age = function calcAge(a, b) {
        return a + b;
    }
    //将自己代码全部放到自己定义的唯一空间名字中，降低全局冲突的问题
</script>

局部作用域（let） 尽量使用let定义局部变量，因为var定义的变量出了方法还能用，会有问题

<script>
    'use strict';
    function xunhuan(){
        for (var i = 0; i < 10; i++) {
            console.log(i);
        }
        console.log(i+1);//问题  var定义的变量出了循环还可以用
    }
    xunhuan();
</script>

ES6引入const常量关键字

const PI = '3.14';//const定义的变量为只读常量，不可被修改

定义对象

方法定义在对象里没有问题

<script>
    'use strict';
    let person = {
        name:'lx',
        birthday:2000,
        age: function (){
            return new Date().getFullYear() - this.birthday;
        }
    }
    //调用对象属性
    person.name
    输出--》 'lx'
    
    //调用对象方法，必须带括号（）
	person.age()
    输出--》 23
</script>

方法单独拿出来写，this无法指向，默认指向的是调用他的那个对象

<script>
    function getAge(){
        return new Date().getFullYear() - this.birthday;
    }
    let person = {
        name:'lx',
        birthday:2000,
        age: getAge
    }
    //age是个方法，所以调用也需要带括号
    person.age()
	输出--》 23
    
    //直接调用方法也需要带括号
	getAge()
	输出--》 NaN//this无法指向，会出现NaN
</script>

使用apply解决this无法指向问题

getAge.apply(person,[]);//通过apply将this指向person对象，参数为空。 所有的方法都会有apply这个方法

Date对象

<script>
    'use strict';
    let time = new Date();
    //获取年
    time.getFullYear();
    //获取月
    time.getMonth(); //0~11 换成中国月份需要 + 1
    //获取日
    time.getDate();
    //获取时
    time.getHours();
    //获取分
    time.getMinutes();
    //获取秒
    time.getSeconds();
    //获取星期几
    time.getDay();
    //获取时间戳
    time.getTime();
    //获得本地时间
    console.log(new Date().toLocaleString());
    //时间戳转日期
    console.log(new Date(1702865004928));
</script>

JSON和对象之间的转换

<script>
    let user = {
        name:"lx",
        age:23
    }
    //将对象转为JSON字符串  输出{"name":"lx","age":23}
    console.log(JSON.stringify(user));

    //将JSON字符串转为对象
    console.log(JSON.parse('{"name": "lx", "age": 23}'));
</script>

原型继承

<script>
    let user = {
        name:"father",
        age:3,
        run: function (name) {
            console.log(name + "在跑！！");
        }
    };
    let lx = {
        name: "lx"
    };
    //指定lx的原型为user对象，拥有其属性和方法
    lx._proto_ = user;

    console.log(lx._proto_.run("hwq"));
    console.log(lx._proto_.age);
    console.log(lx._proto_.name);

</script>

class继承

class是ES6引入的

引入之前写法

function Person(name){
	this.name = name;
}
Person.prototype.hello = function (){
	alert("hello")
}
Person.prototype.hello()

引入之后写法

<script>
    //ES6引入class之后定义一个类、属性、方法
    class Person{
        //有参构造
        constructor(name) {
            this.name = name;
            alert("My Name Is : " + name);
        }
        hello(){
            alert("hello")
        }
    }
    let xm = new Person("小明");
    xm.name;
    xm.hello();
	
    //子类继承父类，构造器中必须有super（）方法
    class BigPerson extends Person{
        constructor(typeName) {
            super(typeName);
            this.typeName = typeName;
        }
        whoIsMe(){
            alert("我是一个"+this.typeName);
        }
    }
    let xh = new BigPerson("大人");
    xh.typeName;
    xh.whoIsMe();
    xh.hello();
</script>

操作BOM对象（Brower Object Model，浏览器对象模型）

window 代表浏览器窗口

window.alert(1)//弹窗
window.innerHeight//浏览器内部高度
window.innerWidth//浏览器内部宽度
window.outerHeight//浏览器外部高度（整个浏览器高度）
window.outerWidth//浏览器外部宽度

screen 屏幕

screen.height
screen.width

location 定位，代表当前页面url信息

location.host//主机
location.reload()//刷新页面，重新加载
location.assign("xxx.com")//设置当前页面跳转新的地址

document 代表当前页面，DOM文档书

document.title//获取当前页面的标题
document.title = "heihei"//修改当前页面标题
document.cookie//获取当前页面cookie，防止劫持cookie，服务器端可以设置 cookie：httpOnly
document.getElementById("en")//根据id名称获取当前页面中具体的文档树节点
document.getElementsByTagName("p")//根据标签获取当前页面中具体的文档树节点
document.getElementsByClassName("en")//根据class名称获取当前页面中具体的文档树节点

history 浏览器历史记录

history.back()//浏览器回退页面
history.forward()//浏览器前进页面

操作DOM对象（核心）（Document Object Model，文档对象模型）

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

获得DOM节点

<body>
    <div id="app">
        <h1>标题</h1>
        <p id = "p1">1</p>
        <p class="p2">2</p>
    </div>
<script>
    let app = document.getElementById("app");
    let h1 = document.getElementsByTagName("h1");
    let p1 = document.getElementById("p1");
    let p2 = document.getElementsByClassName("p2");

    console.log(app.children);//获得父节点下所有子节点
</script>
</body>

更新DOM节点

let a = document.getElementById("app")
a.innerText = '123456' //修改文本的值
a.innerHTML = '<h1>haha</h1>'//可以解析HTML标签
a.style.color = 'red'//改变字体颜色，属性都用 = 字符串包裹
a.style.fontSize = '100px'// - 需要转成驼峰命名

删除DOM节点

DOM节点不能自己删除自己，需要找到父节点，再通过父节点删除子节点

<body>
    <div id="father">
        <h1>标题</h1>
        <p id = "p1">1</p>
        <p class="p2">2</p>
    </div>
</body>
<script>
    // 删除dom对象
    
    // 1.获取要删除的节点
    let delTarget = document.getElementById("p1");
    // 2.获取该节点的父元素
    let fa = delTarget.parentElement;
    // 3.删除
    fa.removeChild(delTarget);
    
    //删除是动态的过程，删除多个节点的时候，children是时刻变化的，下面这样删除会报错
    //Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
</script>

插入节点

上面说到的更新DOM节点，如果节点中是空的，我们可以通过innerText、innerHTML来更新，但是如果里面有值的话，就不能在往里面inner了，会把原来的所有元素全部覆盖掉，所有要用到插入

已经存在的节点，可以通过appendChild将元素追加到另一个元素中

<body>
    <p id = "js">Java Script</p>
    <div id="list">
        <p id="se">Java SE</p>
        <p id="ee">Java EE</p>
        <p id="me">Java ME</p>
    </div>
</body>
<script>
    let js = document.getElementById("js");
    let list = document.getElementById("list");
    //将js节点插入到list中最后一位
    list.appendChild(js);
</script>

如果节点不存在，可以通过createElement创建节点

<body>
    <p id = "js">Java Script</p>
    <div id="list">
        <p id="se">Java SE</p>
        <p id="ee">Java EE</p>
        <p id="me">Java ME</p>
    </div>
</body>
<script>
    //元素不存在，则创建节点
    let newEle = document.createElement('h1');
    // newEle.id = "newEle";//和下方代码效果一样，通常使用下面的
    newEle.setAttribute("id","newEle");
    newEle.innerText = "Hello，LX";
    //上面三步执行完，相当于手写了html代码 <h1 id = "newEle"> Hello，LX </h1>

    list.appendChild(newEle);
</script>

插入指定节点前面

<body>
    <div id="list">
        <p id="se">Java SE</p>
        <p id="ee">Java EE</p>
        <p id="me">Java ME</p>
    </div>
</body>
<script>
    let list = document.getElementById("list");
    
    //元素不存在，创建节点
    let newEle = document.createElement('h1');
    newEle.setAttribute("id","newEle");
    newEle.innerText = "Hello，LX";
   	
    //目标节点
    let me = document.getElementById("me");
    //插入到指定元素前面，insertBefore，第一个参数为新的节点，第二个是要往哪个节点前插入的目标节点
    list.insertBefore(newEle,me);
</script>

form表单密码加密较优解决方案

<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return newCheck()">
    <p>
        <label for="uname">用户名：</label>
        <input type="text" placeholder="请输入用户名" id="uname" name="uname">
    </p>
    <p>
        <label for="pwd">密码：</label>
        <input type="password" placeholder="请输入密码" id="pwd">
    </p>
    <input type="hidden" id="jmpwd" name="password">
    <input type="submit" value="登录">
    <!--    <button type="submit">提交</button>-->
</form>
</body>
<script>
    function encryptPassword(password) {
        return window.btoa((encodeURIComponent(password)));
    }
    function oldCheck() {
        let uname = document.getElementById("uname");
        let pwd = document.getElementById("pwd");
        //这种方式虽然前端密码加密了，但是提交的瞬间密码框黑点会瞬间多出好几个
        pwd.value = encryptPassword(pwd.value)
        return true;
    }
    function newCheck() {
        let uname = document.getElementById("uname");
        let pwd = document.getElementById("pwd");
        let jmpwd = document.getElementById("jmpwd");
        //将隐藏的密码框赋值name传输过去，页面上显示的密码框name去掉，这样请求抓包看不到这个参数，并且还是正常数量的黑点，用户体验较好，安全性较高
        jmpwd.value = encryptPassword(pwd.value);
        return true;//返回true通过提交，返回false不提交
    }
</script>

初识jQuery

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
<a href="" id="a">点我</a>
</body>
<script>
    $('#a').click(function (){
        alert("hello,jquery");
    });
    //公式
    // $(选择器).action(function (){});
    //jquery学习网站
    //https://jquery.cuishifeng.cn/
</script>

通过jQuery获取鼠标位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        div{
            width: 500px;
            height:500px;
            border:1px pink solid;
        }
    </style>
</head>
<body>
鼠标位置：<span id="mouseLocation"></span>
<div>
    鼠标移入进来试试
</div>
</body>
<script>
    //当网页加载完成后触发事件
    $(function (){
        $("div").mousemove(function (location) {
            $("#mouseLocation").text('x坐标 :' + location.pageX + ', y坐标 :' + location.pageY);
        })
    })
</script>
</html>