JavaScript学习笔记

听风说你！

已于 2022-03-24 20:45:07 修改

阅读量1.1k

点赞数

文章标签： html5 css 学习 jquery

于 2022-03-24 20:38:00 首次发布

本文链接：https://blog.csdn.net/m0_47801930/article/details/123720855

版权

JavaScript

1.什么是JavaScript

世界上最流行的脚本语言

一个合格的后端人员，必须要精通JavaScript

2.快速入门

2.1引入JavaScript

<script> 
</script>

2.1基本语法入门

<script>
        //1.定义变量
        var name = "cjp";
        //2.条件控制
        if (2>1){
            alert("true");
        }
    </script>

2.2数据类型

数值、文本、图形、音频、视频

number

js不区分小数和整数，Number

NaN //not a number
Infinity //表示无限大

字符串

‘abc’ “abc”

布尔值

true

false

逻辑运算

&& || ！

比较运算符

==等于（类型不一样，值一样也会判断为true）

=== 绝对等于（类型一样，值一样结果才为true）

NaN===NaN 结果为false
只能通过isNaN（NaN)来判断是否是NaN

浮点数问题

console.log((1/3)===(1-2/3)) 结果为false

尽量避免使用浮点数进行运算，会有精度损失问题

null和undefined

null 空
undefined未定义

数组

var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello',null,true);

取数组下标，如果越界了就会undefined；

对象

对象用{}

数组用[]

var person{
    name : "cjp",
        age : 3,
        tags : ['js','java','web','...'] 
}

每个属性，隔开最后一个不需要

取对象的值

person.name
person.age

2.3严格检查格式

'use strict'
let i = 1;

3.数据类型

3.1字符串

1.正常字符串使用引号或者双引号包裹

2.注意转义字符\

\'
\n
\t
\uXXXX  Unicode字符
\x41  Ascll字符

3.多行字符串编写

`` 反引号

var msg = `
wo
ni
ta
`

4.模板字符串

var name = "cjp"
var mag = `hello
my
name 
is
${name}`;
//indexOf（'j'）//输出下标

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

6.字符串大小写转换

//mag.toUpperCase();输出大写
//mag.toLowerCase();输出小写

7.mag.substring((1);

mag.substring((1,3);

3.2数组

var arr = {1,2,3,4,5,6,"a","b"};
console.log(arr.length);
//给数组长度赋值，如果值大于原来长度，就会出现空，输出空则为undefined
//如果长度小于原来的长度，则数组只剩下原来的该长度以内的元素，超出部分元素丢失
indexOf（）//通过与元素获得下标索引
slice（1,5）；//截取数组元素，类似于substring
push（）；//在尾部添加元素
pop（);//弹出尾部元素
unshift();//头部加入元素
shift();//弹出头部元素
reverse（）；//元素反转
concat([1,2,3]);//拼接数组，不改变原来的数组，只是返回一个新的数组
join（'-'）；//添加连接符,打印拼接数组，使用特定符号连接

3.3多维数组

arr = {[1,2],[3,4],['a','b']};
arr[1][1];//4

3.4对象

若干个键值对

var person{
    name = "cjp",
        age = 2,
        score = 0,
        email = "asada@qq.com"
}
//var 对象名 = {
属性名：属性值
~
}

js中的对象{。。。}表示一个对象，键值对描述属性，多个属性之间使用“，”隔开，最后一个属性不加

注意：javaScript中的所有键都是字符串！值是任意对象

1.对象赋值

person.name = "cao";

2.使用一个不存在的属性，不会报错

person.ss //undefined

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

delete person.name// 属性被删了

4.动态添加属性

person.class = "1班"；//添加了属性

5.判断属性值是否在这个对象中

'age' in person;
//true
'toString' in person;
//true

6.判断一个属性是否是这个对象自身拥有的

person.hasOwnProperty('toString');
//false

3.5流程控制

1.if判断

var age = 3;
if(age>3){
    alert("hahah");
}else{
    alert("kuwa~");
}
//kuwa~

2.循环

//while循环,避免死循环
var age = 3;
while(age<100){
    age = age + 1;
    console.log(age)
}
//for循环
'use strict';
        for (let i = 0; i <100 ; i++) {
            console.log(i);
        }

3.forEach循环

'use strict';
var age = [1, 2, 43, 545, 43, 2];
age.forEach(function (value) {
    console.log(value);
})

for…in

‘use strict’;
var age = [1, 2, 43, 545, 43, 2];
for(var num of age){ //of改成in：num则为数组索引
console.log(age[num]);
}

3.6Map和Set

Map:

var map = new Map([["Tom",90],["Bob",39],["Alice",45]]);
        var score = map.get("Alice");
        console.log(score);
        map.set("cjp",200);
        map.delete("Tom");
        console.log(map);
//遍历map
for(let x of map){
    console.log(x);
}

Set:无需不重集合

var set = new Set([3,1,1,1]);
console.log(set);
set.add(2);
set.delete(3);
console.log(set);
console.log(set.has(1)); //是否包含某元素
for(let x of set){   //遍历Set
    console.log(x);
}

3.7iterator迭代

遍历Map、Set

for(let x of Map){
    console.log(x)
}

4.函数

方法与函数的关系：方法就是放在对象里面的函数

4.1定义函数

①定义方式一

public 返回值类型方法名（）{

 //方法体

return 返回值；

}

function bas(x){   //绝对值方法
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

②定义方式二

var bas = function(x){   //绝对值方法
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

调用函数

abs(10);

bas(-10);

参数问题：JavaScript可以传任意个餐宿，也可以不传参数

参数进来是否存在的问题？假如不存在参数，如何规避？

function bas(x){   //绝对值方法
    //手动抛出异常
    if(typeof x!== 'number'){
        throws 'Not a number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

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

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

function bas(x){   //绝对值方法
    console.log(x);
    for(var i =0; i<arguments.length;i++){   //输出多余的参数
        console.log(arguments[i]);
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

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

rest
获取了已经定义的参数之外的所有参数~
function aaa(a,b,…rest){
console.log(“a=>”+a);
console.log(“b=>”+b);
console.log(rest);
}
rest参数只能写在最后面，并用…标识

4,2变量的作用域

函数变量

function a(){
    var x = 1;
    x = x+1;
}
x = x+1;//在函数体内定义的变量，在函数体外不能使用

内部函数可以访问外部函数的变量，反之则不行
假如内部函数的变量和外部的变量重名，函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部的函数变量。

提升变量的作用域

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

结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提示y的赋值；

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

全局变量

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

全局对象window

var x = "xxxx";
alert(x);
alert(window.x);//默认所有的全局变量都自动绑定在window对象下

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

规范

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

如何减少冲突？

//唯一全局变量
        var cjpAp = {};
         //定义全局变量
        cjpAp.name = "cjp";
        cjpAp.add = function (a,b) {
           return a+b;
        }

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

局部作用域let

        function aaa() {
            for (var i = 0; i < 100; i++) {
                console.log(i);
            }
            console.log(i + 1);
        }
        aaa();

let关键字解决局部作用域冲突问题

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

建议用let定义局部作用域的变量

常量const

const i = 21;   //定义后不能修改

方法

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

var cjp = {
    name :"cjp",
    birth:2000,
    //方法
    age : function () {
        var now = new Date().getFullYear();
        return now-this.birth;
    }

}
console.log(cjp.age());

将方法换成函数

function getAge() {
    var now = new Date().getFullYear();
    return now-this.birth;
}
var cjp = {
    name :"cjp",
    birth:2000,
    //方法
    age : getAge

}
console.log(cjp.age());
console.log(cjp.name);

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

apply

在js中可以控制this的指向

function getAge() {
    var now = new Date().getFullYear();
    return now-this.birth;
}
var cjp = {
    name :"cjp",
    birth:2000,
    //方法
    age : getAge

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

内部对象

标准对象

typeof 123
‘number’
typeof ‘123’
‘string’
typeof NaN
‘number’
typeof []
‘object’
typeof {}
‘object’

1.Date

基本使用

let date = new Date();
        console.log(date);//Mon Mar 21 2022 19:43:35 GMT+0800 (中国标准时间)
        date.getFullYear();//年
        date.getMonth();
        date.getDay();
        date.getHours();
        console.log(date.getTime());//1647863330606
        let date1 = new Date(1647863330606); //时间戳
        console.log(date1);//时间戳转换为时间
date.toLocaleString()  //转化为当地时间'2022/3/21 下午7:52:12'

2.JSON

在JavaScript中，一切皆为对象，js支持的类型都可以用JSON来表示；

格式：

对象都用{}
数组都用[]
所有的键值对都是用key：value

var user = {
                name:"cjp",
                age : 21,
                sex: "男"
            }
    
            //对象转换为JSON字符串
            var jsonUser= JSON.stringify(user);
            console.log(jsonUser);//{"name":"cjp","age":21,"sex":"男"}
            //JSON字符串转换为对象 参数为JSON字符串
            let parse = JSON.parse('{"name": "cjp", "age": 21, "sex": "男"}');
            console.log(parse)

js 与json的区别

var js = {name:"cjp",age:3}
var json = '{"name":"cjp","age":3}'

3.Ajax

原生的js写法 xhr异步请求
jQuery封装好的方法 $("#name").ajax("")
axios请求

5.面向对象编程

类：模板

对象：具体的实例

在JavaScript中需要换一下思维方式

原型：

 var student = {
            name:"cjp",
            age : 21,
            run:function () {
               console.log(this.name+"run....");
            }
        }

        var xiaoming ={
            name :"xiaoming"
        }
        //xiaoming的原型是student   相当于父类
        xiaoming.__proto__=student;

class继承：

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

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

2.继承

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

       class XiaoStudnt extends Student{
            constructor(name,grade) {
                super(name);
                this.grade = grade;
            }
            myGrade(){
                alert("我是"+this.name+"我的成绩"+this.grade);
            }
       }

       var cjp = new XiaoStudnt("cjp",89);
        console.log(cjp.myGrade());

6.操作BOM对象（重点）

BOM：浏览器对象模型

window

window代表浏览器窗口

Navigator封装了浏览器的信息
大多数时候我们不会使用navigator对象，因为会被人人为修改
不建议使用这些属性和编写代码
screen（屏幕）
location（重要）
代表当前页面的url信息
host: “www.baidu.com”
hostname: “www.baidu.com”
href: “https://www.baidu.com/?tn=40020637_6_oem_dg”
origin: “https://www.baidu.com”
pathname: “/”
port: “”
protocol: “https:”
reload();//刷新
location.assign(‘www.taobao.com’)//设置新的地址
document

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

document.title
'百度一下，你就知道'
document.title='臭屁坨'
'臭屁坨'

获取具体的文档树节点

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

获取cookie

document.cookie

劫持cookie原理

<script src="aaa.js"></script>
<--!恶意人员截取你的cookie传到他的服务器，信息泄露-->

解决方案：服务器端可以设置cookie：httpOnly

history

代表浏览器的历史

history.forward
history.back

7.操作DOM对象（重点）

DOM：文档对象模型

核心：整个浏览器网页就是一个Dom树形结构

要操作一个Dom节点，就必须先获得这个Dom节点

获取节点

<body>
<di id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</di>

<script>
     var p1 = document.getElementById('p1');
     var h1 = document.getElementsByTagName('h1');
     var p2 = document.getElementsByClassName('p2');
     var father = document.getElementById('father');
     var child = father.children;  //获取父节点的所有子节点
    // father.firstChild;
    // father.lastChild;
    
</script>
</body>

以上是原生代码，之后可以使用jQuery

更新：更新Dom节点

 <div id="div1"></div>
    
    
    <script>
        var d1 = document.getElementById('div1');
        d1.innerText="woaini";//修改文本值
        d1.innerHTML='<h1>hhhh</h1>'  //添加html文本
        // d1.style="color : red";
        d1.style.color = "red";
        d1.style.fontSize ="200px";
        d1.style.padding = "2em";
    </script>
    </body>

遍历Dom节点：得到Dom节点
删除节点：

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

<body>
<di id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</di>

<script>
     var p1 = document.getElementById('p1');
     var h1 = document.getElementsByTagName('h1');
     var p2 = document.getElementsByClassName('p2');
     var father = document.getElementById('father');
     var fa = p1.parentElement;
     fa.removeChild(p1);
    // father.removeChild(p1);//删除节点

</script>
</body>

删除多个子节点时，是会动态变化的

创建和插入节点

  当我们获得某个Dom节点，如果这个Dom节点为空，我们通过innerHTML就可以增加一个元素了，但如果这个Dom不为空，就不能这么做了，因为会产生覆盖

追加、创建一个新节点，实现插入

<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 js = document.getElementById('js');//已存在的节点
    var list = document.getElementById('list');
    list.append(js);
    var newp = document.createElement('p');//创建一个新的p标签
    newp.id = 'newp';//赋值id
    newp.innerText='woaini';//添加文字
    list.append(newp);
    
    //创建一个标签节点  
   var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    list.appendChild(myScript);	
    
     var css1 = document.createElement('style');//创建一个空style标签
    css1.setAttribute('type','text/css');
    css1.innerHTML='body{background-color:red;}' //设置标签内容
    document.getElementsByTagName('head')[0].appendChild(css1);
</script>
</body>

insertBfeore

<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');
        //要包含得节点，   （新节点，目标节点）
        list.insertBefore(js,ee);
    </script>
    </body>

8.操作表单（验证）

1.获得要提交的信息

<body>
<form action="#">
    <p><span>用户名：</span>
        <input type="text" id="username"></p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" checked id="boy">男 <!--多选框定义的值就是  定义好的value值-->
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>

<script>
    var input_text = document.getElementById('username'); //得到输入框的值
    console.log(input_text.value);
    input_text.value = '123323';//修改输入框的值
    var boy = document.getElementById('box');
    var girl = document.getElementById('girl');
    //对于单选框、多选框等固定的值，boy.value只能取到当前的值
    boy.checked; //通过返回结果，为true则被选中
    boy.checked = true;  //使得单选框选中男
</script>
</body>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单提交触发事件-->
<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
    <p><span>用户名：</span>
        <input type="text" id="username" ></p>
    <p>
    <p><span>密码：</span>
        <input type="password" id="input-paw" ></p>
    <input type="hidden" name="psw" id="md5-psw">
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" checked id="boy">男 <!--多选框定义的值就是  定义好的value值-->
        <input type="radio" name="sex" value="women" id="girl">女
<!--    绑定事件 onclick 被点击-->
    <p><input type="submit" value="登录" ></p>
</form>

<script>
    function a() {
         var name = document.getElementById('username');
         var psw = document.getElementById('input-paw');
         var md5psw = document.getElementById('md5-psw');
         md5psw.value = md5(psw.value)
         alert(md5psw.value)
        //可以校验表单内容， true就是通过提交 false不提交
        return true;
    }
</script>
</body>
</html>

9.jQuery

jQuery库里面存在着大量的JavaScript函数

1.获取jQuery

<script src="http://libs.baidu.com/jqueryui/1.8.22/jquery-ui.min.js"></script>

2.jQuery的使用

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

选择器

//
document.getElementsByTagName()
document.getElementById()
document.getElementsByClassName()
// jQuery选择器
$(‘p’).click()
$(’#id’).click()
$(’.class’).click()
事件
- 鼠标事件
- 键盘事件

   <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script src="lib/jQuery.js"></script>
        <style>
            #draw {
                width: 500px;
                height: 500px;
                border: 1px red solid;
            }
        </style>
    </head>
    <body>
    鼠标位置：<span id="location"></span>
    <p>在框里移动鼠标试试</p>
    <div id="draw"></div>
    
    <script>
        $(function () {
            $('#draw').mousemove(function (e) {
      $('#location').text("x:"+e.pageX+"y:"+e.pageY);
            })
        })
    </script>
    </body>

操作Dom元素
- 节点文本操作

 <body>
      <ul id="ul">
          <li class="li1">JAVAEE</li>
          <li name="li2">JAVASE</li>
      </ul>
      <script>
          $('#ul li[name=li2]').text()  //获得值
          $('#ul li[name=li2]').text('1233')  //设置值
          $('#ul').html();//获得值
          $('#ul').html();//设置值
          
      </script>
      
      </body>