文章目录
- 一、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
- 内部标签（在HTML文件中直接写JS代码，不推荐）
<script>
//JavaScript代码
</script>- 外部引入（JS文件中与HTML文件分离，推荐）
<script src="js文件的路径"></script>- 代码测试
<!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、基本语法入门
- 定义变量
变量类型 变量名 = 变量值;
不具体的区分变量的类型，例如var（定义全局）/let（定义局部）可以代表整数、小数、字符串等 - 条件控制
与Java类似，但是Java中的if~else语句写法有改变
if (score>60 && score<70){
alert("及格")
}else if(score>70 && score<80){
alert("良好")
}else{
alert("优秀/不及格")
}- 控制台打印
console.log(“要打印的内容”) - 弹窗显示
alert(‘显示的内容’);
2.3、数据类型
数值、文本、图像、音频、视频等
- 数值
JavaScript中不区分小数与整数
123 //整数123
123.1 // 浮点数123.1
1.123e3 //科学计数法
-99 //复数
NaN // not a number
Infinity //表示无限大- 字符串
使用双引号与单引号都可以
‘abc’、“abc” - 布尔值
true/false - 逻辑运算
符号 | 含义 |
&& | 同真为真 |
|| | 一真为真 |
! | 取反 |
- 比较运算符
符号 | 含义 |
= | 赋值 |
== | 等于（只看字面值，类型不一样也会判定为等于） |
=== | 完全一样（字面值与类型都一样） |
判断一个数值是否是NaN，只能使用函数isNaN(NaN)来判断，不能使用===符号
- 浮点数
console.log((1/3) === (1-2/3))
//不相等，因为会有浮点数进行运算，有精度的缺失
//应该使用
Math.abs(1/3-(1-2/3))<0.00000001- null与undefined
null是空，undefined是未定义 - 数组
与Java中的数组不一样，js中的数组允许数组元素的类型不一致，数组元素使用[]括起来
//保证代码的可读性，尽量使用 []
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,12,3,4,4,5,'hello');
//在取数组的下标时，如果越界会报出undefined错误- 对象
对象属性之间使用逗号隔开，属性使用{}括起来
//Person person = new Person(1,2,3,4,5);
var person = {
name: "zhangsan",
age: 23,
tags: ['java','web','...']
}
//使用对象值，和Java中一样
person.name
person.age2.4、严格检查模式
- 先在IDEA中设置JavaScript版本为ES６语法的
- 在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、字符串
- 使用单引号或双引号括起来
- 转义字符加反斜杠
\ - 多行字符串的编写使用`符号（在tab键的上面，不是一半单引号）
//tab 上面 esc键下面
var msg =
`hello
world
你好ya
你好`- 模板字符串
let name = "JS";
let msg = `你好呀，${name}`- 字符串的长度
str.length- 字符串不可变
- 大小写转换，调用相应的方法
student.toUpperCase()
student.toLowerCase()- 对应元素第一次出现的索引
student.indexOf('元素')- 截取字符串
//截头不截尾
student.substring(1) // 从第一个字符串截取到最后一个字符串
student.substring(1,3) //[1,3)3.2、数组
数组可以包好任意类型的元素，通过下标取值与赋值
- 长度
数组名.length
//可以给 arr.length 赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失- 获得元素的第一次出现的索引
数组名.indexOf('元素')- 截取数组一部分
slice()
//截取Array的一部分，返回一个新数组，类似于String中的 substringpush()、pop()尾部
push： 将元素压入到尾部
pop： 弹出尾部的第一个元素unshift()、shift()头部
unshift： 将元素压入到头部
shift： 弹出头部的一个元素- 排序
sort() - 元素反转
reverse() - 数组拼接
concat()
let arr = ["C", "B", "A"];
arr.concat([1,2,3]) = ["C", "B", "A", 1, 2, 3];
//原来的数组并没有改变，而是创建了一个新的数组- 连接符join
//在打印拼接数组元素的时候使用，使用特定的字符拼接数组元素
let arr = ["C", "B", "A"];
arr.join('-') = "C-B-A";- 多维数组
其实就是一维数组的元素是另一个数组
3.3、对象
JavaScript中， {……} 表示一个对象， 用 键值对描述属性（键 : 值），多个属性之间使用逗号隔开，所有的键都是字符串，值可以是任意对象
//语法
var 对象名 = {
属性名 : 属性值,
属性名 : 属性值,
属性名 : 属性值
}
//定义了一个person对象及属性
var person = {
name: "张三",
age: 23,
score: 0
}- 对象的赋值
和Java中一样，使用=进行赋值
person.name = "lisi"- 使用未定义的对象属性的时候不会报错，会提示undefined
- 可以动态的删减属性，使用delete删除
delete person.name
true- 可以动态的添加对象属性，直接给对象的新属性赋值就可以
person.sex = "男"- 判断属性值是否在对象中，使用
in
//自己有的
'age' in person
true
//继承父类的
'toString' in person
true- 判断对象的属性是否是自身拥有的（不是继承来的）
hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true3.4、流程控制
- if判断
var age = 3;
if (age<18){ //第一个判断
alert("未成年");
}else if(age<60) { //第二个判断
alert("还年轻");
}else { //否则,,
alert("该退休了");
}- while循环
while(age<100){
age = age + 1;
console.log(age)
}
do{
age = age + 1;
console.log(age)
}while(age<100)- for循环
for (let i = 0; i < 100 ; i++) {
console.log(i)
}- forEach循环
var age = [12,3,12,3,12,3,12,31,23,123];
//函数
age.forEach(function (value) {
console.log(value)
})- 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新特性
- 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"); //删除！- Set （无序不重复）
set.add(2); //添加！
set.delete(1); //删除！
console.log(set.has(3)); //是否包含某个元素！3.6、iterator
ES6新特新
- 遍历数组
//通过for of / for in 下标
var arr = [3,4,5]
for (var x of arr){
console.log(x)
}- 遍历Map
var map = new Map([["tom",100],["jack",90],["haha",80]]);
for (let x of map){
console.log(x)
}- 遍历Set
var set = new Set([5,6,7]);
for (let x of set) {
console.log(x)
}4、函数
4.1、定义函数
- 定义方式一
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
//一旦执行到 return 代表函数结束，返回结果。如果没有执行 return ，函数执行完也会返回结果，结果是 undefined- 定义方式二
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
// function(x){ …. } 是一个匿名函数。但是可以将结果赋值给变量 abs ，通过abs 就可以调用函数
//方式一和方式二等价- 调用函数
abs(10) //10
abs(-10) //104.2、函数参数传递
参数问题：javaScript 可以传任意个参数，也可以不传递参数
参数进来是否存在的问题？
假设不存在参数，如果规避？
- 手动判别并抛出异常
var abs = function(x){
//手动抛出异常来判断
if (typeof x!== 'number') {
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}- 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 包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数
- 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、变量的作用域
- 在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); //innerA
text2()
}
text()；在JavaScript 中 函数查找变量从自身函数开始，由 ‘’内‘’ 向 ‘’外‘’ 查找 。如果外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
- 提升变量的作用域
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
// 之后随意用
}- 全局函数
//全局变量
x = 1;
function f() {
console.log(x);
}
f();
console.log(x);- 全局对象 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
- 规范
由于我们所有的全局变量都会绑定到我们的 window 上。如果不同的js 文件，使用了相同的全局变量，冲突~ > 如果能够减少冲突？
// 唯一全局变量
var TestApp = {};
// 定义全局变量
TestApp.name = 'kuangshen';
TestApp.add = function (a,b) {
return a + b;
}把自己的代码全部放入自己定义的唯一空间名字中， 降低全局命名冲突的问题
jQuery
- 局部作用域 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 关键字去定义局部作用域的变量
- 常量 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、方法
- 定义方法
方法就是把函数放在对象的里面，对象只有两个东西 ： 属性和方法
var people = {
name: 'zhangsan',
bitrh: 2000,
// 方法
age: function () {
// 今年 - 出生的年
var now = new Date().getFullYear();
return now-this.bitrh;
}
}
//属性
kuangshen.name
//方法,一定要带()
kuangshen.age()- 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是无法指向的，是默认指向调用它的那个对象；
- 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() ok
getAge.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引入的
- 定义一个类，属性，方法
// 定义一个学生的类
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello')
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello()- 继承
<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对象（重点）
- 浏览器介绍
JavaScript 和 浏览器关系？
JavaScript 诞生就是为了能够让他在浏览器中运行！
BOM : 浏览器对象模型
- IE 6~11
- Chrome
- Safari
- FireFox
第三方
- QQ浏览器
- 360浏览器
- window （重要）
window 代表 浏览器窗口
window.alert(1) //弹窗
window.innerHeight//浏览器内高
window.innerWidth //浏览器内宽
window.outerHeight//浏览器外高
window.outerWidth //浏览器外宽- 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 对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码
- screen
代表屏幕尺寸
screen.width //宽
screen.height //高- location （重要）
location 代表当前页面的URL信息
host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:ƒ reload() // 刷新网页
// 设置新的地址
location.assign('https://blog.kuangstudy.com/')- 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
- history （不建议使用）
history 代表浏览器的历史记录
history.back() //后退
history.forward() //前进8、操作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 childrens = father.children[index]; //获取父节点下的所有子节点
// father.firstChild
// father.lastChild这是原生代码，之后我们尽量都是用jQuery() ;
- 更新节点
<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'- 删除节点
删除节点的步骤： 先获取父节点，在通过父节点删除自己
<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 是在时刻变化的，删除节点的时候一定要注意!
- 插入节点
我们获得了某个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="https://www.baidu.com/" 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="https://cdn.bootcss.com/jquery/3.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();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器全部都能用
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click() //class选择器文档工具站：http://jquery.cuishifeng.cn/
事件
鼠标事件，键盘事件，其他事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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");
}});
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
