JavaScript基础_6、编写javascript代码,输出所有的女生,按下面的格式输出结果(20分)。[name=张三.-CSDN博客

本文链接：https://blog.csdn.net/qq_42511420/article/details/121783773

JavaScript基础

1、什么是JavaScript
2、快速入门
- 2.1、引入JavaScript
- - 1.内部标签
  - 2.外部引用
- 2.2、基本语法
- 2.3、数据类型
- 2.4变量，数组
- 2.5、运算
- 2.6、严格检查模式
3、数据类型
- 3.1、字符串
- 3.2、数组
- 3.3、Map 和 Set
- 3.4、iterator
- - 1.遍历map
  - 2.遍历set
4、对象
- 4.1、创建对象
- 4.2、对象操作
5、控制流程
- 5.1、if判断
- 5.2、while循环
- 5.3、for循环
- 5.4、for of
- 5.5、for in
- 5.6、forEach循环
6、函数
- 6.1、定义函数
- 6.2、参数
7、变量
- 7.1、声明变量
- 7.2、作用域
- 7.3、变量方法内作用域
- 7.4、变量相关补充
- 7.5、windows对象
8、方法
- 8.1、定义方法
- 8.2、扩展
- - 1.this
  - 2.apply
9、内部对象
- 9.1、Date
- 9.2、JSON
- - 1.JSON格式
10、面向对象
- 10.1 __proto__ 属性
- 10.2 类
- - 1.定义类
  - 2.继承
11、BOM对象
- 11.1、window
- 11.2、Navigator
- 11.3、screen
- 11.4、location
- 11.5、document
- 11.6、history
12、DOM对象
- 12.1、核心
- 12.2、获得DOM节点
- 12.3、更新DOM节点
- 12.4、删除节点
- 12.5、插入节点
- - 1.已存在的节点进行追加
  - 2.新建一个节点进行追加
13、操作表单
- 13.1、操作表单属性值
- 13.2、表单提交
14、jQuery
- jQuery引入
- 14.2、初体验
- 14.3、选择器
- 14.4、事件
- 14.5、操作Dom元素

1、什么是JavaScript

JavaScript是一门世界上最流行的脚本语言之一。

2、快速入门

2.1、引入JavaScript

1.内部标签

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

</body>
<!--script标签内，写JavaScript代码-->
<script>
    // 弹出hello,word
    alert('hello,word')
</script>
</html>

2.外部引用

html

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

</body>
<!--script外部引入-->
<script src="js/hello.js"></script>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<!--script外部引入 必须成对出现
            不用显示定义type 也默认是javascript-->
<script src="js/hello.js" type="text/javascript"></script>
</html>

alert('hello,word')

2.2、基本语法

<script>
  // js区分大小写
  // 1. 定义变量  变量类型  变量名 = 变量值 ;
  var num = 1;
  alert(num);
  // 2.条件控制
  var score = 80;
  if (score>70){
      alert("70")
  }else if(score>50){
      alert("50")
  }else {
      alert("40")
  }
  //打印输出
  console.log(score)
</script>

2.3、数据类型

number

js不区分小数和整数

123			//整数
123.1		//浮点数
1.23e3		//科学计数法
-99			//负数
NAN			//不是数值  not a number
Infinity	//表示超出范围（无限大）

字符

‘abc’ 或 “abc”

布尔值

true , false

null

空值

undefined

未定义

2.4变量，数组

1.数组

数组使用中括号。

Java数组是相同类型的对象，JS中是不需要的。

如果取数过程中数组越界，不会抛出异样，取出的数据会显示undefined 表示未定义

var a = [1,2,3,4,'a',null,true]
//或

new Array(1,2,3,4,'a',null,true)

2.对象

对象使用大括号。每个属性使用逗号分隔，最后一个不需要。

var persion{
    name: "张三",
    age: 4,
    tags:['js','java',666]
}

取对象值

persion.name
> "张三"
persion.age
> 4

3.变量

var a ;

2.5、运算

1.逻辑运算

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

||	一个为真，就为真

!	真即假，假即真

2.比较运算

=		赋值

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

ps：

NAN===NAN ,与所有的值都不相等，包括自己
只能通过isNaN(NAN)来判断是否是NAN
尽量避免使用浮点数进行运算，存在精度问题

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

浮点数只能是接近

  console.log(Math.abs((1/3)-(1-2/3))<0.00000.1)//true

2.6、严格检查模式

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

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

</script>
</html>

3、数据类型

3.1、字符串

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

2.转义字符

\'  	//单引号
\n		//换行
\t		//制表
\u4e2d	//Unicode字符 格式\u####
\x41	//Ascll字符

3.多行字符串编写

//注意不是单引号 是`
var msg = `asd
	qwe
zxzc`

4.模板字符串

  let name = "张三";
  let age = 15;
//注意不是单引号 是`
  let msg = `你好， ${name} 年龄是 ${age}`;
  console.log(msg);

5.字符串长度

var str = 'sudent';
console.log(str.length);//6

6.字符串不可变

7.其他方法

var str = 'sudent';

//字符串大写
console.log(str.toUpperCase());
//SUDENT  

//字符串小写
console.log(str.toLocaleLowerCase());
//sudent

//找到最先出现字符匹配的位置
console.log(str.indexOf('a'));
// 没找到 -1
console.log(str.indexOf('u'));
// 下标为1  1
console.log(str.indexOf('en'));
// 下标为3 3

//截取字符串
//从第二个字符到最后
console.log(str.substring(2));
//dent
//从第二个到第4个 [2,4) 包前不包后
console.log(str.substring(2,4));
//de

3.2、数组

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

var arr = [1,2,3,4,5,6];	//通过下标进行取值与赋值
arr [0];	//1
arr [0] = 3;
arr [0] ;	//3

1.长度

arr.length

注意：对arr.length赋值数组长度会发生变化，加长会加入undefined进行补充，减小会导致末尾的元素丢失。

2.indexOf，通过元素获取下标

arr.indexOf(2);
//1

注意：字符串的’1’与数字1是不同的

3.slice() 截取Array

截取Array的一部分，返回一个新的数组，类似String中的substring

arr.slice(3);
//从下标3的元素开始截取到最后一个  [4，5，6]

arr.slice(1，5);
//从下标3的元素开始截取到下标为5的元素但是不包含下标为5的元素  [2，3，4，5]  包头不包尾

4.push / pop

push：从尾部压入元素

pop：弹出尾部一个元素

arr.push('a','b');	//8

//数组情况 [1,2,3,4,5,6,'a','b']

arr.pop();	//'b'

//数组情况 [1,2,3,4,5,6,'a']

5.unshift / shift

unshift：压入到头部

shift：弹出头部一个元素

arr.unshift('a','b');	//	8

//数组情况 ['a','b',1,2,3,4,5,6]

arr.shift();	// 'a'

//数组情况 ['b',1,2,3,4,5,6]

6.排序，反转

var ls = ['c','a','b'];
ls.sort();
//['a','b','c']

ls.reverse();
//['c','b','a']

7.拼接

concat 不会修改数组，只是返回一个拼接好的数组

var ls = ['c','a','b'];
ls.concat([1,2,3]);
//['c','a','b',1,2,3]
ls //['c','a','b']

8.连接

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

var ls = ['c','a','b'];
ls.join('-');
//'c-a-b' 不指定则默认为,逗号

9.多维数组

var arr = [[1,2],[5,7],['a','b','c']];
arr[2][1];
//'b'

10.填充

var arr = [2,3];
arr.fill(1);
//[1,1]

3.3、Map 和 Set

Map：

<script>
    'use strict'
    var map = new Map([['a','10'],['b',20]]);
    var name = map.get('a');    //通过key获取value
	//添加一个键值对
    map.set('c',30);
    console.log(name)
	//删除一个键值对
	map.delete("b");
</script>

Set：无序不重复集合

<script>
    'use strict'
    var set = new Set([1,1,2,3,4,4]);
    //添加一个值
    set.add(5);
    //删除一个值
    set.delete(2);
	//是否包含某一个元素
    console.log(set.has(4));
</script>

3.4、iterator

1.遍历map

var map = new Map([['a','10'],['b',20]]);
    for (let x of map){
        console.log(x)
    }

2.遍历set

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

4、对象

4.1、创建对象

以键值对形式存储属性 XXX:xx,多个属性之间用逗号隔开，最后一个属性不加逗号。对象只包含属性与方法。

<script>
    'use strict'
    // var 对象名= {
    //     属性名: 属性值，
    //   属性名: 属性值，
    //   属性名: 属性值
    // }
    var person = {
        name: "张三",
        age: 13,
        score: 0
    }
</script>

4.2、对象操作

1.对象赋值

person.name	//"张三"

person.name = "李四";
person.name	//"李四"

//使用一个不存在的对象属性，不会报错
person.nohave //undefined

2.动态修改对象属性

//删除name属性 （通过delete删除对象属性）
delete person.name //true

//添加一个xin属性 （直接给新的属性赋值）
person.xin = "新的属性"

3.判断对象是否包含此属性

JavaScript 中所有的键都是字符串，值可以是任意的类型。

'age' in person //true

//继承而来
'toString' in person //rue

4.判断属性是否是自身拥有

person.hasOwnProperty('toString') //false

person.hasOwnProperty('age')	//true

5、控制流程

5.1、if判断

var age = 3;
if(age>0){
    alert(0);
}else if(age>10){
    alert(10)
}else{
    alert(100)
}

5.2、while循环

var age = 0;
while(age<100){
    age = age + 1;//age ++ 等效
    console.log(age)
}
/
do{
    age = age + 1;//age ++ 等效
    console.log(age)
}while(age<100)

5.3、for循环

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

5.4、for of

//for(var arrElement in object){}
//取出的变量是值 
var arr=[1,2,3,'a',4,5,'s',6,7,8];
    for (var arrElement of arr) {
        console.log(arrElement)
    }

5.5、for in

//for(var index in object){}
//只能获得对象的键名，不能直接获取键值  也包含属性名
	var arr=[1,2,3,'a',4,5,'s',6,7,8];
    for(var num in arr){
        console.log(arr[num]);
    }

5.6、forEach循环

<script>
    'use strict'
    var arr=[1,2,3,'a',4,5,'s',6,7,8];
    arr.forEach(function (value){
        console.log(value)
    })
</script>

6、函数

6.1、定义函数

方式一：

function 方法名(参数){
    方法体;
    return 返回值;
}

执行到return 代表函数结束，返回结果。

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

方式二：

var 方法名 = function (参数){
    方法体;
    return 返回值;
}

function(x){…}是一个匿名函数。通过变量进行调用。两种方式一样。

补充

js中传参多于定义参数不会报错，

传参少于定义参数不会报错，但是剩余为接到传参的参数值为undefined

不传参数，也不会报错

6.2、参数

判断参数类型

<script>
    function abs(x){
    	//判断参数类型
        if (typeof x != 'number'){
            //自定义异常
            throw '不是数字'
        }
        if(x>0){
            return x;
        }else {
            console.log(x)
        }
    }
</script>

arguments

arguments是js内置的一个关键字，是一个数组类型，代表传递进来的全部参数。

<script>
    function abs(x){
        if (typeof x != 'number'){
            throw '不是数字'
        }
    	//遍历打印arguments
        for (let i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
        if(x>0){
            return x;
        }else {
            console.log(x)
        }
    }
</script>

rest

获取已经定义的参数之外的全部参数。rest参数只能写在最后一个固定为…参数名

<script>
    function abs(a,b,...rest){
        console.log('a= '+a);
        console.log('b= '+b);
        console.log(rest);
    }
</script>

7、变量

7.1、声明变量

变量是用于存储信息的”容器”。

<script>
    var x=5;
    var y=6;
    var z=x+y;
    console.log(x)
    console.log(y)
    console.log(z)
</script>

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

7.2、作用域

1.全局变量

在函数外声明的变量作用域是全局的：

var carName = "Volvo";
// 这里可以使用 carName 变量
function myFunction() {
    // 这里也可以使用 carName 变量
}

2.局部变量

// 这里不能使用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 这里可以使用 carName 变量
}
// 这里不能使用 carName 变量

3.块级作用域(Block Scope)

var变量

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

let变量

ES6 可以使用 let 关键字来实现块级作用域。

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

let 声明的变量只在其声明的块或子块中可用，这一点，与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

 <button onclick="varTest();">var</button>
    <button onclick="letTest();">let</button>
    <script>
        function varTest() {
            var x = 1;
            if (true) {
                var x = 2;       // 同样的变量!
                console.log(x);  // 2
            }
            console.log(x);  // 2
        }
        function letTest() {
            let x = 1;
            if (true) {
                let x = 2;       // 不同的变量    
                console.log(x);  // 2  
            }
            console.log(x);  // 1
        }
    </script>

const关键字

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

const PI = 3.141592653589793;
PI = 3.14;      // 报错
PI = PI + 10;   // 报错

const定义常量与使用let 定义的变量相似：

二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别：

const声明的常量必须初始化，而let声明的变量不用
const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改

var x = 10;
// 这里输出 x 为 10
{ 
    const x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。下面的代码并不会报错：

// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
// 修改属性:
car.color = "red";
// 添加属性
car.owner = "Johnson";

但是我们不能对常量对象重新赋值

7.3、变量方法内作用域

1.在JavaScript中，var定义变量是有作用域的。

2.在函数体中声明，则在函数体外是不可以使用的。

<script>
    function test() {
        var a = 1;
        a = a + 1;
    }

    a = a + 2; //超出作用域报错：Uncaught ReferenceError: a is not defined
</script>

3.不同函数内部使用相同的内部函数变量，不相互冲突

<script>
    function test() {
        var a = 1;
        return a;
    }

    function test1() {
        var a = 'A';
        return a;
    }

    console.log(test());	//1
    console.log(test1());	//A
</script>

4.内部函数可以访问外部函数的成员，反之不行

<script>
    function test() {
        var a = 1;
        console.log(a);	//1
        function test1() {
            console.log('a='+a);
            var b = a+1;
            console.log(b);
        }
        test1();//a = 1
    			//2
        console.log(b);//Uncaught ReferenceError: b is not defined
    }
test();
</script>

5.内部函数与外部函数使用的变量重名，内部函数变量会覆盖外部变量值，由内向外查找

<script>
    function test() {
        var a = 1;
        function test1() {
            var a = 666;
            console.log('a='+a);
        }
        test1();	//a=666
        console.log(a);	//1
    }
test();
</script>

7.4、变量相关补充

JavaScript执行时会自动将var 的变量提前声明，但是不会进行赋值

<script>
    function test() {
        var a = 'a';
        a = a + '==' + b;
        var b = 'b'
        console.log(a);//a==undefined
    /*
    与之类似
     	var a = 'a';
     	var b;
        a = a + '==' + b;
        b = 'b'
        console.log(a);//a==undefined
    */
    }
    function test1() {
        var a = 'a';
        a = a + '==' + b;
        let b = 'b'
        console.log(a);//uncaught ReferenceError: Cannot access 'b' before initialization
    }

    test();
    test1();
</script>

7.5、windows对象

浏览器里面，window对象（注意，w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。

a = 1;
window.a // 1

上面代码中，a是一个没有声明就直接赋值的变量，它自动成为顶层对象的属性。

8、方法

8.1、定义方法

方法就是把函数放在对象的里面。

<script>
    var test = {
        name : 'a',
        birth : 2000,
        //方法
        age : function (){
            //获取当前年
            var now = new Date().getFullYear();
            return now-this.birth;
        }
    }
	//test.age() 调用方法
    console.log(test.age())//21
</script>

调取属性：

对象名.属性名

调取方法：一定要带()

对象名.方法名()

8.2、扩展

与上述保持功能一致，转换格式

<script>
    function getage (){
        //获取当前年
        var now = new Date().getFullYear();
        return now-this.birth;
    }
    var test = {
        name : 'a',
        birth : 2000,
        //方法
        age : getage
    }
    console.log(test.age())//21
</script>

1.this

this是无法进行指定指向的，只能指向调用它的对象。

2.apply

apply方法能劫持另外一个对象的方法，继承另外一个对象的属性

Function.apply(obj,args)方法能接收两个参数
obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args–>arguments）

<script>
    function getage (){
        //获取当前年
        var now = new Date().getFullYear();
        return now-this.birth;
    }
    var test = {
        name : 'a',
        birth : 2000,
        //方法
        age : getage
    }
    
    console.log(getage.apply(test,[]))//21
</script>

9、内部对象

9.1、Date

<script>
  var now = new Date();
  console.log(now); //Date Wed Dec 01 2021 17:16:03 GMT+0800 (中国标准时间)
  console.log(now.getFullYear());   //年
  console.log(now.getMonth());      //月 0~11
  console.log(now.getDate());       //日
  console.log(now.getDay());        //星期
  console.log(now.getHours());      //时
  console.log(now.getMinutes());    //分
  console.log(now.getSeconds());    //秒
  console.log(now.getTime());       //时间戳
  console.log(new Date(1638350549408));//时间戳转时间
</script>

9.2、JSON

JSON 是一种轻量级的数据交换格式。具有简洁和清晰的层次结构，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

1.JSON格式

对象使用{}
数组使用[]
键值对格式 key:value

<script>
    var user = {
        name : '张三',
        age : 3,
        sex : "男士"
    }

    //对象转换成json字符串，参数是对象
    var jsonuser = JSON.stringify(user);
    console.log(jsonuser);      //{"name":"张三","age":3,"sex":"男士"}

    //json字符串转换成对象 ，参数是json字符串
    //var obj = JSON.parse('{"name":"张三","age":3,"sex":"男士"}');  效果一样
    var obj = JSON.parse(jsonuser);
    console.log(obj)        //Object { name: "张三", age: 3, sex: "男士" }
</script>

10、面向对象

10.1 proto 属性

__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null

<script>
    var user = {
        name : '张三',
        age : 3,
        sex : "男士",
        run : function (){
            console.log(this.name + "run ....");
        }
    }

    var lisi = {
        name : '李四'
    }
	//将user指定为lisi原型对象（也可以理解成是父类）
    lisi.__proto__ = user;

    console.log(lisi.run()); //李四run ....
</script>

10.2 类

1.定义类

定义类，属性，方法

<script>
    class User{
        constructor(name) {
            this.name =name;
        }

        hello(){
            console.log(this.name+'说 hello')
        }
    }
    var san = new User("张三");
    san.hello()
</script>

2.继承

extends继承父级类

<script>
    class User{
        constructor(name) {
            this.name =name;
        }

        hello(){
            console.log(this.name+'说 hello')
        }
    }
    var san = new User("张三");
    san.hello()                 //张三说 hello

    class children extends User{
        constructor(name,age) {
            super(name);
            this.age = age;
        }

        hello() {
            super.hello();
        }

        getage(){
            return this.age;
        }
    }
    var xiao = new children('xiao',10);
    console.log(xiao.name)      //xiao
    xiao.hello();               //xiao说 hello
    console.log(xiao.getage()); //10
</script>

11、BOM对象

BOM：浏览器对象模型

11.1、window

window：代表浏览器窗口

window.innerHeight  //获取浏览器内部高度

window.innerWidth  	//获取浏览器内部宽度

window.outerHeight  //获取浏览器实际高度

window.outerWidth  	//获取浏览器实际宽度度

11.2、Navigator

Navigator：封装了浏览器的信息.

不建议使用navigator属性判断浏览器信息，因为navigator可以人为修改。

navigator.appVersion
/*'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34'*/
navigator.userAgent
/*'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34'*/
navigator.platform
//'Win32'

11.3、screen

screen：屏幕信息

screen.width
//1366
screen.height
//768

11.4、location

location：代表当前页面的URL信息。

//location 对象常用参数
host: "www.baidu.com"			//主机
hostname: "www.baidu.com"		//主机名
href: "https://www.baidu.com/"	//地址
protocol: "https:"				//协议
reload: ƒ reload()				//刷新

//其他
location.assign()				//加载一个新的文档（网站）

11.5、document

document：当前页面

document.title  //获取当前页面标题

获取具体的文档树节点

<dl id="app">
    <dt>java</dt>
<dl/>
 
<script>
    var dl =  document.getElementById("app");
</script>

获取cookie

document.cookie

11.6、history

history：代表浏览器历史记录（不建议使用）

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

12、DOM对象

12.1、核心

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

操作：

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

12.2、获得DOM节点

获取的返回值可能是数组需要注意。

<!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>

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

12.3、更新DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="id1"></div>
</body>
<script>
    var id1 = document.getElementById('id1');

    //修改文本
    id1.innerText = '123';    //修改文本值

    id1.innerHTML = '<strong>123</strong>';//可以解析HTML文本标签

    //修改样式  属性使用字符串包裹
    id1.style.color = 'red';
    id1.style.fontSize = '20px';
</script>
</html>

12.4、删除节点

步骤：

获取自身节点。
获取父节点。
通过父节点删除自身节点。

<!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>

</body>
<script>
    //获取自身节点
    var self = document.getElementById('p1');
	//获取父节点
    var father =self.parentElement;
	//通过父节点删除自身节点
    father.removeChild(p1);    
</script>
</html>

注意：删除节点是，children是实时更新的。

12.5、插入节点

当获取到某个空的DOM节点时，可以通过innerHTML增加元素，但是如果DOM节点已经存在元素时就需要使用追加的方式进行插入元素，已避免覆盖。

1.已存在的节点进行追加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="test">test</p>
<div id="list">
    <p id="ls1">ls1</p>
    <p id="ls2">ls2</p>
    <p id="ls3">ls3</p>
</div>

</body>
<script>
    var test = document.getElementById('test');
    var list = document.getElementById('list');
    var ls2 = document.getElementById('ls2');
    list.append(test);//由div外，追加到div内
    //包含节点.（插入节点，目标节点）
    //把test插入到ls2前
    list.insertBefore(test,ls2)
</script>
</html>

2.新建一个节点进行追加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="test">test</p>
<div id="list">
    <p id="ls1">ls1</p>
    <p id="ls2">ls2</p>
    <p id="ls3">ls3</p>
</div>

</body>
<script>
    var list = document.getElementById('list');
    /*
    类似
    <p id="newp">newp</p>
     */
    //创建一个p标签
    var newp = document.createElement('p');
    //为newp赋值id
    newp.id = 'newp';
    //为newp赋值文字
    newp.innerText = '新的标签';

    //现在newp没有显示，追加到list下显示
    list.appendChild(newp);
    
    //新的标签节点    通过属性设置值
    var myScirpt = document.createElement('script');
    myScirpt.setAttribute('type','text/javascript');
    list.appendChild(myScirpt);
</script>
</html>

13、操作表单

13.1、操作表单属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<from action="post">
    <span>用户名：</span>
    <input type="text" id="username">
    <span>性别</span>
    <input type="radio" name="sex" value="man" id="man"> 男
    <input type="radio" name="sex" value="woman" id="woman"> 女
</from>
</body>
<script>
    var input_text= document.getElementById('username');
    //input_text.value 可以获取或编辑用户名
    var value = input_text.value;
    input_text.value = "张三";


    var man = document.getElementById('man');
    var woman = document.getElementById('woman');
    //查看是否选中  ，选中返回true  未选中false
    man.checked;

    //设置man选中
    man.checked = true;
</script>
</html>

13.2、表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--绑定提交事件 onsubmit绑定方法前加return后 如果绑定方法返回false则不会继续进行提交，true会正常提交-->
<from action="https://space.bilibili.com/" method="post" onsubmit="return test()">
    <span>用户名：</span>
    <input type="text" id="username">
    <span>密码：</span>
    <input type="password" id="password">

<!--    绑定点击事件-->
    <button type="submit" onclick="test()">提交</button>
</from>
</body>
<script>
    function test(){
        alert(10);
        return true;
    }
</script>
</html>

14、jQuery

jQuery是一个库里面存在大量的JavaScript函数

推荐API网站：https://jquery.cuishifeng.cn/

jQuery引入

1.cdn引入

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

</body>
</html>

2.本地导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    本地导入-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>

</body>
</html>

14.2、初体验

模板：$(选择器).事件()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    本地导入-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="test">链接</a>
</body>
<!--
              $(选择器).事件()
    使用公式: $(selector).action()
-->
<script>
    // 选择方式简化 document.getElementById('test')
    $('#test').click(function (){
        alert('test')
    })
</script>
</html>

14.3、选择器

<script>
    // 选择方式简化 document.getElementById('test')
    $('p').click();         //标签选择器 ‘标签’
    $('#id').click();       //id选择器
    $('.class').click();    //类选择器
</script>

14.4、事件

分为：鼠标事件，键盘事件等

举例：

<!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: 500px;
            height: 500px;
            border: 1px solid deepskyblue;
        }
    </style>
</head>
<body>
mouse ：<span id="mouseMove"></span>
<div id="divMove">
    鼠标移动区
</div>
</body>
<script>
    //当网页元素加载完毕后，相应事件
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX+' Y:'+e.pageY)
        })
    });
</script>
</html>

14.5、操作Dom元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>


<ul id="testul">
    <li class="test1">test1</li>
    <li name="test2">test2</li>
</ul>
</body>
<script>
    $('#testul li[name=test2]').test();		//获取值
    $('#testul li[name=test2]').test('a');	//设置值
    $('#testul').html();					//同上
    
    //设置css样式
    $('#testul li[name=test2]').css({"color":"red"});
    
    
    $('#testul li[name=test2]').hide();//隐藏
    $('#testul li[name=test2]').show();//显示
    $('#testul li[name=test2]').toggle();//切换显示隐藏
    //本质display :none
</script>
</html>