文章目录

1、什么是JavaScript？
- 1.1、概念
- 1.2、历史
2、基本语法
- 2.1、与HTML结合方式
- 2.2、数据类型
- 2.3、变量
- 2.4、运算符
- 2.4、严格检查模式
- 2.5、数组
- 乘法口诀表练习
- 2.6、对象
3、函数
- 3.1、定义函数
- 3.2、变量的作用域
- 3.3、方法
4、内部对象
- 4.1、Date
- 4.2、JSON
- 4.3、Ajax
5、面向对象编程
- 5.1、什么是面向对象
6、操作BOM对象
7、操作DOM对象
- 7.1、核心
- 7.2、获得DOM节点
- 7.3、更新DOM节点
- 7.4、删除DOM节点
- 7.5、插入DOM节点
8、表单验证
9、JQuery

1、什么是JavaScript？

1.1、概念

JavaScript是一门客户端脚本语言，运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎，脚本语言不需要编译，直接就可以被浏览器解析执行了

1.2、历史

能够增强用户和HTML页面的交互过程，控制HTML元素，让页面有一些动态的效果，增强用户的体验

1992年，NomBase公司，开发出第一门客户端脚本语言，专门用于表单的校验，命名为：C–

1995年，Netscape(网景)公司，开发出一门客户端脚本语言：LiveScript。后来与SUN公司人员修改为JavaScript

1996年，微软抄袭JavaScript开发出JScript语言

1997年，ECMA(欧洲计算机制造商协会)制定出客户端脚本语言的标准：ECMAScript，统一了所有客户端脚本语言的编码方式

相当于 JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

2、基本语法

2.1、与HTML结合方式

内部JS：

定义 < script > 标签，标签体内容就是js代码

外部JS：

定义< script > 标签，通过src属性引入外部的js文件

需要注意的是< script>可以定义在html页面任何地方而且可以定义多个，不过位置会影响执行顺序

2.2、数据类型

分为原始数据类型和引用数据类型

原始数据类型(基本数据类型)：

number：数字。整数/小数/NaN(not a number 不是数字的数字类型)
string：字符串。字符串 “abc” “a” ‘abc’
boolean：true和false
null：一个对象为空的占位符
undefined：未定义。如果一个变量没有初始化值，则会被默认赋值为underfined

引用数据类型：对象

2.3、变量

Java语言是强类型语言而JavaScript是弱类型语言

强类型：在创建变量存储空间时，定义了空间将来存储的数据的数据类型，只能存储固定类型的数据

弱类型：在创建变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据

语法： var 变量名 = 初始化值；

typeof 运算符：获取变量的类型，注意的是null运算后得到的是object

测试案例

<script>var a ="Hello World!";alert(a);//定义number类型var num1=1;var num2=1.2;var num3=NaN;//输出到页面上,可以视频typeof查看变量类型document.write(num1+"---"+typeof (num1)+"<br>");document.write(num2+"---"+typeof (num2)+"<br>");document.write(num3+"---"+typeof (num3)+"<br>");//定义string类型var str1="hs";var str2='vae';document.write(str1+"---"+typeof (str1)+"<br>");document.write(str2+"---"+typeof (str1)+"<br>");//定义boolean类型var flag=false;document.write(flag+"---"+typeof (flag)+"<br>");//定义null,underfinedvar obj1=null;var obj2=undefined;var obj3;document.write(obj1+"---"+typeof (obj1)+"<br>");document.write(obj2+"---"+typeof (obj2)+"<br>");document.write(obj3+"---"+typeof (obj3)+"<br>");
</script>

浏览器输出结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8nhFch1g-1612633467235)(https://picture.hs-vae.com/image-20210129230810919.png)]

2.4、运算符

一元运算符

++和–，比如++在前，先自增再运算，++在后先运算再自增
+(-)负号，在Js中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

其他类型转number：

string转number，按照字面值转换，如果字面值不是数字，则转为NaN(不是数字类型的数字)

boolean转number，true转为1，false转为0

Demo如下

<script>var a=3;var c=a++;var b=++a;document.write(c+"<br>");   //3document.write(b+"<br>");   //5var d=+ "123";var e=+ "abc";document.write(d+1+" 类型:"+typeof (d)+"<br>"); //string类型转为numberdocument.write(e+1+" 类型:"+typeof (e)+"<br>"); //因为e不是数字所以加1后变为NaN,不是数字类型的数字var f=+ true;var g=+ false;document.write(f+"<br>");  //1document.write(g);     //0
</script>

比较运算符

当类型相同时，直接比较，注意的是字符串类型按照字典顺序比较，按位逐一比较，直到得到大小为止

类型不同时，先进行类型转换再比较

===三个等号为全等于，在比较之前先判断类型，如果类型不一样则直接返回false

Demo如下

<script>document.write((4>5)+"<br>"); //falsedocument.write(("abc">"aca")+"<br>"); //falsedocument.write((123>"abc")+"<br>");document.write(("123"==123)+"<br>");  //先转换为number类型在比较truedocument.write(("123"===123)+"<br>") //这里先判断是否为同一类型,不是返回false
</script>

逻辑运算符

Demo如下

<script>/**  其他类型转boolean情形:*  1.number:0或NaN为假,其他为真*  2.string:除了空字符串(""),其他都是true*  3.null和underfined:都为false*  4.对象*/var flag =true;document.write(flag+"<br>");document.write(!flag+"<br>");//number类型var num1 =3;var num2=0;var num3=NaN;document.write(!num1+"<br>");  //falsedocument.write(!num2+"<br>");  //truedocument.write(!num3+"<br>");  //true// while (1){ //相当于1就是true,是一个死循环//// }//string类型var str1="";var str2="abc";document.write(!str1+"<br>"); //truedocument.write(!str2+"<br>"); //false//null和underfined类型var obj=null;var obj;document.write(!obj+"<br>");  //truedocument.write(!obj+"<br>");  //true//对象类型var date = new Date();document.write(!date+"<br>"); //false//js可以这样写,简化书写if (obj){  //防止空指针异常}
</script>

2.4、严格检查模式

前提：idea需要设置支持ES6语法

'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题

必须写在JavaScript的第一行，局部变量建议使用let去定义

Demo测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>'use strict';let num=20;
</script>
</body>
</html>

2.5、数组

js数组可以包含任意的数据类型，比如number类型和string类型可以放在同一个数组里面

这里我直接在谷歌浏览器控制台演示

1、数组的存与取

var arr=[1,2,3,4,5,6,7];
arr[0]    //取索引值为0的元素
arr[0]=1  //给索引值为0的元素赋值

2、长度

arr.length

注意：如果给arr.length 赋值，数组的大小就会发生变化，如果赋的值小于数组大小那么元素就会丢失

3、indexOf()，通过元素获得下标索引

arr.indexOf(1)
0

字符串的"1"和数字1不是一样的

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

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

5、push() 和 pop()，push是压入元素到尾部，pop弹出尾部的一个元素

arr.push(8)
8
arr
(8) [1, 2, 3, 4, 5, 6, 7, 8]
arr.pop()
8
arr
(7) [1, 2, 3, 4, 5, 6, 7]

6、unshift() 和 shift() ，unshifts是压入元素到头部，shift是弹出头部的一个元素

arr
(7) [1, 2, 3, 4, 5, 6, 7]
arr.unshift(1)
8
arr
(8) [1, 1, 2, 3, 4, 5, 6, 7]
arr.shift()
1
arr
(7) [1, 2, 3, 4, 5, 6, 7]

7、sort() 数组排序

var str=["A","C","B"];
undefined
str
(3) ["A", "C", "B"]
str.sort()
(3) ["A", "B", "C"]

8、reverse() 数组的顺序反转

(3) ["A", "B", "C"]
str.reverse()
(3) ["C", "B", "A"]

9、concat() 将数组和其他元素连接

(3) ["C", "B", "A"]
str.concat([1,2,3])
(6) ["C", "B", "A", 1, 2, 3]

注意：concat方法并没有修改数组，只是返回一个新的数组

10、join() 连接符，打印拼接数组，使用特定的字符串连接

str
(3) ["C", "B", "A"]
str.join("_")
"C_B_A"

乘法口诀表练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>乘法口诀表</title><style>/*采用css控制表格样式*/td{border: 1px solid;font-size: 20px;}</style>
</head>
<body><script>document.write("<table  align='center'>");//1.完成基本的for循环嵌套,展示乘法表for (var i = 1; i <= 9; i++) {//定义一行document.write("<tr>");for (var j = 1;j<=i;j++){//定义单元格document.write("<td>");document.write(i+"*"+j+" = "+""+(i*j)+"&nbsp;&nbsp;&nbsp;");document.write("</td>");}document.write("</tr>");}//2.完成表格标签document.write("</table>");</script>
</body>
</html>

页面效果

2.6、对象

若干个键值对

语法：

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

定义一个person对象

var person={name:"hushuai",age: 20,gender:"male"
}

js中的对象，{…}表示一个对象，键值对描述属性(比如 age:20) ，多个属性直接使用逗号隔开，除了最后一个属性

注意：js中的所有键都是字符串，值是任意对象～

1、对象赋值

person
{name: "hushuai", age: 20, gender: "male"}
person.age=21
21

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

person.score
undefined

3、动态的删除属性，通过delete删除对象的属性

delete person.gender
true
person
{name: "hushuai", age: 21}

4、动态的添加属性，直接给新的属性添加赋值即可

person.major="programmer"
"programmer"
person
{name: "hushuai", age: 21, major: "programmer"}

5、判断属性值是否在这个对象中， “xxx” in xxx

属性名都是string类型的

"score" in person
false
"toString" in person    //toString方法是继承来的
true

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

person.hasOwnProperty("toString")
false
person.hasOwnProperty("name")
true

3、函数

3.1、定义函数

函数的定义有两种方式

定义方式一

绝对值函数

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

当函数执行到return代表函数结束，返回结果。如果没有执行return，函数执行完也会返回结果(undefined)

定义方式二

    var abs=function (x){if (x>=0){return "正数";}else {return "负数";}}

function(x){…}这是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数

方式一和方式二是等价的

调用函数

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

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

规避不存在的参数，可以在函数开头添加一个类型判断.

    function abs(x){if (typeof x!=='number'){//若不是number类型就手动抛出异常throw 'x is not a number';}if (x>=0){return x;}else {return -x;}}

arguments

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

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

rest

es6引入的新特性，获取除了已经定义的参数之外的所有参数

以前的写法

function abs1(a,b){console.log(a);console.log(b);
}

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

function abs2(a,b,...rest){console.log(a);console.log(b);console.log(rest);
}abs1(1,2)
10_函数.html?_ijt=v31kph2ro6smilus6fn8m9m1uf:30 1
10_函数.html?_ijt=v31kph2ro6smilus6fn8m9m1uf:31 2
undefined
abs2(1,2,4,5,6,7)
10_函数.html?_ijt=v31kph2ro6smilus6fn8m9m1uf:34 1
10_函数.html?_ijt=v31kph2ro6smilus6fn8m9m1uf:35 2
10_函数.html?_ijt=v31kph2ro6smilus6fn8m9m1uf:36 (4) [4, 5, 6, 7]
undefined

3.2、变量的作用域

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

假设在函数体中声明，则在函数体外不可以使用

function abs(){var x=1;x=x+1;
}
x = x+2;
document.write(x);  //Uncaught ReferenceError: x is not defined

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

function abs1(){var x="A";x=x+1;console.log(x);  //A1
}
function abs2(){var x=1;x=x+1;console.log(x);  //2
}

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

function abs3(){var x=1;function abs3_inner(){x= x + 2;var y =1;console.log(x);}console.log(y);
}

假设内部函数的变量和外部函数的变量重名，则函数查找变量从自身函数开始，也就是由内向外查找，当外部函数存在相同的函数变量，则内部函数会屏蔽外部函数的变量

function abs3(){var x=1;function abs4(){var x = 'a';console.log("内部函数的x: "+x);}console.log("外部函数的x: "+x);abs4();
}

提升变量的作用域

function abs4(){var x = 1+y;console.log(x);var y = 'y';
}

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

所以，所有的变量都放在函数的头部，不要乱放，便于代码维护

function abs5(){var x,y,z;           x=1;console.log(x);
}

全局函数

全局变量

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

全局对象window

var x =2;
alert(x);
alert(window.x); //默认的所有的全局变量，都会自动绑定在window对象上

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

var x = "xx";
window.alert(x);
var old_alert = window.alert;
window.alert = function (){}
//这时候alert()失效
window.alert(123);
//恢复
window.alert = old_alert;

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

定义规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，发生冲突，那么如何能够解决冲突？这时候需要一个规范

//唯一全局变量
var hs={};
//定义全局变量
hs.name="hushuai";
hs.hobby=function (a,b){return a+b;
}

局部作用域let

function abs6(){for (var i = 0; i < 10; i++) {console.log(i);}console.log(i+1);  //这时候外部也能访问到i
}

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

function abs6(){for (let i = 0; i < 10; i++) {console.log(i);}console.log(i+1);  //这时候i就没有被定义,会报错
}

所有建议都用let去定义局部作用域的变量

常量 const

在ES6之前，都是使用全部大写字母命名的变量就是常量

比如：

var PI = "3.14";

在ES6之后引入了常量关键字const，一旦定义了就无法在修改

const PI="3.14";
console.log(PI);
PI=123;    //这时候会报错Attempt to assign to const or readonly variable

3.3、方法

定义方法

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

 var hs={name: "胡帅",birthday:2000,//方法age:function () {let now = new Date().getFullYear();return now-this.birthday;}}//属性hs.name
//方法,后面要带()
hs.age()

如果把this.拆开后

 var hs={name: "胡帅",birthday:2000,//方法age:getAge()}function getAge() {//今年所在的年份-出生的年份=年龄var now = new Date().getFullYear();return now-this.birthday;}//直接调用age方法
hs.age()   //21
//直接使用getAge()
getAge()   //NaN,因为这个this获取的是window

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

apply

在js中通过apply可以控制指向

 var hs={name: "胡帅",birthday:2000,//方法age:getAge()}function getAge() {//今年所在的年份-出生的年份=年龄var now = new Date().getFullYear();return now-this.birthday;}getAge.apply(hs,[]); //输出
getAge.apply(hs,[]); //21,this.指向了hs,参数为空

4、内部对象

标准对象

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

4.1、Date

let now = new Date(); //Thu Feb 04 2021 23:31:04 GMT+0800 (中国标准时间)
now.getFullYear();  //年
now.getMonth();    //月
now.getDate();    //日
now.getDay();     //星期几
now.getHours();   //时
now.getMinutes();  //分
now.getSeconds();  //秒
now.getTime();    //时间戳 全世界统一 1970 1.1 0:00:00 毫秒数console.log(new Date(1612452848157));  //时间戳转为时间

转换

now.getTime()
1612452984554
now = new Date(1612452984554)
Thu Feb 04 2021 23:36:24 GMT+0800 (中国标准时间)
now.toLocaleString()
"2021/2/4 下午11:36:24"
now.toGMTString()
"Thu, 04 Feb 2021 15:36:24 GMT"

4.2、JSON

json概念

早期，所有数据传输习惯使用XML文件

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

在JavaScript一切皆对象，任何js支持的类型都可以使用JSON来表示

格式：

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

JSON字符串和JS对象的转化

    "use strict"let hs={name:"hushuai",age:21,sex:"man"}//对象转化为JSON字符串let jsonStr = JSON.stringify(hs); //{"name":"hushuai","age":21,"sex":"man"}//JSON字符串转化为对象let parse = JSON.parse('{"name":"hushuai","age":21,"sex":"man"}');

JSON和JS对象的区别

var obj = {name:"hs",age:21};
var json = '{"name":"hs","age":21}'

4.3、Ajax

原生的js写法 xhr 异步请求
JQuery封装好的方法 $("#name").ajax("")
axios 请求

5、面向对象编程

5.1、什么是面向对象

JavaScript、java、c#。。面向对象：JavaScript有些区别

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

原型：

    var student={name:"student",age: 20};var vae={name:"xusong"};//vae的原型是studentvae._proto_=student;

class继承

class关键字，是在ES6引入的

1、定义一个类，属性，方法

//定义一个学生的类
class Student {constructor(name) {this.name=name;}hello(){alert("Hello World");}
}
var hs = new Student("hushuai");

2、继承

class Student {constructor(name) {this.name=name;}hello(){alert("Hello World");}
}
var hs = new Student("hushuai");//小学生继承学生
class xiaoStudent extends Student{constructor(name,age) {super(name);this.age=age;}hello() {alert("小学生");}
}
var vae = new xiaoStudent("xusong",2);

6、操作BOM对象

BOM：浏览器对象模型

window

window代表浏览器窗口

window.alert("HelloWorld")
undefined
window.innerHeight    //内窗口高
754
window.innerWidth     //内窗口宽
1004
window.outerHeight
870
window.outerWidth
1566

Navigator

Navigator封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appCodeName
"Mozilla"
navigator.platform    //平台
"Linux x86_64"
navigator.appVersion  //软件版本
"5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36"
navigator.language    //语言
"zh-CN"

screen

获取屏幕的尺寸

screen.width
1745
screen.height
981

location (重点)

location 代表当前页面的URL信息

host: "www.baidu.com"
hostname: "www.baidu.com"      //主机名
href: "https://www.baidu.com/" //网站所在的地址
protocol: "https:"    //协议
reload: ƒ reload()    //刷新//设置新的地址，跳转到该网页
location.assign("https://hs-vae.com/")

document

document代表当前的页面，HTML

<!--定义一个列表标签 -->
<dl id="my"><dt>hs</dt><dt>vae</dt><dt>jay</dt>
</dl><script>document.getElementById("my");  //通过获取标签的id来得到dt里的内容document.title; //获取网页标题document.title = "自定义的Vae";  //设置网页标题
</script>

获取cookie(客户端的一些信息,例如登录信息)

document.cookie
"BIDUPSID=9BE6DD1861D74C9F736618D9BF152F39; PSTM=1607232954"

劫持cookie的原理

他们在网页里面插入js文件，然后该文件里面有document.cookie方法上传到他们的服务器

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

服务器端可以设置cookie：httpOnly

history

history代表浏览器历史记录

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

7、操作DOM对象

7.1、核心

DOM 是 Document Object Model（文档对象模型）的缩写。

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

HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

更新：更新DOM节点
遍历DOM节点：获取DOM节点
删除：删除一个DOM节点
添加：添加一个新的DOM节点

7.2、获得DOM节点

这是原生代码

<div id="father"><h1>这是一级标题</h1><p id="p1">段落一</p><p class="p2">段落二</p>
</div><script>//对应的CSS选择器var h1=document.getElementsByTagName("h1"); //通过标签名获取节点var p1=document.getElementById("p1");       //通过id选择器获取节点var p2=document.getElementsByClassName("p2");  //通过类选择器获取节点var father = document.getElementById("father");   //获取父节点var childrens = father.children;   //获取父节点下的所有子节点var lastChild = father.lastChild;   //获取父节点的第一个子节点var firstChild = father.firstChild;  //获取父节点的最后一个子节点
</script>

7.3、更新DOM节点

<div id="d1"></div><script>var d1 = document.getElementById("d1");  //获取div标签的节点d1.innerText='设置文本';           //设置节点文本d1.innerHTML='<strong></strong>';  //设置节点HTML标签,自动解析Htmld1.style.color='red';            //设置该节点的颜色为红色d1.style.fontSize='100px';       //设置该节点的字体为100px
</script>

操作文本

d1.innerText='设置文本';           //设置节点文本
d1.innerHTML='<strong></strong>';  //设置节点HTML标签,自动解析Html文本标签

操作css

d1.style.color='red';            //设置该节点的颜色为红色
d1.style.fontSize='100px';       //设置该节点的字体为100px

7.4、删除DOM节点

删除DOM节点的步骤：先获取需要删除的节点，在通过该节点获取父节点，然后通过父节点删除该节点

<div id="father"><h1>一级标题</h1><p id="p1">段落一</p><p class="p2">段落二</p>
</div><script>var p1 = document.getElementById("p1");  //先获取需要删除的节点var father = p1.parentElement;     //通过该节点获取父节点father.removeChild(p1);    //通过父节点删除该节点//删除是一个动态的过程,不能这样写!father.removeChild(father.children[0]);father.removeChild(father.children[1]);father.removeChild(father.children[2]);
</script>

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

7.5、插入DOM节点

我们获得了某个DOM节点，如果这个DOM节点是空的，我们通过innerHTML就可以增加一个元素，但是这个DOM节点已经存在元素了，就不可以

<p id="silence">汪苏泷</p>
<div id="singer"><p id="vae">许嵩</p><p id="jay">周杰伦</p>
</div><script>//通过类和id选择器的属性获得DOM节点var singer = document.getElementById("singer");var silence = document.getElementById("silence");//将silence节点追加到singer节点下,注意这里必须是同一个选择器(id)singer.appendChild(silence);
</script>

效果如下

创建一个新的节点并插入

<p id="silence">汪苏泷</p>
<div id="singer"><p id="vae">许嵩</p><p id="jay">周杰伦</p>
</div><script>//通过类和id选择器的属性获得DOM节点var singer = document.getElementById("singer");var silence = document.getElementById("silence");//将silence节点追加到singer节点下,注意这里必须是同一个选择器(id)singer.appendChild(silence);//通过js创建一个新的DOM节点var newP = document.createElement('p');//给新节点设置id和文本以及css颜色newP.className = 'jj';newP.innerText = "林俊杰";newP.style.color = "red";singer.appendChild(newP);
</script>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wX2xSQV6-1612633467255)(https://picture.hs-vae.com/image-20210206204056991.png)]

创建一个新的Style标签并插入

 //创建一个Style标签节点var myStyle = document.createElement("style");//设置属性名和属性值myStyle.setAttribute("type","text/css");//设置背景颜色myStyle.innerHTML="body{background: cyan;}";//获取head节点并将style标签节点插入document.getElementsByTagName("head")[0].appendChild(myStyle);

insertBefore和replaceChild

<p id="silence">汪苏泷</p>
<div id="singer"><p id="vae">许嵩</p><p id="jay">周杰伦</p>
</div>
<script>//通过类和id选择器的属性获得DOM节点var singer = document.getElementById("singer");var silence = document.getElementById("silence");// 在指定的节点前面插入节点singer.insertBefore(silence,vae);// 替换指定的节点//singer.replaceChild(silence,vae);
</script>

8、表单验证

表单是 form DOM树，目的就是为了提交信息

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

获取提交的信息

<form action="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="women" id="girl">女</p></form><script>var input_usename = document.getElementById("username");var boy_radio = document.getElementById("boy");var girl_radio = document.getElementById("girl");//获得用户名输入框的值input_usename.value;//修改输入框的值input_usename.value='hs'//对于单选框和多选框等固定的值,boy_radio.value只能获取到当前的值boy_radio.checked;  //查看返回结果,是否为true,若为true则被选中girl_radio.checked = true;  //选中 女
</script>

提交表单 MD5加密

<!--导入md5.js文件-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<!--
表单绑定提交事件 onsubmit=绑定一个提交检测的函数,将这个结果(true或者false)返回给表单,使用onsubmit接收
-->
<form action="#" method="post" onsubmit="return getPwd()"><p><span>用户名: </span><input type="text" name="username" id="username"></p><p><span>密码: </span><input type="password" id="input-password"></p><!--  设置一个隐藏的密码属性  --><input type="hidden"  name="password" id="md5-password"><!--绑定事件onclick --><button type="submit">提交</button>
</form>
<script>function getPwd() {var input_username = document.getElementById("username");var input_password = document.getElementById("input-password");var md5_password = document.getElementById("md5-password");//将输入的密码通过md5加密赋值给隐瞒的密码md5_password.value = md5(input_password.value);// 可以校验判断表单内容return true;}
</script>

效果如下：

9、JQuery

JQuery库里面存在大量的JavaScript函数

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

selector: css选择器
action: 事件

获取JQuery

可以在开头导入 JQuery

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<a href="https://hs-vae.com" id="blog">个人博客</a>
<script>/*JQuery公式 &(selector).action()selector:选择器action:动作行为*/$('#id').click();   //点击个人博客进入到该网页
</script>

JQuery选择器

可以查看工具站：https://jquery.cuishifeng.cn/

<script>
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();//css中的选择器JQuery全部都能用
$('p').click();  //标签选择器
$('#id1').click();   //id选择器
$('.class1').click();   //类选择器
</script>

JQuery事件

    <style>#divMove{width: 800px;height: 700px;border: 1px solid red;}</style>
</head>
<body>
<!--要求: 获取鼠标当前的一个x,y坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>//当前网页元素加载完毕之后,响应事件// $(document).ready(function (){//// })//简写$(function (){$('#divMove').mousemove(function (e){$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)})});
</script>

操作DOM

节点文本操作

$('#singer li[class=vae]').text();  //获得值
$('#singer li[class=vae]').text("汪苏泷");  //设置值
$('#singer').html(); //获得值
$('#singer').html('<strong>666</strong>');  //设置值

css的操作

 $('#singer li[class=vae]').css('color','red');  //设置css属性

元素的显示和隐藏

本质相当于 display: none

$('#singer li[class=vae]').show()  //展示
$('#singer li[class=vae]').hide()  //隐藏

window高宽

$(window).height()
895
$(window).width()
838

从零到一のJavaScript笔记相关推荐

《零基础学JavaScript(全彩版)》学习笔记
<零基础学JavaScript(全彩版)>学习笔记二〇一九年二月九日星期六0时9分前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...
javascript笔记：深入分析javascript里对象的创建（上）续篇
今天回来一看我的博客居然有这么多人推荐真是开心极了,看来大家对我的研究有了认可,写博客的动力越来越大了,而且我发现写javascript在博客园里比较受欢迎,写java的受众似乎少多了,可能博客园里j ...
JavaScript 笔记Day1
<JavaScript 笔记> JavaScript 是属于网络的脚本语言! JavaScript 是世界上最流行的编程语言.这门语言可用于 HTML 和 web,更可广泛用于服务器.PC ...
JavaScript笔记整理
JavaScript笔记整理这段时间没有之前花在学习上的时间多了目前进度还停留在JavaScript和D3.js(这个目前只找到了教程) 主要原因是因为决定自己找单位实习,到了今天26号才有了眉目 ...
[Effective JavaScript 笔记]第27条：使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
js一行四个超过自动换行_干货！零基础学JavaScript要掌握的四个基本常识
零基础学JavaScript需要掌握哪几个基本常识点?下面西安鸥鹏为大家解答.了解和总结程序语言中常见的小常识,可以使编程变得容易,特别对于新手来说.JavaScript是一种弱类型客户端的编程语言, ...
从零开发一款笔记APP——神马笔记WhatsNote
从零开发一款笔记APP--神马笔记WhatsNote 一.主要功能二.开发过程三.优质的笔记应用四.附录一.主要功能笔记的主要功能分为三个部分: 管理目录--多层目录结构标签--单层结构 ...
【JavaScript笔记 · 基础篇(五)】Array全家桶（引用数据类型中的数组 / Array对象 / Array.prototype）
文章目录一. 引用数据类型中的数组 1.1 概述 1.2 初始化 1.2.1 字面量 1.2.2 构造函数模式 1.3 访问 1.4 length属性 1.5 数组遍历 1.6 类数组对象 1.6. ...

从零到一のJavaScript笔记