JavaScript

JavaScript

快速入门

HTML5对标签严格要求必须成对出现

1.导入js

1. 内部js

<script>
alert('hello,word');
</script>

2. 外部导入js

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

2.JavaScript的基本语法

alert 弹出对话框

consold.log(a) 在控制台上面打印变量 相当于java的sout

3.调试须知

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w4ekWEwk-1612409288043)(C:\Users\开飞机的苏克\Desktop\java 笔记\javaweb\1608035116546.png)]

4数据类型

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

4.1 number

JavaScript中不区分整数和小数，number

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

NaN 属性代表一个“不是数字”的值。这个特殊的值是因为运算不能执行而导致的，不能执行的原因要么是因为其中的运算对象之一非数字（例如， "abc" / 4），要么是因为运算的结果非数字（例如，除数为零）。

4.2字符串

正常使用字符我们使用单引号，或者双引号来包裹，

如果要使用转移字符就要使用\

\'            console.log('a\'');   // 转移字符     效果a'
\t          console.log('a\tb');  // 空格        效果  a	b
\n        console.log('a\nb');  // 换行         效果就是换号
             console.log('\u4e2d'); //unicode字符     效果  中
             console.log('\x41');   //Ascll字符      效果  a

‘abc’ “abc”

4.21多行字符串编写

var msg=`hello
  你好
  v
`

4.22 模板字符串

`这个是esc下面的一点

let name="wangmengtao";
let age=19;
let msg=`你好呀,${name}`;// ``````````````````

4.23对字符串的基本操作

var name='wangmengtao';

console.log(name.length);// 打印字符串的长度
 11

console.log(name[0]); //打印下标
w
console.log(name[0]=0);//给下标赋值
0
console.log(name);//证明了字符串是无法改变的
 wangmengtao
 
console.log(name.toUpperCase());//转换成大写    注意toUpperCase()是个方法  Upper是上的意思
WANGMENGTAO

console.log(name.toLowerCase());//转换成小写    注意 toLowerCase()是个方法  Lower是下的意思
wangmengtao

console.log(name.indexOf('t')); //查找这个字符的下标
8


//截取  从第二个小标之后
//[)  包含第开始，不包含结尾
//var name='wangmengtao';
console.log(name.substring(2));
ngmengtao

console.log(name.substring(2,7));
 ngmen

4.24数组

数组的核心就是如何存如何取

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

var arr=[1,2,2,2,3,5];//定义

注意：如果给arr.length赋值这样数组的长度会发生改变没有参数也会发生改变为empty

indexOf方法是用于搜索数组元素的索引。它检索数组是否包含给定元素。如果找到JavaScript indexOf方法中的给定元素，它将返回该元素的索引号，

var arr=[1,2,2,2,3,5,"1","2"];
arr.indexOf(1);
//0
arr.indexOf("1")
// 6

slice方法截取数组的一部分返回一个新数组 相对string中的substring

包头不包尾

arr.slice(2)
(6) [2, 2, 3, 5, "1", "2"]
arr.slice(2,5)
(3) [2, 2, 3]

push方法 从后面添加

arr.push("a","b","c");

pop方法 从后面挤出去

arr.pop()

unshift 方法从前面开始添加

arr.unshift("a","b");

shift 方法弹出头部第一个元素

arr.shift();

sort方法是排序

arr.sort();

reverse方法元素反转

arr.reverse();

concat方法拼接 注意：没有改变之前的数组，只是生成一个全新的数组

arr
(11) ["c", "b", "a", 5, 3, "2", 2, 2, 2, "1", 1]
arr.concat([7,8,9]);
(14) ["c", "b", "a", 5, 3, "2", 2, 2, 2, "1", 1, 7, 8, 9]
arr
(11) ["c", "b", "a", 5, 3, "2", 2, 2, 2, "1", 1]

join方法给样式打印出来

arr
(11) ["c", "b", "a", 5, 3, "2", 2, 2, 2, "1", 1]
arr.join("-");
"c-b-a-5-3-2-2-2-2-1-1"

4.25多维数组

var array=[[1,2],[2,3],["3",4]];

取值

var array=[[1,2],[2,3],["3",4]];
array[1][1];
3

array[2][0];
"3"

fill方法给数组替换

var array=[[1,2],[2,3],["3",4]];
array.fill([1,1]);
0: (2) [1, 1]
1: (2) [1, 1]
2: (2) [1, 1]
length: 3

4.3布尔值==

true，false

4.4逻辑运算

&&     2个为真，全部为真
    
||     一个为真，结果为真
    
!      真即假，假即真

4.5比较运算符**！！！！！**重点

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

须知

NaN===NaN，这个与使有的值对比都不相等，跟自己相比都不相等

false

只有通过这个方法来判断这个数是不是NaN

isNaN(NaN)

true

4.6浮动数运算

注意：尽量避免使用浮点数来计算会有精度问题！（也就是精度的损失）

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

可以这样来比较数值的大概相等

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

4.7null和undefined

null是空的意思

undefin是未定义

4.8数组

js可以这样定义数组

//保证代码的可读性，尽量使用[]
var arr=[1,2,3,4,"hello",null,true]


new Array(1,1,1,2,2,2,"null","holle",true,flase,auto);

取下标如果越界了就会undefined；

4.9对象

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

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

 var person = {
    name:"wangmengtao",
    age:18,
    sex:"男"
}

取值

person.name
>"wangmengtao"

person.sex
>"男"

5.0变量的作用域

var

var 说明了var的定义也是有作用域的

在函数体中声明，在函数体外就没法使用 （如果想在外面使用就去研究一下闭包）

function a(){
  var x=1;
  x=x+1;
}
x=x+1;  //报错demo1.js:8 Uncaught ReferenceError: x is not defined at demo1.js:8

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

function a(){
  var x=1;
  x=x+1;
}
function a2(){
   var x=1;
   x=x+1;
 }
 

内部函数的调用情况：

这里像java的内部类里面的可以调用外面的外面的不可以调用里面的

function a(){//调方法也报错Uncaught ReferenceError: y is not defined
  var x=1;
  function a2(){
     var y=x+1;//这里像java的内部类里面的可以调用外面的外面的不可以调用里面的
  }
  var z=y+1;//报错VM154:1 Uncaught ReferenceError: z is not defined
 
 }
 

内部函数同名情况：

注意：函数内不能调用自己

注意：JavaScript中函数查找变量是从自身开始的，从"内" 向 "外"的查找假设外部函数变量和内部函数变量重名，内部函数变量就会自动屏蔽外部变量

function a(){
   var x=1;
   console.log("外部x"+x);//外部x1
 
   function a2(){
      var x='a';
      console.log("内部x"+x); //内部xa 
   }
   a2();
}
a();

提升变量作用域：

function test(){
   var a="a"+b;
   console.log(a);
   var b='b';
}
test();
//结果
a  undefined

//相当于
function test(){
    var b
    var a="a"+b;
    console.log(a);
    b='b';
}

结果：a undefined

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

function test(){
 var x,y;
 x=1;
 y=2;
}
test();

这是JavaScript成立之初就有的性质，养成规范，最前面定义后面赋值，便于代码维护。

全局函数

全局函数：

var x=1;
function test(){
console.log(x);//1
}
test();
console.log(x)//1

全局变量对象： （window）

默认的所有全局变量都会绑定到window上面

alert这个对象也是绑定到window上面的

var x=1;
function test(){
window.alert(x);
alert(window.x);
}
test();

大胆想象

var x=1;
function test(){
alert(x);//运行
}
test();
var wmt=window.alert;
wmt(123);//运行

window.alert=function a(){

}
alert(456);//会失效
window.alert=wmt;
alert(789);//会运行

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

规范：

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

如何可以减少冲突？

//减少全局变量的冲突
var WangMengTao={};
WangMengTao.name="www";
WangMengTao.app=function (){
   
}

let

局部变量let：

function test(){
   for(var i=0;i<100;i++){
      console.log(i)
   }
   console.log(i+1)//可以获取到i的值运行结果为101
}
test();

如何解决这个局部变量呢SE6新特性let

let

function test(){
   for(let i=0;i<100;i++){
      console.log(i)
   }
   console.log(i+1)//不可以获取到i的值报错Uncaught ReferenceError: i is not defined
   
}
test();

const

常量const

在ES6之前怎么定义常量，变量名全大写；

const IP=3.14;
console.log(IP);
IP=122;
console.log(IP);//Uncaught TypeError: Assignment to constant variable.
//(未捕获类型错误:常量变量赋值。)

严格检查模式

如果不定义的话就是全局变量这样肯定不行，就得加一个严格检查模式必须写在javascript的第一行**‘use strict’；**

对象

若干个键值段

var 对象名={
    属性名="属性值",
     属性名="属性值",
      属性名="属性值"
}


var person={
    name:"wangmengtao",
    age:19,
    email:"2849569455@qq.com"

}

js中的对象是用大括号框起来表示一个对象，键值段表示属性xxx：xxxx，多个属性用逗号隔开，最后一个不需要

javascript中使有键都是字符串，值可以是任意对象

1.对象赋值

person.name;
"wangmengtao"
person.name="wmt";
"wmt"
person.name;
"wmt"

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

3.动态的删减属性

delete person.name;
true
person
{age: 19, email: "2849569455@qq.com"}

4.动态的添加属性

person
{age: 19, email: "2849569455@qq.com"}
person.name="wmt";
"wmt"
person
{age: 19, email: "2849569455@qq.com", name: "wmt"}

5. 判断对象是不是有这个属性**,如果父类有也算**

'name' in person;
true
'tostring' in person;
true

6.判断当前属性有没有这个属性

person.hasOwnProperty("name");
true
person.hasOwnProperty("tostring");
false

流程控制

if…else

var age=-19;
if(age>0){
    alert("hhh")
}else{
    alert("18")
}

while

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

for循环

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

forEach 打印数组 5.1的新特性

var age=[12,156,541,44,45,112]
age.forEach(function(va){  //va可以为任意形参
console.log(va);
})

for in 变量的是索引 当不知道有多少个元素的情况下使用这个

var age=[12,156,541,44,45,112]
for(var num in age){
    console.log(age[num]);
}

Map和Ste

Map 注意：这里是map集合有个方括号[ [xx,xx],[xx,xx] ]

var person=new Map([['wmt',18],['wangmengtao',19]]);
var name=person.get('wmt');
console.log(name);

Ste方法赋值

var person=new Map([["wmt",18],['wangmengtao',19]]);
var name=person.get('wmt');
console.log(name);
person.set(['www',14]); //添加
console.log(person);
person.delete('www');// 删除

Ste集合是无序不重复的集合

 var demo=new Set([12,1,1,1,1,2,2,2,]);
 console.log(demo);
 demo.add(15);// 添加
 console.log(demo);
 demo.delete(1);// 删除
 console.log(demo);
console.log(demo.has(12));// 查看这个元素是否在集合中

iterable可迭代的

es6新特性for of

 var arr=[2,4,5,6,8];
 // 区别for  in遍历出来的是下标
 for (var key in arr) {
    console.log(key)
 }

 // for of遍历出来的是内容可以拿来遍历map集合和set集合
 for (var key of arr) {
    console.log(key)
 }

注意遍历set和map集合使用for in是遍历不出来的，只能使用for of来遍历

函数

方式一

function  num(x){
   if(x>0){
      alert("x="+x)
   }else{
      alert("负数")
   }
}

调用函数

unm(10)//弹窗x=10
unm(-10)//弹窗负数

方法二

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

function（x）{…}这是一个匿名函数把返回的结果给了num

注意：如果执行到return，就代表函数结束返回结果集，

如果：没有执行return，也会返回结果，结果结束undefine

参数问题：可以传多个参数也可以不传参数，不会报错

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

var num=function(x){
   if(typeof x!=='number'){
      throw  '异常不是数字'
   }
   if(x>0){
    
      return x;
   }else{
      return -x;
   }
}

arguments

arguments是JavaScript免费赠送的关键字

function a(x){
   console.log("x=>"+x);
for(var i=0;i<arguments.length;i++){
console.log(arguments[i])
}

}

//测试

a(12,51,5,4,58,64,12,5);
demo1.js:5 x=>12
demo1.js:7 12
demo1.js:7 51
demo1.js:7 5
demo1.js:7 4
demo1.js:7 58
demo1.js:7 64
demo1.js:7 12
demo1.js:7 5
undefined

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

问题：arguments包含所有的参数，如果我们要使用后面的参数就必须要排除之前的参数

rest

ES6新特性，获取除了自己已经定于的参数之外的所有参数 …

以前的操作

function a(x,y){
   console.log("x=>"+x);
   console.log("y=>"+y);
if(arguments.length>2){
   for(var i=2;i<arguments.length;i++){
      //进行操作
   }
}
}

使用rest操作

注意：使用rest只能放在最后面

function a(x,y,...rest){
   console.log("x=>"+x);
   console.log("y=>"+y);
   console.log(rest);
}
//运行
(12,51,5,4,58,64,12,5);
demo1.js:5 x=>12
demo1.js:6 y=>51
demo1.js:7 (6) [5, 4, 58, 64, 12, 5]
0: 5
1: 4
2: 58
3: 64
4: 12
5: 5
length: 6
//他会让取出定义的变量，把没有定义的放入一个数组

方法

定义方法

方法里面就只有2个东西一个是属性一个是方法，

var person={
    name:'王孟涛',
    age:2001,
    ages:  function () {
      var now=new Date().getFullYear(); 
      return now-this.age; 
    }
}

this是什么拆开看看

注意person.ages（）可以运行

如果直接getAge（）就会demo1.js:5 Uncaught TypeError: Cannot read property ‘age’ of undefined 因为age就会在window里面找。

function getAge(){
    var now=new Date().getFullYear();
    return now-this.age;
}

var person={
    name:'王孟涛',
    age:2001,
   ages:getAge//这里只需要写一个函数的名字就可以了不用括号
    
}

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

apply

在JavaScript中可以控制this的指向

function getAge(){
    var now=new Date().getFullYear();
    return now-this.age;
}

var person={
    name:'王孟涛',
    age:2001,
   ages:getAge
    
};
getAge.apply(person,[]);//意思就等于this指向person这个对象传参为空
//测试
getAge.apply(person,[]);
20

内部对象

标准对象

typeof 122;
"number"
typeof '123';
"string"
typeof true;
"boolean"
typeof [1,2,3];
"object"
typeof{};
"object"
typeof NaN;
"number"
typeof Math.abs;
"function"
typeof undefined;
"undefined"

Date

基本使用

var now=new Date();//Fri Jan 01 2021 13:11:53 GMT+0800 (GMT+08:00)

now.getFullYear();//年、
2021
now.getMonth();//月
0
now.getDate();//日
1
now.getDay();//星期几
5
now.getHours();//时
13
now.getMinutes();//分
21
now.getSeconds();//秒
11

now.getTime();//时间戳
1609478471289

转换

console.log(new Date(1609478471289));
VM261:1 Fri Jan 01 2021 13:21:11 GMT+0800 (GMT+08:00)

now.toLocaleString();//是个方法
"2021/1/1 下午1:21:11"

now.toGMTString();
"Fri, 01 Jan 2021 05:21:11 GMT"

json

什么是json

早期所有的数据传输都是使用xml文件

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

JavaScript中一切皆为对象，一切JavaScript支持的类型都可以转换成JSON来表示（numder，String…）

格式：

• 对象使用{}
• 数组使用[]
• 所有的键值对都使用key：valyue

把对象转换成json格式

var user ={
    name:"王孟涛",
    sex:"男",
    age:19
}
var jsonUser=JSON.stringify(user);

//运行
console.log(user);
VM85:1 {name: "王孟涛", sex: "男", age: 19}
undefined
console.log(jsonUser);
VM139:1 {"name":"王孟涛","sex":"男","age":19}
undefined

json格式转换成对象

//里面有双引号外面使用单引号，不然反之
var obj=JSON.parse('{"name":"王孟涛","sex":"男","age":19}');

//运行
console.log(obj);
VM51:1 
{name: "王孟涛", sex: "男", age: 19}
age: 19
name: "王孟涛"
sex: "男"

Ajax

• 原生js写法 xhr异步请求
• jQuey封装好的 方法$(“naem”).ajax("") $ 就是jQuery
• axios 请求

面向对象编程

1.什么是面向对象

JavaScript，java，c#…面向对象；JavaScript有些区别！

• 类：模板 （类是对象的抽象）
• 对象：具体的实例 （对象是类的一个具体表现）

在JavaScript中这个需要大家换一下思维方式！

原型：

var student={
    name:"王孟涛",
    age:19,
    run: function () {
        console.log(this.name+"跑");
    }
};

var xiaomin={
    name:"小明",
};
xiaomin._proto_=student;

//运行
console.log(xiaomin);
VM97:1 {name: "小明", _proto_: {…}}name: "小明"_proto_: age: 19name: "王孟涛"run: 

class继承

ES6新特性

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

constructor构造函数相当于java中的有参构造和无参构造

class student{
    constructor(name){
        this.name=name;
    }
    hello(){
        console.log("hello"+this.name);
    }
}
var xiaowang=new student("xiaowang");
xiaowang.hello();

2.继承

class student{
    constructor(name){
        this.name=name;
    }
    hello(){
        console.log("hello"+this.name);
    }
}
var xiaowang=new student("xiaowang");
 
class XiaoStudent extends student{
    constructor(name,age){
      super(name);
      this.age=age;
    }
    study(){
        alert("我是小学生")
    }

}
var xiaoming=new XiaoStudent("xiaoming",7)

本质还是原型

原型链

_ proto _

是个死循环

• 自定义对象指向object
• object指向自定义对象

操作BOM对象（重点）

浏览器简绍

javascript和浏览器关系？

JavaScript诞生就是为了让他在浏览器中运行！

BOM:浏览器对象模型（内核）

• IE 6-12
• Chrome
• Safari
• FireFox
• Opera

三方浏览器

QQ浏览器

360浏览器

window

window代表浏览器的窗口

window.alert(1);
undefined
window.innerHeight;
355
window.innerWidth;
912
window.outerHeight;
1040
window.outerWidth;
960
//查看窗口的大小

navigato

Navigato封装了浏览器的信息

window.navigator;

navigator.appCodeName;//查看名称
"Mozilla"
navigator.appVersion;//可返回浏览器的平台和版本信息
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
navigator.userAgent;//声明了浏览器用于 HTTP 请求的用户代理头的值。
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
navigator.platform;//版本号
"Win32"

大多时候我们不会使用navigato对象因为会被人修改！

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

screen

screen 屏幕

代表屏幕尺寸

screen.width;
1920
screen.height;
1080

location（重要）

location 代表当前页面URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
location.reload();//刷新        reload（重新装）   location（位置）
//设置新的地址   assign（分配）
location.assign('https://hao.360.com/');

document

document 代表当前的页面，HTML DOM文档树 （文档）

document.title;
"360导航_一个主页，整个世界"
document.title="王孟涛";
"王孟涛"

获取具体的文档树节点，

    <dl  id="wmt">
        <dt>java</dt>
        <dd>javaee</dd>
        <dd>javase</dd>
    </dl>

<script>
    var getwmt=document.getElementById('wmt');
</script>

获取cookie

document.cookie;
"__guid=96992031.3510729824011207700.1608032371540.85; monitor_count=22"

劫持cookie的原理

www.taobao.com

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

服务器端可以设置cookie：httpOnly

history

history 代表浏览器的历史记录 (历史)

history.back;//后退

history.forward;//前进

操作DOM对象

核心

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

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

要操作一个DOM节点就必须要先获得一个DOM节点

获得DOM节点 （ document 文本）

<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');//通过id去获取
    var p2=document.getElementsByClassName('p2');//通过class来获取
    var father=document.getElementById('father');
    var childrens=father.children;//获取父类下的所有子节点 （children   孩子们）
    father.firstChild//第一个节点
    father.lastChild//最后一个节点
</script>

更新节点

<body>
   <div id="id1"></div>
</body>
<script>
    var id1=document.getElementById('id1')
    id1.innerText='5678';//修改文本的值
    id1.innerHTML='<strong>5678</strong>';//可以解析HTML文本标签
</script>

操作文本

id1.innerText=‘5678’;//修改文本的值
id1.innerHTML=‘5678’;//可以解析HTML文本标签

操作JS

id1.style.color='red';
"red"
id1.style.fontSize='100px';//不支持下划线使用驼峰命名
"100px"
id1.style.padding='20px';
"20px"

删除子节点

删除节点的步骤，要删除节点就得找到自己的父节点才能删除！

<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=p1.parentElement;//获取父类
 father.removeChild(p1);//我的电脑好像可以直接删除
    
</script>

按照下标来删

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

<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=p1.parentElement;//获取父类
 father.removeChild(father.children[0]);
 father.removeChild(father.children[1]);
 father.removeChild(father.children[2]);// 报错 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
</script>

插入DOM节点

我们获取这个节点如果这个节点为空，我们通过innerHTML就可以增加一个元素了，但是这个DOM已经有了元素了就不能使用innerHTML，会覆盖！

使用appendchid在后续添加

<body>
    <p id="js">javaScript</p>
  <div id="javalist">
    <p id="ee">javaEE</p>
    <p id="se">javaSE</p>
    <p id="me">javaME</p>
  </div>
   
</body>
<script>
var js=document.getElementById('js');
var javalist=document.getElementById('javalist');
javalist.appendChild(js);
</script>

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

<body>
    <p id="js">javaScript</p>
  <div id="javalist">
    <p id="ee">javaEE</p>
    <p id="se">javaSE</p>
    <p id="me">javaME</p>
  </div>
   
</body>
<script>
var js=document.getElementById('js');
var javalist=document.getElementById('javalist');
javalist.appendChild(js);
var newp=document.createElement('p');//创造一个p标签
newp.id='newp';//跟这个p标签取个id
newp.innerText='hello,word';//编写的内容
javalist.appendChild(newp);//添加的位置
</script>

插入css样式

<body>
    <p id="js">javaScript</p>
  <div id="javalist">
    <p id="ee">javaEE</p>
    <p id="se">javaSE</p>
    <p id="me">javaME</p>
  </div>
   
</body>
<script>
var mystyle=document.createElement('style')
mystyle.innerHTML='body{  background-color: red; }';
    //为什么要有个下标getElementsByTagName返回的值是一个伪数组
var myhead=document.getElementsByTagName('head')[0].appendChild(mystyle);

</script>

操作表单

表单是什么from DOM树

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

…

表单的目的是获取信息

value:获取表单的信息

checked：判断是否选中（翻译检查）

<body>
 <form action="#" method="POST">
   <p><span>用户名:</span>
  <input type="text" placeholder="输入用户名" id="username" name="username">
  </p>
  <p>
    <span>密码：</span>
    <input type="password" placeholder="输入密码" id="password" name="password">
  </p>
  <input type="radio" value="男" name="sex" id="man">男
  <input type="radio" value="女" name="sex" id="girl">女
     <button type="submit"> 提交 </button>
 </form>
   
</body>
<script>
var username=document.getElementById('username');//获取节点
username.value;//获取输入表单的值
// username.value='123';给表单赋值
var man_sex=document.getElementById('man');
var girl_sex=document.getElementById('girl');
man_sex.value;//如果是单选框就不能使用value来获取值了
//"男"
girl_sex.value;//
//"女"
man_sex.checked;//就得使用checked来判断是否选中如果选择就为true反之false
//true
girl_sex.checked;
//false
girl_sex.checked=true;//可以使用value跟单选框赋值
//true

</script>

提交表单

md5加密

导包

   
onsubmit：提交表单验证

<body>
 <form action="https://www.baidu.com/" method="POST" onsubmit="return checked()">
   <p><span>用户名:</span>
  <input type="text" placeholder="输入用户名" id="username" name="username">
  </p>
  <p>
    <span>密码：</span>
    <input type="password" placeholder="输入密码" id="password">
    <input type="hidden" name="md5password" id="md5password">
  </p>
  <input type="radio" value="男" name="sex" id="man">男
  <input type="radio" value="女" name="sex" id="girl">女
  <button type="submit">提交</button>
 </form>
   
</body>
<script>
var user=document.getElementById('username');//获取节点
var pwd=document.getElementById('password');
var md5password=document.getElementById('md5password')
var man_sex=document.getElementById('man');
var girl_sex=document.getElementById('girl');

function checked(){
md5password.value= md5(pwd.value);
return true;
}

</script>
</html>

jQuery

jQuery封装了大量JavaScript的函数

获取jQuery

jQueryCDN

https://www.bootcdn.cn/jquery/

jQuery下载

https://jquery.com/

jQuery帮助文档

https://jquery.cuishifeng.cn/

jQuery的使用

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<button id="but">点我</button>  
</body>
<script>
$('#but').click(function(){
  alert("我是jQuery")
})
</script>
</html>

选择器

//javascript选择器
//原生选择器少，不好记

//标签选择器
var p=document.getElementsByTagName('p');

//id选择器
var id=document.getElementById('id名称');

//类选择器
var class1=document.getElementsByClassName('class的名称');

//jQuery

//标签
$('p').click(function(){});

//id
$('.id').click(function(){});

//class
$('#class').click(function(){});

事件

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

鼠标事件

mousedown

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mouseenter

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

mouseleave

当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。

与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

mousemove

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标

mouseout

当鼠标指针从元素上移开时，发生 mouseout 事件。

该事件大多数时候会与 mouseover 事件一起使用。

注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件

mouseover

当鼠标指针位于元素上方时，会发生 mouseover 事件。

该事件大多数时候会与 mouseout 事件一起使用。

注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseup

当在元素上放松鼠标按钮时，会发生 mouseup 事件。

与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script type="text/javascript" src="/resource/rcs/safe/md5.js"></script>    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
      #box{
        width: 600px;
        height: 600px;
       border:1px solid red ; 
      }
    </style>
</head>
<body>
<span id="mousemove"></span>
  <div id="box">
    在这里移动鼠标试试
  </div>
</body>
<script>
  //当网页加载完成后执行
$(function(){
$('#box').mousemove(function(e){
  $('#mousemove').text('x:'+e.pageX+'y:'+e.pageY);
})
})
</script>
</html>

操作DOM

$('.text li[name=demo]').text();//获取dom

$('.text li[name=demo]').text('wmt');//修改dom

$('.text li[name=demo]').html('<strong>123</strong>');//修改样式添加代码

$('.text li[name=demo]').css('color','red');//修改css的样式

元素隐藏和显示

本质:display:none;

$('.text li[name=demo]').hide();//隐藏
$('.text li[name=demo]').show();//显示

总结：

多看代码提高眼界

Element

https://element.eleme.cn/2.0/#/zh-CN/component/switch

不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

mousemove

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标

mouseout

当鼠标指针从元素上移开时，发生 mouseout 事件。

该事件大多数时候会与 mouseover 事件一起使用。

注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件

mouseover

当鼠标指针位于元素上方时，会发生 mouseover 事件。

该事件大多数时候会与 mouseout 事件一起使用。

注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseup

当在元素上放松鼠标按钮时，会发生 mouseup 事件。

与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script type="text/javascript" src="/resource/rcs/safe/md5.js"></script>    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
      #box{
        width: 600px;
        height: 600px;
       border:1px solid red ; 
      }
    </style>
</head>
<body>
<span id="mousemove"></span>
  <div id="box">
    在这里移动鼠标试试
  </div>
</body>
<script>
  //当网页加载完成后执行
$(function(){
$('#box').mousemove(function(e){
  $('#mousemove').text('x:'+e.pageX+'y:'+e.pageY);
})
})
</script>
</html>

操作DOM

$('.text li[name=demo]').text();//获取dom

$('.text li[name=demo]').text('wmt');//修改dom

$('.text li[name=demo]').html('<strong>123</strong>');//修改样式添加代码

$('.text li[name=demo]').css('color','red');//修改css的样式

元素隐藏和显示

本质:display:none;

$('.text li[name=demo]').hide();//隐藏
$('.text li[name=demo]').show();//显示

总结：

多看代码提高眼界

Element

https://element.eleme.cn/2.0/#/zh-CN/component/switch