你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

JavaScript快速基础入门_javascript 快速入门总结

作者：你好赵伟 | 2024-05-15 01:30:09

踩

javascript 快速入门总结

##前言
前端基础的博客主要分为HTML（结构层）、CSS（表现层）和JavaScript（行为层）,本类博客主要用于记录博主的学习过程和分享学习经验，由于博主学识浅薄，经验不足，难免会出现错误，欢迎大家提出问题。

注：前端基础的文章参考于b站up主遇见狂神说的前端视频，文章中的源码笔记等资源放在百度网盘了，有需要的小伙伴可以自取啊
链接：https://pan.baidu.com/s/1NWIs14JmAvD3UUqNX01CYg
提取码：13tr
祝大家都学有所成，下面我们进入正题！

##JavaScript基础学习总结

JavaScript的一些核心内容都在这张思维导图中了，接下来我们来具体的了解一下JavaScript！

1、什么是JavaScript

JavaScript是一门世界上最流行的脚本语言
JavaScript 是属于 HTML 和 Web 的编程语言
ECMAScript可以理解为是JavaScript的一个标准

2、快速入门

2.1、引入JavaScript

1.内部标签

<!-- script标签内，写js代码-->
<!-- 内部的方式-->
        <script>
            alert("hello,world");
        </script>
1
2
3
4
5

2.外部引入

(1)qjd.js

alert("hello,world");
1

(2)html

<!--外部引入的方式
    注：script标签必须成对出现
-->
<script src="js/qjd.js"></script>
1
2
3
4

3.helloworld

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

<!-- script标签内，写js代码-->
<!-- 内部的方式-->
        <script>
            alert("hello,world");
        </script>


    <!--外部引入的方式
        注：script标签必须成对出现
    -->
    <script src="js/qjd.js"></script>

    <!--不用显示定义type，这是默认类型-->
    <script type="text/javascript"></script>

</head>
<body>


<!--这里也可以存放script标签-->
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2.2、基本语法入门

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

    <!--JavaScript严格区分大小写-->
    <script>
        // 1.定义变量    变量类型    变量名 = 变量值;
        var num = 1;
        var name = "ikun";
        var a = 67
        // alert(name);
        // 2.条件控制
        if(a>60 && a<70){
            alert("60~70");
        }else if (a>70 && a<80){
            alert("70~80");
        }else {
            alert("other");
        }
        
        /**
         *console.log(a) 在浏览器的控制台打印变量 相当于System.out.println();
         */

        
    </script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2.3、数据类型

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

变量

var a=1;
//不能以数字开头（ var 5a=1;）
1
2

number

js不区分小数和整数

123      //整数
123.1   //浮点数
1.1e2   //科学技术法
-99     //负数
NaN     //noy a number
Infinity//表示无限大
1
2
3
4
5
6

字符串

‘abc’ “abc”

布尔值

true flase

逻辑运算

&&   两个都为真，结果为真
    
||   一个为真，结果为真
    
!    真即假，假即真
1
2
3
4
5

比较运算符

=          赋值
==         等于（类型不一样，值一样，也会判断为true）
===        绝对等于（类型一样，值一样，结果为true）
（这里与java不一样）
1
2
3
4

注：

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

浮点数问题：

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

结果为false，我们要尽量避免用浮点数进行运算，存在精度问题

a=Math.abs(1/3-(1-2/3))<0.0000000001;
console.log(a);
1
2

结果为true

null和undefined

null是空的意思
undefined是未定义

数组

Java数组中的数值必须是相同类型的对象，JS中不需要这样

   //为了保证数组的可读性尽量使用[]的方式
        var arr = [1,2,3,4,5,'hello',null,true];

        new Array(1,2,3,4,5,'hello',null,true);
1
2
3
4

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

对象

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

每个属性之间用逗号隔开，最后一个不需要添加

//Person person  = new Person(1,2,3,4,5);
var person = {
    name:"ikun",
    age:3,
    tages:['html','css','javascript']
}
1
2
3
4
5
6

在浏览器取对象的值

2.4、严格检查格式

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

    <script>
<!--'use strict';
    代表严格检查模式,预防js的随意性导致的一些问题,
    必须写在第一行,
    建议局部变量都用let来定义
-->
        'use strict';

        //全局变量
        r=1;
        //ES6  let来定义局部变量
        let i = 2;

    </script>


</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3、数据类型

3.1、字符串

1.正常的字符串我们使用单引号，或者双引号包裹

2.注意转移字符 \

\'
\n
\t
\u4e2d    //u#### unicode字符 
\x41      //ASCLL字符
1
2
3
4
5

3.多行字符串编写

//esc键下边的那个键
var msg = `
 hello
 world
 你好        
`
1
2
3
4
5
6

4.模板字符串

let name = "kunkun";
let age = 3;
let msg = `我是${name}`
1
2
3

5.字符串长度

console.log(name.length);
1

6.字符串的可变性

不可变

7.大小写转换

 //注意，这里是方法，不是属性了
        name.toUpperCase();
        name.toLowerCase();
1
2
3

其他方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符（包头不包尾）
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

3.2、数组

Array可以包含任意数据类型

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

1.长度

arr.length;
1

注：加入给arr.length赋值，数组大小就会发生变化（过小元素丢失，过大加空）

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

arr.indexOf(3);
2
1
2

字符串的"1"和数字1是不同的

3.slice（）

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

var arr=[1,2,3,4,5];
arr.slice(1,3)
//类似于subString,包头不包尾
2,3
1
2
3
4

4.push pop

push: 压入到尾部
pop：尾部的一个元素弹出

5.unshift() shift()

unshift(): 压入到头部
shift(): 头部的一个元素弹出

6.排序sort（）

7.元素反转reverse（）

8.拼接concat（）

注：contact（）并没有修改数组，只是会返回一个新的数组

9.连接符 join

打印拼接数组，使用特定的字符串连接

10.多维数组

3.3、对象

若干个键值对

//定义了一个person对象他有四个属性
var person = {
    name : "qq",
    age : 18,
    emali : "cjsioevcmsp",
    score : 60
    
}
1
2
3
4
5
6
7
8

js中的对象，{…}表示一个对象，键值对描述属性xxx:xxxx,多个属性之间用逗号隔开，最后一个不用逗号

js中所有的键都是字符串，值是任意对象

1.对象赋值

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

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

4.动态的添加，直接给新的属性添加值

5.判断属性值是否在这个对象中（toString是继承的）

6.判断一个属性是否是自身所拥有的

3.4、流程控制

if判断

let age = 5;
if(age>3){
    alert("haha~");
}else{
    alert("kuwa~")
}
1
2
3
4
5
6

循环,注意避免死循环

while

while (age<10){
    age = age+1;
    console.log(age);
}
1
2
3
4

for

for (let i = 0; i <10 ; i++) {
    console.log(i);
}
1
2
3

数组遍历

var list = [1,2,43,4,,5,6,76,7];
list.forEach(function (value){
    console.log(value);
})
1
2
3
4

3.5、Map和Set集合

ES6的新特性

Map

    'use strict';
        //统计学生的成绩和学生的名字
        // var names = ['tom','jack','rose'];
        // var score = [100,99,88];

        var map = new Map([['tom',100],['jack',99],['rose',88]]);
        let tom = map.get('tom');//通过key获得value
        map.set('rock',66);//添加新的键值对
        map.delete("rock");//删除
        console.log(tom)
1
2
3
4
5
6
7
8
9
10

Set:无序不重复的集合

//set 可以去重
var set = new Set([2,3,,4,45,5,6,3,2]);
set.add(9);
set.delete(2);
console.log(set.has(3));//是否包含
1
2
3
4
5

3.6、 iterator

使用iterator来遍历迭代我们的Map，Set

ES6的新特性

遍历数组

'use strict';
var arr = [3,4,5];
// in 打印下标
for(var x in arr){
    console.log(x);
}
// of 打印值
for(var x of arr){
    console.log(x);
}
1
2
3
4
5
6
7
8
9
10

遍历map

var map = new Map([['tom',100],['jack',99],['rose',88]]);
for(let x of map){
    console.log(x);
}
1
2
3
4

遍历set

var set = new Set([2,3,,4,45,5,6,3,2]);
for(let x of set){
    console.log(x);
}
1
2
3
4

4、函数

方法：对象（属性，方法）

函数:

4.1、定义函数

定义方式一

绝对值函数

function abs(x){
    if(x<=0){
        return -x;
    }else{
        return x;
    }
}
1
2
3
4
5
6
7

一旦执行return代表函数结束，返回结果

如果没有执行return，函数执行完也会返回结果（undefined）

定义方式二

var abs = function (x){
    if(x<=0){
        return -x;
    }else{
        return x;
    }
}
1
2
3
4
5
6
7

function (x){…}这是一个匿名函数，但是可以把结果赋值给abs,通过abs就可以调用函数

4.2、调用函数

abs(10)        //10
abs(-10)       //10

1
2
3

js可以传递任意个参数，也可以不传递参数

假设不存在参数，如何规避？

var abs = function (x){
    //手动抛出异常来判断
    if(typeof x !== 'number'){
        throw 'Not a Number';
    }
    if(x<=0){
        return -x;
    }else{
        return x;
    }
}
1
2
3
4
5
6
7
8
9
10
11

arguments是JS免费赠送的关键词，利用他我们可以得到所有的参数

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

function abs(x){
    console.log("x=>"+x);
    for (let i = 0; i <arguments.length ; i++) {
        console.log(arguments[i]);
    }
    if(x<=0){
        return -x;
    }else{
        return x;
    }
}
1
2
3
4
5
6
7
8
9
10
11

问题：

arguments会包含所有的参数，如何排除已有的参数？

rest

以前

function ac(a,b){
    console.log("a=>"+a);
    console.log("b=>"+b);
    if(arguments.length>2){
        for (let i = 2; i <arguments.length ; i++) {
            console.log(arguments[i]);
        }
    }
} 
1
2
3
4
5
6
7
8
9

现在

function ac(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}
1
2
3
4
5

rest参数只能写在最后面，必须用…标识

4.3、变量的作用域

在js中，var定义变量实际是有作用域的

假设在函数体中声明，则在函数体外不能使用（如果要想使用需要使用闭包）

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

x = x+2;//Uncaught ReferenceError: x is not defined
1
2
3
4
5
6

如果两个函数使用了相同的变量名，只要造函数内部就不冲突

function qjd(){
    var x = 1;
    x = x+1;
}
function qjd2(){
    var x = 1;
    x = x+1;
}
1
2
3
4
5
6
7
8

函数嵌套使用的话，内部函数可以访问外部函数的成员，反之则不行

假设内部函数变量与外部函数变量重名

function qjd(){
    var x = 1;
function qjd2(){
    var x = 2;
    console.log('inner'+x);//outer1
}
    console.log('outer'+x);//inner2
    qjd2();

}
qjd();
1
2
3
4
5
6
7
8
9
10
11

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

所有的变量定义放在代码头部,便于理解与维护
全局函数

全局对象window

var x = 1;
alert(x);
//alert()这个函数本身也是一个window变量
alert(window.x);
//默认所有的全局变量都会自动化绑定在window对象下
1
2
3
4
5

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

规范：降低全局命名冲突问题

//唯一全局变量
var Q = {};
//定义全局变量
Q.name = 'qjd';
Q.add = function (a,b){
    return a+b;
}
1
2
3
4
5
6
7

局部作用域let(建议使用let去定义局部变量)
常量const

const PI = '3.14';
1

4.4、方法

定义方法

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

var qiao = {
    name : 'qid',
    birth : 2001,
    //方法
    age:function () {
        let year = new Date().getFullYear();
        return year - this.birth;
    }
}
//属性
qiao.name
//方法,一定要带（）
qjd.age()
1
2
3
4
5
6
7
8
9
10
11
12
13

拆开上边的代码

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

var qiao = {
    name : 'qid',
    birth : 2001,
    age:getAge
}
// qiao.age()
// 21

// getAge()
// NaN     window对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

this是无法指向的，是默认指向调用他的那个函数

apply

在js中可以控制this指向

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

// getAge.apply(qiao,[]);
// 21
1
2
3
4
5

5、对象

标准对象：

typeof 123
'number'
typeof 'dgd'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5.1、Date

基本使用

var date = new Date();//Sat Jul 02 2022 20:34:01 GMT+0800 (GMT+08:00)
date.getFullYear();//年    2022
date.getMonth();//月      注意这里0到11代表月份
date.getDate();//日
date.getDay()//星期几
date.getHours();//时
date.getMinutes();//分
date.getSeconds();//秒
//全世界统一时间从1970.1.1 0:00:00 开始算的毫秒数
date.getTime();//时间戳    1656765442368
//时间戳转为时间
console.log(new Date(1656765442368))
// VM261:1 Sat Jul 02 2022 20:37:22 GMT+0800 (GMT+08:00)
1
2
3
4
5
6
7
8
9
10
11
12
13

转换

date.toLocaleString()
'2022/7/2 20:37:22'
date.toGMTString()
'Sat, 02 Jul 2022 12:37:22 GMT'
date.toDateString()
'Sat Jul 02 2022'
1
2
3
4
5
6

5.2、JSON

JSON是什么？

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。
它基于 ECMAScript（European Computer Manufacturers Association, 欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

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

JSON和JS对象的转化

例子

<script>

   var user = {
       name:"qiao",
       age:15,
       sex:"男"
   }

   //对象转化为JSON字符串     {"name":"qiao","age":15,"sex":"男"}
   var jsUser =JSON.stringify(user)

   //json字符串转化为对象,参数为json字符串
   var obj = JSON.parse('{"name":"qiao","age":15,"sex":"男"}')

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

测试

console.log(user)
VM218:1 {name: 'qiao', age: 15, sex: '男'}age: 15name: "qiao"sex: "男"[[Prototype]]: Object
undefined
console.log(jsUser)
VM266:1 {"name":"qiao","age":15,"sex":"男"}




console.log(obj)
{name: 'qiao', age: 15, sex: '男'}
1
2
3
4
5
6
7
8
9
10
11

json与js对象的区别

var js = {a:'helloa', b:'hellob'}
var json = '{'a':'helloa','b':'hellob'}'
1
2

6、面向对象编程

6.1、什么是面向对象

js,java,c#…面向对象；js有一些区别

类：模板原型对象原型链

对象：具体的实例

JavaScript:

原型：

<script>

    var student = {
        name:"qiao",
        age:15,
        sex:"男",
        run:function () {
            console.log(this.name + "run.....");
        }
    }

    //小明的原型是student,原型对象
    var xiaoming = {
        name : "xiaoming"
    };

    xiaoming.__proto__ = student;

    var bird = {
        fly:function () {
            console.log(this.name + "fly.....");
        }
    };
    //让小明可以实现fly
    xiaoming.__proto__ = bird;

    
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

6.2、class继承

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

//es6之后的方法,重点记这个
//定义一个学生的类
class student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}


     var xiaoming = new student("xiaoming");
     var xiaoming3 = new student("xiaoming3");

     xiaoming.hello()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.继承

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

    class pupil extends student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade(){
            alert('pupil')
        }
    }


    var xiaoming = new student("xiaoming");
    var xiaoming3 = new pupil("xiaoming3",1);



</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

本质：查看对象原型

原型链：原型链：通过隐式原型把一些构造函数层层的串起来，因为所有的对象都是继承自Object。

原型链： https://www.cnblogs.com/liumcb/p/13667117.html

7.操作BOM对象(重点)

浏览器介绍

JS和浏览器关系？

JS诞生就是为了让它能够在浏览器中运行

BOM:浏览器对象模型

内核：

IE6~11
Chrom
Safari
FireFox

第三方：

QQ浏览器
360浏览器
搜狗浏览器

window

window代表浏览器窗口

window.innerHeight
722
window.innerWidth
555
window.outerHeight
824
window.outerWidth
1536
//可以调整浏览器窗口进行测试
1
2
3
4
5
6
7
8
9

Navigator

Navigator,封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
navigator.platform
'Win32'
1
2
3
4
5
6
7
8

大多数时候，我们不会navigator对象，因为会被人为修改

screen

screen代表屏幕尺寸

screen.width
1536
screen.height
864
1
2
3
4
5
6

location

location代表当前页面的URL信息

doucument

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

document.title
'百度一下，你就知道'
1
2

获取集体的文档树节点

<body>

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>


</dl>


<script>

    var byId = document.getElementById('app');


</script>


</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

获取cookie

document.cookie
1

劫持cookie原理

假设登录淘宝

<script src = "劫持.js">
//恶意人员获取你的cookie上传到他的服务器
</script>

1
2
3
4

服务器端可以设置cookie：httpOnly防止读取cookie信息

history

history代表浏览的历史记录

后退到上一个网页

history.back()
1

前进到下一个网页

history.forward()
1

8、操作DOM对象（重点）

DOM:文档对象模型

DOM树形结构

核心

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

更新:更新DOM节点
遍历DOM节点:得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的节点

要操作一个新的DOM节点，就必须要先获得这个DOM节点

获得DOM节点

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


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

<script>
    //对应css选择器,h1{}  #id{}  .classname{}
    var h1= document.getElementsByTagName('h1')
    var p1= document.getElementById('p1')
    var p2= document.getElementsByClassName("p2")
    var father= document.getElementById('father')


    //获取父节点下所有的子节点
    var children = father.children[index];

    // father.firstChild
    // father.lastChild


</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

这是原生代码，之后尽量使用jQuery

更新节点

<body>

<div id="id1">

</div>

<script>

    var id1 = document.getElementById("id1");
        id1.innerText='abc';

</script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

操作文本

id1.innerText=‘123’ 修改文本的值
id1.innerHTML=‘456’ 可以解析html标签

操作css

id1.style.color = ‘red’ //属性用字符串包裹
id1.style.fontSize = ‘50px’ // - 转驼峰命名问题
id1.style.padding = ‘2em’

删除节点

删除节点步骤：

先获取父节点
再通过父节点删除自己

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

<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(p1)
    
    //删除是一个动态的过程
    father.replaceChild(father.children[0]);
    father.replaceChild(father.children[1]);
    
</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

插入节点

我们获得了某个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.appendChild(js);追加到后面
   
</script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

创建一个新的标签实现插入

//通过js创建一个新的节点
// <p id="newP">HelloQJD</p>
var newP = document.createElement('p');//创建一个p标签
newP.id = 'newP';
newP.innerText = 'HelloQJD';
list.appendChild(newP);

//创建一个标签节点,通过这个属性可以设置任意的值
//<script type="text/javascript" src="">
var myScript = document.createElement("script");
myScript.setAttribute('type','text/javascript');//key value  键值对  万能方式
list.appendChild(myScript);
1
2
3
4
5
6
7
8
9
10
11
12

创建style标签

<style>
    body{background-color:#dffeca;}
</style>
1
2
3

//可以创建一个style标签
var myStyle = document.createElement('style');//创建了一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:#dffeca;}';//设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle)
1
2
3
4
5

在这里插入图片描述

insert

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//js插入到ee之前
list.insertBefore(js,ee);
1
2
3
4
5

9、操作表单（验证）

表单：form DOM树

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

表单的目的：提交信息

获得要提交的信息

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


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


</form>


<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById("boy");
    var girl_radio = document.getElementById("girl");

    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value='123'


   //对于单选框，多选框等等固定的值， boy_radio.value只能取到当前的值，不能取到选中的值
   //  boy_radio.value
    boy_radio.checked;//查看选择的结果是否为true，是则被选中
    girl_radio.checked = true;//赋值
</script>


</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

提交表单，MD5加密密码，表单优化

<html lang="en">
<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>
<body>
<!--表单绑定提交事件
onsubmit绑定一个提交检测的函数，true  false
将这个结果返回给表单，使用onsubmit接收

-->
<form action="#" method="post" onsubmit="return aaa()">

    <p>
        <span>用户名:</span>
        <input type="text" id="username"  name="username" required>
    </p>

    <p>
        <span>密码:</span>
        <input type="password" id="input-password">

    </p>

    <input type="hidden" id="md5-password" name="password">

<!--绑定事件  onclick被点击onclick="aaa()-->
    <button type="submit" >提交</button>

</form>


<script>


    function aaa() {
        var uname = document.getElementById('username');

        var pwd = document.getElementById('password');

        var md5pwd = document.getElementById('md5-password');

        md5pwd.value = md5(pwd.value);

        //可以检验判断表单内容，true就是通过提交，false就是阻止提交
        return true;

    }
</script>


</body>
</html>



<!--console.log(uname.value);-->
<!--console.log(pwd.value);-->

<!--//MD5算法    对密码进行加密-->
<!--pwd.value = md5(pwd.value);-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

结果：密码被隐藏

10、jQuery

JavaScript

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

公式：$(selector).action()
1

获取jQuery

引入在线的cdn

<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
    <!--本地导入-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用jQuery

<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--cdn引入-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>


</head>
<body>
<!--
公式：$(selector).action()
-->


<a href="" id="test-jquery"> 点击</a>

<script>

    // var id = document.getElementById('test-jquery');
    // id.click(function () {
    //      alert('hello')
    // })
    //选择器就是css的选择器,下面等价于上边注释的代码
    $('#test-jquery').click(
        function () {
            alert('hello')
        }
    )
</script>



</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

选择器

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

<script>
    //原生的js,选择器少
    //标签选择器
    document.getElementsByTagName()
    //id选择器
    document.getElementById()
    //类选择器
    document.getElementsByClassName()




    //jQuery   css中选择器它全部都能用
    $('p').click()         //标签选择器
    $('#id1').click()      //id选择器
    $('.p2').click()       //class选择器
    
    //其他的css选择器https://jquery.cuishifeng.cn/
</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

文档工具站:https://jquery.cuishifeng.cn/

事件

鼠标事件，键盘事件，其他事件

鼠标事件：

获取鼠标当前的一个坐标：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #divMove{
            width: 500px;
            height: 400px;
            border: 1px solid red;
        }

    </style>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

操作DOM

<ul id="test_ul">
    <li class="js">JavaScript</li>
    <li id="py">Python</li>
</ul>
1
2
3
4

节点文本操作：

 $('#py').text();        //获得值
'Python'
   $('#py').text("c++"); //设置值
jQuery.fn.init [li#py]
   $('#py').text();
'c++'


$('#test-ul').html()   //获得值
$('#test-ul').html('<strong>123456</strong>') //设置值
1
2
3
4
5
6
7
8
9
10

css操作：

 $('.js').css({ "color": "#ff0011", "background": "blue" })//键值对
1

元素的显示和隐藏：

本质是css中 display = none;

$('.js').show()//显示

$('.js').hide()//隐藏

1
2
3
4

其他

学习技巧
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/570990