JavaScript基础知识（基础需要重点掌握）

2021/9/9 1:07:29

编程Tag： javascript function var console name 基础知识 document log 掌握

本文主要是介绍JavaScript基础知识（基础需要重点掌握），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

JavaScript
- 引入JavaScript
- 基本语法
- 数据类型
- 严格检查模式
- 流程控制
- Map和Set
- iterator
- 函数
- - 函数定义
  - 变量的作用域
  - 方法
- 内部对象
- - Date
- JOSN
- 面向对象编程
- - 原型对象
  - class
  - 继承
  - 原形链
- 操作BOM对象***
- 操作DOM对象***
- 操作表单（验证）
- jQuery

JavaScript

引入JavaScript

内部标签

<script>
    //...
</script>

外部引用

<script src="js文件路径"></script>

html文件

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

    <!--内部引用-->
    <!--script标签内JavaScript代码-->
    <script>
        alert("hello world");
    </script>
    
    <!--外部引用-->
    <script src="js/JavaScript01.js"></script>

</head>
<body>
    这里也可以写js代码
</body>
</html>

js文件

alert("hello world");

基本语法

注释：

单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。

多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。

变量：

JavaScript 使用 var 关键词来声明变量。

输出：

alert(score);

console.log(score); 在浏览器的控制台输出

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

  <!--JavaScript严格区分大小写-->
  <script>
    //1.定义变量    变量类型  变量名  =  变量值;
    var score = 71;
    // alert(score);
    //2.条件控制
    if (score>60 && score<70){
      alert("及格");
    }else if (score>70 && score<80){
      alert("中等");
    }else {
      alert("优秀");
    }

    //console.log(score);     在浏览器的控制台输出

  </script>
  
</head>
<body>
</body>
</html>

数据类型

变量

var 变量名;

number

js不区分小数和整数

10//整数
10.1//浮点数
1.01e3//科学计数法
-10//负数
NaN//Not a Number
Infinity//表示无限大

字符串

字符串使用单引号或者双引号包裹通过下标取值，不能赋值，字符串不可变
注意转义字符串 \

\'
\n
\t
\u4e2d   \u####  unicode字符
\x41     Ascll字符

多行字符串编写

    var msg = `
              hello
              world
              你好
              `

模板字符串

'use strict';
let name = 'sgl';
var msg = `你好呀！${name}`

字符串长度

str.length

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

//注意这里是方法不是属性
str.toUpperCase()
str.toLowerCase()

获取字符串中字符的下标

str.indexOf('a')

substring

[)
 str.substring(1)  //从第一个字符串截取到最后一个字符串
 str.substring(1,3)//[) 截取1~3的字符，包含1不包含3

布尔值

true，false

逻辑运算符

&&    两个都为真，结果为真
||    一个为真，结果为真
!     真即假，假即真

比较运算符

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

null和undefined

null：空
undefined：未定义

数组

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

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true];  //通过下标取值或赋值
new Array(1,2,3,'hello',null,true);

如果数组下标越界：显示undefined

Array可以包含任意数据类型

数组长度

arr.length

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

indexOf 通过元素获得下标索引

arr.indexOf(2)

注意：字符串的"2"和数字2 不同

slice () 截取Array的一部分，返回一个新数组，类似于String中的substring
push() pop() 尾部

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

unshift() shift() 头部

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

sort() 排序 reverse() 反转

concat() 拼接没有修改数组，只是会返回一个新的数组

join() 连接符

var arr = ['A','C'];
arr.push('B')
3
arr
(3) ["A", "C", "B"]
arr.sort();
(3) ["A", "B", "C"]
arr.reverse()
(3) ["C", "B", "A"]
arr.concat([1,2,3])
(6) ["C", "B", "A", 1, 2, 3]
arr.join('-')
"C-B-A"

多维数组

arr = [[1,2],[3,4],["5","6"]]
arr[1][1]
4

对象

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

格式：若干个键值对

var 对象名 = {
    属性名:属性值，
    属性名:属性值，
    属性名:属性值，
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  
  <script>
    //Java对象定义Person person = new Person()
    var person = {
      name:"sgl",
      age:22,
      tags:['js','css','html']
    }
  </script>
</head>
<body>
</body>
</html>

对象赋值

person.name="coco";
"coco"
person.name;
"coco"

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

person.hh
undefined

动态的删减属性，通过delete删除对象的属性；动态的添加，直接给新的属性添加值即可

person.name="coco";
"coco"
person.name;
"coco"
delete person.name;
true
person.haha="haha"
"haha"

判断属性的值是否存在这个对象中! xxx in xxx

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

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

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

严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  
  <!--
  前提:IDEA 需要支持ES6语法
  'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
  必须写在JavaScript代码的第一行
  局部变量建议使用let定义
  -->
  <script>
    'use strict'
    //局部变量
    let b = 1;
  </script>
</head>
<body>
</body>
</html>

流程控制

if判断

    var score = 71;
    // alert(score);
    //2.条件控制
    if (score>60 && score<70){
      alert("及格");
    }else if (score>70 && score<80){
      alert("中等");
    }else {
      alert("优秀");
    }

while循环，避免死循环

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

      do {
          age = age + 1;
          alert(age);
      }while (age<100)

for循环

for (let i = 0; i < 100; i++) {
          alert(i); //浏览器弹窗输出
          //console.log(i);   控制台输出
      }

forEach循环

var arr = [12,23,123,45,67,89]
//函数
arr.forEach(function (value){
    console.log(value);
})

for in

index代表数组arr元素的索引

arr[index] 输出数组arr的值

for of

value 输出数组arr的值

var arr = [12,23,123,45,67,89]
for (var index in arr){
    console.log(index);  //index代表数组arr元素的索引
    console.log(arr[index]);  //输出数组arr的值
    
for (var value of arr){
    console.log(value);  //输出数组arr的值

Map和Set

Map：

var map = new Map([['tom',100],['jack',99],['lucy',98]]);
var name = map.get('tom');  //通过key获取value
map.set('linda',88);  //新增或修改
map.delete("jack");//删除

Set: 无序不重复集合

let set = new Set([3,2,1,2,3]);  //set可以去重
set.add(4);
set.delete(1)
console.log(set.has(3))

iterator

iterator遍历迭代Map和Set

var map = new Map([['tom',100],['jack',99],['lucy',98]]);
for (let value of map) {
    console.log(value);
}

let set = new Set([7,8,9]);
for (let value2 of set) {
    console.log(value2);
}

函数

函数定义

定义方式一

function 函数名(属性值){
    //函数体
}

绝对值函数

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

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

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

定义方式二

var 函数名 = function(属性值){
	//函数体
}

绝对值函数

var abs = function(x){
        if(x>=0){
        return x;
    }else{
        return -x;
    }
}

调用函数

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

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

abs();   //NaN
abs(10,29,10);  //10

手动抛出异常可解决

var abs = function(x){
    if (typeof x!=='number'){
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

abs();
Uncaught Not a Number

arguments

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

var abs = function(x){
    console.log("x-->"+x);
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    if (typeof x!=='number'){
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

控制台运行结果：

abs(25,23,65,98,65);
x-->25   //x指向第一个参数
25   //arguments[i]  输出的
23
65
98
65
25   //if语句输出的25

rest

获取剩余的参数

function fun(a,b,...rest){
    console.log("a-->"+a);
    console.log("b-->"+b);
    console.log(rest);
}

控制台的运行结果:

fun(1,2,3,6,7);
a-->1
b-->2
(3) [3, 6, 7]

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

变量的作用域

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

假设在函数体中声明，则在函数体外不可以使用，否则报错 Uncaught ReferenceError: x is not defined

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

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

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

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

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

假设，内部函数变量和外部函数变量重名

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

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

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

function f(){
    var x = 1,
        y = x + 1,
        z,i,a;  //undef
    
    //之后可以随便用
}

全局函数

//全局变量
x = 1；

function f(){
    console.log(x);
}
f();
console.log(x);

全局对象 window

var x = 1;
alert(x);
alert(window.x);

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

      var x = 1;
      window.alert(x);
      let alert_01 = window.alert;
      alert_01(x);

      window.alert = function () {

      }
      //发现alert失效了
      window.alert(123);

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

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

规范

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

//唯一全局变量
var sgl = {};

//定义全局变量
sgl.name = 'coco';
sgl.add = function(a,b){
    return a+b;
}

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

局部作用域 let

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

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

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

常量 const

var PI = '3.14';
console.log(PI);  //3.14
PI = '111';  //可以改变这个值
console.log(PI);  //111

引入了常量const

const PI = '3.14';  //只读变量
console.log(PI);
PI = '111';  //直接报错   Uncaught TypeError: Assignment to constant variable.

方法

定义方法

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

var sgl =  {
    name: '刚龙',
    birth: 2000,
    //方法
    age:function() {
        //今年 - 出生的年
        let now = new Date().getFullYear();
        return now - this.birth;
    }
}

//属性
sgl.birth;
//方法，调用方法一定要带括号()
sgl.age();

拆开

       function getAge() {
          //今年 - 出生的年
         let now = new Date().getFullYear();
         return now - this.birth;
       }
        var sgl =  {
          name: '刚龙',
          birth: 2000,
          age:getAge
        }
        //sgl.age();  可以
       //getAge()  NaN  window

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

apply

在js中可以控制this的指向

getAge.apply(sgl,[])

       function getAge() {
          //今年 - 出生的年
         let now = new Date().getFullYear();
         return now - this.birth;
       }
        var sgl =  {
          name: '刚龙',
          birth: 2000,
          age:getAge
        }
        
        getAge.apply(sgl,[]);//this指向了  sgl  ，参数为空

内部对象

标准对象

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

Date

基本使用

    var now = new Date();  //console.log(now);
                           //VM81:1 Tue Sep 07 2021 21:42:17 GMT+0800 (China Standard Time)当前时间
    //在控制台输出
    now.getFullYear();//年
    now.getMonth();//月   0~11代表月
    now.getDate();//日
    now.getDay();//星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒

    now.getTime();//时间戳  1970.1.1 00:00:00  毫秒数    1631022468114

    console.log(new Date(1631022468114))  //时间戳转为时间

转换(控制台输出)

var now = new Date(); 
console.log(new Date(1631022468114))
Tue Sep 07 2021 21:47:48 GMT+0800 (China Standard Time)
now.toLocaleDateString   //注意调用是一个方式，不是一个属性
ƒ toLocaleDateString() { [native code] }
now.toLocaleDateString();
"07/09/2021"
now.toLocaleString()
"07/09/2021, 21:47:48"
now .toGMTString()
"Tue, 07 Sep 2021 13:47:48 GMT"

JOSN

JOSN是什么

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

在JavaScript一切解对象，任何js支持的类型都可以用JOSN来表示；number ，string …

格式：

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

JOSN和js对象的转化

    var user = {
      name:'sgl',
      age:21,
      sex:'boy'
    }

    //对象转化为JSON字符串  参数为user的各个属性 {name: "sgl", age: 21, sex: "boy"}
    var jsonUser = JSON.stringify('{name: "sgl", age: 21, sex: "boy"}')

    //将JSON字符串转化为对象，参数为json字符串
    var json01 = JSON.parse('{name: \\"sgl\\", age: 21, sex: \\"boy\\"}');

JSON和js的区别

var user = {name:'sgl',age:21,sex:'boy'}
var json = {'{name: \\"sgl\\", age: 21, sex: \\"boy\\"}'}

面向对象编程

原型对象

类：模板原型对象
对象：具体的实例

原型：可以指向多个以最后一个为原型对象

var Student = {
  run:function () {
      console.log(this.name+"run....")
  }
}

var sgl = {
    name:'sgl'
}
//原型对象 是Student
sgl.__proto__=Student;

var Bird = {
    fly:function () {
        console.log(this.name+"fiy....")
    }
}
//sgl的原型对象是Bird
sgl.__proto__=Bird;

简述：函数的prototype指向了一个对象，而这个对象正是调用构造函数时创建的实例的原型，也就是person1和person2的原型。

原型的概念：每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。

      function Person(age) {   //最初类的定义
          this.age = age
      }
      //给Person新增一个方法
      Person.prototype.hello = function (){
          alert("hello");
      }

      Person.prototype.name = 'kavin'
      var person1 = new Person()
      var person2 = new Person()
      console.log(person1.name) //kavin
      console.log(person2.name)  //kavin
      console.log(person1.hello()); //hello
      console.log(person2.hello()); //hello

表示构造函数和实例原型之间的关系：

在这里插入图片描述

class

class关键字

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

    var xiaoming = new Student("xiaoming");
    var xiaohong = new Student("xiaohong");

控制台输出：

在这里插入图片描述

继承

    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 xiaoming = new Student("xiaoming");
    var xiaohong = new xiaoStudent("xiaohong","大一");

在这里插入图片描述

原形链

在这里插入图片描述

__ proto __ : 这是每个对象(除null外)都会有的属性，叫做 __ proto __，这个属性会指向该对象的原型。

class Person{

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

关系图：

在这里插入图片描述

constructor

每个原型都有一个constructor属性，指向该关联的构造函数。

class Person() {

}
console.log(Person===Person.prototype.constructor)  //true

关系图

在这里插入图片描述

原型的原型原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 __ proto __ 指向构造函数的 prototype

在这里插入图片描述

操作BOM对象***

BOM：浏览器对象模型

window ***

window 代表浏览器窗口

window.alert(1);
undefined
window.innerHeight;
524
window.innerWidth;
790
window.outerHeight;
822

Navigator

Navigator 封装了浏览器的信息

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

一般不使用Navigator对象

screen

screen 代表屏幕

screen.width;
1536
screen.height;
864

location ***

location 代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"       //协议
reload: ƒ reload()  //刷新网页
location.assign("https://blog.csdn.net/m0_53821599?spm=1000.2115.3001.5343");  //设置新地址，运行跳到该地址

document

document 代表当前网页， HTML DOM树

document.title;
"百度一下，你就知道"
document.title='狂神'  //修改标题
"狂神"

获取具体的文档树节点

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

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

<script>
  var dl = document.getElementById("app");
</script>
</body>
</html>

在这里插入图片描述

获取cookie

document.cookie;

history

history 代表浏览器的历史记录

history.back();
history.forward();

操作DOM对象***

DOM：文档对象模型

核心

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

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

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

获得Dom节点

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

<script>
  //对应css选择器
  var h1 = document.getElementsByName('h1');
  var p1 = document.getElementById('p1');
  var p2 = document.getElementsByClassName('p2');

  var father = document.getElementById('father');
  //father.firstChild;
  //father.lastChild;
  
</script>

原生代码，后面使用jQuery

更新Dom节点

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

操作文本：

div.innerText='div标签'; 修改文本的值
div.innerHTML='<strong>div标签</stong>'; 可以解析HTML文本的标签

在这里插入图片描述

操作JS

属性使用字符串包裹 - 转为驼峰命名

div.style.color='green';
div.style.fontSize='30px';
div.style.padding='1em';

在这里插入图片描述

删除Dom节点

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

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

<script>
  var p1 = document.getElementById('p1');
  var element = p1.parentElement;   //获取父节点
  element.removeChild(p1);    //删除获取父节点的节点
  
  /* 控制台运行
  *   //删除是一个动态的过程   
  element.removeChild(father.children([0]));
  element.removeChild(father.children([1]));
  element.removeChild(father.children([2]));
  * */

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

插入Dom节点

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

追加：

<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);  //追加到后面
</script>

效果：

在这里插入图片描述

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

测试1：

<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');

  //创建一个新节点
  var new_p = document.createElement('p');
  new_p.id = 'new_p';
  new_p.innerText = 'JSP';
  list.append(new_p);   
</script>

效果：

在这里插入图片描述

测试2：

通过这个属性，可以设置任意的值

myScript.setAttribute('type','text/javascript')

 myStyle.setAttribute('type','text/css');

<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');

  //创建一个新节点
  var new_p = document.createElement('p');
  new_p.id = 'new_p';
  new_p.innerText = 'JSP';
  list.append(new_p);

  //创建一个标签节点
  var myScript = document.createElement('script');
  myScript.setAttribute('type','text/javascript')
  list.append(myScript);

  //创建一个Style标签
  var myStyle = document.createElement('style');
  myStyle.setAttribute('type','text/css');
  myStyle.innerHTML = 'body{background-color: yellow;}'  //相当于标签选择器body{background-color: yellow}
  document.getElementsByTagName('head')[0].append(myStyle);

</script>

效果：

在这里插入图片描述

insertBefore

<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 ee = document.getElementById('ee');
  var list = document.getElementById('list');
  // 要包含的节点.insertBefore(newNode,targetNode)
  list.insertBefore(js,ee);  
  
</script>

效果：

在这里插入图片描述

操作表单（验证）

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

表单的目的：提交信息

获取表单提交的信息

<form action="#" method='post'>
  <p>
    <span>用户名:</span> <input type="text" id="username">
  </p>
  <p>
    <span>性别:</span>
    <input type="radio" name="sex" value="man" id="boy">男
    <input type="radio" name="sex" value="woman" id="girl">女
  </p>
</form>

<script>
  var input_text = document.getElementById('username');
  var input_radio_boy = document.getElementById('boy');
  var input_radio_girl = document.getElementById('girl');
  
  //得到输入框的值
  input_text.value;
  //修改输入框的值
  input_text.value = '123';
  
  //对于单选框，多选框等等固定的值，input_radio.value只能取到当前的值
  input_radio_boy.checked;//查看返回的结果是否为true，如果为true，则被选中
  input_radio_girl.checked = true;//赋值
</script>

提交表单 MD5加密

<!DOCTYPE html>
<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接收
οnsubmit="return fun()"
-->
<form action="https://www.baidu.com" method="post" onsubmit="return fun()">
  <p>
    <span>用户名:</span> <input type="text" required id="username" name="username">
  </p>
  <p>
    <span>密码:</span> <input type="password" id="input_password">
  </p>
  <!--真正的密码（密码隐藏）-->
  <input type="hidden" id="md5-password" name="password">

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

<script>
  function fun() {
    var uname = document.getElementById('username');
    var pwd = document.getElementById('input_password');
    var md5pwd = document.getElementById('md5-password');
    
    //密码经过MD5加密 赋值给md5pwd
    md5pwd.value = md5(pwd.value)
    //可以校验判断表单的内容，true就是通过提交，false阻止提交
    return true;
  }
</script>
</body>
</html>

密码被加密

在这里插入图片描述

jQuery

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

获取jQuery

外部引用

  <!--引用-->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

官网下载jQuery，导入

jQuery公式：

$(selector).action() selector 就是css选择器 action 指一个事件

测试：

<!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>
<!--jQuery公式
$(selector).action()
selector 就是css选择器
action 指一个事件
-->

<a href="" id="jQuery">点我</a>
<script>
  $('#jQuery').click(function () {
    alert('hello jQuery');
  })
</script>
</body>
</html>

selector 选择器

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

<script>
  //标签选择器
  document.getElementsByTagName();
  //id选择器
  document.getElementById();
  //类选择器
  document.getElementsByClassName();
  
  //jQuery  css中的选择器它都能用
  $('p').click();  //标签选择器
  $('#id01').click();  //id选择器
  $('.class01').click();  //类选择器
</script>

</body>
</html>

action 事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

jQuery菜鸟教程有详细教程 https://www.runoob.com/jquery/jquery-events.html

也可以去jQuery帮助文档中的事件 https://jquery.cuishifeng.cn/

鼠标移动测试：

<!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>
  <style>
    #divMove{
      width: 300px;
      height: 100px;
      border: 1px solid black;
    }
  </style>

</head>
<body>
<!--获取鼠标当前的一个坐标-->
<p>移动可获取得鼠标坐标:</p>
<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>

在这里插入图片描述

jQuery操作Dom元素

节点文本操作

  $('#id_ul li[name=javaee]').text();  //获得值
 $('#id_ul li[name=javaee]').text('设置值');//设置值
  $('#id_ul').html();//获得值
$('#id_ul').html('<strong>123</strong>');//设置值

测试：

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

<ul id="id_ul">
  <li class="class_se">JavaSE</li>
  <li name="javaee">JavaEE</li>
</ul>

<script>
  $('#id_ul li[name=javaee]').text();
  $('#id_ul').html();
</script>

</body>
</html>

css的操作:

$('#id_ul li[name=javaee]').css({ "color": "#ff0011", "background": "blue" });

元素的显示和隐藏:本质 display:none

$('#id_ul li[name=javaee]').show()
$('#id_ul li[name=javaee]').hide()

这篇关于JavaScript基础知识（基础需要重点掌握）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript基础知识 （基础需要重点掌握）

文章目录

JavaScript

引入JavaScript

基本语法

数据类型

严格检查模式

流程控制

Map和Set

iterator

函数

函数定义

变量的作用域

方法

内部对象

Date

JOSN

面向对象编程

原型对象

class

继承

原形链

操作BOM对象***

操作DOM对象***

操作表单（验证）

jQuery

相关编程文章

JavaScript基础知识（基础需要重点掌握）