JavaScript基础语法和JQuery简单应用---后端学前端JS

什么是JavaScript

世界上最流行的脚本语言。

一个合格的后端人员必须精通JavaScript。

最新版本已经到ES6版本，但是大部分浏览器只停留在支持ES5代码！

引入JavaScript

1、行内写法：一般写在标签的内部或者标签的底部。

<script>
    alert("hello,world");
	....js代码....
</script>

2、外部引入：单独建立js文件，再在html页面中进行引用。

注意：script标签不能使用自闭合。

js文件：
alert("hello,world");

再使用引用
<script src="js/hello.js"></script>

入门案例

// 1.变量
var num =1;
"hello word"
// alert(num);

// 2.条件控制
var score = 70;
if(score>=60 && score<70){
    alert("60-70");
}else if(score>=70 && score<80) {
    alert("70-80");
}else{
    alert("other")//弹窗
}
//console.log(score) 控制台

数据类型

number

js不区分小数和整数，Number

123             //整数
123.1           //浮点数
1.123e3     //科学计数法
-99             //负数
NAN             // not a number
Infinity    // 无穷大

字符串

"abc"
'bac'

布尔值

true 
false

与或非

&&	两个都为真结果为真
||	一个为真，结果为真
!	真即假，假即真

比较运算符（重要）

= 
== 	等于       （类型不一样，值一样，结果也为true）
=== 绝对等于    （类型一样，值一样，结果才为true）
这是一个js的缺陷，坚持不要使用 == 比较
NaN===NaN
false
须知：NaN与所有的数值都不相等，包括自己
//判断是否是NaN
isNaN(NaN)
true

(1/3)===(1-2/3)
false  //会存在精度的损失，尽量避免使用浮点数进行运算

//可以这样比较
Math.abs(1/3-(1-2/3))<0.000000001
true

空指针

null            //空
undefined 		//未定义

数组

Java中的数组是一系列相同类型的数，JS中没有这一要求

var arr = [1,2,3,4,'hello',null,true]
//定义数组
new Array(1,2,3,4,5);
//取数组下标如果越界，就会显示undefined

//定义对象，每个属性之间使用，隔开
var person = { 
    name:"nick",
    age:3,
    tags:['js','java','web']
}
//取对象的值
person.name
"nick"
person.age
3
person.tags
(3) ["js", "java", "web"]

严格检查模式

<script>
    //全局变量
    i = 1;

    //ES6中建议使用let定义局部变量，加上'use strict'：严格检查模式，预防js的随意性导致的问题
    //'use strict'必须写在script的第一行
    'use strict'；
     let i = 1;
</script>

字符串

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

• 注意转义字符：

  \'  
  \t  
  \n  
  \u4e2d \u####       Unicode字符 
  \x41				ASCII
  

 <script>
        'user strict'
        console.log('a\'');
        console.log("a");

</script>


//长字符串拼接
//TAB上面的飘键包裹
var msg = `hello
world`

//模板字符串
let name = "nick";
let age = 3;
let msg2 = `你好啊，${name}`;
console.log(msg2);
你好啊，nick


//字符串函数
//求长度
var student ="student";
console.log(student.length);
7
//下标索引
console.log(student[0]);
s
//不能更改索引对应的值
student[0]=1;
1
student
"student"

//大小写转换（方法，非属性）
student.toUpperCase();
"STUDENT"
student.toLowerCase();
"student"

//获取下标
student.indexOf('t');
1

//截取
[1,) 包含前面不包含后面
student.substring(1);
"tudent"
[1,3)
student.substring(1,3);
"tu"

数组

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

此处在浏览器控制台进行测试。

1、长度
arr.length

2、indexOf()，通过元素获得下标索引
arr.indexOf(2) //找到元素为2的下标

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

4、push()、pop() 在尾部操作元素

push(): 压入元素到尾部  
pop(): 弹出尾部的一个元素

5、unshift(),shift() 在头部操作

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

6、sort() 排序

7、reverse() 元素反转

8、concat() 拼接元素

    arr = ['a','b','c']
    arr.concat([1,2,3]) //拼接新数组 
    打印arr.concat([1,2,4])为['a','b','c',1,2,3] 
    但是打印原数组arr则跟之前一样：['a','b','c']

注意：concat并没有修改数组，只是会返回新数组

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

    arr = ['a','b','c']
    arr.join("-")
    ->"a-b-c"

10、多维数组：和c语言中一样。

数组：存储数据（存和取，其他的都可以自己实现）

对象

1、对象定义：若干个键值对

var person = {
    name:"zhang",
    age:3,
    属性名：属性值
    //最后一个属性不要加逗号
}

2、添加和删除属性值

person.tianjia = "tianjia"；
delete person.name;

3、 判断属性值是否在这个对象 ‘xxx’ in xxx

    'age' in person  //true

4、判断属性是否是自身拥有的

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

流程控制

1、if判断:和java一致

2、while循环、do…while和for循环：和java一致

3、forEach循环

var age = [12,43,64,7,8]  
//函数
age.forEach(function (value){
    console.log(value)
})//打印数组

4、forin循环

var age = [12,43,64,7,8] 
//index是索引
for (var index in arr){
    if (age.hasownProperty(index)) {
        console.log("存在");
        console.log(age[index]);//当前索引的值
    }
}

Map和Set (ES6的新特性)

1、Map

var map = new Map([['tom',10],['jack',20],['haha',30]]);

var name = map.get('tom'); // 通过key获得value  
map.set('admin',12); // 新增或修改  
map.delete('tom'); // 删除元素 

2、Set 无序不重复的集合:可以去重

var set = new Set([3,1,1,1,1]);

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

遍历与迭代器遍历

1、数组遍历：

//通过forof遍历数组内容，用forin遍历数组下标
var arr = [3,4,5]

for(var x of arr){
    console.log(x)
}
12345

2、map集合遍历

var map = new map(['jack',20],['haha',10],['tom',10]) 

for(let x of map){
    console.log(x)
}
1234

3、set集合遍历

var set = new set([5,6,7]) //集合记得用[]包围 

for(let x of set){
    console.log(x)
}  
1234

函数

定义函数

定义方式一

绝对值函数

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

一旦执行到return代表函数结束，返回结果,r如果没有执行return，函数执行完也会返回结果，结果就是undefined。

定义方法二

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

function(x){}是一个匿名函数，可以把结果赋值给abs，通过abs就可以调用函数。
注：方法一和方法二等价

调用函数:

abs(10)
abs(-10)

**参数问题：**javascript可以传任何个参数，也可以不传参数
参数进来是否存在的问题？假设不存在参数，如何抛出异常？

var abs = function(x){
    //手动抛出异常来判断
    if (typeof x !== 'number') {
        throw 'not a number';
    }
    if (x>=o) {
        return x;
    }else{
        return -x;
    }

}

arguments对象：

arguments是一个JS免费赠送的关键字

加入函数的实参没有写多个，但使用时传入了多个参数，使用arguments对象可以把这多个参数用数组返回,argument对象其实就是传入的所有参数的数组。
特性：
1.arguments对象和Function是分不开的。
2.因为arguments这个对象不能显式创建。
3.arguments对象只有函数开始时才可用。
使用方法：
虽然arguments对象并不是一个数组，但是访问单个参数的方式与访问数组元素的方式相同
例如：
arguments[0],arguments[1],。。。arguments[n]；
在js中 不需要明确指出参数名，就能访问它们，例如：

function test() {
        var s = "";
        for (var i = 0; i < arguments.length; i++) {
            alert(arguments[i]);
            s += arguments[i] + ",";
        }
        return s;
}
test("name", "age");

//结果为name,age

rest参数-ES6新特性

获取除了已经定义的参数之外的所有参数~ … ,rest参数只能写在最后面。

例如：函数定义了两个参数，但是传入了第三个参数，要怎么取出第三个参数呢？

function test(a,b){
    console.log('a->'+a);
    console.log('b->'+b);
    //以前的方法取第三个元素：
    if (arguments.length>2) {
        for(var i = 2; i<arguments.length;i++){
            console.log(arguments[i])
        }
    }

}

//现在的方法(rest参数)：在函数中定义rest参数
function test1(a,b,...rest){
    console.log('a->'+a);
    console.log('b->'+b);
    console.log(rest);
}

变量的作用域

变量的作用域

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

function f() {
        var x = 1;
        return x+1;
    }
x = x +2;//报错

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

如果两个函数使用了相同的变量名，则在对应的函数内部并不冲突。

function f1() {
        var x = 1;
        return x+1;
    }
function f2() {
        var x = 'a';
        return x;
    }  

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

function f1() {
    var x = 1;
   
	function f2() {
        var y = x + 1;
        return x;
    }
    var z = y + 1;//报错：y未定义
}

在JS中函数查找变量从自身函数开始，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数变量。

JS执行引擎会自动提升变量的声明，但不会提升变量的赋值。这是JS建立之初的一个规范，所有变量放在代码头部，便于维护。

变量的一般使用

一般都先定义在代码头部，后调用

function zhang(){
    var x,y,z;

    //之后再赋值调用
}

全局对象window

alert本身也是一个window变量。

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

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

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

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

//唯一全局变量
var GaoApp = {};

//定义全局变量
GaoApp.name = 'gaozheng';
GaoApp.add = function(a,b){
    return a + b;
}

局部作用域let

ES6let关键字，解决局部作用域冲突问题，现建议大家都用let去定义局部变量

function aaa() {
for(var i=0; i < 100; i++){
    console.log(i)
}
console.log(i+1); //问题?	 i 出了这个作用域还可以使用
}

//ES6 使用let关键字后
function aaa() {
for(let i=0;i<100;i++){
    console.log(i)
}
console.log(i+1); //Uncaught ReferenceError: i is not defined
}

建议使用let定义局部变量

常量const

在ES6之前，定义常量使用全部大写字母命名的变量就是常量，建议不要修改这样的值。

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

在ES6之后，用const定义常量

const PI = '3.14';
console.log(PI);
PI = '123'; //报错，常量不允许修改

方法

定义方法

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

var person = {
    name: 'gao';
    brith: 1998;
    //方法 
    age: function(){
        //获取当前年份
        var now = new Date().getFullYear();
        return now - this.brith; //this是默认指向调用它的那个对象，这里值person
    }
}
//属性调用
person.name;
//方法调用，方法一定要带（）
person.age();

apply方法
apply方法是可以控制this指向的，该方法有两个参数，第一个是getArg要使用的是那个对象，第二个是数组

function getAge(){
    var now = new Date().getFullYear();
    return now - this.brith;
}
var person = {
    name: 'gao';
    brith: 1998;
   
    age: getAge
}

getAge.apply(person,[]); //this指向了person，参数为空

内部对象

标准对象

typeof 123
“number”
typeof ‘123’
‘string’
typeof true
“boolean”
typeof NaN
“number”
typeof []
"object’
typeof {}
“object”
typeof Math. abs
“function”
typeof undefined
“undefined”

Date

基本使用

var now = new Date(); //sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)
now. getFu11YearO); //年
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)
sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)
now.toLocalestring 	//注意，调用是一个方式，不是一一个属性!
< f toLocalestring() { [native code] }
now.toLocalestring()
< "2020/1/4上午10:49:35"
now. toGMTString()
< 'Sat, 04 Jan 2020 02:49:35 GMT"

json对象

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

• JSONlavaScript Object Notation, JS对象简谱)是- -种轻量级的数据交换格式。

• 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。

• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

• 在JavaScript -切皆为对象、任何js支持的类型都可以用JSON来表示; number, string…

  格式:

• 对象都用{}

• 数组都用[]

• 所有的键值对 都是用 key:value

json字符串和js对象的转换

var user = {
    name :
    "gaozheng",
    age: 3,
    sex: '男'
    }

//对象转化为json字符串(json字符串每个键都用""或'包围)
var jsonuser = JSON. stringify(user); 
//输出为{"name" : "gaozheng"，"age":3,"sex" :"男"}

//json字符串转化为对象参数为json 字符串
var obj = JSON. parse(' {"name":"gaozheng" , "age" :3,"sex":"男"}');
//输出为{name:"gaozheng",age:3,sex:"男"}

json和js对象的区别：

var obj = {a: 'he11o' ,b: 'he11ob'};
var json = '{"a": "he11o" , "b":"he1lob"}'

面向对象编程

什么是面向对象

JavaScript、Java、C#…面向对象；

JavaScript有些区别！

类：模板

对象：具体的实例

在JavaScript中，需要换一下思路！

原型：模板

面向对象原型继承

1、原型对象-----相当于父类
当创建一个新函数时，系统会根据一组特定的规则为函数创建一个prototype属性，该属性会指向一个名为原型对象的对象，在默认情况下，该对象会自动生成一个构造函数（constructor），该构造函数是一个指向函数的指针。而在原型对象中，除了有这个构造函数，我们还可以添加其他的属性和方法。

通俗来讲就是，当我们新建一个函数A时，函数A内部会有一个属性，该属性指向一个对象（名字叫原型对象），而这个对象里面默认有一个构造函数，这个构造函数指向我们最初新建的函数A。然后，我们还可以在原型对象中添加属性和方法

//①默认情况下，构造函数是空的
//之前定义一个类
function Person（）{//构造函数首字母大写

}

//②添加属性和方法

Person.prototype.name="dp";
Person.prototype.doSomething=function(）{
    alert(this.name);
};

//③定义好构造函数和其他属性方法之后，就可以创建实例了

var person1=new Person();
var person2=new Person();

面向对象class继承

class关键字是在ES6引入的

添加方法

//给student添加一个方法 
//1、先定义一个类、属性、方法
class student{
    constructor(name){
        this.name = name;
    }

    hello(){
        alert('hello');
    }
}

//使用方法
var person = new student('小明');
person.hello();

继承

//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 xiaoStudent = new xiaoStudent("xiaohong",1);

原型链

操作BOM对象（重点）

浏览器介绍

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

BOM：浏览器对象模型

• IE6~11
• chrome
• Safari
• Firefox
• opera

三方浏览器：

• QQ浏览器
• 360浏览器

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight //内部高度
258 
window.innerwidth	//外部高度
919
window.outerHeight
994
window.outerwidth
919
//大家可以调整浏览器窗口试试

Navigator

Navigator，封装了浏览器的信息（不建议使用）

navigator.appName	//当前应用名
"Netscape"

navigator.appVersion	//当前浏览器版本
"5.0 (windows NT 10.0; WOw64) Applewebkit/537.36 (KHTML， like Gecko)
Chrome/63.0.3239.132 Safari/537.36"

navigator.userAgent	//当前用户的一些信息
"Mozi11a/5.0 (Windows NT 10. 0; WOw64) ApplewebKit/537.36 (KHTML， like :
Gecko) Chrome/63.0. 3239.132 Safari/537.36"

navigator.platform	//获得系统的版本
"Win32"

大对数我们不会使用 navigator 对象，因为会被人为修改。不建议使用这些属性来判断和编写代码

screen

screen代表屏幕尺寸

screen.width
1920
screen.Height
1080

lacation

lacation代表当前页面的URL信息

location属性：

• 主机：host

• 当前指向的位置：href

• 协议: protocol

• 重新加载的方法：

  location.reload()刷新网页
  //设置新的地址:location.assign('想要跳转的地址')
  

document

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

//获取具体的文档树节点：
<d1 id="app">
    <dt> Java</dt>
    <dd> JavaSE</dd>
    <dd> JavaEE</dd>
</d1>
<script>
    var dl = document. getElementById(' app ');
</script>

//获取cookie
document.cookie

//劫持cookie原理：把一段能劫持cookie的js代码放在网站上 一点开就能把你的cookie拿了
<script src='劫持cookie'></script>
<!-- 恶意人员：获取你的cookie上传到他的服务器 -->
//服务器端可以设置cookie为httpOnly

history

history代表浏览器的历史记录（不建议使用）

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

操作DOM对象(重点)

DOM：文档对象模型

浏览器网页就是一个Dom树形结构(与div包围的标签差不多)

• 更新dom节点
• 遍历dom节点：得到Dom节点
• 删除dom节点
• 添加dom节点
  注：要操作一个dom节点，就必须先获得这个dom节点

获得dom节点

<div id="father">
    <h1>标题一</h1>
    <p id='p1'>p1</p>
    <p class='p2'>p2</p>
</div>

<script>
//对应css选择器
    //标签选择器
var h1 = document.getElementByTagName('h1'); //这里就是获取到了这个dom节点
    //id选择器
var p1 = document.getElementByID('p1');
    //类选择器
var p2 = document.getElementByclassName('p1');
    
var father = document.getElementByID('father');

var childrens = father.children;	// 获取父节点下的所有子节点
var childrens = father.children[index]; 	//获取其中一个节点
    
//father.firstchild 获取父节点的第一个子节点
//father.lostchild 获取父节点的最后一个子节点
</script>

**注意：**这是原生代码，之后都用jQuery

更新节点

<div id="id1">
    
</div>

<script>
    var id1 = document.getElementByID('id1')；
</script>

id1.innerText = '123' //innerText方法修改文本内容  
id1.innerHTML = '<strong>123</strong>' //innerHTML解析HTML超文本的 可以修改id的样式
id1.style.color = 'red' 	//style.XX：style方法修改css样式。即可以在js里操作修改样式
id1.style.fontSize = '200px'	//注意使用驼峰命名，下划线转驼峰命名
id1.style.padding = '2em' //属性使用字符串包裹

删除节点

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

<div>
    <h1>标题一</h1>
    <p id='p1'>p1</p>
    <p class='p2'>p2</p>
</div>
<script>
    var self = document.getElementByID('p1');	//获取自己
    var father = p1.parentElement;	 //找到p1的父节点
    father.removechild(self) 	//通过父节点使用removechild删掉自己（只有标记为id选择器的节点才可以删除）
</script>

注意：删除多个节点时，children是时刻动态变化的，不能直接father.removechild(father.children[0])这样从第一个索引开始删

插入节点

我们获得了某个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); //在list节点下追加子节点 
</script>

在js中创建一个新的节点追加

<script>
    //第一个方法：通过js创建一个新节点
    var newP = document.creatElement('p'); //创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'hello'; 	//在这个标签上输入文本
    list.appendchild(newP); 	//在父节点下加进去

    //用第二种方法创建一个有自己属性的标签节点
    var myScript = document.creatElement('script');	//创建一个script标签节点
    myScript.setAttribute('type','text/javascript'); 
    /*setAttribute方法加入属性和属性值。第一个参数为属性名，第二个参数为属性值。生成效果为<script type='text/javascript'></sript>*/

    //可以创建一个style标签
    var myStyle= document.createElement('style'); //创建了一个空style标签
    myStyle.setAttribute('type', 'text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}'; 	//设置标签内容
    document.getElementsByTagName('head')[0]. appendChild(myStyle) //在父节点追加这个style标签
</script>

在前面插入节点：insertBefore

var ee = document. getElementById('ee');
var js = document . getElementById('js');
var list = document . getElementById( 'list');
//格式：要包含的节点. insertBefore(newNode, targetNode)
list. insertBefore(js,ee); 	//在list节点中（list是父节点），在ee节点前加入目标节点js

操作表单（验证问题）

表单 是什么 form DOM树

• 文本框 text

• 下拉框

• 单选框 radio

• 多选框 checkbox

• 隐藏域 hidden

• 密码框 password

• …

  表单目的：提交用户信息。

获取表单信息

<body>
<form action='#' method="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>
</body>

<script>
    var input_text = document.getElementById('username')；
    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value='123'

    var boy_radio = document.getElementById('boy';)
    var girl_radio = document.getElementById('girl')
    //对于单选框、多选框等固定的value，boy_radio.value只能取到当前变量的值 
    //则只能这样判断：
    boy_radio.checked; //查看返回的结果，是否为true，如果为true则被选中
    boy_radio.checked=true; //对其赋值
</script>

提交表单，MD5加密

文本框的密码在控制台上加密，即后台的密码是如何加密的？

<head>
    <!-- 首先要导入MD5这个工具包 -->
    <script src="https://cdn . bootcss . com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
    <!-- action属性是提交完表单后调整的网页 -->
    <form action="#" method="post">
    <p>
        <span>用户名: </span> <input type="text" id="username" name="username">
    </p>
    <P>
        <span>密码: </span> <input type="password" id="password" name="password">
    </p>

<!--绑定事件onclick被点击。按钮提交事件aaa()--> .
    <button type="submit" onclick="aaa()">提交</button>
</form>
</body>
<script>
    function aaa() {
        var uname = document.getElementById( 'username ');
        var pwd = document.getElementById('password');
        console.1og(uname.value);
        //MD5算法把pwd变成乱码，用这个方法会在前端把密码加长，用户体验感不好
        pwd.value = md5(pwd.value);
        console.1og(pwd.value);
    }

</script>

表单提交，md5加密优化版：

<!-- 使用form提交事件aaa()
    ο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" >
    </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>

jQuery

使用时导入包或者jQuery的 cdn网址，相当于一个库，里面存在大量的JavaScript函数。

引入：

jq使用的公式：$(selector).action() //这个selector选择器就是css的选择器.action是事件

选择器

原生的js选择器的种类有：

• 标签选择器：document.getElementByTagName()
• id选择器： document.getElementByID()
• 类选择器： document.getElementByClassName()

jq选择器有（css中的选择器他全部都能用）：

• 标签选择器：$(‘p’).click();
• id选择器：$(’#id名’).click();
• class选择器：$(’.class名’).click();
• …查看文档看更多：https://jquery.cuishifeng.cn/

<a href="" id="test_jquery">点我</a>

<script>
    <!-- 在这个a标签中添加一个单击事件 -->
    // 使用js语法
    var id = document.getElementById('test_jquery')
    id.click(function(){
         alert('jQuery');
    })
    // 使用jq语法：选择器就是css的选择器
    $('#test_jquery').click(function(){
        alert('hello,jQuery');
    })
</script>

事件

有鼠标事件、键盘事件、其他事件

例子：

<!-- 要求：获取鼠标当前的一个坐标 -->
mouse:<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    // 当前网页元素加载完毕之后，响应事件
    // $(document).ready(function(){ //document默认是文档，ready默认是加载完
    // })
    // 上面这行的简写
    $(function(){
        $('#divMove').mousemove(function(e){ //获取了divMove的鼠标移动的坐标
            $('#mouseMove').text('x:'+e.pageX+'Y:'+e.pageY) //在mouseMove这个span里显示鼠标移动的坐标

        })
    });
</script>

操作DOM事件

1、节点文本操作

<ul id="test_ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    //拿到这个标签的文本，
    $('#test_ul li[name=python]').text();
    //修改这个标签的文本
    $('#test_ul li[name=python]').text('123');
    //修改样式
    $('#test_ul').html();
</script>
12345678910111213

2、css的操作

<script>
     $('#test_ul').css("color","red"); //使用键值对来表示属性和属性值
</script>
123

3、元素的显示和消失：本质是display：none

$('#test_ul').show();	//显示
$('#test_ul').hide();	//消失
$(window).width();
$(window).height();