JavaScript学习笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_69080551/article/details/125865873

nu01.快速入门

引入JavaScript

内部标签

<!--    内部引用-->
    <script>
        alert("hell world");
    </script>

外部引用

<!--外部引用-->
    <script src="js/one.js"></script>

02.基本语法入门

<script>
        //JavaScript严格区分大小写
        //定义变量  变量类型  变量名 = 变量值
        var score=70;
        //条件控制
        if (score>=60&&score<80){
            alert("B")
        }else if (score>=80&&score<=100){
            alert("A")
        }else {
            alert("C")
        }
        // console.log(score); 在浏览器控制台打印数据
    </script>

数据类型

变量 var

number

JavaScript不区分小数和整数

字符串

“abc" 'abc'

布尔值

true false

逻辑运算

&& 两个为真，结果为真

|| 一个为真，结果为真

! 真即假，假即真

比较运算符

=

== 等于（类型不一样，值一样为真）

=== 绝对等于（类型一样，值一样为真）

NaN===NaN，这个与所有的数值都不相等，包括自己
只能通过isNanuN(isNaN)来判断这个数是不是NaN

null和undefined

null 空
undefined 未定义

数组

java的数值类型必须是相同的对象，js不需要

var  arr=[1,2,3,"hello",null,true];

或者new

new Array(1,2,"juh");

对象

对象使用大括号，数组中括号，属性之间用逗号隔开，最后一个不需要

 var Person={
            name:"zs",
            age:2,
            subject:["js","java","web"]//最后一个不需要逗号
        }

取对象的值

严格检查模式

<!--
    'use strict';严格检查模式 必须写在Javascript第一行
    局部变量尽量使用let
  -->
    <script>
        'use strict';
        let i=1;
    </script>

03.数据类型详解

字符串

多行字符串编写

let msg=`你好
        hell world
        `

模板字符串

//模板字符串
        let name="zs"
        let msg1 = `hello,${name}`
        console.log(msg1);//hello ,zs

字符串长度

字符串转大写

截取字符串

字符串不可变

数组

定义数组

push和pop

push 往数组尾部添加数据

pop 从数组尾部删除数据

unshift和shift

unshift 往数组头部添加数据

shift 从数组头部删除数据

字符串连接concat

注意 concat()并没有修改数据，只是返回了一个新的数组

对象

var 对象名={属性名，属性值}
使用一个不存在的对象属性，不会报错
动态删减属性，通过delete删除对象属性
动态添加对象属性
判断属性值是否在这个对象中 xxx in xxx
判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

forEach循环和for in

 <script>
//forEach
        var arr = [12,2,3,214,55];
        arr.forEach(function (value){
            console.log(value)
        })


  //for in
        for (let arrKey in arr) {
            console.log(arr[arrKey]);
        }
    </script>

Map和Set

 <script>
        'use strict';
         let map = new Map([['tom',100],['jack',80],['alice',70]]);
        console.log(map)
        map.set('tom',99); //修改
        map.set('admin',60);//增加
        map.get('jack');    //通过keu获取value
        map.delete('tom');  //删除

        var set = new Set([3,1,1,3]);//、无序 不可重复
        set.add(7);     //增加
        set.delete(1);  //删除
        set.has(3);     //是否包含某个元素



    </script>

04.iterable迭代器

  // iterable迭代器
          //遍历map
        for (let number of map) {
            console.log(number)
        }
            //遍历set

        for (let number of set) {
            console.log(number)
        }

05.函数

函数的定义方式一

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

        }

函数的定义方式二

var b = function (x){//匿名函数
            if (x>=0){
                return true;
            }else {
                return false;
            }
        }

变量的作用域

let和const

使用var

function f1() {
            for (var i = 0; i < 100; i++) {
                console.log(i);
            }
            console.log(i+1);//问题 101 不合理
        }

使用let

function f1() {
                for (let i = 0; i < 100; i++) {
                    console.log(i);
                }
                console.log(i+1);//Uncaught ReferenceError: i is not defined at f1
            }

常量const,不可以再修改

const PI=3.14;
console.log(PI);
PI=123;//TypeError: Assignment to constant variable.

06.方法的定义，调用，apply

var eleven={
            name:'eleven',
            birth:2001,
            age:function (){
                return new Date().getFullYear()-this.birth;
            }
        }
        //属性
        eleven.name;
        //方法 需要带括号
        console.log(eleven.age());

this代表啥，拆开上面的代码

 function getAge(){
            return new Date().getFullYear()-this.birth;
        }

        var eleven={
            name:'eleven',
            birth:2001,
            age:getAge
        }

this 是无法指向的，默认指向调用他的那个对象

apply 在js中可以控制this的指向

getAge().apply(eleven,[]);

06.json对象

json字符串和js对象的转换

<script>
        var user = {
            name:"eleven",
            age:3,
            sex:"女"
        }
        //对象转换json字符串
        let jsonUser = JSON.stringify(user);
        console.log(jsonUser);//{"name":"eleven","age":3,"sex":"女"}
        //json字符串转js对象
        let obj = JSON.parse('{"name":"eleven","age":3,"sex":"女"}');
    </script>

07.面向对象编程

原型对象

<script>
        var Student={
            name:"eleven",
            age:3,
            run:function (){
                console.log(this.name+"run...")
            }
        };
        var xiaoming = {
            name: "xiaoming"
        };
        //原型对象
        xiaoming.__proto__=Student;
        var bird={
            fly:function (){
                console.log(this.name+"fly...");
            }
        }
        //xiaoming的原型是Student
        xiaoming.__proto__=bird;//xiaomingfly...
    </script>

class继承

定义一个类，属性，方法

 class Person{
            constructor(name) {
                this.name=name;
            }
            eat(){
                alert("吃饭");
            }
        }
        var friend = new Person("xiaohua");
        friend.eat();

继承

class Me extends Person{
            constructor(name,type) {
                super(name);
                this.type=type;
            }
            eatType(){
                alert("麻辣烫");
            }
        }
        var me = new Me("zs",1);
        me.eatType();

08.操作BOM对象

window

Navigator,封装了浏览器的信息

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

不建议使用这些属性来判断和编写代码

screen

location

代表当前页面的URL信息

location.host
'www.baidu.com'

location.href
'https://www.baidu.com/'

location.protocol
'https:'

reload:f reload() //刷新网页

location.assign("https://www.bilibili.com/") //设置新地址

document

代表当前页面 html DOM文档树

document.title

'百度一下，你就知道'

获取文档具体节点

 <dl id="app">
        <dt>java</dt>
        <dd>javase</dd>
        <dd>javaee</dd>
    </dl>
    <script>
        let dl = document.getElementById("app");
    </script>

获取cookie

document.cookie

history

代表浏览器的历史记录

history.back() //后退

history.forward() //前进

09.操作DOM对象

 <div id="father">
        <h1>标题</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
    <script>
        //获取dom对象
        let p1 = document.getElementById('p1');
        let h1 = document.getElementsByTagName('h1');
        let p2 = document.getElementsByClassName('p2');

        let father = document.getElementById('father');

        let childrens = father.children;//获取父节点所有子节点
        // father.firstChild;
        // father.lastChild;
    </script>

更新节点

        p1.innerText="123";//操作文本
        p1.innerHTML='<strong>abc</strong>';//可以解析html文本标签

        //操作js
        p1.style.color='red';
        p1.style.fontSize='40px';
        p1.style.padding='20px';

删除节点

先要获取父节点，在通过父节点删除自己

<div id="father">
        <h1>标题</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
    <script>
        //获取dom对象
        let p1 = document.getElementById('p1');
        //获取父节点
        let parentElement = p1.parentElement;
        parentElement.removeChild(p1);
        //删除是一个动态过程
        parentElement.removeChild(parentElement.children[0]);
        parentElement.removeChild(parentElement.children[1]);
        parentElement.removeChild(parentElement.children[2]);

    </script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点要注意

插入节点

我们获得某个DOM节点,假设这个节点是空的，我们通过inner HTML就可以添加一个元素，但是这个节点存在，就不可以不能这么干，因为会覆盖

<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>
        //将js放入list里
        //获取js
        let js = document.getElementById("js");
        let list = document.getElementById("list");
        list.appendChild(js);
        //如果不存在某个节点 像插入list后面
        //第一步  先要创建一个p标签
        let newP = document.createElement('a');
        newP.id='newp';
        newP.innerText='12345';
        list.appendChild(newP);
        //创建一个script标签节点
        let myScript = document.createElement('script');
        myScript.setAttribute('type','text/css');
        //创建一个style标签
        let myStyle = document.createElement('style');
        myStyle.innerHTML='body{background-color:red}';//设置标签内容
        //var body = document.getElementsByTagName('body');
        //body[0].style.backgroundColor='red';
        let head = document.getElementsByTagName('head')[0];
        head.appendChild(myStyle);





    </script>

获得和设置表单的值

<p>
        <span>用户名：</span>
        <input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
<!--        注意需要设置name属性-->
        <input type="radio" name="sex" value="men" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
<script>
    let username = document.getElementById('username');
    //获取文本框的值
    username.value
    //修改输入框的值
    username.value='23214';
    let boy = document.getElementById('boy');
    let girl = document.getElementById('girl');
    //对于多选框，单选框，等等固定的值，boy.value只能取到当前的值
    boy.checked;//true 被选中
</script>

表单提交验证及md5加密

md5在线连接

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<body>
<!--表单绑定事件-->
<form action="https://www.bilibili.com/" method="post" onsubmit="return check()">
    <p>
        <span>用户名:</span>
        <input type="text"  name="uname" id="uname">
    </p>
    <p>
        <span>密码:</span>
        <input type="password" id="input-pwd">
    </p>
<!--    隐藏真实密码-->
    <input type="hidden" id="md5-pwd" name="password">
<!--   onclick点击事件 -->
    <button id="btn" type="submit" >提交</button>
</form>
    <script>
        function check() {
            let uname = document.getElementById('uname');
            let inputpwd = document.getElementById('input-pwd');
            let md5pwd = document.getElementById('md5-pwd');
            // inputpwd=md5(inputpwd.value);用户体验不好，密码变长
            md5pwd.value=md5(inputpwd.value);
            return true;
        }
    </script>
</body>

09.初始Jquery和公式

公式
$(选择器).action()

在线引入jquery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<a href="#" id="jq">点我</a>

    <script>
        // //公式
        // $(选择器).action()
        $('#jq').click(function (){
           alert(1);
        });
    </script>

选择器

<script>
        //原生js
        document.getElementsByTagName('p');//标签
        document.getElementsByClassName('p');//类
        document.getElementById('p');//id

        //jquery
        $('p').click();//标签
        $('.class').click();//类
        $('#id').click();//id

    </script>

事件

mouse: <span id="mouseData"></span>
    <div id="mousemove">点击鼠标</div>

    <script>
        $(function () {
            $('#mousemove').mousemove(function (e) {
                $('#mouseData').text('x='+e.pageX+'y='+e.pageY)
            })
        });
    </script>

不会就查文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)