javascript入门
JavaScript
1 聊一聊前端
前端三要素
- hyper Text markup language超文本标记语言，决定网页的结构和内容
- cascading style sheets 层叠样式表，设定网页的表现形式
- JavaScript 弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为
1.2 结构层HTML
太简单了 略
1.3 表现层CSS
css是一门标记语言而不是编程语言，它主要缺陷如下：
- 语法不够强大，比如无法嵌套书写，导致模块化开发中需要用到很多重复的选择器
- 没有变量和合理的样式复用机制，难以维护
这就引出了【CSS处理器】的工具，提供CSS缺少的样式复用机制，减少冗余代码，提高效率
1.3.1 什么是CSS预处理器
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。which means-->" 用一种专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的CSS文件"
常见的CSS预处理器有哪些
- SASS:基于Ruby，通过服务端处理
- LESS：基于NodeJS，通过客户端处理，使用简单，在实际开发中足够了
1.4 行为层JavaScript
JavaScript是一门弱类型脚本语言，其源代码在发往客户端不需要编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
Native 原生 JS 开发
原生JS 开发，也就是让我们按照 【ESMA script】标准的开发方式，简称是 ES ，特定是所有浏览器都支持。截止到现在 ES 有如下版本
* ES3
* ES4(内部，未正式发布)
* ES5（全浏览器支持）
* ES6（常用，当前主流版本：Webpack打包成为ES5支持！）
* ES7
* ES8
* ES9(草案阶段)
区别就是逐渐增加新特性
TypeScript 微软的标准
TypeScript 是Javascript的超集，很多浏览器不支持TypeScript ，往往需要编译成 JS 才能被浏览器正确使用。
1.4.1 JavaScript 框架
- JQuery：一个库不是框架，里面有方法，可以调
- Angular：Google收购的前端框架，特定是将后端的MVC模式搬了过来并增加了模块化开发的理念。
- React ： facebook出品，提出了【虚拟DOM】 的概念，需要学习 JSX 语言
- Vue：综合了Angular（模块化）和React（虚拟Dom）的优点
- Axios:前端通信框架
1.4.2 UI框架
- Ant-Design : 阿里出品，基于React的UI框架
- ElementUI , iview ， ice：饿了么出品，基于Vue的UI框架
- Bootstrap : Twitter 推出的一个用于前端开发的开源工具包
- AmazeUI：又叫妹子UI，一款HTML5跨屏前端框架
1.4.3 JavaScript 构建工具
- Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译 TypeScript.
- WebPack：模块打包器，主要作用是打包，压缩，合并并按顺序加载
1.4.4 后端技术
NodeJS
- Express:NodeJS 框架
- Koa：express简化版
- NPM：项目综合管理工具，类似于Maven
- YARN ：NPM的替代方案，类似MAVEN与Gradle的关系
2、什么是JavaScript
2.1 概述
JavaScript是世界上最流行的脚本语言
java与JavaScript的关系就想周杰伦与周杰的关系（蹭热度qaq）
一个合格的后端程序员，必须要精通 JavaScript
2.2 历史
https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到es6版本
但是大部分浏览器哦还停留在es5代码上
3快速入门
3.1 、引入JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内，写JavaScript代码 -->
<!-- <script >
alert("44")
</script>-->
<!--外部引入-->
<script src="js/HelloWorld.js"></script>
<!--不用显示定义type，也默认就是-->
<script type="text/javascript"></script>
</head>
<body>
</body>
</html>
3.2 基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/* 1.定义变量： 变量类型 变量名 = 变量值*/
var num = 1;
alert(num);
/* 2 条件控制 (和java一样)*/
var score = 90;
if(score>60&&score<70){
alert("60-70")
}else if(score>70&&score<80){
alert("70-80")
}else {
alert("other")
}
// console.log(score); 在浏览器的控制台打印变量
</script>
</head>
<body>
</body>
</html>
3.3 数据类型介绍
数值，文本，图形，音频，视频
变量
所有变量定义都为var （variable ）
number
js不分小数和整数
123 // 整数123
123.1 // 浮点数123.1
1.123e3 //科学计数法
-99 //负数
NaN // Not a Number
Infinity //无穷
字符串
'abc' "abc"
布尔值
true , false
逻辑运算
&& 与
|| 或
！ 非
比较运算符 !!! important
=
== 等于 （类型不一样，值一样，true：如1与"1"）
=== 绝对等于 （类型一样，值一样，结果为true）
须知：
NaN === NaN ， 这个与所有的数值都不相等，包括自己
只有通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题
console.log((1/3) === (1-2/3)) 存在精度问题
null 和undefined
- null 空
- undefined 未定义
数组
java的数组是一系列相同类型的对象
而javaScript不需要这样，注：数组都是中括号
var arr = [1,3,"hello",true,null];
new Array(1,2,"hello");
// 取数组下标越界了就会indefined
对象
对象是大括号，数组是中括号
// java写法为：Person person = new Person();
// js 写法为
var person {
name:"hujes",
age:3,
tag:['js','oach']
}
取对象的值
person.name
>hujes
person.age
>3
3.4 严格检查模式
‘ use strict '
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*'use strict',严格检查模式，防止js的随意性导致产生一些问题
* 必须写在js的第一行；
* 局部变量都用let去定义*/
'use strict'
i = 1; // 全局变量，报错
var u = 1;
let num = 1;
//let 代表局部变量 ，ES6 新语法
</script>
</head>
<body>
</body>
</html>
4 数据类型
4.1 字符串
1.正常字符串我们使用单引号或者双引号
2、转义字符
\' '
\n 换行
\t 制表符
\u4e2d unicode字符
\x41 ascii编码
3、多行字符串编写
// tab 上面esc下面 的 ``
var msg =
` hello
whoami
alright`
4、模板字符串
let name = "hujes";
let age = 3;
let msg = `hello,${name}`
console.log(msg)
5、字符串长度
str.length
6、字符串的特性，是不可变的，可以给str[0]赋值，但不可变；
当然在java中是不可以取字符串下标的。
7、大小写转换
student.toUpperCase()
student.toLowerCase()
8、subString
[)
student.substring(1) // 从第一个字符截取到最后一个字符串
student.substring(1,3) //【1，3） 不包含第三
let name = 'hujesse';
console.log(name.substring(1,3))
> uj
4.2 数组
Array可以包含任意的数据类型
var arr = [1,2,3,4];
console.log(arr)
> (4) [1, 2, 3, 4]
1、长度
arr.length
注意给arr.length赋值，数组大小就会发生变化~
赋值过小元素就会丢失，赋值过大会有空empty
2、indexof，通过元素获得下标索引
arr.indexof(2)
>1
3、slice（）截取Array的一部分，返回一个新数组
类似与substring的用发
4、push ， pop 尾部
push : 压入到尾部
pop：弹出尾部的一个元素
5 unshift , shift () 头部
unshift : 压入到头部
shift：弹出头部的一个元素
6、排序用sort（）
7、元素反转
arr.reverse();
8、arr.concat(['a','b',c']);
[1,2,3,4,'a','b','c'];
注意：concat（）并没有修改数组，只是会返回一个新的数组
9、链接符join
连接拼接数组，使用特定的字符串连接
["c","b","a"]
arr.join('-')
"c-b-a"
4.3 对象
若干个键值对
var 对象名 = {
属性名：属性值,
属性名：属性值,
属性名：属性值,
}
js中对象，{.....}表示一个对象，键值对描述属性xxxx:xxxx,多i个属性之间使用 ’ ，‘隔开，最后一个属性不加逗号
-
对象赋值
student.name = "hujes" student.age
2、使用一个不存在的对象属性，不会报错！ undefined
student.hah
undefined
3、动态的删减属性，通过delete删除对象的属性
delete student.name
>true
4、动态的添加
student.hah = "haha"
>"haha"
// 这样就添加好了
5、判断属性是否在对象中！ xxx in xxx!
JavaScript中的所有键都是字符串，值是任意对象！
'age' in student
>true
6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
student.hasOwnProperty('age')
>true
4.4 流程控制
if 判断
循环
for 循环
for (let i = 0; i < 10; i++) {
console.log(i)
}
foreach循环
ES5新增
var age = [1,2,3,4]
age.foreach(function (value){
console.log(value)
})
for in ; for of循环
1 在java中 ：
for(Type str : el){
}
2.在js中
// var key in object
for (var num in array){
// 其中这个num是下标
}
// var value of object
for(var num of array){
// 其中num才是数组的值
}
4.5 Map 和 Set
Map：
'use strict'
//map 类似于Python的字典
let map = new Map([['tom',90],['ham',40]]);
let name = map.get('tom');
console.log(name);
map.set('john',22);
Set:无序不重复的集合
let set = new Set([3,1,1,3,3,2]) // set 可以去重
set.add(4);
set.delete(1);
console.log(set.has(3)); // 是否包含某个元素
4.6 iterator迭代器
ES6新特性
使用iterator来遍历迭代我们的Map，Set或者数组
for .. in 遍历下标
for .. of 遍历具体的值
//遍历数组
let arr = [1,2,3];
for (let x of arr){
console.log(x)
}
// 遍历map
let arr = new Map(
[
["tom",1],
["huejse",2]
]
);
for (let x of arr){
console.log(x);
}
// 遍历Set
let set = new Set([5,6,7]);
for (let x of set){
console.log()
}
5 函数
方法是存在于对象（属性，方法），才叫方法，像c这种过程化的叫函数。
5.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) //10
参数问题：js可以传任意个参数，也可以不传递参数
参数传进来是否存在问题
假设不存在参数，如何规避？
var abs = function(x){
// 手动抛出异常来判断
if(typeof x!='number'){
throw 'not a number '
}
if(x>=0){
return x;
}else
return -x;
}
arguments
arguments是一个js免费赠送的关键字
代表传递进来的所有参数，是一个数组
例如abs(1,2,3,4,5) 传了5个参数，而arguments中就包含这5个
== = ====》
改进== == 》
rest只能写在最后面，前面是三个'...'
<script>
function aa(a,b,...rest){
console.log(rest)
}
aa(1);
aa(1,2,3,3,5);
</script>
>Array(0)
>Array(3)
0: 3
1: 3
2: 5
ES6引入的新特性，获取除了已经定义的参数之外的所有参数
5.1.1 变量作用域
在js中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用
局部函数变量
'use strict'
function ab(){
var x = 1;
x = x+1;
}
x = x+2;
// uncaught referenceError ： x is not defined
注意事项：最好先定义变量再引用：
var x =1
var y = x+1;
var z,i,z;
.....
y = ...
z=...
全局变量 放在函数体之外
建议使用let和const关键字
常量
在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量
常量使用const修饰
之前是
var PI = '3.14';
// 但如果有人修改了PI，就改变了PI的值安全性额额
在ES6引入了常量关键字
const PI = '3.14';
PI = '21'；
就会出错
5.2 方法
把函数放对象里面就是方法了,对象只有二个东西吃：属性和方法
定义方法
<script>
let stu = {
name:'hujes',
birth:2000,
age : function (){
// 今年-出生年月
let now = new Date().getFullYear();
return now -this.birth;
}
}
console.log(stu.age());
</script>
// 调属性：stu.name;
// 调属性 ： stu.age();
this.代表什么？拆开上面的代码看看
this始终指向调用它的那个人
这样就有点像Vue框架的写法了，方法定义在外面
<script>
function f(){
// 今年-出生年月
let now = new Date().getFullYear();
return now -this.birth;
}
let stu = {
name:'hujes',
birth:2000,
age:f
}
console.log(stu.age());
</script>
apply
在js中可以控制this的指向，第二个参数基本为空
<script>
function f(){
// 今年-出生年月
let now = new Date().getFullYear();
return now -this.birth;
}
let stu = {
name:'hujes',
birth:2000,
age:f
}
console.log(f.apply(stu,[])); //this指向了stu，参数为空
console.log(stu.age());
</script>
6 内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
6.1 Date
日期对象
基本使用
<script>
let date = new Date();
console.log(date)
>Sat Feb 13 2021 15:05:29 GMT+0800 (中国标准时间)
date.getFullYear(); // 年
date.getDate(); // 日
date.getMonth(); // 月 老外月份是0-11
date.getHours(); //时
date.getDay(); // 星期几
date.getMinutes() ; //分
date.getSeconds(); // 秒
date.getTime(); // 时间戳 全世界统一， 1970.1.1.00.00开始到现在的毫秒数
console.log(new Date(1578106175991)); // 时间戳转为时间
</script>
转换：
<script>
let date = new Date();
console.log(date.toLocaleString());
</script>
> 2021/2/13下午3:05:29
6.2 JSON
JavaScript Object Notation ( JS 对象简谱)，是一种轻量级的数据交换格式
在JS中，一切皆为对象，任何js支持的类型都可以用JSON来表示
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对 都是使用key : value
场景: JSON 字符串和 JS 对象的转化
<script>
let user = {
name:"hujes",
age : 3,
sex : "male"
}
console.log(user)
// 对象转换为Json字符串
let json = JSON.stringify(user);
console.log(json) //{"name":"hujes","age":3,"sex":"male"}
// json 字符串转换为对象
let obj = JSON.parse(json);
let obj2 = JSON.parse('{"name":"yes","age":"3"}');// 里面双引号，外面就单引号
console.log(obj);
console.log(obj2);
</script>
很多人搞不明白，JSON 和 JS 对象的区别
let obj = {a:'hello',b:3};
let json = '{"a":"hello","b":"hello"}';
6.3 Ajax
- 原生的js写法 xhr异步请求
- jQuery 封装好的方法 $("name".ajax(""))
- axios 请求
前端做后台用NodeJS做
X 面向对象编程
X.1 什么是面向对象
类：模板 （原型对象）
对象：类的具体实现
在js中是基于对象，与java相比需要改变思路
原型__proto__：
<script>
let stu = {
name:"hujes",
age : 3,
sex : "male",
run : function (){
console.log(this.name+"is flying");
}
};
let ppl = {
name:"num1"
}
// 原型对象，或者说继承了stu，但stu也继承了Object
ppl.__proto__ = stu;
ppl.run();
</script>
X.2 class 继承
class 关键字是在ES6引入的
定义一个类，属性，方法
js的class仅仅为一个语法糖，是在原先构造函数的基础上出现的class，仅仅如此。所以使用构造函数构造类，或者使用class语法糖构造类都是相同的。具体还是使用prototype和this来进行模拟类。
重点在于构造函数，使用的是构造函数来模拟类。
类声明
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
场景：带有继承extends
// ES6 之后
class student {
constructor(name) {
this.name = name;
}
}
class ppl extends student {
constructor(name,age) {
super(name);
this.age = age;
}
shout (){
alert(this.age)
}
}
let huejs = new student("hujes");
let human = new ppl("zhaojie",3);
console.log(human.shout())
本质：查看对象原型
原型链
7、操作Dom元素(重点）
前言数值事项
- 不能把js写在了html之前，编译代码从上到下会出现错误，最好写在body末尾。
Document object model ： 文档对象模型
浏览器网页就是一个Dom树形结构！
- 更新：更新Dom节点
- 遍历dom节点：得到dom节点
- 删除：删除一个dom节点
- 添加：添加一个新的节点
要操作一个dom节点，就必须要先获得这个dom节点
document.getElementsByTagName 返回的是数组，要想获得如过是独一无二的，例如body，则在后面加[0]。
场景：获得DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = 'app'>
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
// 对应CSS选择器
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let app = document.getElementById('app');
console.log(app.children); // 获取父节点下的所有子节点
</script>
</body>
</html>
7.1 插入Dom（重点）
我们获取了某个Dom节点，假设这个dom节点是空的，我们通过innerText就可以增加一个元素，但是这个dom节点如果有值就不能这么做了
追加：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id = 'js'>javascript</p>
<div id = 'app'>
<p id="s1">s1</p>
<p id="p1">p1</p>
<p id="p2">p2</p>
</div>
<script>
let js =document.getElementById('js');
let app = document.getElementById('app');
app.append(js); // 追加到后面
</script>
</body>
</html>
效果：
7.2.1 创建一个新标签,实现插入
方法一
<script>
let app = document.getElementById('app');
let newp = document.createElement('p'); // 创建一个p标签
newp.id = 'javase'; // 给p标签的id赋值
newp.innerText = 'this_is_a_javase';
app.append(newp) // 追加到id = ‘app’之后
</script>
创建的第二个方法：key，value的形式
let scr = document.createElement('script');
scr.type='text/javascript'; // === scr.setAttribute('type','text/javascript');
app.appendChild(scr);
appenChild (后插)
场景：全用js写html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</div>
<script>
let p1 =document.createElement('p');
let div =document.createElement('div');
let p2 =document.createElement('p');
let p3 =document.createElement('p');
let p4 =document.createElement('p');
p1.setAttribute('id','js');
p1.innerText = 'javascript';
document.getElementsByTagName('body')[0].appendChild(p1); // 很重要的一行代码
// 获取标签的节点返回的是对象数组。
div.setAttribute('id','app');
document.getElementsByTagName('body')[0].appendChild(div);
p2.setAttribute('id','p2');
p2.innerText = 'javase';
div.appendChild(p2)
p3.setAttribute('id','p3');
p3.innerText = 'javaee';
div.appendChild(p3)
p4.setAttribute('id','p4');
p4.innerText = 'javame';
div.appendChild(p4)
</script>
</body>
</html>
inserBefore （前插）
父节点.InsertBefore(newNode,TargetNode);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id = 'js'>JavaScript</p>
<div id = 'app'>
<p id='p1'>javaee</p>
<p id='p2'>javase</p>
<p id='p3'>javame</p>
</div>
<script>
let spring =document.createElement('p');
spring.innerText = 'spring';
let p2 = document.getElementById('p2');
let app = document.getElementById('app');
// 二个参数(要插入的节点，插在谁前面的那个节点)
app.insertBefore(spring,p2);
</script>
</body>
</html>
7.2 更新Dom（重点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "app">
</div>
<script>
let app = document.getElementById('app');
app.innerText='123';
app.innerHTML = '<strong>23</strong>'
app.style.color = 'red';
app.style.fontSize = '20px';
</script>
</body>
</html>
7.3 删除Dom
步骤：先获取父节点，再通过父节点删除自己（重点）
<div id = 'app'>
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
let app = document.getElementById('app');
app.removeChild(p1); //通过父类删除字节点
or
app.removeChild(app.children[0])
注意事项：删除多个节点的时候，children是在时刻变化的，比如你删了第一个节点，原来的第二个变成了第一个
8 操作Bom元素（重点）
browser object model ： 浏览器对象模型
浏览器介绍
javascript和浏览器关系？
js的诞生就是为了能够在浏览器中运行
内核：
- IE6-11
- Chrome
- safari
- Firefox
- Opera
第三方浏览器：
- qq浏览器
- 360浏览器
8.1 windows
window
window代表浏览器窗口全局对象
window.alert(3)
undefined
window.innerHeight
622
window.innerWidth
1104
window.outerHeight
803
window.innerHeight
622
window.innerWidth
// 改变了浏览器窗口大小后会发生变化
785
调整浏览器窗口使用innerHeight，innerWidth
8.2 navigator
navigator
navigator 代表当前浏览器的信息（不建议使用）
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36"
navigator.platform
"Win32"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36"
大多数情况，我们不会使用navigator对象
因为会被人人为修改，就像玩游戏会识别你是手机还是电脑
8.3 screen
screen
screen.width
1536
screen.height
864
// 代表屏幕的尺寸
1536px * 864px
还可以查看分辨率的大小
8.4 location（重要）
代表当前页面的url信息
host: "www.bilibili.com" // 代表主机
href: "https://www.bilibili.com/video/BV1JJ41177di?p=19&t=2"
protocol: "https:" // 协议
reload: ƒ reload() // 方法，重新加载（刷新）
// 设置新的地址
location.assign('https://www.baidu.com')
8.5 Document（重要）
Document代表当前的页面。HTML DOM文档树
场景：获取具体的文档树节点，可以进行修改
<ol id='app'>
<li>java</li>
<li>javaee</li>
</ol>
<script>
let list = document.getElementById('app')
// 还能getClass ， getTargetName
</script>
获取Cookie
document.cookie
"_uuid=6D5694F0-F21D-D27B-F7DD-BCC7EF3DD79958804infoc; buvid3=5ECB5B74-5BB3-4068-8E9E-860398DA22FA1 ---
服务器端可以设置cookie：httpOnly
8.6 History
代表浏览器的历史信息（不建议使用）
history.back() // 前进
history.forward() // 后退
8.7 操作表单(验证)
表单是什么 表单也是一颗dom树
- 文本框 text
- 下拉框 select
- 单选框radio
- 多选框 checkbox
- 隐藏框 hidden
- 密码框 password
- ....
表单的目的：提交信息
获得要提交的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id = 'js'>JavaScript</p>
<div id = 'app'>
<p id='p1'>javaee</p>
<p id='p2'>javase</p>
<p id='p3'>javame</p>
</div>
<script>
let spring =document.createElement('p');
spring.innerText = 'spring';
let p2 = document.getElementById('p2');
let app = document.getElementById('app');
// 二个参数(要插入的节点，插在谁前面的那个节点)
app.insertBefore(spring,p2);
</script>
</body>
</html>
8.7.1 表单验证以及md5加密
onsubmit = "return function()"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src ="https://cdn.bootcss.com/bluimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单提交事件
onsubmit绑定一个提交检测的函数 函数返回true，false
将这个结果返回给表单，用onsubmit接受！-->
<form action="www.baidu.com" method="post" onsubmit="return check()">
<span>用户名: </span><input type="text" id = 'username' name="username"> <br>
<!--多选框的值就是定义好的value-->
<span>密码: </span><input type="password" id = 'password' name="password"> <br>
<!--绑定事件 onclick=f()-->
<button type="button" >提交</button>
</form>
<script>
function check(){
let uname = document.getElementById('username');
let pwd = document.getElementById('password');
console.log(uname.value);
console.log(pwd.value);
pwd.value = md5(pwd);
console.log(pwd.value);
if (uname.value.length>=6)
return true;
}
</script>
</body>
</html>
8.8 操作文件
9 jQuery
Jquery是一个javascript库。
jQuery极大地简化了javascript编程
jQuery:里面存在大量的js函数。
获取jquery
方法一：
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
然后把下载好了jquery-3.4.1.js 放入lib目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
// cdn引入
<script src ="lib/jquery/3.4.1/core.js"></script>
</head>
方法二：使用cdn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
// cdn引入
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
9.1 jquery公式公式：
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
selector是选择器，和css一样，可以选择id，class，tagname；
action是动作，有click这种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<a href="" id="pa1">click</a>
<script>
// 以往：
document.getElementById('pa1')
// jquery
$('#pa1').click(function () {
alert(1);
})
</script>
</body>
</html>
1 jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取
元素。
$("p.intro") 选取所有 class="intro" 的
元素。
$("p#demo") 选取所有 id="demo" 的
元素。
2 jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$ $("[href$='.jpg']")选取所有 href 值以 ".jpg" 结尾的元素。
3 jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
```javascript
$('p').css({'color':'red','fontSize':'100px'});
```
中间是使用键值对隔开的
单独文件中的函数
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时，会将函数直接添加到 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：
实例
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
10 jquery实例
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
// 需要注意的是这里的this表示当前对象，就是你鼠标点击的那个页面元素对象
注意事项：1、这里的this表示当前对象，就是你鼠标点击的那个页面元素对象
2、$(document).ready(function()意味着当页面加载完毕（文档就绪函数）这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
--- jQuery functions go here ----
});
常用事件处理函数
| Event 函数 | 绑定函数至 |
|---|---|
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
操作dom元素
获得dom元素的text值和html
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>
设置内容
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>
