weixin_47554687

javaScript个人的自学笔记

1、什么是JavaScript

1.1 概述

javaScript是一门世界上最流行的脚本语言

java、javaScript

一个合格的后端人员，必须要精通javaScript

ECMAScript它可以理解为是javaScript的一个标准最新版本已经的es6版本

但是大部分浏览器还只停留在es5代码上！

开发环境和线上环境版本不一致

2、快速入门

2.1、引入javaScripe

1、内部标签


## 2.2、基本语法入门

##### 

浏览器调试须知

每行最后会自动添加一个;

## 2.3、数据类型

变量

var  a=1        可以$开头 数字不可以    下划线可以 大写的可以井号不可以  中文也可以   java中  中文也可以





数值，文本，图形，音频，视频...

number

js不区分小数和整数，Number

123//整数123

123.1//浮点数123.1

1.123e3//科学计数法

-99//负数

NaN   //not a number  

Infinity  //表示无限大



字符串

“abc” 'abc'



布尔值

true false 

逻辑运算

&&   两个都为真结果为真

||         一个为真结果为真

！   真即假。假及真



比较运算符    

= 赋值

== 等于 （类型不一样，值一样会判定为true）

===绝对等于 （类型一样，值一样结果为true）

这是一个JS的缺陷，坚持不要使用==比较

须知：NaN===NaN  这个与所有的数值都不相等，包括自己

只能通过isNaN（NaN）来判断这个数是否为NaN



浮点数问题

1    console.log(  (1/3)===(1-2/3))  

尽量避免使用浮点数进行运算，存在精度问题

```css
console.log( Math.abs(1/3-(1-2/3))<0.0000001)

比较浮点型

null和undefined

null空

undefined 未定义

数组

Java的数组必须是相同类型的对象 JS中不需要这样

var  array=[1,2,3,4,5,"hello",true];
new Array(1,12,3,4,3,5,"sdni");  为了数组的可读性用上面的形式

取数组下标：如果越界了，就会报undefined

对象

对象是大括号，数组是中括号

每个属性之间用逗号隔开，最后一个属性不需要添加

取对象的值

person.name

-> “qingjiang”

person.age

-> 3

2.4、严格检查模式




    <script>
     'use strict';
    //严格审查模式
     // i=1;   全局变量
     let i=1;
       //ES6中局部变量用 let定义   let i=1;

3、数据类型

3.1、字符串

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

2、注意转义字符\

\'
\n
\t
\u4e2d     \u####   Unicode 字符
Ascll  字符    "\x41"

3、多行字符串编写

tab键上面

var msg=`hello
word
nihaoya    //格式在网页上会得到保留
nihao`

4、模板字符串

let  name=`zongyuheng`;
let age=3;		
let msg=`你好呀，${name}`
//拼接字符串
      console.log(msg);

5、字符串长度

 var student ="student"
     undefined
console.log(student.length)
 7

6、字符串的可变性，不可变

不能通过下标赋值，改变字符串

console.log(student[0])
 s

7、大小写转换

student.toUpperCase()  
student.toLowerCase()

这里是方法不是属性需要括号

8、student .indexOf(‘t’)

9、substring

包含前面不包含后面

3.2、数组

Array可以包含任意的数据类型数组可以通过下标赋值，取值

1、长度

arr.length  

arr.leng=10;

注:加入给arr.length赋值，数组长度可变化，如果赋值过小，元素就会丢失（尽量不要去改）

2、indexof（java数组中没有indexof方法）

indexof（”a“） a出现时的索引如果有相同的，则返回第一个

字符串和数字的"1"是不同的

3、slice() 截取数组的一部分，返回一个新数组

填两个包头不包尾如果只填一个从所填下标开始

4、push ，pop 尾部

push是在数组尾部加元素

pop是弹出尾部的元素

5、unshift（） shift（）头部

unshift（）是在数组头部加元素

shift（）是弹出头部的元素

6、排序sort（）

7、颠倒 reverse（）只是颠倒不是倒序

8、concat（）

在原数组后面拼接不会改变原数组只是会返回新的数组，

需要接收

9、连接符 join

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n7vlb436-1591668595611)(C:\Users\HASEE\AppData\Roaming\Typora\typora-user-images\image-20200607182231111.png)]

10、多维数组

数组：存储数据（如何存，如何取，方法都可以自己实现!)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P4e5Wd4e-1591668595616)(C:\Users\HASEE\AppData\Roaming\Typora\typora-user-images\image-20200607182249618.png)]

3.3、对象

若干个键值对

var person={
    name:"kuangshen",
    age:3,
    email:""
}//定义了一个person对象
，它有三个属性    属性名：属性值

JS中对象 {}表示一个对象，键值对描述属性 xxxx：xxxx多个属性之间使用逗号隔开，最后一个属性不加逗号！

JavaScript 中的所有的键都是字符串，值是任意对象！

1、对象赋值

person.name=“qingjiang”

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

person.haha

undefined

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

delete person.name

删除name属性 java做不到

4、动态的添加

person.haha=haha

5、判断属性值是否在这个对象中

‘age’ in person ->true

‘tostring’ in person in person ->true “函数”

从父类继承过来的属性或者方法也可以进行判断

6、判断一个属性是否是这个对象自身拥有的hasOwnProperty（）

person.hasOwnProperty(‘toString’) ->false

person.hasOwnProperty(‘age’) ->true

var——声明变量 let——声明块中的变量 const——声明常量（一旦赋值不可更改）

3.4 、流程控制

if判断同java

循环避免死循环

while循环同hava

do while 一定会进行一次同java

for循环同java

数组循环

forEach 重要 5.1 新特性

var  age=[12,3,12,3,12,3,12,13,,12,31]
        age.forEach(function (x) {
console.log(x)
        })

forEach和java中的lambda有所区别

for …in

//for(var index  in  object){}  语法  有漏洞
        for (var num in age){
            console.log(age[num])
        }

3.5、Map和Set

ES6的新特性~

Map

var map=new Map([['tom',100],['jarry',90],['haha',80]]);
var score=map.get('tom');
console.log(score);    // 100
map.set('admin',123456);   新增 或者 修改
map.delete("tom");  删除

Set：无序不重复的集合

var  set=new Set([1,2,3,4]) 
set.delete(1);  //删除
set.add(5);   //添加
console.log(set.has(3));   //是否包含某个元素

Set可以去重

3.6、iterator

除了对数组下列的方法还可以作用于Map和Set集合 for…in 不能用于集合

ES6新特性

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

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

var  set=new Set([1,2,3,4]);
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

传多个参数只第一个进行处理，如果传入的不符合应该传入的参数类型，会返回NaN 如果传的参数少于需要传的，没传的参数会返回undefined

定义方式2

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

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

方式一和方式二等价！

调用函数

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

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

参数进来是否存在的问题？假设不存在参数，如何规避。

if(typeof x !='number'){
    throw 'Not a Number';
}  //手动抛出异常

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

问题：arguments包含所有的参数，我们有时候想使用多余的参数

rest

以前

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

ES6引入的新特性，获取除了已经定义的参数以外的所有参数变成数组

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

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

4.2、变量的作用域

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

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

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

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

function qj(){
var x=1;
x=x+1;

function qj()2{
var x=1;
x=x+1;
}
}

嵌套内部的能够访问到外部的，外部的无法访问到内部的和内部类相似

假设，内部函数变量和外部函数的变量，重名

function qj(){
    var x=1;
    function qj2(){
        var x='A';
        console.log('inner'+x);
    }
    console.log('outer'+x); //内部也需要进行调用才会运行，无法不调用外界的函数直接调用内部的函数
    qj2()
}
qj()

假设在javaScript中函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。（就近原则类似于内部类）

提升变量的作用域

function qj(){
var x="x"+y;
consol.log(x);
var y='y';
}

结果 x undefined（y并不是undefined）

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

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

这个是javaScript建立之初就存在的特性。养成规范：所有的变量定义都放在代码头部，不可以乱放，便于代码维护

funtion qj2(){
    var x=1,
        y=x+1,
        z.i,a; // undefined
// 之后随意用
}

全局变量

var x=1;

function f(){
    console.log(x);
}
f();
console.log(x);

全局对象

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

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

函数可以当作一个变量

var x='xxx';
window.alert(x);
var old_alert=window.alert;
//old_alert(x);
window.alert=funtion(){
    
}
//覆盖了方法
// 发现alert()失效了   如果是另一种定义方法   是声明了新的函数覆盖了原来的alert函数这种情况会自动在最上方声明，导致上方的alert也无法正常运作     而这种定义方法等于是将alert重新“赋值”，并没有出现新的函数，所以不会影响全部 重点是函数看成一个变量
window.alert(123);

//恢复
window.alert=old_alert;
window.alert(456);

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

规范

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

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

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

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

JQuery

局部作用域

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); //无法获得数据
}

常量const

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

var PI='3.14';

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

在ES6引入了常量关键词const

const PI='3.14';//只读变量

console.log(PI);
PI='213'; //不可以改变这个值，会报错

4.3、方法

定义方法



var kuangshen = {
    name: '秦疆',
    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 kuangshen = {
    name: '秦疆',
    bitrh: 2000,
    age: getAge
};

// kuangshen.age() ok   调用的时候 调用者是kuangshen
// getAge() NAN   直接调用的时候调用者是window 所以不行

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

apply

在js中可以控制this指向

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

getAge.apply(kuangshen,[]);// this，指向了 kuangshen，参数为空   这种情况出现在对象和方法分开来写

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(); //Sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)
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.toLocalString()  注意：调用是一个方法，不是一个属性！
返回本地日期
now.toGMTString()
返回GMT的时间

5.2、JSON

JSON是什么

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

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

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

格式：

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

JSON字符串和JS对象的转化

var user={
    name:"qingjiang",
    age:3,
    sex:'男'
}
//对象转化为json字符串{"name":"qingjiang","age":3,"sex":"男"}
var jsonuser=JSON.stringify(user);
//json字符串转化为对象
var obj=JSON.parse('{"name":"qingjiang","age":3,"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、面向对象编程

6.1、什么是面向对象

javascrip、java、c#…面向对象； javascript有一些区别

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

在JavaScript这个需要大家换一下思维方式!

原型：xiaoming.proto=Student;

可以用Student中的方法，还可以多次用原型，会覆盖

原型对象

function Student(name){
    this.name=name;
}
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");
  xiaoming.hello();

2、继承

class XiaoStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }

    myGrade(){
        alert('我是一名小学生')
    }

}
调用一定要写（）

本质：查看对象原型

原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CXYO9ngt-1591668595618)(C:\Users\HASEE\AppData\Roaming\Typora\typora-user-images\image-20200606211636508.png)]

7、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系？

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

B：浏览器对象模型

IE 6~11
Chrome
Safari
FileFox Linux
Opera

三方

QQ浏览器
360浏览器

window(重要)

window代表浏览器窗口

window.alert(1)
window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth
//调整浏览器窗口
查看值不加括号，变量

Navigator

Navigator,封装了浏览器的信息

navigator.appName
当前的应用名
navigator.appVersion
当前浏览器版本号
navigator.userAgent
当前用户的信息   系统
navigator.platform   
当前系统版本

大多数时候,我们不会使用navigator,因为会被人人为修改

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

screen 屏幕

screen.width   1920px
screen.height   1080px

location(重要)

location 代表当前页面的URL信息

host :"www.baidu.com"   //域名主机
href:"https://www.baidu.com/"   //链接
protocal:"https:"//协议
reload:f  reload()   //刷新网页
//设置新的地址   进入该网页的人会跳到设置的网址去 
location.assign('https://blog.zongyuheng.com/')

document

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

document.title 
"百度一下"
document.title='zongyuheng'
"zongyuheng"

获取具体的文档树节点

<dl id="app">
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Pythons</dd>
    <dd>Linus</dd>
    <dd>C</dd>
<\dl>
    <script>
    var dl=document.getElementById('app');
</script>

获取cookie

document.cookie

劫持cookie的原理

www.taobao.com

<script src="aaa.js"></script>
//获取你的cookie上传服务器
cookie// 个人,本地数据

服务器端可以设置cookie:httpOnly 保证cookie安全

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

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

8、操作DOM对象(重点)

DOM:文档对象模型,

核心

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NrOHpaHI-1591668595619)(C:\Users\HASEE\AppData\Roaming\Typora\typora-user-images\image-20200606230305813.png)]

上面的就是一节一节的节点

//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
 var p=document.getElementsByClassName('myName')[3]//myName下的第四个
var childrens = father.children; //获取父节点下的所有子节点
     var a=document.getElementsByTagName('div')[1].getElementsByTagName('a')[1]//获取第二个div标签下的第二个a标签
// father.firstChild
// father.lastChild（无法通过这种方法对子节点进行innerTest,还是用数组Children[0]),可以用firstElementChildren

获得DOM节点,这是原生代码,之后我们尽量都是用jquery

更新节点

id1.innerText = 'abc'修改文本的值
id1.innerHTML='123strong>' 可以解析HTML文本标签,原来的外部标签是不变的（比如li）会覆盖比如样式

id1.style.color='red' 设置css形式（需要转驼峰命名）属性使用字符串

<body>

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1');
    id1.innerText = 'abc'
</script>

</body>

删除节点

删除节点的步骤：

先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题1</h1>
<p id="p1">p1 </p>
<p class="p2">p2</p>
</div>
<script>
    var self=document.getElementById("p1");
    var father=p1.parentElement;
    father.removeChild(p1);

</script>
//删除是一个动态的过程  ul li 不算，取不到表 直接通过表来删除
father.removeChild(father.child[0])
father.removeChild(father.child[1])
father.removeChild(father.child[2])

说明：删除多个节点的时候，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.append(js)
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jh8ayPHl-1591668595622)(C:\Users\HASEE\AppData\Roaming\Typora\typora-user-images\image-20200607083505837.png)]

截图查看追加的效果

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

  //创建新的节点   只能创建普通的节点  有id 有内容

创建一个新的节点，万能版

var myScript=document.createElement("script");//script标签
myScript.setAttribute("type","text/javascript");
    document.getElementsByTagName("body")[0].appendChild(myScript);

创建一个css标签

//创建一个css标签
    var myStyle=document.createElement('style');//创建一个空的style标签
    myStyle.setAttribute("type","text/css");
    myStyle.innerHTML="body{background-color: chartreuse;}";//设置标签的内容
    document.getElementsByTagName("head")[0].appendChild(myStyle);
//在本页中恰当的位置添加这个css标签

在指定位置前插入一个节点 insertBefore

var Javaee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list')
   //要包含的节点.insertBefore(newNode，targetNode)
//在list中的ee前面插入一个js节点
   list.insertBefore(js,ee);

9、操作表单

表单是什么form Dom树

文本框 test
下拉框
单选框 radio
多选框 checkBox
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

获得要提交的信息

//输入框
<p>
    <span>用户名：</span> <input type="text" id="username" >
</p>
<script>
var input_text =document.getElementById('username');
  // 得到输入框的值
    input_text.value
    // 修改输入框的值
    input_text.value = '123'
</script>

<p>
    <span>性别：</span>
    <input type="radio" name="sex" value="man" id="boy"> 男
    <input type="radio" name="sex" value="women" id="girl"> 女
</p>
<script>
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    // 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked; //查看返回的结果，是否为true，如果为true，则被选中~
    girl_radio.checked = true; //赋值

</script>

Tips

可以document.getElementsByTagName(‘input’)先获取所有的input标签

然后通过下标取出

提交表单

<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

md5加密

<!--
表单绑定提交事件
onsubmit= 绑定一个提交检测的函数， true， false
将这个结果返回给表单，使用 onsubmit 接收！
onsubmit="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>
        <button type="submit">提交</button>
        <span>密码：</span> <input type="password" id="input-password">
<!--        没有加name读取不到-->
    </p>

    <input type="hidden" id="md5-password" name="password">/
<!--    只能读取到这个-->
    <!--绑定事件 onclick 被点击-->
</form>


<script>
    function aaa() {
        alert(1);
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        // pwd.value = md5(pwd.value);
        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true就是通过提交，false，阻止提交
        return true;
    }
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DRymBQDL-1591668595623)(C:\Users\HASEE\AppData\Roaming\Typora\typora-user-images\image-20200608193730249.png)]

$(function () {
$('#submit').submit(
    function () {
        var password1=$('#password').val();
      $('#hiddenWord').val(md5(password1))


  return true;
})});  //jquery形式的表单提交，同样可以进行筛选

如上的绑定形式不可以过滤能否提交

10、jQuery

JavaSript和jQuery; 库

jQuery库,里面存在大量的Javascript函数\

获取jQuery

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DXMgtzLD-1591668595624)(C:\Users\HASEE\AppData\Roaming\Typora\typora-user-images\image-20200607104431975.png)]

导入jQuery

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
 <script src="lib/jquery-3.5.1.js">script>
head>

使用jQuery

<body>

<a href="" id="test-jquery">点我a>

<script>

    //选择器就是css的选则器
    $('#test-jquery').click(function () {
        alert('hello,jQuery');
    })

script>

body>

选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();

//jQuery  css 中的选择器它全部都能用！
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click() //class选择器

文档工具站

https://jquery.cuishifeng.cn/index.html

action事件

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

鼠标事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PwWVemgR-1591668595625)(C:\Users\HASEE\AppData\Roaming\Typora\typora-user-images\image-20200607113513691.png)]

    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    style>
head>
<body>


mouse ：<span id="mouseMove">span>
<div id="divMove">
在这里移动鼠标试试
div>

<script>
    //当网页元素加载完毕之后，响应事件(第一个函数中省略了decument.ready的代码)
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
        })
    });
script>

操作DOM

节点文本操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1jOHOcNS-1591668595627)(C:\Users\HASEE\AppData\Roaming\Typora\typora-user-images\image-20200607115944152.png)]

css的操作

$('#test-ul li[name=python]').css({"color","red"})
//方括号中的数据用来绑定具体是哪   设置文本会将原来的html样式覆盖，仅仅是内部的html元素   比如加粗
  $(".vertify-code").css({
	           	  background: arr_back[index_back]});

元素的显示或隐藏:

本质display:none

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tZ1IJllk-1591668595627)(C:\Users\HASEE\AppData\Roaming\Typora\typora-user-images\image-20200607121223255.png)]

未来ajax();

{
alert(‘hello,jQuery’);
})

```

选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();

//jQuery  css 中的选择器它全部都能用！
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click() //class选择器