JavaScript基础知识详解

前言

大家好,这里是果力成,最近在跟学JavaScript,算是初入门,把平时学到的知识点都总结到这篇博客里,有不足的欢迎评论改进,话不多说,学之!

1.什么是JavaScript

JavaScript是一门脚本语言,广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

特点:

脚本语言
基于对象
简单
动态性
跨平台性

2.快速入门

2.1 引入JavaScript

1.内部标签

<!--  script标签内写JavaScript代码  -->
    <script>
        alert("hello world");
    </script>

2.外部引入

<!--HTML-->
<!--  注意：script必须成对出现  -->
    <script src="js/qj.js"></script>

<!-- js -->
alert("hello world")

2.2 基本语法入门

<!--JavaScript严格区分大小写-->
    <script>
         // 定义变量 变量名=变量值
        var score=94;
        // 条件控制
        if(score>60 && score<70){
    
    
            alert("及格")
        }
        else if(score<60){
    
    
            alert("不及格")
        }
        else if(score>70 && score<80){
    
    
            alert("良好")
        }
        else{
    
    
            alert("优秀")
        }

         // console.log(score) 在浏览器的控制台打印变量
    </script>

2.3 数据类型

number

js不区分大小写

123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //负数
NaN // not a number
Infinity /表示无限大

字符串

“abc” ‘abc’

布尔值

true 和 false

console.log(3>1)
 true

逻辑运算

&&  两个都为真,结果为真

||  一个为真,结果为真

!  真即假,假即真

比较运算符

=

==  等于(类型不一样,值一样,也会判断为true)

===  绝对等于(类型一样,值一样,结果true)

须知:

扫描二维码关注公众号，回复： 14125565 查看本文章

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

浮点数问题

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

尽量避免使用浮点数进行运算,存在精度问题!

null和undefined

null 空
undefined 未定义

数组

  <script>
        //数组
        var rra = [1,2,3,4,5,'hello','blue']
    </script>
    <!--在控制台用console.log(rra[2])查看-->

对象

对象是大括号,数组中括号

 <script>
        //对象
        var person = {
    
    
            name: "guolicheng",
            age: 21,
            tag: ['pyhon','web','人工智能']
            //    每个属性之间用逗号隔开，最后一个不用加
        }
    </script>

取对象的值

<!--浏览器控制台-->
person.name
'guolicheng'
person.age
21
person.tag
['pyhon', 'web', '人工智能']

严格检查模式strict

‘use strict’;

<!--
  'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
  前提：IDEA需要设置支持ES6语法
  写在JavaScript第一行
  局部变量建议都使用let去定义
  -->
    <script>
        'use strict';
        let i=1;
    </script>

3.数据类型

3.1字符串

正常字符串我们用单引或双引号包裹
注意转义字符\

<script>
        'use strict'
        console.log('a\'')
        console.log("b")
        console.log("c\n")      //换行
        console.log("a\t")      //tab
        console.log("a\u4e2d")  //unicode字符
        console.log("a\x41")    //ascII字符
    </script>

 a'
 b
 c
 a	
 a中
 aA

多行字符串编写

 //tab上面，esc下面
        var msg={
    
    
            `hello
            world
            thanks
            you`
        }

模板字符串

//tab上面，esc下面
        let name = "guolicheng";
        let sex =  `boy`;
        let msg = `hello ${
      
      name}
                   thanks
                   you`

字符串长度

  //    字符串长度
        var student = "std";
        
        console.log(student.length)
         3

字符串的可变性-- 不可变
大小写转换

//注意:这里是方法,不是属性了
console.log(student.toUpperCase())
 STD
console.log(student.toLowerCase())
 std

substring

//从第一个字符串截取到最后一个字符串
console.log(student.substring(1))

3.2数组

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

var arr = [1,2,3,4,5,6,7]

长度

arr.length

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

arr.length=2

indexOf
通过元素获得下标索引

arr.indexOf(4)
3

slice
截取Arrayd的一部分,返回一个新的数组

arr.slice(3)
[4, 5, 6, 7]
arr.slice(2,5)
[3, 4, 5]

push() 与 pop() 尾部

push:往尾部添加元素
pop: 删除尾部的元素

unshift() 与 shift() 头部

unshift:往头部添加元素
shift: 删除头部的元素

排序sort()

var m = ["a","c","b"]

m.sort()
['a', 'b', 'c']

反转revers()

m.reverse()
['c', 'b', 'a']

拼接concat()

var arr = [1,2,3,4,5,6,7]

arr.concat(['A','B','C'])
[1, 2, 3, 4, 5, 6, 7, 'A', 'B', 'C']
arr
[1, 2, 3, 4, 5, 6, 7]

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

连接符join()

arr.join('-')
'1-2-3-4-5-6-7'

多维数组

arr = [[3,8],[2,5],['a','b']]

arr[1][1]
5

3.3对象

JavaScript中所有的键都是字符串,值是任意对象

  var 对象名 = {
    
    
            属性名: 属性值,
            属性名: 属性值,
            属性名: 属性值,
        }
    //定义了一个person对象，有三个属性  
  var person = {
    
    
            name:'guolicheng',
            age:20,
            email:'[email protected]'
        }

对象赋值

person.name
'guolicheng'
person.name='chengguoli'
'chengguoli'

使用一个不存在的对象属性,不会报错!undefined

person.haha
undefined

动态的删减属性,通过delete删除对象的属性

delete person.age
true
person
{
    
    name: 'chengguoli', email: '[email protected]'}

动态的添加,直接给新的属性添加值即可

person.weight=120
120
person
{
    
    name: 'chengguoli', email: '[email protected]', weight: 120}

判断属性值是否在这个对象中
语法: xx in xx

'age' in person
false
'weight' in person
true
//继承
'toString' in person
true

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

'toString' in person
true
person.hasOwnProperty('toString')
false

3.4流程控制

if判断
while循环
for循环

3.5Map和Set

Map:

  <script>
        'use strict'
        var map = new Map([['tom',89],['jack',58],['karry',40]]);
        var name = map.get('tom');
        map.set('admin',123456); //新增
        console.log(name)
    </script>

Set:无序不重复的集合

    <script>
        'use strict'

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

    </script>

3.6 iterator

遍历数组

     // 通过for of
        // 遍历数组
        var arr = [3,4,5]
        for(var x of arr){
    
    
            console.log(x)
        }

遍历map

 // 遍历map
        var map = new Map([['tom',89],['jack',58],['karry',40]]);
        for(let x of map){
    
    
            console.log(x)
        }

遍历set

 // 遍历set
        var set = new Set([3,1,1,1,1]);
        for(let x of set){
    
    
            console.log(x)
        }

4.函数

4.1 定义函数

绝对值函数

<script>
    function abs(x){
    
    
        if(x>=0){
    
    
            return x;
        }
        else {
    
    
            return -x;
        }
    }
</script>

4.2 变量的作用域

在JavaScript中,var定义变量实际是有作用域的

  function zc() {
    
    
            var x =1;
            x = x + 1;
        }
        x = x +2;  // Uncaught ReferenceError: x is not defined

内部对象可以访问外部,反之不行

全局对象

<script>
    var x = 'bbc';
    alert(x);
    alert(window.x); // 默认所有的全局变量都会自动绑定在window对象下
</script>

alert()函数本身也是一个window变量

局部作用域let
使用var

 function aa() {
    
    
        for (var i=0; i<100; i++){
    
    
            console.log(i)
        }
        console.log(i+1); //出现问题，i出了这个作用域还可以使用
    }

使用let

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

tips:建议都使用let去定义局部变量

4.3 方法

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

<!--定义方法-->
<script>
    var guolicheng = {
    
    
        name:'果力成',
        birth: 2000,
        // 方法
        age: function () {
    
    
        // 今年减出生的年
            var now = new Date().getFullYear();
            return now-this.birth;
        }
    }
    // 属性
    guolicheng.name
    // 方法 一定要带()
    guolicheng.age()
</script>

this代表的是什么?

    // 将上面的拆开
  function getAge() {
    
    
        var now = new Date().getFullYear();
        return now-this.birth;
    }
    var guolicheng = {
    
    
        name:'果力成',
        birth: 2000,
        age: getAge
    }

this是无法指向的,是默认指向调用它的那个对象

5.内部对象

5.1 Date

<script>
    var now =  new Date();  // Fri Jan 21 2022 12:03:44 GMT+0800 (中国标准时间)
    now.getFullYear(); // 年
    now.getMonth(); // 月 0~11
    now.getDate(); // 日
    now.getDay(); // 星期几
    now.getHours(); // 时
    now.getMinutes();  // 分
    now.getSeconds(); // 秒

    now.getTime(); // 时间戳，全世界统一

    console.log(new Date(1642737824021)); // 时间戳转为时间
</script>

5.2 JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象,任何js支持的类型都能用JSON
格式:

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

JSON字符串和JS对象的转化

<script>
    var user = {
    
    
        name:'guolicheng',
        sex:'boy',
        age:22
    }
    // 对象转化为json字符串
    var jsonUser = JSON.stringify(user)  // {"name":"guolicheng","sex":"boy","age":22} 不可展开

    //json字符串转化为对象
    var obj = JSON.parse('{"name":"guolicheng","sex":"boy","age":22}')
</script>

JSON和JS的区别

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

6.面向对象编程

6.1 原型继承

   var student = {
    
    
        name:'guolicheng',
        age:22,
        run: function () {
    
    
            console.log(this.name+"run......");
        }
    };
    var xiaoxin = {
    
    
        name: xiaoxin
    };
    // 小新的原型是student
    xiaoxin.__proto__=student;

6.2 class继承

class关键字是在ES6引入的

定义一个类,属性,方法

    //ES6之后，
    //定义一个学生的类
    class student{
    
    
        constructor(name) {
    
    
            this.name=name;
        }
        hello(){
    
    
            alert("hello")
        }
    }

继承

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

    // 继承
    class xiaostudent extends student{
    
    
        constructor(name,grade) {
    
    
            super(name);
            this.grade = grade;
        }
        myGrade() {
    
    
            alert('我是小红，一名小学生')
        }
    }

    var xiaohong = new xiaostudent("xiaohong",1);
    
    //控制台xiaohong.myGrade()
undefined
console.log(xiaohong)

7.操作BOM对象(重点)

1.window

window代表浏览器窗口

2.Navigator

封装了浏览器的信息
大多数时候,不会使用navigator对象,因为会被人为修改

3.screen

代表屏幕尺寸

screen.width
1280
screen.height
800

4.location

代表当前页面的URL信息

host: "localhost:63342"
href: "http://localhost:63342/JavaScript/test02/%E9%9D%A2%E5%90%91%E5
protocol: "http:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('https://www.csdn.net/')

5.document

document代表当前的页面 HTML,DOM文档树

document.title
'新建标签页'
document.title='果力成'
'果力成'

获取具体的文档树节点

<dl id="app">
    <dt>java</dt>
    <dt>python</dt>
    <dt>c++</dt>

</dl>
<script>
    var dl=document.getElementById('app');
</script>

获取cookie
储存在用户本地终端上的数据

document.cookie
'Hm_lvt_6bcd52f51e9b3dce32bec4a3997715ac=1634455899;

6. history

代表浏览器的历史记录

history.back() //后退

history.forward() //前进

8.操作DOM对象(重点)

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

更新: 更新DOM节点
遍历DOM节点:得到DOM节点
删除:删除一个DOM节点
添加:添加一个DOM节点
要操作一个DOM节点,必须先得到DOM节点

8.1 获得dom节点

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

<script>
    var h1=document.getElementsByTagName("h1");
    var p1=document.getElementById("p1");
    var p2=document.getElementsByClassName("p2");
    var father=document.getElementById("father");

    var children=father.children; // 获取父节点下的所有子节点
    //father.firstChild
    //father.lastChild
</script>

这是原生代码,后续会用jQuery()

8.2 更新节点

<div id="id1">

</div>
<script>
    var id1=document.getElementById('id1');
</script>

操作文本


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

操作css

id1.style.color='red';
id1.style.fontSize='50px';
id1.style.padding='2em';

8.3 删除节点

步骤:先获取父节点,再通过父节点删除自己

father.removeChild(p1)

8.4 插入节点

追加

<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);  // 追加到后面
    
      // 通过js创造一个新的节点
    var newP = document.createElement('p'); // 创建一个p标签
    newP.id='newP';
    newP.innerText='hello guolicheng!';
    list.appendChild(newP);
    
     // 创建一个style标签
    var myStyle= document.createElement('style');
    myStyle.setAttribute('type','test/css');
    myStyle.innerHTML='body{background-color:orange;}';
    list.appendChild(myStyle);
</script>

9.操作表单(验证)

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

表单的目的:提交信息

<form action="post">
    <span>用户名：</span><input type="text" id="username">
<!--    多选框-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="boy">男
        <input type="radio" name="sex" value="girl">女
    </p>
</form>

<script>
    var input_text = document.getElementById('username');  //input_text.value 得到输入框的值
                                                            //input_text.value='123' 修改输入框的值
</script>

9.1 提交表单

<form action="#" method="post">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>
<!--  绑定事件  -->
<!--  onclick 被点击  -->
    <button type="button" onclick="aa()">提交</button>
</form>

<script>
    function aa() {
    
    
        var uname= document.getElementById('username');
        var pwd= document.getElementById('password');
        console.log(uname.value);
        console.log(pwd.value);
        // MD5算法
        pwd.value=md5(pwd.value)
        console.log(pwd.value);

    }
</script>

10.jQuery

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

https://jquery.com/

cdnjQuery
cdn引入–在线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  cdn引入  -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

<!--公式：$(selector).action() -->
<a href="" id="test-jquery">点击</a>
<script>
    document.getElementById('id');
    $('#test-jquery').click(function () {
    
    
        alert('hello jquery');
    })
</script>
</body>
</html>

注意:公式：$(selector).action()

10.1选择器

<script>
    //原生js 选择器少，麻烦不好记

    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类class
    document.getElementsByClassName();

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

</script>

文档工具站:

https://jquery.cuishifeng.cn/

10.2 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/aa.js"></script>
    <style>
        #divMove{
    
    
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </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>
</html>

总结

小技巧

如何巩固js(看jquery源码,看游戏源码)
如何巩固HTML,css(扒网站,全部down下来,然后对应修改看效果)

欢迎关注 IT果力成,一起交流学习