• JavaScript快速入门

    JavaScript快速入门

    1.快速入门

    1.1引入JavaScript

    1.内部标签
    <script>
       //...
</script>

    • 1
    • 2
    • 3
    2.外部引入

    qj.js

    alert('hello,world');

    • 1

    引入

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

    • 1
    • 2

    测试

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script标签内写js代码-->
<!--    <script>
        alert('hello,world');
    </script>
    -->

    <!--外部引入-->
    <!--script必须成对标签-->
    <!--javascript不用显示定义type，默认就是javascript-->
    <script src="js/qj.js">
    </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

    2.基本语法入门

    <!--JavaScript严格区分大小写-->
<script>
    //1.定义变量 var 变量名 =变量值
    var score=88;
    var name='张三';
    console.log(name);//控制台输出
    //2.条件控制
    if(score>60 && score<70){
        alert("60~70");
    }else if(score>70 && score<80){
        alert("70~80");
    }else {
        alert("other");
    }
    /**
     * 多行注释
     */
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    3.数据类型

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

    变量

    var _$ =值

    • 1

    number

    js不区分小数和整数,Number

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    字符串

    ‘abc’ “abc”

    ‘\n’

    布尔值

    true , false

    逻辑运算

    && 两个都为真结果为真

    || 一个为真结果为真

    ！取反

    比较运算符

    =赋值

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

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

    注意：NaN===NaN，这个与所有的数值都不相等，包括自己，只能通过isNaN判断

    浮点数问题

    <script>
    console.log((1/3)===(1-2/3));
</script>

    • 1
    • 2
    • 3

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

    console.log(Math.abs(1/3-(1-2/3))<0.000000000001);

    • 1

    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

    取数组下标越界，就会报undefine

    对象

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5

    取对象的值

    person.name

    • 1

    4.严格检查模式

    'use strict';//严格检查模式，预防JavaScript的随意性导致产生的一些问题
//局部变量建议使用let定义
//全局变量
var i=1;
//ES6 let
let a=2;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    'use strict’必须写在JavaScript的第一行

    5.数据类型

    5.1字符串

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

    2.注意转义字符\

    \'
\n
\r
\u4e2d Unicode字符
"\x41" Ascll

    • 1
    • 2
    • 3
    • 4
    • 5

    3.多行字符串

    var msg=`
hello
world
`

    • 1
    • 2
    • 3
    • 4

    4.模板字符串

    let name="zhangsan";
let age=3;
let msg=`你好啊，${name}`;

    • 1
    • 2
    • 3

    5.字符串长度

    console.log(str.length)

    • 1

    6.字符串的可变性，不可变

    7.大小写转换

    msg.toLocaleUpperCase();
msg.toLocaleLowerCase();

    • 1
    • 2

    8.msg.indexOf();获取指定下标

    9.msg.substring(1);从到一个截取到最后

    msg.substring(1,2);//[1,2)

    • 1

    5.2数组

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

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

    • 1

    1.长度

    arr.length;

    • 1

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

    2.indexof

    arr.indexOf();

    • 1

    字符串的“1”和数字1是不同的

    3.slice（）截取Array的一部分，返回一个新数组

    arr.slice(1,3);[1,3)

    • 1

    4.push(),pop()

    push压入到尾部

pop弹出尾部的一个元素

    • 1
    • 2
    • 3

    5.unshift(),shift()头部

    unshift：压入头部
shift：弹出头部的一个元素

    • 1
    • 2

    6.排序

    arr.sort()

    • 1

    7.元素反转

    arr.reverse()

    • 1

    8.concat()数组拼接

    arr.concat(1,2,3)//并没有修改数组，只是返回一个新数组

    • 1

    9.连接符join()

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

    arr.join('-');

    • 1

    10.多维数组

    arr[[12],[3]];
arr[1,1];

    • 1
    • 2

    数组：存储数据（如何存，如何取，方法可以自己实现）

    5.3对象

    若干个键值对

    let 对象名={
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
};

let person={
    name: "wushuang",
    age: 3,
    sex: 1,
    score: 99
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

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

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

    1.对象赋值

    person.name="wushaung"
'wushaung'

    • 1
    • 2

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

    undefined

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

    delete person.name
true
person
{age: 3, sex: 1, score: 99}

    • 1
    • 2
    • 3
    • 4

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

    person.a="aa"

    • 1

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

    'age' in person
true
'toString' in person
true

    • 1
    • 2
    • 3
    • 4

    继承的父类的方法也可以找到

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

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

    • 1
    • 2
    • 3
    • 4

    5.4流程控制

    if判断

    var age=3;
if(age>3){
    alert("hh");
}else {
    alert("ww");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    while循环，避免死循环

    var age=3;

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    for循环

    var age=3;

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

    • 1
    • 2
    • 3
    • 4
    • 5

    forEach循环 5.1

    var age=[1,2,3,4,5,6,7,8];
//函数
age.forEach(function (value) {
    console.log(value)
})

    • 1
    • 2
    • 3
    • 4
    • 5

    for in

     var age=[1,2,3,4,5,6,7,8];
for(var num in age){
    console.log(age[num])
}

    • 1
    • 2
    • 3
    • 4

    出的是索引

    5.5Map和Set

    Map:

    //学生的成绩，学生的名字
var map=new Map([['tom',100],['jack',90],['haha',80]]);
var name=map.get('tom'); //通过key获取value
map.set('admin',123456);//新增或者修改
console.log(name);
map.delete //删除一个元素 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    Set:无序不重复

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

    • 1
    • 2
    • 3
    • 4

    5.6iterator es6

    通过for…of获取值

    for…in获取下标

    var arr=[3,4,5];
for (var x of arr){
    console.log(x);
}

    • 1
    • 2
    • 3
    • 4

    遍历map

    var map=new Map([['tom',100],['jack',90],['haha',80]]);
for(let x of map){
    console.log(x)
}

    • 1
    • 2
    • 3
    • 4

    遍历set

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

    • 1
    • 2
    • 3
    • 4

    6.函数

    6.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

    调用函数

    abs(10)
abs(-10)

    • 1
    • 2

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

    参数进来是否存在的问题：假设不存在参数，先判断

    function abs(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

    arguments

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

    多个参数时，可以通过arguments遍历出来

    代表传递进来的所有参数，是一个数组，可以拿到隐藏的参数

    function abs(x){
    if(arguments.length>1){
        console.log(arguments[1]);
    }
    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
    • 12
    • 13

    问题：arguments会包含所有的参数，有时候只想使用除当前参数来进行操作，需要排除当前已有的参数。

    rest

    获取除了已经定义的参数之外的所有参数…

    以前：

    function aaa(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 aaa(a, b,...rest) {
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

    • 1
    • 2
    • 3
    • 4
    • 5

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

    6.2，变量的作用域

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

    假设在函数体中声明，则在函数体外不可使用~（闭包）

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

    • 1
    • 2
    • 3
    • 4
    • 5

    如果两个函数使用相同的变量名，只要在函数内部，就不影响

     function qj() {
     var x=1;
     x=x+1;
 }
function qj2() {
    var x=1;
    x=x+1;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    内部函数可以访问外部函数的成员，外部不能访问内部

    function qj() {
    var x=1;
    x=x+1;
    function qj2() {
        var y=x+1; //2
    }
    var z=y+1; //Uncaught ReferenceError: y is not defined
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    内外函数变量同名，由内向外查找，假设外部存在，同名的函数变量，内部函数会屏蔽外部函数的变量

     function qj() {
    var x=1;
    x=x+1;
    function qj2() {
        var x='a'; //2
        console.log('inner'+x);
    }
    qj2();
    console.log('outer'+x);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    提升变量的作用域

    // 'use strict'
 function qj() {
 var x='x'+y;
 console.log(x);
 var y='y';
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    结果：xundefined

    说明：Js执行引擎，自动提升y的声明，但是不会提升变量y的赋值

    定义变量先声明再赋值,所有的变量都放在头部，不用乱放，便于维护

    var x,y,z,h;

    • 1

    全局函数

    'user strict'
//全局变量
var x=4;
function f() {
    console.log(x);
}
f();
console.log(x);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    全局对象windows

    var x='xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象中

    • 1
    • 2
    • 3

    alter()这个函数，本身也是window的一个变量

    // 'user strict'
var x='xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象中
var old_alter= window.alert;
//old_alter(x);
window.alert=function () {

};
//发现alter（）失效
window.alert(123);

//恢复
window.alert=old_alter;
window.alert(456);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

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

    规范：

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

    //唯一全局变量
var WuShuang={};
//定义全局变量
WuShuang.name='无双';
WuShuang.add=function (a,b) {
    return a+b;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

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

    局部作用域

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    使用let关键字，解决局部作用域冲突

    function aaa() {
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);//i 出了作用域还能用
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    建议使用let

    常量const

    在ES6，只有用全部大写命名的就是常量，建议不要修改

    var  PI='3.14';
console.log(PI);
PI='222';
console.log(PI);

    • 1
    • 2
    • 3
    • 4

    发现可以改变这个值

    const PI='3.14';//只读变量
console.log(PI);
PI='222';//直接报错

    • 1
    • 2
    • 3

    6.3，方法

    定义方法：方法就是把函数放到对象的里边，对象只有两个东西，属性和方法

    var wushuang={
    name: '无双',
    birth: 2001,
    age: function () {
        //今年-出生
        var now=new Date().getFullYear();
        return now-this.birth;
    }
}
//属性
wushuang.name
//方法，一定带()
wushuang.age()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    this.始终指向调用它的人

    拆开上代码

    function getAge() {
    //今年-出生
    var now=new Date().getFullYear();
    return now-this.birth;
}
var wushuang={
    name: '无双',
    birth: 2001,
    age: getAge()
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

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

    apply

    在js中控制this指向的对象

    function getAge() {
    //今年-出生
    var now=new Date().getFullYear();
    return now-this.birth;
}
var wushuang={
    name: '无双',
    birth: 2001,
    age: getAge
};
getAge.apply(wushuang,[]);//this指向了wushuang，参数为空

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    7.内部对象

    标准对象

    typeof 123
'number'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof aa
'undefined'

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    7.1,Date

    基本使用

    var now =new Date(); //Wed Jun 22 2022 14:18:38 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getMinutes();//秒

now.getTime();//时间戳 1970 1.1 0：00：：

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    转换

    new Date(1655878718669);//时间戳转换为时间

now.toLocaleString()//获取本地时间，注意调用的是方法，不是属性
'2022/6/22 14:18:38'

    • 1
    • 2
    • 3
    • 4

    7.2，Json

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

    格式：

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

    JSON字符串和JS对象的转化

    var user={
    name: "无双",
    age: 3,
    sex: '男'
}
//对象转换为JSON字符串
var jso_user=JSON.stringify(user);
//json字符串转换为对象
var obj=JSON.parse('{"name":"无双","age":3,"sex":"男"}');

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    JSON和JS对象区别

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

    • 1
    • 2

    7.3,Ajax

    • 原生的js xhr异步请求
    • JQuery $(#nname).ajax(“”)
    • axios请求

    8.面向对象编程

    原型：父类

    var user={
    name: "无双",
    age: 3,
    run: function () {
        console.log(this.name+"run....");
    }
}
var xiaoming={
    name: "小明"
}
//原型对象
var Bird={
    fly: function () {
        console.log(this.name+"fly....");
    }
}
// 小明的原型是user
xiaoming.__proto__= Bird;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    class继承

    function Student(name) {
    this.name=name;
}
//给 student 新增方法
Student.prototype.hello=function () {
    alert('hello');
}
//ES6之后
// 定义一个学生的类
class Student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert('hello');
    }
}
xiaoming.name
'小明'
xiaoming.hello()

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

    继承

    // 定义一个学生的类
class Student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert('hello');
    }
}
class pupil extends Student{
    constructor(name,grade){
        super(name);
        this.grade=grade;
    }
    myGrade(){
        alert('我是一名小学生');
    }
}
var xiaoming=new Student("小明");
var xiaohong=new pupil("张三",2);

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

    本质还是原型

    原型链

    __ proto __

    9.操作BOM对象

    JavaScript和浏览器的关系

    JavaScript诞生就是未来让他在浏览器中运行

    BOM：浏览器对象模型

    window

    window代表浏览器窗口

    window.alert(1)
undefined
window.innerHeight
406
window.innerWidth
1396
window.outerWidth
1536
window.outerHeight
816

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    navigator

    navigator封装了浏览器信息

    navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36'
navigator.platform
'Win32'

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

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

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

    screen

    代表屏幕的尺寸

    screen.width
1536px
screen.height
864px

    • 1
    • 2
    • 3
    • 4

    location

    location代表当前的URL信息

    host: "localhost:63342"
hostname: "localhost"
href: "http://localhost:63342/JavaScript/lesson02/class%E7%BB%A7%E6%89%BF.html?_ijt=4hdtbo9kftmj9u5hg2l3t8lrki"
port: "63342"
protocol: "http:"

location.reload()//刷新网页
location.assign('https://www.bilibili.com/')//设置新地址


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    document

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

    获取具体的 文档树节点

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    可以获取客服端的cookie

    document.cookie

    • 1

    劫持cookie

    服务端可以设置cookie为httpOnly

    history

    代表浏览器的历史记录

    history.back()//后退
history.forward()//前进

    • 1
    • 2

    10.操作DOM对象

    DOM：文档对象模型

    核心

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

    • 更新：更新Dom节点
    • 遍历dom节点：得到dom节点
    • 删除一个节点
    • 添加一个新的节点

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

    //对应css选择器
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;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    原生代码，之后尽量使用jquery

    更新节点

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

    操作css

    • id1.style.color=‘red’ 操作css样式 使用驼峰命名

    删除节点

    删除节点步骤，先获取父节点，再删除自己

    father.removeChild(p1)
//删除是一个动态的过程
father.removeChild(father.children[0])

    • 1
    • 2
    • 3

    可以直接通过父节点删除子节点，也可以通过子节点得到父节点，删除多个节点的时候，children是在时刻变化的

    插入节点

    我们获得某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了就不能使用了，因为会发生覆盖

    追加

    <p id="js">JavaScrpt</p>
<div id="list">
    <p id="JavaEE">JavaEE</p>
    <p id="JavaSE">JavaSE</p>
    <p id="JavaME">JavaME</p>
</div>
<script>
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    list.append(js);//追加到最后
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    创建新节点

    <script>
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    let newp = document.createElement('p');
    newp.id='newp';
    newp.innerText='hello,world';
    list.append('newp');
        //创建一个标签节点，通过这个标签可以设任意值
    let myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    插入一个节点

    <script>
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    let newp = document.createElement('p');
    newp.id='newp';
    newp.innerText='hello,world';
    list.append('newp');
    //创建一个标签节点
    let myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    // var body=document.getElementsByTagName('body');
    // body[0].setAttribute('style','background-color:red');
    let mystyle = document.createElement('style');
    mystyle.setAttribute('type','text/css');
    mystyle.innerText='body{ background-color: green;}';
    let head = document.getElementsByTagName('head');
    head[0].appendChild(mystyle);

</script>

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

    insert

    <script>
    let se = document.getElementById('JavaSE');
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    list.insertBefore(js,se);//新节点，插入位置节点
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    11.操作表单

    获取表单信息

    <script>
    var text_input=document.getElementById('username');
    var boy_redio=document.getElementById('boy');
    var girl_redio=document.getElementById('girl');
    //得到输入框的值
    text_input.value;
    //修改输入框的值
    text_input.value='222';

    //对于单选框，多选框等，固定的值，xxx.value只能获得当前的值
    boy_redio.checked;//查看结束是否是true 如果为true则被选中
    
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    MD5加密

    <!--表单绑定 使用return 进行校验判断-->
<form action="#" method="post" onsubmit="return aaa()">
    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" id="username" name="username"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" id="password" ></td>
        </tr>
        <tr>

            <td><input type="hidden" id="md5_password" name="password"></td>
        </tr>
        <tr>
            <td><button type="submit" >登录</button></td>
        </tr>
    </table>

    <script>
        function aaa() {
            let uname = document.getElementById('username');
            let pwd = document.getElementById('password');
            let md5pwd = document.getElementById('md5_password');
            md5pwd.value=md5(pwd.value);

            return true;
        }
    </script>
</form>

    • 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

    使用隐藏域，不会出现显示密码变长

    12.jQuery

    jQuer库，里面有大量的javascript

    获取jQuery

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    使用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--

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

-->

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

<script>
    //css选择器
    $('#test-jquery').click(function () {
        alert('hello,jQuery');
    })
</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

    选择器

    //原生js，选择器少
//标签选择器
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

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

    事件

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

    鼠标事件：

    • mousedown事件：鼠标按下触发

    • mouseup事件：松开鼠标时触发

    • mouseover事件：点击结束触发

    • mousemove事件：鼠标移动触发

    • mouseenter事件：光标进入元素上时触发。

    • mouseleaver事件：用户的光标离开元素时触发。

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

    • 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

    键盘事件

    1.keydown()事件
    当按钮被按下时，发生 keydown 事件。

    2.keypress()事件
    keypress 当按钮被按下时，会发生该事件，我们可以理解为按下并抬起同一个按键。

    3.keyup事件
    keyup 事件会在按键释放时触发，也就是你按下键盘起来后的事件

    操作DOM

    $('#test-ul li[name="python"]').text();//获取值
$('#test-ul li[name="python"]').text('sss');//设置值
 $('#test-ul').html();//获得值
 $('#test-ul').html('<strong>123</strong>');//操作值

    • 1
    • 2
    • 3
    • 4

    css的操作

    3.6版本是：

    如果低版本是,隔开

    $('#test-ul li[name="python"]').css({"color":"red"});

    • 1

    元素显示和隐藏

    $('#test-ul li[name="python"]').hide();//show()显示 hide()隐藏
$('#test-ul li[name="python"]').toggle();//显示与隐藏 交换

    • 1
    • 2
  • 相关阅读:
    Python中的增强现实（AR）技术和应用
    多网站批量蜘蛛日志分析工具
    Android Studio 使用gradle自动打包报错:
    NPDP真实的样子你肯定不知道！
    四大步骤教你发布新闻源软文，媒介盒子无偿分享
    Spring WebJars 教程
    001.第一个C语言项目
    CMAKE语法：target_compile_definitions、message、make -f、add_library
    Ruoyi-vue项目讲解
    报错与解决 | 应用程序无法启动0x7b mysql
  • 原文地址：https://blog.csdn.net/liuwushuang233/article/details/125424169