js基础学习

最新推荐文章于 2023-03-14 20:57:57 发布

小胡学Java

最新推荐文章于 2023-03-14 20:57:57 发布

阅读量385

点赞数

本文链接：https://blog.csdn.net/m0_56412042/article/details/119567989

版权

本文是一份JavaScript快速入门教程，涵盖了JavaScript的基本语法、数据类型如字符串、数组、对象，以及流程控制、函数、面向对象编程的概念。详细讲解了如何引入JavaScript、使用严格检查模式，以及数据类型的转换和操作。此外，还介绍了DOM操作、BOM（浏览器对象模型）和jQuery库的使用，是初学者理解JavaScript基础的全面指南。

摘要由CSDN通过智能技术生成

2.快速入门

2.1引入JavaSciprt

1.内部标签

 <scrit></scrit>

2.外部引用

  <script src="js/hj.js"></script>
    <scrit></scrit>

alert('hello world')

3.测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--在script中写js代码-->
    <script src="js/hj.js"></script>
    <scrit></scrit>
</head>
<body>

</body>
</html>

2.2基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--JavaScript严格区分大小写-->
  <script>
    //1.定义变量 变量类型 变量名 = 变量值
    var num=1;
    //条件控制
    if(true){
      alert('你是傻逼')
    }
  </script>
</head>
<body>

</body>
</html>

浏览器必备调试须知

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

2.3数据类型

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

number

js不区分小数和正数，number

123//正数
12.1//浮点数
1.23e3//科学计数法
NaN  // not a number
Infinity  //表示无限大

字符串

‘asd’

布尔值

true false

逻辑运算

&&
||
!

比较运算符

=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果true）

坚持不要使用==比较

须知：

NaN===NaN,这个与所有的值比较都为不相等，包括自己
只能通过isNaN(NaN)来判断这个数是不是NaN

浮点数问题：

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

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

null和undefined

null 空
undefined 未定义

数组

js数组中的元素不需要为同种类型

//保证代码可读性，尽量使用[]
var arr=[1,23,3,4,5,6,'hello']
new Array(1,2,3,4)

数组下标如果越界，就会

undefined

对象

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

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

  <script>
    var person={
      name:'小胡',
      age:3,
    }
  </script>

2.4严格检查模式

’use strict’;严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JS的第一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--前提是IDEA需要设置支持ES6语法
 'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
 必须写在JS的第一行
-->
    <script>
        'use strict'
        let i=1;

    </script>
</head>
<body>

</body>
</html>

3.数据类型

3.1字符串

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

2.注意转义字符

\'
\n
\t
\u4e2d

3.多行字符串编码

        var a =
            `ha
              as
             asdas`

4.模板字符串

     'use strict'
        //``在tab键的上面
        let name = "小胡";
        let age = 3;
        let msg = `真棒，${name}`;
        console.log(msg)

5.字符串的长度

.length

6.字符串的是不可变的

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

7.大小写转换时通过方法转换

//注意，这里是方法，不是属性
console.log(student.toLocaleUpperCase())

8.student.indexOf(t) 位置下标索引

9.student.substring(1,3)

[)
含头不含尾
student.substring(1）1到最后

3.2数组

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

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

1.长度

arr.length

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

2.indexOf 通过元素获得下标索引

arr.indexOf(2)
1

字符串的1和数字的1时不同的

3.slice（）截取Array的一部分，返回一个新的数组，类似于String中的substring

4.push（）pop（）

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

5.unshift(),shift()

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

6.排序sort()

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

7.元素反转reverse

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

8.concat（）拼接数组

返回一个新的数组

arr.concat(1235,555)
(8) [6, 5, 4, 3, "2", "1", 1235, 555]

9.连接符join

arr.join("-")
"6-5-4-3-2-1"

10.二维数组

arr = [[1,2],[3,4]]
(2) [Array(2), Array(2)]

数组：存取数组（如何存，如何取，基本所有方法可以自我实现）

3.3对象

若干个键值对

var 对象名{
    属性名:属性值,
    属性名:属性值,
    属性名:属性值,
}
        
        
        let person={
            name : "小胡",
            age: 3,
            email: "529780274@qq.com",
            score:0,
        }

JS中的对象，{……}表示一个对象，键值对描述属性 XXXX ：XXXX，多个属性之间使用逗号隔开

最后一个属性不加逗号

JavaScript中所有的键都是字符串

1.对象赋值

person.name
"小胡"
person.name="小健"
"小健"
person.name
"小健"

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

person.haha
undefined

3.动态的删除属性

person
{name: "小健", age: 3, email: "529780274@qq.com", score: 0}age: 3name: "小健"score: 0__proto__: Object
delete person.email
true
person
{name: "小健", age: 3, score: 0}

4.动态的添加

person.haha="haha"
"haha"
person
{name: "小健", age: 3, score: 0, haha: "haha"}

5.判断属性值是否存在对象中

'age' in person
true

6.判断一个属性是否是这个对象自身拥有

person.hasOwnProperty('tostring')
false
person.hasOwnProperty('age')
true

3.4流程控制

if语句

        let a = 5;
        if (a>3){
            alert("xixi")
        }else {
            alert("kuwa")
        }

循环

       let a = 5;
        while (a<100){
            a=a+1;
            console.log(a)
        }

for循环

  for (let i = 0; i < 5; i++) {
            alert('弹弹弹')
        }

forEach循环

      let arr=[1,123,132,1,5,1,313,2]
        arr.forEach(function (value){
            console.log(value)
        })

for…in和for…of

    
//var获取的时数组的索引
//for(var index in object)
        for (let num in arr) {
            console.log(arr[num])
        }

//可以直接打印出来具体的值
        var set = new Set([213,51,6,51,65,15,1,1,1,1])
        console.log(set.has(213))
        for (var x of set) {
            console.log(x)
        }

3.5 map 和 set

Map：

       var map = new Map([['xiaohu',100],['xiaojian',90]]);
       let int = map.get('xiaohu');//通过key获取value
       console.log(int)
        map.set('admin',1000);//添加
        map.delete('admin')//删除

Set：无序不重复的集合

        var set = new Set([213,51,6,51,65,15,1,1,1,1])
        set.add(2)//添加
        set.delete(51)//删除
        console.log(set.has(213))//是否存在

3.6iterator迭代器

遍历Map (for…of)

var map = new Map([['xiaohu',100],['xiaojian',90]]);
        for (let m of map) {
            console.log(m)
        }

遍历Set

        var set = new Set([12,31,321,5,1,61,65,16,5]);
        for (let x of set) {
            console.log(x)
        }

4.函数及面向对象

4.1函数定义

public 返回值类型 方法名（）{
    return 返回值
}

定义方式一

绝对值函数

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

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

参数进来是否存在问题？假设不存在参数

手动抛出异常

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

arguments

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

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

    let abs = function(x){


        for (let i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
        //手动抛出异常
        if(typeof x !=='number'){
            throw 'not a number'
        }
        if(x>=0){
            return x;
        }else
            return -x
    }

问题：arguments包含所有的参数，怎么解决多个参数的问题

rest

获取除了已经定义的参数之外的所有参数…rest

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

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

4.2变量作用域

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

假设在函数体中声明，则在函数体外不可以使用（非要想实现的话可以取了解闭包）

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

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

  function hj(){
     var x=1;
     x=x+1;
   }
   function hj1(){
     var x= 1;
     x=x+1;
   }

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

function hj(){
  var x=1;
  x=x+1;
  //内部函数可以访问外部函数的成员，反之则不行
  function hj1(){
    var y= x+1;y is not defined
  }
  var z=y+1;
}

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

  function hj(){
     var x=1;
     //内部函数可以访问外部函数的成员，反之则不行
     function hj1(){
       var x= 'A';
       console.log("inner"+x)
     }
     console.log("outer"+x)
     hj1();
   }
    hj();

假设在JavaScript中函数查找变量从自身函数开始，由内而为，假设外部才能在这个同名的的函数变量，则内部函数会屏蔽外部函数的变量

提升作用域

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

结果：xundefined

说明：JS执行引擎，自动提升了y声明，但是并没有把y的值带过来。等同于

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

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

全局函数

    //全局变量
    var x =1;
    function hj(){
      console.log(x)
    }
    hj()
    console.log(x)

全局对象 window

    var x =1;
    alert(x)
    alert(window.x)//默认所有的全局变量都绑定在window下

alert()本身也是一个window的变量

    var x =1;
    alert(x)
    alert(window.x)//默认所有的全局变量都绑定在window下
    var x = window.alert;
    window.alert=function (){};
    alert(123);
    window.alert=x;
    alert(456);

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

规范

由于所有的全局变量都会绑定到window上。如果不同的js文件使用了相同的全局变量。

冲突—>如何能够减少冲突？

    //唯一全局变量
    var hujian = {};
    hujian.name='胡健';
    hujian.add = function (a,b){
        return a+b;
    }
    console.log(hujian.add(5,7));

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

局部作用域 let

    function hj() {
        for (var i = 0; i < 100; i++) {
            console.log(i);
        }
        console.log(i+1);//问题？i出了作用域还能继续使用
    }
    hj();


    function hj() {
        for (let i = 0; i < 100; i++) {
            console.log(i);
        }
        console.log(i+1);//Uncaught ReferenceError: i is not defined
    }
    hj();

const 常量

    //唯一全局变量
   const PI='3.14';
    console.log(PI);
    PI='3.33';
//尝试赋值给常量或只读变量

4.3方法

定义方法

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

  var hujian ={
    name:'小胡',
    birth: 1999,
    //方法
    age:function (){
      var now =new Date().getFullYear();
      return now-this.birth
    }
  }
  //属性
  hujian.name
//方法，一定要带()
hujian.age()

this.代表什么？拆开上面的代码看看

  function getAge() {
    var now = new Date().getFullYear();
    return now-this.birth;
  }
  var hujian = {
    name:'小胡',
    birth: 1999,
    //方法
    age:getAge
    }
    //hujian.age()成功
    //getAge.age()  NaN

this.是无法指向的。是默认指向调用它的它的对象

apply

在JS中是可以控制this的指向！！！！

 function getAge() {
    var now = new Date().getFullYear();
    return now-this.birth;
  }
  var hujian = {
    name:'小胡',
    birth: 1999,
    //方法
    age:getAge
    }
    getAge.apply(hujian,[]);
    //hujian.age()成功
    //getAge.age()  NaN
    //getAge.apply(hujian)
    //22

5.内部对象

标准对象

typeof 123
"number"
typeof''
"string"
typeof[]
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1Date

基本使用

 var now = new Date();//Sun May 30 2021 09:06:56 GMT+0800 (中国标准时间)
  now.getFullYear();//年份
  now.getMonth();//月   0~11
  now.getDate();//日
  now.getDay();//星期几  返回值是 0（周日） 到 6（周六） 之间的一个整数。
  now.getHours();//时
  now.getMilliseconds();//秒 返回 Date 对象的毫秒(0 ~ 999)。

转化：

  now.getTime();   //时间戳  全世界统一
  now.toLocaleString()   //"2021/5/30上午9:09:33" 本地时间
  now.toGMTString()//"Sun, 30 May 2021 01:09:33 GMT"
//注意调用的是方法而不是属性！！

5.2JSON

json是什么

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

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

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

格式：

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

JSON字符串和JS对象的转化

  var user = {
    name:'小胡',
    age:3,
    sex:'男'
  }
  //对象转化为json字符串
  var jsonUser = JSON.stringify(user)

  //JSON字符串转化为对象
  var obj = JSON.parse('{name: "小胡", age: 3, sex: "男"}')

JSON和JS对象的区别

var obj = {a:'hello',b:'world'}
var json = '{"a":"hallo","b":"world"}'

6.面向对象编程

6.1什么是面向对象

JavaScript，Java，c#。。。面向对象：JavaScript有些区别！

类：模板原型对象
对象：具体实例

在JavaScript这个需要大家转化思想

原型：

  var user = {
    name:'小胡',
    age:3,
    sex:'男',
      run:function (){
        console.log(this.name+'run....')
      }
  }
  var hujian={
      name:'hujian'
  }
  //原型对象
   hujian.__proto__ = user;

function Student(name){
    this.name = name;
  }
  //给student新增一个方法
  Student.prototype.hallo = function (){
    alert('hello')
  }

class继承

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

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

继承

 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 s = new xiaoStudent('小明',5);
  var a = new  Student('小明')

原型链

javascript——原型与原型链 - 雅昕 - 博客园 (cnblogs.com)

850375-20190708152327825-11086376.png (590×477)

7.操作Bom（重点）

浏览器介绍

JavaScript和浏览器的关系？

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

BOM：浏览器对象模型

IE6~11
chrome
safari
Firefox

三方

qq浏览器
360浏览器

window

window 代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
262
window.innerWidth
1536
window.outerHeight
824
window.outerWidth
1536
window.innerHeight
226
window.innerWidth
970
//内外部高度，调整窗口  相应的值也会变化

Navigator

Navigator，封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36 Edg/91.0.864.37"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36 Edg/91.0.864.37"
navigator.platform
"Win32"

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

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

screen

代表屏幕的尺寸

screen.width
1536
screen.height
864

location(重要)

location代表当面页面的URL信息

host: "www.baidu.com"  //主机
href: "https://www.baidu.com/"  //当前位置
protocol: "https:"  //协议
reload: ƒ reload() //重新加载  刷新页面
//设置新的地址
location.assign(URL)  //跳转新地址

document

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

document.title='面向监狱编程'
"面向监狱编程"

获取具体的文档树节点

<dl id="app">
  <dt>java</dt>
  <dd>javase</dd>
  <dd>javaee</dd>
</dl>
<script>
  var dd = document.getElementById('app');
</script>

获取cookie

document.cookie
""

劫持cookie原理

www.taobao.com

<script src='aa.js'> </script>
//恶意人员：获取你的cookie上传到他的服务器

history(不建议使用)

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

8.操作DOM

核心

浏览器网页就是一个DOM属性结构！

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

要操作一个DOM节点，接必须要先获取这个Dom节点

获取节点

  var p1 = document.getElementById('p1');
  var h = document.getElementsByTagName('h1');
  var p2 = document.getElementsByClassName('p2');
  var f = document.getElementById('father');
  
  var chind = f.children;//获取父节点下的所有子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
  //对应CSS的选择器
  var p1 = document.getElementById('p1');
  var h = document.getElementsByTagName('h1');
  var p2 = document.getElementsByClassName('p2');
  var f = document.getElementById('father');
  
  var chind = f.children;//获取父节点下的所有子节点

</script>
</body>

</html>

这是原生代码：之后我们获取节点尽量使用JQ

<div id="div1">
</div>
<script>
  var d = document.getElementById('div1')
</script>

更新节点

d.innerText=‘123’ 修改文本的值
d.innerHTML=‘123’ 更新HTML标签

操作JS

d.style.color='blue' // 属性使用字符串包裹
"blue"
d.style.fontSize='20px'//驼峰命名
"20px"

删除节点

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

<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
  var p1 = document.getElementById('p1');

  var f = p1.parentElement;
  f.removeChild(p1)

也可以自己删除自己但是在代码中并没有很多的id唯一标识使用父节点来删除可以提高效率

//删除是一个动态的过程
//如果要删除一个父类下的所有子节点最好冲最后一个开始删除
f.removeChild(f.children[2])
f.removeChild(f.children[1])
f.removeChild(f.children[0])

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerTest就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们就不能这么干了，会产生覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">javese</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>

<script>
    var js = document.getElementById('js');
        list = document.getElementById('list');
//通过这个方法插入！！！！
list.appendChild(js)

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

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

    //通过JS创建一个新的节点
    var newP = document.createElement('p');//创建一个P标签
    newP.id='newp';
    newP.innerText='小胡真帅';
    list.append(newP);
</script>

 //创建一个JS标签
    var myScript = document.createElement('Script');

    myScript.setAttribute('type','text/javascript');
    list.append(myScript);

myScript.setAttribute(‘type’,‘text/javascript’);

标准写法

使用JS将body的背景颜色改成红色：

一步一步去实现：

1.先确定需要什么

2.需要往什么地方插入

3.该怎么插入

    //创建一个Style标签
    var mystyle = document.createElement('style');//创建标签
    mystyle.setAttribute('type','text/css');//设置标签属性
    mystyle.innerText='body{background:red}';//添加标签内的实现代码
    document.getElementsByTagName('head')[0].append(mystyle);//添加到什么地方

insert

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">javese</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>

<script>
    var js = document.getElementById('js');
        list = document.getElementById('list');
        ee = document.getElementById('ee')
    //父节点.(新节点,插在谁之前)
    list.insertBefore(js,ee);





# 9.操作表单

> 表单是什么  form  DOM树

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

表单目的： 提交信息

> 获得要提交的信息

```html
  //获取输入框的值
  var u = document.getElementById('username');

操作表单

  var boy = document.getElementById('man');
  var gril = document.getElementById('woman');
  //获取输入框的值
  u.value;
  //修改输入框的值
  u.value = '123';

  //对于单选框，多选框，等等固定的值，只能取到当前的值
  boy.checked;//查看返回结果
  boy.checked = true; //赋值

提交表单，MD5加密密码表单优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/md5.js" type="text/jscript"></script>
</head>
<body>
<!--表单提交事件
onsubmit = 绑定一个提交检测的函数，true才能通过
-->
<form action="#" method="post"   onsubmit="return aaa()" >
  <div>
    <span>用户名：</span>
    <input type="text" placeholder="请输入账号"  id="username" name="username">
  </div>
  <div>
    <span>密码：</span>
    <input type="password" placeholder="请输入密码"  id="password">
  </div>
  <div>
    <input type="hidden" placeholder="请输入密码"  id="md5" name="password">
  </div>
  <div>
<!--    绑定事件 onclick 被点击-->
    <button type="submit">提交</button>
  </div>
</form>
<script>
   function aaa(){
    var user = document.getElementById('username');
        pwd = document.getElementById('password');
        md5pwd = document.getElementById('md5')
        //md5算法加密
        pwd.value=hex_md5(pwd.value)
        md5pwd.value=pwd.value;
        //可以校验 true则通过  false则阻止
        return true;
  }
</script>
</body>
</html>

10.JQuery

$(selector).action

JavaScript

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

获取JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="lin/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="test">点我</a>

<script>
  $('#text').click(function ()){
    alert('hello JQ')
  }
</script>
</body>
</html>

JQ基本选择器

<script>
    //原生JS
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();
    //JQ   CSS中所有的选择器都能使用
    $('p').click();//标签选择器
    $('#id').click();//ID选择器
    $('.class').click();//类选择器
    

</script>

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

事件

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

鼠标

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

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lin/jquery-3.6.0.js"></script>
    <style>
        #div1{
            width: 500px;
            height: 500px;
            border: 1px solid deepskyblue;
        }
    </style>
</head>
<body>
<!--要求 获取鼠标当前的一个坐标-->
mouse:<span id="s"></span>
<div id="div1">
???
</div>

<script>
    $(function () {
        $('#div1').mousemove(function (e) {
            $('#s').text('x:' + e.pageX + 'y:' + e.pageY)
        })
    });
</script>
</body>
</html>

hex_md5(pwd.value)
md5pwd.value=pwd.value;
//可以校验 true则通过 false则阻止
return true;
}

```