JavaScript学习笔记-CSDN博客

本文链接：https://blog.csdn.net/Hanxiaomo_/article/details/118244507

快速入门

引入JavaScript
1：内部标签

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        alert('hello world')
    </script>

</head>
<body>

<!--这里也可以放js-->
</body>
</html>

2:外部引入

    <script src="js/js.js"></script>

alert('hello world')

基本语法入门

//1 定义变量  ：      变量类型  变量名 =变量值
var score=70;
//条件控制
if (score < 60) {
    alert('不及格')
}else if (score < 80) {
    alert("良好")
}else if (score <100){
    alert('优秀')
}

浏览器开发者工具
在这里插入图片描述
elements ：html页面和css
console ：在浏览器控制台内输入代码
常用打印代码（相当于java的sout）：console.log（score）
sources ：调试js代码地方，可以在此处打断点，刷新即可重新运行
network : 抓包的地方
application ：查看cookie和session

数据类型入门
变量

//1 定义变量  ：      变量类型  变量名 =变量值
var score=70;
不能以数字开头

number :

js不区分小数和整数，Number 
整数：123
浮点数：123.1
科学计数：1,123e3

输出nan ：不是一个数字 not a number
infinity ：无限大

字符串:

'a'  “abc”
转义字符

布尔值

true ,false

逻辑运算

&& 与
||  或
! 非

比较运算符

= 赋值
== 等于判断 (类型不一样，值一样也为true)
=== 绝对等于  （必须类型值都一样才为 true）

尽量使用===进行比较

须知：

NaN===NaN ，返回false，nan与所有数值都不相等，包括自己
只能通过 isNaN（NaN）来判断是否是NaN

浮点数问题：

	（1/3）===（1-2/3） 返回false
	浮点数存在精度损失，尽量避免使用浮点数运算
	可以使用math.abs(a-b)<0..000000001 这种来判断ab两个浮点数是否相等（math。abs-绝对值）

null与undefined

null 空
undefined 未定义

数组

java中数组元素必须类型相同，但js不需要
var arr=[1,2，3,4，5，‘hello’，null。true]

对象

对象是大括号，数组是中括号
每个属性用逗号隔开，最后一个不需要添加

var person = {
    age:3,
    name:'han',
    sex:'男',
    hobby:['学习','睡觉','打游戏']
}

取对象的值

person.name

严格检查模式strict

		//前提：use strict必须写在js的第一行，而且需要idea设置支持es6语法
        // 严格检查模式，预防js的随意性导致产生的一些问题
        'use strict'
        //这样定义会变成全局变量，局部变量建议使用let
        i=1
        //    let i= 1   let是es6产生的

在这里插入图片描述

数据类型

字符串

1、正常字符串使用单引号 ’ ’ 或者双引号" "包裹

2、注意转义字符\

\'  输出‘
\n 换行
\t 缩进tab
\u4e2d  即unicode字符  规格是\u#### 
\x41  Asc11字符

3、多行字符串编写

        //tab上面的`键
        var s=`
        a
        b
        c
        `

4、模板字符串

        //tab上面的`键
        let name='han';
        let age=3;
        let msg =`你好啊,${name}`

5、字符串长度
str.length

var student='student'
console.log(student.length)

6、字符串不可变
在这里插入图片描述
7、大小写切换

8、获取指定下标

student.indexOf("t")

9、截取字符

student.substring(1,3)  //从第一个字符串截取到第三个，不包括第三个 ，左闭右开
sutdent.substring(1) //从第一个截取到最后一个

数组

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

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

长度

arr.length

给arr.length赋值，数组大小就会发生变化,如果赋值过少，元素就会丢失

indexOf,通过元素获得下标索引

在这里插入图片描述
但是indexOf（）括号里，数组1与字符串“1”是不同的

slice（）截取array的一部分，返回一个新数组,类似于string中的substring
push（）,pop（）
push 压入尾部

在这里插入图片描述
pop：从尾部弹出

unshift（），shift（）头部

unshift()在头部压入元素
shift（）弹出头部的一个元素
sort（）排序

arr.sort()
(10) ["1", 2, "2", 3, 4, 5, 6, "a", "abc", "b"]

reverse（）元素反转
concat（）拼接

concat()不会改变原来的数组，只是返回了一个新的数组
9.join（）连接符
打印拼接数组，使用特点的字符串连接

10.多维数组

对象

JavaScript中所有的键都是字符串，值是任意对象
若干个键值对做属性

var 对象名={
		属性名： 属性值，
		属性名： 属性值，
		属性名： 属性值，
}

        var person={
            name:'han',
            age: 3,
            sex: '男'
        }

js中的对象用{。。。}包起来，键值对描述属性xxxx : xxxx ，多个属性之间使用逗号隔开，最后一个属性不加逗号！

对象赋值
使用一个不存在的对象属性，不会报错，只有undefined
动态的删减属性
通过 delete删除
动态的添加属性
判断属性值是否在这个对象中 a in b
因为js中所有的键都是字符串，所以a需要加“ ”

需要给键加上“”才行

而且person跟java中一样会继承了父类的属性
hasOwnProperty（）判断一个属性是否是这个对象自身用都的属性

流程控制

if 判断

        var age=3;
        if(age>3){
            alert("111")
        }else{
            alert("222")
        }

while循环,注意避免程序死循环

        var age =1;
        
        while(age < 100){
            age=age+1;
            console.log(age);
        }

for循环

        var age =1;

        for (let i = 0; i < 100; i++) {
            if (i % 10 === 0)
            console.log(i)
        }

foreach循环

        var list=[1,2,3,45,56,'q2',32,56] ;

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

for…in

        var age =[1,2,2,4,5,6,7,8,9];

        for(var i in age){
            console.log(age[i])
        }

for…of

        var age = [1,2,3,4,5,6,6];
        for(var i of age){
            console.log(i)
        }

此处需要注意 var i in age 的i ，取的是age的索引

Map与Set

    Map与Set是ES6的东西

Map:

        var map = new Map([["韩",100],["yin",99]]);
        var name =map.get("yin");//通过ket获得value
        map.set("admin",11); //增加或修改一个键值对
        map,delete("yin");//删除
        console.log(name);

遍历Map：

        var map =new Map([['han',1],['ming',2]]);
        for (let i of map){
            console.log(i)
        }

Set: 无序不重合的集合

        var set = new Set([1,1,1,2,3,4,12,2]);//set可以去重
        set.add(88); //增加
        set.delete(1); //删除
        console.log(set.has(3)); //判断集合是否包含某个元素

set遍历也可以用for …of

函数

定义函数

绝对值函数:

    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(-10)

JavaScript可以传任意个参数，也可以不传参数

abs（1,2,3,5）

传进的多个参数存在,使用arguments进行操作

    function abs(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代表了传递进来的所有参数的集合，是一个数组
但是：arguments包含了所有的参数，如果有时候想单单获取多余的参数，需要排除已有的参数。

使用rest ：获取除了已经定义的参数外的其他所有参数
例如 function abs（a,b）{}
假如调用的时候是abs（1,2,3,4,5），rest会只获取3,4，5形成一个数组
以前`

        if (arguments.length>2){
            for (var i =2;i<arguments.length;i++){

            }
        }

使用rest （需要在参数里定义，在最后面使用…rest标识）

    function aaa(a,b,...rest){
		console.log(rest);
    }

如果不存在参数，可以手动设置异常来规避

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

变量

在js中，var的定义是有作用域的
如果在函数体内声明，那么在函数体外不可用

    function q() {
        var x=1;
        x=x+1;
    }

    x=x+1;//此处报错，x未定义

如果两个函数使用了相同的变量名，只要在函数内部，他们互不冲突
内部函数可以访问外部函数成员，反之不行

在js中，函数查找变量从自身函数开始，由内向外查找,如果外部存在同名函数变量，则内部函数会屏蔽外部函数的变量

    function q() {
        var x=1;

        function q2() {
            var x ='a';
            console.log('inter--->'+x);//A
        }
        console.log('outer---->'+x);//1
        q2();
    }

提升变量的作用域

    function q() {
        var x='x--->'+y;
        console.log(x);
        var y='y';
    }

在这里插入图片描述
js的执行引擎，自动提升了y的声明，但不会提升y的赋值
这个是在js建立之初就存在的。养成规范，变量的定义放在函数的头部，不要乱放

全局函数

    var x=1;
    function q() {
        console.log(x);
    }
    f();
    console.log(x);

定义在最外部的变量就是全局变量

全局对象window

    var x=1;
    alert(x);
    alert(window.x)

window对象下默认绑定了所有的全局变量
alert（）这个函数本身也是一个windowd变量

    var x=1;
    window.alert(x);
    var old_alert=window.alert;
    old_alert(123);
    
    window.alert=function () {};

    //此时发现alert失效了
    window.alert(456);

    //恢复
    window.alert=old_alert;
    window.alert(123456);

js实际上只有一个全局作用域，任何变量（函数也可以视为变量），假如没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError 引用异常。

由于所有的全局变量都会绑定到window上。如果不同的js文件使用了相同的全局变量，会产生冲突
所以，把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

    //唯一全局变量
    var Han ={};

    //定义全局变量
    Han.name="Hanming";
    Han.add =function (a,b) {
        return a+b;
    }

局部作用域let

    function f() {
    for (var i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1);//此处i出了作用域还能使用
    }

使用let关键字代替var定义，解决局部作用域冲突问题

    function f() {
    for (let i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1);//报错，i为定义
    }

常量const

ES6之前，常亮用大写字母定义，建议不要修改，但是这样定义的常量依然可以修改
ES6引入了常量关键字 const

    const PI='3.14';//只可读
    console.log(PI);
    PI='123';
    console.log(PI);

在这里插入图片描述

方法

定义方法

    var han ={
    	//属性
        name: 'han',
        year : 2001,
        //方法
        age:function () {
            var now=new Date().getFullYear();
            return now - this.year;
        }
    }

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

    function getAge() {
        var now=new Date().getFullYear();
        return now - this.year;
    }
    var han ={
        name: 'han',
        year : 2001,
        //方法
        age:getAge
    }

this指向的是调用他的对象
在这里插入图片描述

apply

getAge.apply(han,[]);//this指向了han对象，参数为空

在这里插入图片描述

内部对象

标准对象

在这里插入图片描述

Date

基本方法使用

    var now =new Date();//VM73:1 Sun Jul 04 2021 17:30:50 GMT+0800 (中国标准时间)
    now.getFullYear();//年
    now.getMonth();//月    0~11代表月 ，其他都正常
    now.getDate();//日
    now.getDay();//星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒

    now.getTime(); // 时间戳  全世界统一 从1970年1.1 零时开始到现在的毫秒数

    console.log(new Date(1625391050174));  参数输入时间戳可以返回该时间戳的时间

转换
在这里插入图片描述

JSON

JSON是一种轻量级的数据交换格式
在js中一切皆为对象，任何js支持的类型都可以用json来表示：
格式：对象用{}
数组用[]
所有键值对用 key ： value

JSON字符串和js对象的转化

    var user = {
        name : "han"  ,
        age : 18,
        sex : "男"
    };

    //将对象转化为JSON字符串
    var json = JSON.stringify(user);

    //将JSON字符串解析成对象
    var obj =JSON.parse('{"name":"han","age":18,"sex":"男"}');//单引号双引号要岔开

JSON和JS对象的区别

var obj ={a:'hello',b:'hello'};
var json="{'a':'hello','b':'hello'}"

面向对象

java中面向对象编程由类（模板）、对象（具体的实例）实现
而js中则更简单

原型继承

    var user = {
        name : "han"  ,
        age : 18,
        sex : "男",
        run : function () {
            console.log("run。。。")
        }
    };

    var xiaoming ={
        name:"ming"
    };
    //小明的原型是user
    xiaoming.__proto__ =user; //小明的原型对象=user

class继承

class关键词是在ES6引入的

    class Student{
        constructor(name){
            this.name=name
        }
        hello(){
            alert("hello")
        }
    }

    class XiaoStudent extends Student{  //继承
        constructor(name,grade){
            super(name);              
            this.grade=grade
        }
        
        myGrade(){
            console.log("我是小学生")
        }
    }

    var xiaoming=new Student("xiaoming");
    var xiaohong=new XiaoStudent("xiaohong");

原型链

proto:每一个对象都有他的原型，最终都会指向object原型
在这里插入图片描述

操作BOM对象

BOM：浏览器对象模型

浏览器内核：

IE 6-11
CHrome
Safari
Firefox

三方

qq浏览器
360浏览器
```
  window
```

window代表浏览器窗口
在这里插入图片描述

	Navigator

navigator封装了浏览器的信息
在这里插入图片描述
navigator对象会被人为修改，不建议使用这些属性判断编写代码

screen

屏幕的尺寸
在这里插入图片描述

location

location代表当前页面的URL信息
在这里插入图片描述

host: "local-ntp"  //主机
href: "chrome-search://local-ntp/local-ntp.html"  //当前指向的位置
protocol: "chrome-search:" //协议
reload: ƒ reload()   //刷新网页

设置新的地址

location.assign("https://www.bilibili.com/") //所有打开该网页的都会重定向到blbl

document

document 代表当前的页面，HTML DOM文档树
在这里插入图片描述
获取具体的文档树节点

<dl id="123">
    <dt>1</dt>
    <dd>2</dd>
    <dd>3</dd>

</dl>

<script>
    var dl = document.getElementById("123")
</script>

获取cookie

document.cookie

history

history代表浏览器的历史记录
在这里插入图片描述
back() 网页后退
forward（）网页前进

操作DOM对象

浏览器的网页就是一个Dom树形结构
要想操作Dom节点，首先要获得这个节点

获得Dom节点

    //对应css选择器
    var h1=document.getElementsByTagName('h1'); //标签
    var p1 =document.getElementById('p1'); //id
    var p2=document.getElementsByClassName('p2'); //class
    var father=document.getElementById('father');

    var childrens=father.children; //获取该节点下所有子节点
    //father.firstChild

这只是原生代码，以后都使用jQuery

更新Dom节点

<div id="id1">

</div>

<script>
    var id1=document.getElementById("id1")

    
</script>

id1.innerText ="123"  //修改文本的值
id1.innerHTML="<strong>123</strong>" // 解析HTML文本标签

操作css
在这里插入图片描述

删除节点

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

<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)
</script>

或者

    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);

此处需要注意，删除多个节点时候，children是在时刻变化的，先执行第一个删除children【0】，再执行第二个的时候，现在的children【1】就是执行第一条时的children【2】

创建和插入DOM节点

获得了一个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>

在这里插入图片描述
创建新标签,实现插入

    //通过js创建一个新节点
    var newp = document.createElement('p');//创建一个p标签
    newp.id='newp';
    newp.innerText ='newp';

    list.appendChild(newp);

	 //创建一个标签节点(通过这个属性，可以设置任意的值)
    var myscript = document.createElement('script');
    myscript.setAttribute('type','text/javascript')

在这里插入图片描述

    //修改body的背景颜色
    var body=document.getElementsByTagName('body');
    body[0].setAttribute('style','background-color:red')
    //也可以创建style标签来实现
    var mystyle=document.createElement('style')
    mystyle.setAttribute('type','text/css')
    mystyle.innerHTML='body{background-color:chartreuse;}';//设置标签内容
    document.getElementsByTagName('head')[0].appendChild(mystyle)

insert

<body>

<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 ee =document.getElementById('ee');
    var js =document.getElementById('js');
    var list =document.getElementById('list');
    //将js插入到ee前，第一个参数是新节点，第二个参数是目标节点
    list.insertBefore(js,ee);

</script>

操作表单

表单

文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏框 hidden
密码框 password

表单的目的：提交信息

获取信息

<form action="post">
    <p>
        <span>用户名:</span> <input type="text" id="username">
    </p>
    <p>
        <!--多选框的值就是定义好的value值-->
        <span>性别:</span>
        <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女
    </p>
</form>

<script>
    var input_text= document.getElementById('username')
    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value=123;
    var sex=document.getElementsByName('sex');
    boy=sex[0];
    gril=sex[1];
    //对于单选框、多选框等等固定的值，boy.value只能取到当前的值
    boy.checked;//查看返回的结果，是为true，即为选中
    gril.checked=true; //赋值
</script>

在这里插入图片描述

提交表单

<body>

<form action="#" method="post" >
    <p>
        <!--此处需要有name才能被抓包-->
        <span>用户名:</span> <input type="text" id="username" name="usename">
    </p>
    <p>
        <span>密码：</span><input type="text" id="psd" name="pasword">
    </p>
    <!--绑定事件-->
    <button type="submit" onclick="checka()">提交</button>
</form>

<script>
    function checka() {
        var uname =document.getElementById("username");
        var pwd =document.getElementById("psd");
        console.log(uname.value);
        console.log(pwd.value);
    }
</script>

md5加密
Md5的工具类

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>

        var uname =document.getElementById("username");
        var pwd =document.getElementById("psd");
        //md5算法
        pwd.value=md5(pwd.value);

在这里插入图片描述
或者改成这样，增加一点安全性

<form action="#" method="post" >
    <p>
        <!--此处需要有name才能被抓包-->
        <span>用户名:</span> <input type="text" id="username" name="usename">
    </p>
    <p>
        <span>密码：</span><input type="password" id="psd" >
    </p>
    <input type="hidden" id="md5-password" name="pasword">
    <!--绑定事件-->
    <button type="submit" onclick="return checka()">提交</button>
</form>

<script>
    function checka() {
        var uname =document.getElementById("username");
        var pwd =document.getElementById("psd");
        var md5pwd=document.getElementById("md5-password");

        md5pwd.value=md5(pwd.value)
        //可以校验判断表单内容，true就是通过，false不能提交
        return true;
    }
</script>

表单绑定提交事件
使用onsubmit绑定一个提交检测的函数
这个函数的结果返回给表单，使用onsubmit接收
onsubmit =“return checka（）”

jQuery

jquery库有大量现成的js函数
文档推荐查看https://jquery.cuishifeng.cn/index.html
在线cdn引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入,在线的-->
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>

</body>
</html>

初识公式

公式: $(selector).action

<a href=""id="test_jquery">点我</a>

<!--公式: $(selector).action-->

<script>
    //选择器就是css的选择器
    $('#test_jquery').click(function () {
        alert("hello");
    })

</script>

选择器

    //原生js
    document.getElementById() //id
    document.getElementsByTagName()   //标签
    document.getElementsByClassName()  //类

    //jquery  css中的选择器它全部都能用
    $('p').click();//标签
    $('#id1').click();//id
    $('.class1').click();//类

事件

事件有键盘事件、鼠标事件、其他时间，在jquery中都被写成了函数，差文档进行调用即可

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入,在线的-->
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divmove{
            width: 500px;
            height: 500px;
            border: red solid 2px;
        }
    </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>

在这里插入图片描述

jQuery操作DOM

<ul id="tesxt_ul">
    <li class="js">js</li>
    <li name="python">python</li>
</ul>

节点文本操作

    $('#tesxt_ul li[name=python]').text();//获得值
    $('#tesxt_ul li[name=python]').text("abcd");//设置值
    $('#tesxt_ul').html(); //获得值 
    $('#tesxt_ul').html('<strong>123</strong>'); //设置值

css操作

    $('#tesxt_ul li[name=python]').css('color',"red"); //传入键值对

元素的显示和隐藏

    $('.js').show();
    $('.js').hide();
    $('.js').toggle();//切换隐藏和显示（如果隐藏就切换为显示，反正亦然）

操作窗口

$(window).width()
$(window).height()

JavaScript学习笔记

文章目录

快速入门

严格检查模式strict

数据类型

字符串

数组

对象

流程控制

Map与Set

函数

定义函数

调用参数

变量

方法

内部对象

Date

JSON

面向对象

操作BOM对象

操作DOM对象

获得Dom节点

更新Dom节点

删除节点

创建和插入DOM节点

操作表单

获取信息

提交表单

jQuery

初识公式

选择器

事件

jQuery操作DOM

“相关推荐”对你有帮助么？