投稿
  1. 极客之音首页
  2. 后端笔记

JavaScript——详细学习笔记

飞熊 • • 后端笔记 • 阅读 205

有时候，不是因为你没有能力，也不是因为你缺少勇气，只是因为你付出的努力还太少，所以，成功便不会走向你。而你所需要做的，就是坚定你的梦想，你的目标，你的未来，然后以不达目的誓不罢休的那股劲，去付出你的努力，成功就会慢慢向你靠近。

导读：本篇文章讲解 JavaScript——详细学习笔记，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

学习视频B站狂神说Java：https://www.bilibili.com/video/BV1JJ41177di

1、什么是JavaScript？

1.1、概念

JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。

诞生于1995年，当时的主要目的是验证表单的数据是否合法。

JavaScript本来应该叫LiveScript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。

1.2、组成部分

（1）核心（ECMAScript）：这一部分主要是js的基本语法。

（2）BOM：Brower Object Model（浏览器对象模型），主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

（3）DOM：Document Object Model（文档对象模型），此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。（增删改查）

在这里插入图片描述

1.3、特点

JavaScript脚本语言具有以下特点:

  1. 脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。
  2. 基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。
  3. 简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
  4. 动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
  5. 跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支 持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。 不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性。

2、快速入门

2.1、引入JavaScript

2.1.1、内部标签

<script>
	//内容
</script>

2.1.2、外部引入

<script src="外部文件路径"></script>

2.1.3、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部标签-->
<!--    <script>
        alert("hello,world!");
    </script>-->

    <!--外部引入-->
    <!-- <script src="../js/test01.js"></script> -->
</head>
<body>

</body>
</html>

在这里插入图片描述

script标签必须成对出现！

2.2、基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script>
    var score = 72;
    if (score > 80 && score < 100){
      alert("优秀")
    }else if (score >60){
      alert("及格")
    }else {
      alert("不及格")
    }
  </script>
</head>
<body>

</body>
</html>

2.3、数据类型

  1. 变量

在JavaScript中变量使用var关键字定义

var a = "js";
var b = 123;
var c = [1,3,6,2,"haha",null,true];
  1. number

JavaScript不区分小数和整数

123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN	//not a number，判断是否为空
Infinity // 表示无限大
  1. 字符串
'abc'
"abc"
  1. 布尔值

true/false

  1. 逻辑运算
&& 两个都为真，结果为真

|| 一个为真，结果为真

!  取反
  1. 比较运算符
>	大于
<	小于
=	赋值运算符
==	等于（类型不一样，值一样，会判断为true）
===	绝对等于（类型一样并且值一样，结果为true）

也就是说，即使一个int型的数据和一个string型的数据比较，也会被判断为真

  1. 数组

Java中，数据必须是相同类型的对象，而在JavaScript中不需要遵循此规则

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];

//第二种定义方法
new Array(1,2,3,4,5,'hello');
  1. 对象

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

每个属性需要使用,隔开，最后一个不需要使用

var book = {
    bookID:1,
    bookName:"JavaScript",
    price:25,
    author:"TengLong"
}

取值：对象.属性

在JavaScript中，数组下标越界时不会报错，只会指明未定义(undefined)，对象也是同样。

2.4、严格检查模式

只支持ES(ECMAScript)6+版本

<script>
    'use strict';
    //具体内容
</script>

在JavaScript中可以使用严格检查模式来预防其随意性产生的问题，其中：'use strict'; 必须写在JavaScript的第一行才会起效，局部变量则建议使用let去定义。

3、数据类型

3.1、字符串

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

  2. 转义字符

console.log('a\t\x41\t\u4e2d\nb');
/*
\ '
\n
\t
\u4e2d \u### Unicode字符
\x41         asc11字符
*/
  1. 多行字符串编写
var msg = `
hello
world
小梁
哈哈哈`;

console.log(msg);

image-20210709010958018

  1. 模板字符串
let name =  "xiaoliang";
let age = 3;
var msg= `你好呀,${name}`
  1. 字符串长度
var student = "xiaoliang";
console.log(student.length)
  1. 字符串的可变性：不可变

在这里插入图片描述

  1. 常用方法
//大写转换
student.tpUpperCase()
//小写转换
student.tpLowerCase()
//获取指定字符的下标索引
student.indexOf("x")
//字符串切割
student.substring(a,b)//a为起始字符位置从0开始，b为结束位置默认为字符串长度

3.2、数组

在JavaScript中数组（Array）可以包含任意数据类型

初始化一个数组

var arr = [1,2,3,4,5,6];
  1. 获取数组长度
arr.length

需要注意的是：如果给arr赋值，则数组大小会被调整，或添加空元素或减少数组内的元素

在这里插入图片描述

  1. 获取元素下标索引
array.indexOf(2)
  1. 截取数组长度
array.slice(a,b)
//用法和字符串中的substring类似
  1. push(), pop()尾部元素增删
push：压入到尾部
pop：弹出尾部的一个元素

在这里插入图片描述

  1. unshift(), shift()头部元素增删
unshift：压入到头部
shift：弹出头部的一个元素

  1. 排序sort()

  2. 元素反转reverse()

在这里插入图片描述

  1. 数组拼接concat()（需要注意：使用concat()并不会改变原有数组，而是返回一个新的数组）

在这里插入图片描述

  1. 连接符join

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

    在这里插入图片描述

  2. 多维数组

在这里插入图片描述

3.3、对象

创建对象

var 对象名 = {
    属性名:属性值,
    属性名:属性值,
    属性名:属性值,
    ...
}
    
//定义一个对象person，有四个属性    
var person = {
      name:"小梁",
      age:20,
      address:"浙江",
      email:"123@163.com"
}
//打印对象的所有属性
console.log(person);
//打印对象的指定属性值
console.log(person.name);

在JavaScript中，多个属性使用,隔开，最后一个属性不加,

并且所有的键都是字符串，值可以是任意的对象。

3.3.1、常用操作

//对象赋值
person.name="大梁";

//动态的删减属性使用delete关键字
delete person.name;//删除person中的name属性

//动态添加
person.score = 90;//给person添加一个scroe属性并且赋值为90

//判断对象中是否包含该属性值
"name" in person;
//如果包含则返回true，否则返回false

//判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString')//toString为继承object的并非自身包含
false
person.hasOwnProperty('age')
true

3.4、流程控制

3.4.1、if判断

var num = 5;
if (num > 3){
  alert("num>3");
}
else if (num < 7){
  alert("num<7");
}

在这里插入图片描述

3.4.2、while和do…while循环

var num = 5;
while (num<10){
  num += num;
  console.log(num);
}
//打印结果为：10

var num = 5;
do {
    num += num;
    console.log(num)
}while (num<10);
//结果为：10

3.4.3、for循环

for (var i=0; i<=10; i++){
  console.log(i);
}

在这里插入图片描述

3.5、Map和Set

ES6的新特性

3.5.1、Map

var map = new Map([["tom",90],["jack",80],["matt",95]]);

map.get("tom");//查询tom的值

map.has("matt");//检查是否包含matt.

map.set("john",68);//新增或者修改

map.delete("jack");//删除

3.5.1、Set：一个无序不重复的集合

var set = new Set([1,2,3,5,9,4,1]);

set.add(8);//新增

set.has(3);//检查是否包含

set.delete(1);//删除

3.6、iterator

使用iterator遍历set和map集合

var map = new Map([["tom",90],["jack",80],["matt",95]]);
for (var x of map){
    console.log(x);
}

在这里插入图片描述

4、函数

4.1、函数的定义和调用

//函数的定义方法一：
function abs(x){
  if (x>=0){
    return x;
  }
  else
    return -x;
}

//函数定义方法二：
var abs = function (x){
    if (x>=0){
      return x;
    }
    else
      return -x;
}

//函数的调用
console.log(abs(-9));

打印结果为：9

说明

​ 在函数的定义中，一旦执行到return就会结束函数并返回结果；如果没有执行return，函数执行完也会返回结果undefined

​ 其中，函数定义的方式一和方式二是等价的

​ 但是在js中，传递的参数很随意，可多可少。定义函数值传递一个，而调用函数传递多个参数时，此时只会执行第一个参数。而如果不传参数时，则会返回undefined。

4.2、异常捕获

以上面定义的函数为例子，如果需要判断传入的参数是否为数字，是数字则正常执行，不是数字则抛出异常。

function abs(x){
  if (typeof x !== `number`){//typeof可以判断x的类型
    throw `Not a number!`;
  }
  if (x>=0){
    return x;
  }
  else
    return -x;
}

在这里插入图片描述

4.3、类数组对象：arguments

当我们在js中在调用一个函数的时候，我们经常会给这个函数传递一些参数，js把传入到这个函数的全部参数存储在一个叫做arguments的东西里面。

function abs(x){
  if (typeof x !== `number`){//typeof可以判断x的类型
    throw `Not a number!`;
  }
  for (var i=0; i<arguments.length;i++){
    console.log(arguments[i]);
  }
  if (arguments[0]>=0){
    return arguments[0];
  }
  else
    return -arguments[0];
}

console.log(abs(-9,1,6,8,7,9));

在这里插入图片描述

4.4、rest

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

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

在这里插入图片描述

4.5、变量

4.5.1、变量作用域

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

假设在函数体中声明，则在函数体外不可以使用！（解决方法：闭包）

function a(){
    var x = 1;
    
    function a1(){
        var y = x +1; //2
    }
    
    var z = y+1; //报错
}

说明内部函数可以使用外部变量，反之不行

在JavaScript中函数查找变量从自身函数开始，由内向外查找，当外部存在这个同名的函数变量时，则内部函数会屏蔽外部函数的变量。

4.5.2、变量的一般使用

先定义，后调用

function test(){
    var a,b,c;
    //使用
}

4.5.3、全局变量window

var x = 123;
alert(x);//弹窗123
window.alert(x);//弹窗123
alert(window.x);//弹窗123

任何全局变量（函数）都默认绑定在window下面

由于我们所有的全局变量都会绑定在我们的window上。如果不同 的js文件使用了相同的全局变量，则会引起冲突。

为了减少冲突，就可以把自己的代码全部放入自己定义的唯一空间名字中，降级全局命名冲突的问题（JQuery）

//定义全局唯一变量
var teng = {};

//定义全局变量
teng.name = "xiaoliang";
teng.age = 8;
teng.add = function (a,b){
  return a+b;
}

4.5.4、局部作用域 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);
}

在这里插入图片描述

4.5.6、常量const

在ES6之前，常量的定义就是只用全部大写字母命名的变量就是常量

在ES6之后，引入了常量关键字const，定义后无法随意修改它的值

4.6、方法

定义方法：把函数放在对象里面

var teng = {
  name:"小梁",
  birth:2000,
    //方法
  age:function (){
    let now = new Date().getFullYear();
    return now-this.birth;
  }
}

//打印方法（必须要带括号）
console.log(teng.age());//21

另一种写法：

function getAge(){
  let now = new Date().getFullYear();
  return now-this.birth;
}

var teng = {
  name:"小梁",
  birth:2000,
  age:getAge//没有参数可以不用带括号
}

需要注意

如果单独调用getAge()会NaN,因为这是this会指向全局变量window

此时可以使用apply来指定this的指向

getAge.apply(teng,[]);//结果为21

5、内部对象

标准对象
typeof 123
“number”
typeof ‘123’
‘string’
typeof true
“boolean”
typeof NaN
“number”
typeof []
"object’
typeof {}
“object”
typeof Math. abs
“functi on”
typeof undefined
“undefined”

5.1、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. getTimeO); //时间戳全世界统一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"

5.2、JSON

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

  • 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
  • 在JavaScript -切皆为对象、任何js支持的类型都可以用JSON来表示; number, string…

格式:

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对都是用key:value
var person = {
  name:"xiaoliang",
  age:8,
  hobby:"computer"
}

//js对象转化为json字符串
var jsonPerson = JSON.stringify(person);

//json字符串转化为js对象
var obj = JSON. parse(' {"name":"xiaoliang" , "age" :nan","hobby":"computer"}');
//输出为{name:"xiaoliang",age:8,hobby:"computer"}

在这里插入图片描述

6、面向对象编程

6.1、原型对象

​ 简单的来说，无论何时，我们创建的每一个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，这个对象包含了通过调用该构造函数所创建的对象共享的属性和方法。其实我们平常的叫法就是指：prototype就是通过该构造函数创建的某个实例的原型对象，但是其实prototype是每个构造函数的属性而已，只能说万物皆对象罢了。
   原型对象的优点是：所有的对象实例都可以共享它包含的属性和方法。这一点可以在构造函数里就可以看出来，因为构造函数在函数里面就定义了对象的实例信息，而原型对象可以在任何地方定义属性和方法。

var person = {
  name:"小梁",
  age:3,
  run:function (){
    console.log(this.name + "——>run");
  }
}

var student = {
  name:"xiaoming"
}

//student的原型指向person 相当于Java中的继承
student.__proto__ = person;

在这里插入图片描述

6.2、class继承

class关键字在ES6引入

  1. 添加方法
//定义类以及类中的属性和方法
class Person{
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }

    run(){
        console.log(this.name+"——>run")
    }
}

var student = new Person("小梁",3);
  1. 继承
class Person{
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }

    run(){
        console.log(this.name+"——>run")
    }
}

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

    getGrade(){
        console.log("我现在读"+this.grade+"年级！");
    }
}

var xiaoliang = new Student("小梁",3,2);

在这里插入图片描述

7、操作BOM对象(重点)

BOM：浏览器对象模型

7.1、window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
258 
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919

7.2、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.124 Safari/537.36 Edg/91.0.864.64"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64"
navigator.platform
"Win32"

7.3、screen

screen代表屏幕尺寸

screen.width
1920
screen.Height
1080

7.4、location

locatio代表当前页面的URL信息

location属性：

主机：host
当前指向的位置：href
协议：protocol
重新加载的方法：f reload() //location.reload()刷新网页
设置新的地址：location.assign(‘想要跳转的地址’)

7.5、document

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

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

//获取cookie
document.cookie

劫持cookie原理：获取cookie上传到指定服务器（淘宝、天猫为例，当登录淘宝的时候天猫会自动登录）

服务器端可以设置cookie：httpOnly 增强安全性

7.6、history

history代表浏览器的历史记录

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

8、操作DOM节点(重点)

8.1、获取DOM节点

8.1、DOM

​ DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。

​ DOM树

在这里插入图片描述

8.2、document

​ 当浏览器下载到一个网页，通常是 HTML，这个 HTML 就叫 document（当然，这也是 DOM 树中的一个 node），从上图可以看到，document 通常是整个 DOM 树的根节点。这个 document 包含了标题（document.title）、URL（document.URL）等属性，可以直接在 JS 中访问到。

​ 在一个浏览器窗口中可能有多个 document，例如，通过 iframe 加载的页面，每一个都是一个 document。

​ 在 JS 中，可以通过 document 访问其子节点（其实任何节点都可以）

8.3、获取DOM节点

<body>
<div id="div">
  <h1>标题</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>

<script>
  let h1 = document.getElementsByName("h1");//获取标签名为h1的节点
  let p1 = document.getElementById("p1");//获取id为p1的节点
  let p2 = document.getElementsByClassName("p2");//获取class名为p2的节点
  let div = document.getElementById("div");

  let children01 = div.children;//获取div节点下的所有子节点
  let children02 = div.children[1];//获取div节点下的第二个节点
  let children03 = div.firstChild;//获取div节点下的第一个节点
  let children04 = div.lastChild;//获取div节点下的最后一个子节点

</script>
</body>

8.4、删除DOM节点

步骤：先获取需要删除节点的父节点，再通过父节点删除该子节点

<div id="div">
  <h1>标题</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
  let self = document.getElementById("p1");//获取子节点
  let father = self.parentElement;//获取子节点的父节点
  father.removeChild(self);//通过父节点移除子节点
</script>

在这里插入图片描述

需要注意的是：如果使用father.removeChild(father.children[0])这种方式删除子节点，一定要注意子节点数会随删除的过程动态变化，所以需要对后面的数组下标适当调整。

8.5、修改DOM节点

使用innerHTML可以给指定节点增加一个元素，但是如果节点内有内容时，该节点的内容会被新元素覆盖，所以引入追加节点的概念

8.5.1、追加子节点

<body>
<p id="js">Java</p>
<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaME</p>
</div>

<script>
  let js = document.getElementById("js");
  let list = document.getElementById("list")
  list.appendChild(js);//追加子节点js
</script>
</body>

追加前:

在这里插入图片描述

追加后:

在这里插入图片描述

8.5.2、新增子节点

使用createElement方法增加子节点

<p id="js">Java</p>
<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaME</p>
</div>

<script>
  let list = document.getElementById("list");
  let newP = document.createElement("p");//新增一个p标签
  newP.id = "newp";//设置p标签的id为：newP
  //上面的代码等同于：newP.setAttribute("id","newP");//自定义标签内的属性和属性值
  newP.innerText = "hello,xiaoliang";//添加内容
  list.appendChild(newP);
</script>

在这里插入图片描述

  let head = document.getElementsByTagName("head");//这个方法返回一个节点的集合，这个集合可以当做一个数组来处理
  //便利head
  for (let i=0; i<head.length; i++){
      console.log(head[i]);
  }
  let myStyle = document.createElement("style");//新增一个style标签
  myStyle.setAttribute("type","text/css");//设置style标签的属性和属性值
  myStyle.innerText = "body{background-color: chartreuse;}";//添加标签内容
  head[0].appendChild(myStyle);//将style标签追加到head标签里面

在这里插入图片描述

9、操作表单

9.1、获取和设置表单的值

<form action="#" method="post">
    <p>
        <span>用户名:</span>
        <input type="text" name="userName" id="userName"><br>
    </p>
    <p>
        <span>性  别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="girl" id="girl">女
    </p>
</form>
<script>
    let input_text = document.getElementById("userName");
    input_text.value;//获得输入框的值
    nput_text.value = "132";//设置输入框的值
    let input_radio = document.getElementById("boy");
    input_radio.checked;//如果是选中状态返回true，没选择则相反
</script>

9.2、表单提交验证(md5加密)

<head>
    <meta charset="UTF-8">
    <title>表单提交验证</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<form action="#" method="post">
    <p>
        <span>用户名:</span>
        <input type="text" name="userName" id="userName"><br>
    </p>
    <p>
        <span>密码:</span>
        <input type="password" name="password" id="password"><br>
    </p>
    <button type="submit" onclick="sub()">提交</button>
</form>
<script>

    function sub(){
        let user = document.getElementById("userName");
        let pwd = document.getElementById("password");
        if (user.value === "admin" && pwd.value === "123456"){
            alert(user.value + "提交成功!")
        }
        pwd.value = md5(pwd.value);//md5算法加密
    }
</script>

加密后提交的密码会被代替，增强安全性

在这里插入图片描述

10、JQuery

10.1、初始JQuery

JQuery学习文档：https://jquery.cuishifeng.cn/

Jquery使用公式：$(selector).action()(选择器+事件)

<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    <!--方式一：在线下载，百度搜索“CDN JQuery”-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!--方式二，本地文件导入-->
    <!--<script src="lib/JQuery.js"></script>-->
</head>
<body>
<a href="" id="test_jquery">点一下试试</a>
<script>
    $('#test_jquery').click(function (){
        alert("试试就试试！");
    })
</script>

10.2、JQuery选择器

JavaScript：

<script>
  document.getElementsByTagName('标签名');//标签
  document.getElementById('id名');//id
  document.getElementsByClassName("class名")//class
</script>

JQuery：

<script>
  $('标签名').click;//标签
  $('#id名').click;//id
  $('.class名');//class
</script>

这里只是简单给了几个常用的选择器，其余的可以自己去学习文档查看

10.3、事件

鼠标事件、键盘事件等等

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
      #mouseMove{
        width: 500px;
        height: 500px;
        border: 1px solid red;
      }
    </style>
</head>
<body>
<!--获取鼠标当前的坐标-->
MouseLocation:<span id="mouseLocation"></span>
<div id="mouseMove">在这里移动鼠标试试？</div>
<script>
  $(function () {
    $('#mouseMove').mousemove(function (e) {
      $('#mouseLocation').text("x:"+ e.pageX +",y:"+ e.pageY);
    })
  })
</script>

在这里插入图片描述

10.4、操作DOM事件

1、文本节点操作

<ul id="test">
  <li id="js">JavaScript</li>
  <li id="c">C语言</li>
  <li id="python">Python</li>
</ul>

<script>
  $('#test li[id=c]').text()//查看id为test节点下面li标签id为c的文本
  $('#test li[id=c]').text('123')//修改
  $('#test li[id=c]').html()//查看
  $('#test li[id=c]').html('<strong>123</strong>')//修改
</script>

text()：字符串文本

html()：html语言格式

2、css操作

<script>
  $('#test li[id=c]').css('color','red');使用键值对来表示属性和属性值
</script>

3、元素的显示和消失，本质是改变display的值

<script>
  $('#test li[id=c]').show();
  $('#test li[id=c]').hide();
</script>

关于学完巩固：

  1. 可以去网上查找一些前端游戏来看他们的源码
  2. 扒网站（全部下载下来，对应修改看效果调整）

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/147364.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！