标签：基本 function console log js 使用 var document name

1 什么是javascript

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

2 快速入门

内部标签使用
```
<script>
	//.........
</script>
```
外部标签使用

abs.js

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

2.1 数据类型

=变量=

var a//不能数字开头

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

number

js不区分小数和整数，number

123//整数123
123.1//浮点数
1.123e3//科学计数法
-99//负数
NaN//不是一个数字
Infinity//无限大

=字符串=

’abc‘

=布尔值=

console.log(2<1)
VM2430:1 false

=逻辑运算=

&&
//
!

=比较运算符=

= 
== 等于（类型不一样，值一样，也会判断为ture）
===绝对等于（类型一样，值一样）
js的缺陷

须知：

NaN===NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN（NaN）来判断是否是NaN

=浮点数问题=

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

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

=null和underfined=

null空
underfined未定义

=数组=

Java中一系列相同类型的对象

js中不需要是相同的

var arr = [1,2,3,45,5,"zzl"];

取数组下标：如果越界了，就会显示underfined

underfined

=对象=

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

严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
<!--'use strict';严格检查模式
预防JavaScript的随意性导致的一些问题
    局部变量建议都使用let去定义
    必须写在JavaScript第一行
-->
        'use strict'
        //全局变量
        let i = 1;

    </script>
</head>
<body>

</body>
</html>

3 数据类型

3.1 字符串

正常字符串我们使用单引号，
注意转义字符\

\'       单引号
\n		 换行
\t		 隔开
\u4e2d   中

多行字符串

//tab 上面 esc 下面
var msg=`
hello
world
你好

`

模板字符串

let name="qinjiang";
let age=3;
let msg=`
你好呀，${name}
`
console.log(msg)

字符串长度

str.length

字符串的可变性

不可变

大小写转化

console.log(student.toUpperCase())//大写
console.log(student.toLowerCase())//小写

console.log(stuudent.indexOf('u'))//相同元素默认第一个位置

substring

[)
 console.log(student.substring(1))//从第一个字符串截取到最后一个字符串
 console.log(student.substring(1，3))
//包含第一个不包含第三个
//是从0开始的

3.2 数组

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

var arr=[1,2,3,4,5,6]

长度

arr.length

注意：加入给arr.lenfth赋值，数组的大小就会发生变化，如果赋值过小元素会丢失

indexOf，下表索引
```
arr.indexOf(2)
```
字符串的1和数字1是不同的
slice（）可以截取Array的一部分，返回一个新数组类似string中substring
push，pop

arr.push()//压入到尾部
arr.pop()//弹出尾部一个元素

unshift（），shift（）头部

arr.unshift()//压入到头部
arr.shift()//弹出头部一个元素

排序sort（）

arr=[2,3,5,4,1]
(5) [2, 3, 5, 4, 1]
arr.sort()
(5) [1, 2, 3, 4, 5]

元素反转reverse（）

arr.sort()
(5) [1, 2, 3, 4, 5]
arr.reverse()
(5) [5, 4, 3, 2, 1]

concat()

arr.concat([1,2,3])
(8) [5, 4, 3, 2, 1, 1, 2, 3]
//并没有修改数组

连接符join

arr.join('-')
'5-4-3-2-1'
//打印拼接数组，使用特定的字符串链接

多维数组

3.3 对象

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

var 对象名={
    属性名：属性值，
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}
//定义了一个person对象有四个属性
var person={
    name:"zzl",
    age: 3,
    email:"[email protected]",
    score:0
}

js中对象，{.....}表示一个对象，键值对描述属性xxxx：xxxx，属性中间用，隔开，最后一个属性不加逗号
使用一个不存在的对象属性，不会报错，会underfind
动态的删减属性

delete person.age
true
console.log(person.age)
VM1733:1 undefined

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

person.haha="haaha"
'haaha'
console.log(person.haha)
VM2706:1 haaha

判断属性是否在这个对象中 xxx in xxx

'age' in person
false
'name' in person
true
toString' in person
true//自己没有继承父类，但仍然在对象中

判断1一个属性是否是这个对象自身拥有的hasOwnProperty

person.hasOwnProperty('toString')
false//自己没有继承父类
person.hasOwnProperty('name')
true

3.4 流程控制

同Java

3.5 Map和Set

Map

//学生的成绩，学生的名字
var map = new Map([['tom',100],['zzl',150]]);
name =map.get('tom');//通过key获得value
map.set('admin',123)//新增或修改
map.delete('tom')//删除
console.log(name);

Set：无序不重复的集合

var set = new Set([3,1,1,1,1,1]);//set可以去重
set.add(4);//添加
set.delete(1);//删除
console.log(set.has(4));//是否包含

3.6 iterator

数组 map set的遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict'
        var arr = [3,4,5]
        for(let x of arr){
            console.log(x);
        }
        var map = new Map([['tom',100],['zzl',150]]);
        for(let x of map){
            console.log(x)
        }
        var set = new Set([5,6,7]);
        for(let x of set){
            console.log(x)
        }
    </script>
</head>
<body>

</body>
</html>

for in 获取下标

4. 函数

4.1 定义函数

定义方式一

绝对值函数

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

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行也会返回结果，结果就是underfine

定义方式二

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

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

方式一和方式二是等价的

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

参数进来是否存在的问题

假设不存在参数，如何规避？手动传递异常

    var abs = function(x){
        if(typeof x!="number"){
            throw'Not a Number';
        }else 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(typeof x!="number"){
            throw'Not a Number';
        }else if(x>=0){
            return x;
        }else{
            return -x;
        }
    }

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数

rest

以前：

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

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

现在：

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

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

4.2 变量的作用域

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

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

function qi(){
    var x=1;
    x = x+1;
   
}
x= x+2;//不在范围里

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

function qi(){
    var x=1;
    x = x+1;
   
}
function qi2(){
	var x='A';
    x= x+1;
}

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

function qj(){
    var x=1;
    function qi2(){
        var x ='A';
        console.log('inner'+x)//outer1
    }
    console.log('outer'+x)//innerA
    qi2()
}
qi()

假设在JavaScript中函数查找变量从自身函数开始~，由内向外查找，假设外部存在这个向右的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

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

结果：xundefined

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

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

这个是在JavaScript建立之初就存在的特性，养成规范，所有的变量定义都放在函数的头部，不要乱放，便于代码的维护；

function qj2(){
    var x=1,
        y=2,
        z,l;
}

全局变量

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

全局变量window

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

alert（）这个函数本身也是一个window变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    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);
</script>
</body>
</html>

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

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同

的js文件，使用了相同的全局变量，冲突——》如何能减少冲突？

//唯一的全局变量
var zzl = {};
//定义全局变量
zzl.name = 'zhouzilong';
zzl.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出了这个作用域还可以用
}
aaa();//i=101

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

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

建议大家都使用let去定义局部作用域的变量

常量const

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

const pi = 3.14;//只读变量
console.log(pi);

4.3 方法

定义方法

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

var kuangshen = {
    name:'请将'，
    birth:2003，
    age.function(){
                var now = new Date().getFullYear();
        return now-this.bitrh;
    }
}
//调用的时候
//属性kuangshen.name
//方法一定要带（）
kuangshen.age()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function getAge(){
        var now = new Date().getFullYear();
        return now-this.bitrh;
    }
    var kuangshen={
        name:'秦将',
        bitrh: 2003,
        age: getAge

    }
    //kuangshen.age()  ok
    //getAge() NAN
</script>
</body>
</html>

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

apply

在js中可以控制this指向

//getAge() NAN,解决方法apply
getAge.apply(kuangshen,[])

5 内部对象

标准对象

typeof 123
'number'
typeof '134'
'string'
typeof ture
'undefined'
typeof Nan
'undefined'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof Math,abs
VM5336:1 Uncaught ReferenceError: abs is not defined
    at <anonymous>:1:13
(匿名) @ VM5336:1
typeof Math.abs
'function'

5.1 Date

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var now = new Date();
    now.getFullYear();//年
    now.getMonth();//月 0~11
    now.getDate();//日期
    now.getDay();//星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒
    now.getTime();//时间戳全世界统一
    console.log(new Date(1710296413766))//将时间戳转化为时间

</script>
</body>
</html>

5.2 JSON

json是什么

在JavaScript中一切皆为对象，任何js支持的类型都可以用json来表示：

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

JSON字符串与js对象的转化

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

很多人搞不清楚，JSON与js对象的区别

var obj = {a:'aaa',b:'bbbb'}//对象
var obj = '{"a":'aaa',"b":'bbbb'}'

5.3 Ajax

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

6 面向对象的编程

6.1 什么是面向对象

JavaScript，java，c#。。。面向对象；JavaScript有些区别

类：模板

对象:具体的实列

在JavaScript中这个需要切换思维方式

原形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var Student= {
        name: "zzz",
        age: 3,
        sex: '男',
        run: function () {
            console.log(this.name + "run....");
        }
    };
    var Bird={
        fly:function (){
            console.log(this.name+"fly......")
        }
    }
    var xiaoming={
        name:"xiaoming",

    };
    xiaoming.__proto__=Bird;
</script>
</body>
</html>

__proto__原型一定是两个横杠

class继承

class关键字，是在ES6引入的

定义一个类，属性，方法

 class Student{
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert("hello")
        }
    }

继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //给Student新增一个方法
    //定义一个学生的类
    class Student{
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert("hello")
        }
    }
    class xiaoStudnet extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade(){
            alert("我是一个小学生")
        }
    }
    var xiaoming = new Student("xiaoming");
    var xiaohong = new xiaoStudnet("xiaohong",1)
</script>
</body>
</html>

本质：查看对象原型

7 操作BOM对象（重点）

浏览器介绍

JavaScript与浏览器的关系？

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

BOM：浏览器对象模型

IE
Chrome
Safari
FireFox
Opera

window

window代表浏览器窗口

window.innerHeight
2320
window.innerWidth
496
window.innerWidth
980
window.innerHeight
2060
//调试浏览器

Navigator

Navigator,封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appCodeName
'Mozilla'
navigator.appVersion
'5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Mobile Safari/537.36 Edg/122.0.0.0'

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

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

screen

代表屏幕的尺寸

location(重要)

location代表当前页面的URL信息

host: "www.baidu.com"

href: "https://www.baidu.com/"
protocol: "https:"

reload: ƒ reload()//刷新网页
location.assign("https://ys.mihoyo.com/?utm_source=backup53&from_channel=backup53&msclkid=30c2c20409eb104b943fa7f66c3ffa69#/")//设置新的页面

document（核心）

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

document.title='不爱玩原神'
'不爱玩原神'

获取具体的文档树节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl  id="app">
  <dt>java</dt>
  <dd>javase</dd>
  <dd>javaee</dd>
  <script>
     var dl =  document.getElementById('app')
  </script>
</dl>
</body>
</html>

获取cookie

document.cookie

劫持cookie原理

www.taobao.com

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

服务器端可以设置cookie：httpQnly

history

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

8 操作DOM对象（重点）

DOM：文档对象模型

核心

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

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新节点

要操作一个Dom节点，就必须要先得到这个Dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
  <h1>标题1</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
  var h1 = document.getElementById('h1')
  var p1 = document.getElementById('p1')
  var p2 = document.getElementsByClassName('p2')
  var father = document.getElementById('father')
  var childrens = father.children;//获取父节点下的所有子节点
  //father.firstChild
  // father.lastChild

</script>
</body>
</html>

这是原生代码

更新节点

id1.innerText='123'
'123//修改文本的值

操作js

  id1.innerText='abc';
  id1.style.color='red';//属性使用 字符串 包裹
  id1.style.fontSize='20px';//驼峰命题
  id1.style.padding='2em';

删除节点

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
  <h1>标题1</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
  var h1 = document.getElementById('h1')
  var p1 = document.getElementById('p1')
  var p2 = document.getElementsByClassName('p2')
  var father = document.getElementById('father');
  var childrens = father.children;
  var self  =document.getElementById('p1');
  var father = p1.parentElement;
  father.removeChild(self)
  //获取父节点下的所有子节点
  //father.firstChild
  // father.lastChild
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
//删除是一个动态的过程

</script>
</body>
</html>

注意删除节点的时候，children是时刻变化的，删除节点一点要注意

插入节点

我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经有元素了，我们就不可以通过此方法插入了

追加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
  <p id="java">java</p>
  <p id="javase">javase</p>
  <p id="javaee">javaee</p>
</div>
<script>
  var
   js = document.getElementById('js'),
  list = document.getElementById('list');
  list.appendChild(js)//追加到后面

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
  <p id="java">java</p>
  <p id="javase">javase</p>
  <p id="javaee">javaee</p>
</div>
<script>
  var
   js = document.getElementById('js'),
  list = document.getElementById('list');
  list.appendChild(js)
  //通过js创建一个节点
  var newP = document.createElement('p')//创建一个p标签
  newP.id = 'newP';
  newP.innerText='Hello,Kuangshen'
list.appendChild(newP)
  //创建一个标签节点
  var myScript = document.createElement('script');
  myScript.setAttribute('type','text/javascript')
//创建一个style的标签
  var myStyle  =document.createElement('style')
  myStyle.setAttribute('type','text/css');
  myStyle.innerHTML='body{background-color:chartreuse;}';
  document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>
</body>
</html>

插入到前面

var ee =  document.getElementById('javase')
 var js = document.getElementById('java')
var list = document.getElementById('list')
list.insertBefore(ee,js)//将ee插到js前面

9 操作表单（验证）

表单是什么 from DOM 树

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

.......

表单的目的：提交信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="post">
    <p>
        <span>用户名</span><input  type="text" id="username">
    </p>
    <p>
<!--        多选框的值是不变的-->
        <span>性别</span><input type="radio" name="sex" value="boy" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>
<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')
    //对于单选框，多选框等等是固定地址
        boy_radio.checked;
    //查看是否为ture
</script>
</body>
</html>

提交表单 MD5加密密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
</head>
<body>
<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被点击-->
    <button type="button" onclick="aaa()">提交</button>
    <p>
        <!--        多选框的值是不变的-->
        <span>性别</span><input type="radio" name="sex" value="boy" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>
<script>
    function aaa(){
       var uname=document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(uname.value);
        //MD5 算法
        pwd.value = md5(pwd.value)
        console.log(pwd.value);
        pwd.value='*****';
    }
</script>
</body>
</html>

跳转方式1使用onclick=方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
</head>
<body>
<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被点击-->
    <button type="button" onclick="aaa()">提交</button>
    <p>
        <!--        多选框的值是不变的-->
        <span>性别</span><input type="radio" name="sex" value="boy" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>
<script>
    function aaa(){
        var uname=document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(uname.value);
        //MD5 算法
        pwd.value = md5(pwd.value)
        console.log(pwd.value);
        pwd.value='*****';
        location.assign('https://www.baidu.com/')
    }
</script>
</body>
</html>

跳转页面方式2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
</head>
<body>
<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="password" name="password">
    </p>
    <button type="submit" >提交</button>
    <p>
        <!--        多选框的值是不变的-->
        <span>性别</span><input type="radio" name="sex" value="boy" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
    <input type="hidden" id="md5-password" name="password">
<!--绑定事件onclick被点击-->
</form>
<script>
    function aaa(){
       var uname=document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(uname.value);
        //MD5 算法
        pwd.value = md5(pwd.value)
        console.log(pwd.value);
        return true;
    }
</script>
</body>
</html>

10 jQuery

JavaScript

jqurey库,里面存在大量的JavaScript函数

获取jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
         选择器     事件
-->
<a href="" id="test-jquery">点我</a>
<script>
    document.getElementById('id');
    //选择器就是css的选择器
    $('#test-jquery').click(function(){
        alert('hello,jquery');
    })
</script>
</body>
</html>

选择器

//id
document.getElementById();
//class
document.getElementsByClassName();
//标签
document.getElementsByTagName();
//jquery
$('p').click();
$('#id1').click();
$('.class1').click();

事件

鼠标事件，键盘事件

鼠标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<style>
    #divMove{
        width: 500px;
        height: 500px;
        border: 1px solid red;
    }
</style>
<body>
//获取鼠标当前的位置
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试一试
</div>
<script>
    //当网页元素加载完毕后，相应事件
    $(document).ready(function (){
        $('#divMove').onmousemove(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

$('#test-ul li[name=python]').show()//显示
$('#test-ul li[name=python]').hide()//隐藏

小技巧

如何巩固js（看jquery源码，看游戏源码！）
巩固HTML，CSS（扒网站，全部down下来，然后对应修改看效果~）

标签：基本,function,console,log,js,使用,var,document,name
From： https://www.cnblogs.com/zzl990110/p/18079997

js的基本使用