JavaScript基础语法、数据类型、函数、对象、表单验证及jQuery详解

文章目录

    • 一、JavaScript
      • 1、什么是JavaScript
      • 2、快速入门
        • 2.1、引入JavaScript
        • 2.2、基本语法入门
        • 2.3、数据类型
        • 2.4、严格检查模式
      • 3、数据类型
        • 3.1、字符串
        • 3.2、数组
        • 3.3、对象
        • 3.4、流程控制
        • 3.5、Map和Set
        • 3.6、iterator
      • 4、函数
        • 4.1、定义函数
        • 4.2、函数参数传递
        • 4.3、变量的作用域
        • 4.3、方法
      • 5、内部对象
        • 5.1、Date
        • 5.2、JSON
        • 5.3、Ajax
      • 6、面向对象编程
      • 7、操作BOM对象（重点）
      • 8、操作DOM对象（重点）
      • 9、操作表单（验证）
      • 10、jQuery

一、JavaScript

1、什么是JavaScript

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。一个合格的Java后端程序员要精通JavaScript。

最新的版本已经更新到es6，但是大部分的浏览器只支持es5

2、快速入门

2.1、引入JavaScript

  1. 内部标签（在HTML文件中直接写JS代码，不推荐）
<script>//JavaScript代码
</script>
  1. 外部引入（JS文件中与HTML文件分离，推荐）
<script src="js文件的路径"></script>
  1. 代码测试
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--内部标签，在script标签内，写Javascript代码--><!--<script>alert('hello,world');</script>--><!--外部引入--><script src="js/test.js"></script><!--不用显示定义type，默认就是 javascript--><script type="text/javascript"></script></head>
<body>
<!--script标签不仅可以在HTML文件的头部，身体中也可以-->
</body>
</html>

2.2、基本语法入门

  1. 定义变量

    变量类型 变量名 = 变量值;

    不具体的区分变量的类型，例如var（定义全局）/let（定义局部）可以代表整数、小数、字符串等

  2. 条件控制

    与Java类似，但是Java中的if~else语句写法有改变

    if (score>60 && score<70){alert("及格")}else if(score>70 && score<80){alert("良好")}else{alert("优秀/不及格")}

  3. 控制台打印

    console.log(“要打印的内容”)

  4. 弹窗显示

    alert(‘显示的内容’);

2.3、数据类型

数值、文本、图像、音频、视频等

  1. 数值

    JavaScript中不区分小数与整数

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

  2. 字符串

    使用双引号与单引号都可以

    ‘abc’、“abc”

  3. 布尔值

    true/false

  4. 逻辑运算

    符号含义
    &&同真为真
    ||一真为真
    !取反

  5. 比较运算符

    符号含义
    =赋值
    ==等于（只看字面值，类型不一样也会判定为等于）
    ===完全一样（字面值与类型都一样）

    判断一个数值是否是NaN，只能使用函数isNaN(NaN)来判断，不能使用===符号

  6. 浮点数

    console.log((1/3) === (1-2/3))
//不相等，因为会有浮点数进行运算，有精度的缺失
//应该使用
Math.abs(1/3-(1-2/3))<0.00000001

  7. null与undefined

    null是空，undefined是未定义

  8. 数组

    与Java中的数组不一样，js中的数组允许数组元素的类型不一致，数组元素使用[]括起来

    //保证代码的可读性，尽量使用 []
var arr = [1,2,3,4,5,'hello',null,true];new Array(1,12,3,4,4,5,'hello');
//在取数组的下标时，如果越界会报出undefined错误

  9. 对象

    对象属性之间使用逗号隔开，属性使用{}括起来

    //Person person =  new Person(1,2,3,4,5);
var person = {name: "zhangsan",age: 23,tags: ['java','web','...']
}//使用对象值，和Java中一样
person.name
person.age

2.4、严格检查模式

  1. 先在IDEA中设置JavaScript版本为ES６语法的

  1. 在JavaScript代码的第一行添加 use strict;（严格检查模式）

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题必须写在JavaScript的第一行！局部变量建议使用 let 去定义--><script>'use strict';let i = 1;</script></head>
<body></body>
</html>

3、数据类型

3.1、字符串

  1. 使用单引号或双引号括起来

  2. 转义字符加反斜杠 \

  3. 多行字符串的编写使用`符号（在tab键的上面，不是一半单引号）

    //tab 上面 esc键下面
var msg = `hello
world
你好ya
你好`

  4. 模板字符串

    let name = "JS";
let msg = `你好呀，${name}`

  5. 字符串的长度

    str.length

  6. 字符串不可变

  7. 大小写转换，调用相应的方法

    student.toUpperCase()
student.toLowerCase()

  8. 对应元素第一次出现的索引

    student.indexOf('元素')

  9. 截取字符串

    //截头不截尾
student.substring(1) // 从第一个字符串截取到最后一个字符串
student.substring(1,3) //[1,3)

3.2、数组

数组可以包好任意类型的元素，通过下标取值与赋值

  1. 长度

    数组名.length
//可以给 arr.length 赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失

  2. 获得元素的第一次出现的索引

    数组名.indexOf('元素')

  3. 截取数组一部分

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

  4. push()、pop()尾部

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

  5. unshift()、shift()头部

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

  6. 排序sort()

  7. 元素反转reverse()

  8. 数组拼接concat()

    let arr = ["C", "B", "A"];
arr.concat([1,2,3]) = ["C", "B", "A", 1, 2, 3];
//原来的数组并没有改变，而是创建了一个新的数组

  9. 连接符join

    //在打印拼接数组元素的时候使用，使用特定的字符拼接数组元素
let arr = ["C", "B", "A"];
arr.join('-') = "C-B-A";

  10. 多维数组

    其实就是一维数组的元素是另一个数组

3.3、对象

JavaScript中， {……} 表示一个对象， 用 键值对描述属性（键 : 值），多个属性之间使用逗号隔开，所有的键都是字符串，值可以是任意对象

//语法
var 对象名 = {属性名 : 属性值,属性名 : 属性值,属性名 : 属性值
}//定义了一个person对象及属性
var person = {name: "张三",age: 23,score: 0
}

  1. 对象的赋值

    和Java中一样，使用=进行赋值

    person.name = "lisi"

  2. 使用未定义的对象属性的时候不会报错，会提示undefined

  3. 可以动态的删减属性，使用delete删除

    delete person.name
true

  4. 可以动态的添加对象属性，直接给对象的新属性赋值就可以

    person.sex = "男"

  5. 判断属性值是否在对象中，使用 in

    //自己有的
'age' in person
true
//继承父类的
'toString' in person
true

  6. 判断对象的属性是否是自身拥有的（不是继承来的）hasOwnProperty()

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

3.4、流程控制

  1. if判断

    var age = 3;
if (age<18){ //第一个判断alert("未成年");
}else if(age<60) {  //第二个判断alert("还年轻");
}else { //否则,,alert("该退休了");
}

  2. while循环

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

  3. for循环

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

  4. forEach循环

    var age = [12,3,12,3,12,3,12,31,23,123];//函数
age.forEach(function (value) {console.log(value)
})

  5. for in循环

    //for(var index in object){}
for(var num in age){if (age.hasOwnProperty(num)){console.log("存在")console.log(age[num])}
}

3.5、Map和Set

ES6新特性

  1. Map

    //学生的成绩，学生的名字
var names = ["tom","jack","mary"];
var scores = [100,90,80];var map = new Map([['tom',100],['jack',90],['mary',80]]);
var name = map.get('tom'); //通过key获得value！
map.set('zhangsan',88);  //新增或修改！
map.delete("tom"); //删除！

  2. Set （无序不重复）

    set.add(2); //添加！
set.delete(1);  //删除！
console.log(set.has(3));  //是否包含某个元素！

3.6、iterator

ES6新特新

  1. 遍历数组

    //通过for of /  for  in 下标
var arr = [3,4,5]
for (var x of arr){console.log(x)
}

  2. 遍历Map

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

  3. 遍历Set

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

4、函数

4.1、定义函数

  1. 定义方式一
function abs(x){if(x>=0){return x;}else{return -x;}
}
//一旦执行到 return 代表函数结束，返回结果。如果没有执行 return ，函数执行完也会返回结果，结果是 undefined
  1. 定义方式二
var abs = function(x){if(x>=0){return x;}else{return -x;}
}
// function(x){ …. } 是一个匿名函数。但是可以将结果赋值给变量 abs ，通过abs 就可以调用函数
//方式一和方式二等价
  1. 调用函数
abs(10)  //10
abs(-10) //10

4.2、函数参数传递

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

参数进来是否存在的问题？

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

  1. 手动判别并抛出异常
var abs = function(x){//手动抛出异常来判断if (typeof x!== 'number') {throw 'Not a Number';}if(x>=0){return x;}else{return -x;}
}
  1. arguments关键字

arguments是一个JS中的关键字，代表传递进来的所有的参数，是一个数组

var abs = function(x){console.log("x=>"+x);for (var i = 0; i<arguments.length;i++){console.log(arguments[i]);}if(x>=0){return x;}else{return -x;}
}

问题： arguments 包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数

  1. rest关键字

使用arguments关键字来排除已有的参数

if (arguments.length>2){for (var i = 2; i<arguments.length;i++){//。。。。} 
}

ES6 引入的新特性，使用rest关键字获取除了已经定义的参数之外的所有参数

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

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

4.3、变量的作用域

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

假设在函数体中声明，则在函数体外不可以使用（非要想实现的话，后面可以研究一下 闭包 ）

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

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

function text() {var x = 1;x = x + 1;
}function text2() {var x = 'A';x = x + 1;
}

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

function text() {var x = 1;// 内部函数可以访问外部函数的成员，反之则不行function text2() {var y = x + 1;  // 2}var z = y + 1; // Uncaught ReferenceError: y is not defined
}

假设，内部函数变量和外部函数的变量重名，由内向外寻找，内部变量会屏蔽外部变量

function text() {var x = 1;function text2() {var x = 'A';console.log('inner'+x); // outer1}console.log('outer'+x); //innerAtext2()}
text()；

在JavaScript 中 函数查找变量从自身函数开始，由 ‘’内‘’ 向 ‘’外‘’ 查找 。如果外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

  1. 提升变量的作用域
function qj() {var x = "x" + y;console.log(x);var y = 'y';
}

结果 ： x undefined

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

function qj2() {var y;var x = "x" + y;console.log(x);y = 'y';
}

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

function qj2() {var x = 1,y = x + 1,z,i,a; //undefined// 之后随意用
}
  1. 全局函数
//全局变量
x = 1;function f() {console.log(x);
}
f();
console.log(x);
  1. 全局对象 window
var x = 'xxx';
alert(x);
alert(window.x); // 默认所有的全局变量，都会自动绑定在 window对象下；

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

var x = 'xxx';window.alert(x);var old_alert = window.alert;//old_alert(x);window.alert = function () {};
// 发现 alert() 失效了
window.alert(123);//恢复
window.alert =  old_alert;
window.alert(456);

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

  1. 规范

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

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

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

jQuery

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

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

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

建议使用 let 关键字去定义局部作用域的变量

  1. 常量 const

在ES6 之前，定义常量：只要全部用大写字母命名的变量就是常量，建议不要修改（约定俗成的，但是可以修改）

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

在 ES6 引入了常量关键字 const

const PI = '3.14'; // 只读变量
console.log(PI);
PI = '123'; // 会报错，常量不可以修改.
console.log(PI);

4.3、方法

  1. 定义方法

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

var people = {name: 'zhangsan',bitrh: 2000,// 方法age: function () {// 今年 - 出生的年var now = new Date().getFullYear();return now-this.bitrh;}
}
//属性
kuangshen.name
//方法,一定要带()
kuangshen.age()
  1. this.代表什么？
function getAge() {// 今年 - 出生的年var now = new Date().getFullYear();return now-this.bitrh;
}var people = {name: 'zhangsan',bitrh: 2000,age: getAge
}// people.age() ok
// getAge()  NaN  window，因为getAge()需要绑定某一个对象进行使用

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

  1. apply

可以控制 this的指向

function getAge() {// 今年 - 出生的年var now = new Date().getFullYear();return now-this.bitrh;
}var people = {name: 'zhangsan',bitrh: 2000,age: getAge
};var xiaoming = {name: '小明',bitrh: 2000,age: getAge
};// people.age() okgetAge.apply(xiaoming,[]);// this，指向了 xiaoming，参数为空

5、内部对象

标椎对象

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

5.1、Date

基本使用

var now = new Date(); //当前的时间
now.getFullYear(); //年
now.getMonth(); // 月   0~11  代表月
now.getDate(); // 日
now.getDay(); // 星期几
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒now.getTime(); // 时间戳 全世界统一 1970 1.1 0:00:00  毫秒数
console.log(new Date(1578106175991)) //将时间戳转为时间

转换

now = new Date(1578106175991)
now.toLocaleString // 调用的是一个方法
ƒ toLocaleString() { [native code] }
now.toLocaleString()  
now.toGMTString()

5.2、JSON

json 是什么

早期，所有数据传输习惯使用 XML 文件，相对于XML文件，JSON有属于它的优点

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

在JavaScript 一切皆为对象、任何js 支持的类型都可以用JSON来表示，比如number，string等

格式：

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

JSON字符串 和 JS 对象的转化

var user = {name: "zhangsan",age: 23,sex: '男'
}//对象转化为json字符串 {"name":"zhangsan","age":23,"sex":"男"}
var jsonUser =  JSON.stringify(user);//json 字符串转化为对象 参数为 json 字符串
var obj = JSON.parse('{"name":"zhangsan","age":23,"sex":"男"}');

JSON 和 JS 对象的区别

var obj = {a: 'hello',b:'hellob'};//对象
var json = '{"a": "hello","b":"hellob"}'//字符串

5.3、Ajax

  • 原生的js写法 xhr 异步请求
  • jQuey 封装好的 方法 $(”#name“).ajax(“”)
  • axios 请求

6、面向对象编程

原型对象

javascript、Java、c#等都是面向对象编程语言，但是javascript有些区别

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

原型：

var Student = {name: "zhangsan",age: 23,run: function () {console.log(this.name + " run....");}
};var xiaoming = {name: "xiaoming"
};//原型对象
xiaoming.__proto__ = Student;var Bird = {fly: function () {console.log(this.name + " fly....");}
};// 小明的原型 是 Student
xiaoming.__proto__ = Bird;
function Student(name) {this.name = name;
}// 给student新增一个方法
Student.prototype.hello = function () {alert('Hello')
};

class 继承

class关键字，是在ES6引入的

  1. 定义一个类，属性，方法
// 定义一个学生的类
class Student{constructor(name){this.name = name;}hello(){alert('hello')}}var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello()
  1. 继承
<script>//ES6 之后=============// 定义一个学生的类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",1);</script>

本质：查看对象原型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Za4jy57-1581227312339)(D:/%E6%97%A5%E5%B8%B8%E8%BD%AF%E4%BB%B6/TIM/TIM_Download/JavaScript%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0(%E5%AE%8C)]/JavaScript/JavaScript.assets/1578108975667.png)

原型链

__ proto __:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3cmw7FMJ-1581227312340)(D:/%E6%97%A5%E5%B8%B8%E8%BD%AF%E4%BB%B6/TIM/TIM_Download/JavaScript%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0(%E5%AE%8C)]/JavaScript/JavaScript.assets/1578109224139.png)

7、操作BOM对象（重点）

  1. 浏览器介绍

JavaScript 和 浏览器关系？

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

BOM : 浏览器对象模型

  • IE 6~11
  • Chrome
  • Safari
  • FireFox

第三方

  • QQ浏览器
  • 360浏览器
  1. window （重要）

window 代表 浏览器窗口

window.alert(1)	  //弹窗
window.innerHeight//浏览器内高
window.innerWidth //浏览器内宽
window.outerHeight//浏览器外高
window.outerWidth //浏览器外宽
  1. Navigator （不建议使用）

Navigator ,封装了浏览器的信息

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

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

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

  1. screen

代表屏幕尺寸

screen.width  //宽
screen.height //高
  1. location （重要）

location 代表当前页面的URL信息

host:"www.baidu.com"
href:"/"
protocol:"https:"
reload:ƒ reload() // 刷新网页
// 设置新的地址
location.assign('/')
  1. document （内容； DOM）

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

document.title

获取具体的文档树节点

<dl id="app"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd>
</dl><script>var dl = document.getElementById('app');
</script>=

获取 cookie

document.cookie
"__guid=111872281.88375976493059340.1578110638877.133; monitor_count=1"

劫持 cookie 原理

www.taobao.com

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

服务器端可以设置 cookie：httpOnly

  1. history （不建议使用）

history 代表浏览器的历史记录

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

8、操作DOM对象（重点）

核心

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

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

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

  1. 获得dom节点
//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');var childrens = father.children[index]; //获取父节点下的所有子节点
// father.firstChild
// father.lastChild

这是原生代码，之后我们尽量都是用jQuery() ;

  1. 更新节点
<div id="id1"></div><script>var id1 = document.getElementById('id1');
</script>

操作文本

  • id1.innerText='456' 修改文本的值
  • id1.innerHTML='<strong>123</strong>' 可以解析HTML文本标签

操作css

id1.style.color = 'yellow'; // 属性使用 字符串 包裹
id1.style.fontSize='20px'; // - 转 驼峰命名问题
id1.style.padding = '2em'
  1. 删除节点

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

<div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p>
</div>
<script>var self = document.getElementById('p1');var father =  p1.parentElement;father.removeChild(self)// 删除是一个动态的过程；father.removeChild(father.children[0])father.removeChild(father.children[1])father.removeChild(father.children[2])
</script>

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

  1. 插入节点

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

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

<script>var js = document.getElementById('js'); //已经存在的节点var list = document.getElementById('list');//通过JS 创建一个新的节点var newP = document.createElement('p');// 创建一个p标签newP.id = 'newP';newP.innerText = 'Hello,Kuangshen';// 创建一个标签节点var myScript = document.createElement('script');myScript.setAttribute('type','text/javascript');// 可以创建一个Style标签var myStyle= document.createElement('style'); //创建了一个空style标签 myStyle.setAttribute('type','text/css');myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容document.getElementsByTagName('head')[0].appendChild(myStyle)</script>

insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

9、操作表单（验证）

表单是什么 form DOM 树

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

表单的目的：提交信息

获得要提交的信息

<form action="post"><p><span>用户名：</span> <input type="text" id="username"></p><!--多选框的值，就是定义好的value --><p><span>性别：</span><input type="radio" name="sex" value="man" id="boy"> 男<input type="radio" name="sex" value="women" id="girl"> 女</p></form><script>var input_text = document.getElementById('username');var boy_radio = document.getElementById('boy');var girl_radio = document.getElementById('girl');// 得到输入框的值input_text.value// 修改输入框的值input_text.value = '123'// 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值boy_radio.checked; //查看返回的结果，是否为true，如果为true，则被选中girl_radio.checked = true; //赋值</script>

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

<!--
表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数， true， false
将这个结果返回给表单，使用 onsubmit 接收！
οnsubmit="return aaa()"
-->
<form action="/" method="post" onsubmit="return aaa()"><p><span>用户名：</span> <input type="text" 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">提交</button>
</form><script>function aaa() {alert(1);var uname = document.getElementById('username');var pwd = document.getElementById('input-password');var md5pwd = document.getElementById('md5-password');md5pwd.value = md5(pwd.value);// 可以校验判断表单内容，true就是通过提交，false，阻止提交return true;}
</script>

10、jQuery

jQuery是一个快速、简洁的JavaScript框架，封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

获取jQuery

公式 ：$(选择器).事件(事件函数)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--<script src=".4.1/core.js"></script>--><script src="lib/jquery-3.4.1.js"></script>
</head>
<body><a href="" id="test-jquery">标签</a><script>//选择器就是css的选择器$('#test-jquery').click(function () {alert('hello,jQuery');})</script></body>
</html>

选择器

    //原生js选择器少，麻烦不好记//标签document.getElementsByTagName();//iddocument.getElementById();//类document.getElementsByClassName();//jQuery  css中的选择器全部都能用$('p').click(); //标签选择器$('#id1').click(); //id选择器$('.class1').click() //class选择器

文档工具站：/

事件

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JYIH5c9E-1581227312343)(D:/%E6%97%A5%E5%B8%B8%E8%BD%AF%E4%BB%B6/TIM/TIM_Download/JavaScript%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0(%E5%AE%8C)]/JavaScript/JavaScript.assets/1578124124821.png)

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

操作DOM

节点文本操作

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

css的操作

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

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

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

未来ajax（）；

$('#from').ajax()$.ajax({ url: "test.html", context: document.body, success: function(){$(this).addClass("done");
}});