学习笔记

发布日期: 2021-11-20

JavaScript

1.什么是JavaScript

1.1 概述

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

java与JavaScript没有关系

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

2.快速入门

2.1引入JavaScript

1.内部标签

<script>
    alert("js程序")
</script>

2.外部引入

外部写js1.js

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

2.2基本语法入门

<!--    JavaScript严格区分大小写-->
    <script>
        //1.定义变量 变量类型 变量名 = 变量值;
        var score = 9;

        //2.条件控制
        if (score>= 60 && score<70){
            alert(score)
        }else if(score>=70&&score < 80){
            alert(score)
        }else{
            alert("other")
        }

        // console.log(score) 在浏览器的控制台打印变量!

    </script>

代码可以在浏览器中进行调试

2.3数据类型

数值、文本、图形、音频、视频……

变量

var A

number

js不区分小数和整数，Number

123 //整数123
123.123 //浮点数
1.23e3 //科学计数法
-123  //负数
NaN //not a number
Infinity //表示无限大

字符串

‘abc’ “abc”

布尔值

true , false

逻辑运算

&& 都为true，结果为true
    
|| 一个为true，结果为true
    
    
! true为false，false为true

比较运算符！！！

= 

1 "1"
== 等于(类型不一样，值一样，也会判断为true)

=== 绝对等于(类型一样，值一样，结果为true，否则为false)

使用 === 进行比较

须知：

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

浮点数问题：

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

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

Math.abs((1/3) === (1-2/3))<0.00000001

null和undefined
- null 空
- undefined 未定义

数组

//保证代码的可读性，尽量使用{]
var arr = [1,2,3,4,5,6,"7","8",null,true]
new Array(1,23,4,5,6,7,"hello")

取数组下标;如果下标越界，就会undefined

对象

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

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

//Person person  = new Person(1,2,3);
var person = {
    name: "lwj",
    age: 1,
    tags:["java","js","......"]
}

取对象的值

person.name

"lwj"

perosn.age

1

2.4严格检查模式

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

3.数据类型

3.1字符串

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

2.注意转义字符 \

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

3.多行字符串编写

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

4.模板字符串

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

        let name = "梁吴俊"
        let age = 1
        let msg1 = `你好,我是,${name},我${age}岁`
        document.write(msg1)

5.字符串长度

str.length

6.字符串的可变性,不可变

7.大小写转换

//注意，这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()

8.student.indexOf(‘t’)

9.substring

[)
//从第一个字符串截取到最后一个字符串
student.substring(1)
//[1,3)
student.substring(1,3)

3.2数组

Array 可以宝行任意的数据类型

var arr = [1,2,3,4,5] //通过下表取值和赋值
arr[0]
arr[0] = 1

1.长度

arr.length

注意:给arr.length赋值,数组大小就会发生变化

过大出现undefined，过小元素就会丢失

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

arr.indexOf(2)
1

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

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

4.push(),pop 尾部

push:压入到尾部 arr.push("a","b")
pop:弹出尾部一个元素 arr.pop()

5.unshift(),shift()头部

unshift:压入到头部 arr.unshift("a","b")
shift:弹出头部一个元素 arr.shift()

6.排序 sort()

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

7.元素反转 reverse()

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

8.concat() 拼接数组

(5) [5, 4, 3, 2, 1]
arr.concat(['a','b','c'])
(8) [5, 4, 3, 2, 1, 'a', 'b', 'c']

注意：caoncat()并没有修改数组，只是会返回一个新的数组

9.连接符 join

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

arr.join('-')
'5-4-3-2-1'

10.多维数组

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

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

3.3对象

若干个键值对

var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义了一个person对象，他有三个属性
var person = {
            name : "梁吴俊",
            age : 1,
            email: "1252010075@qq.com"
        }

js中的对象，{…}表示一个对象,键值对描述属性xxxx:xxxx多个属性之间使用逗号隔开，最后一个属性不加逗号!

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

1.对象赋值

person.name = "lwj"
'lwj'
person.name
'lwj'

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

person.hh
undefined

3.动态的删减属性,通过delete删除对象属性

delete person.name
true

4.动态的添加,直接给新的属性添加值即可

person.hh = "hh"
"hh"

5.判断属性值是否在这个对象中！ xxx in xxx

'age' in person
true
//继承	
'toString' in person
true

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

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

3.4流程控制

if判断

//第一个判断
if (age > 3){
    alert("hh")
    //第二个判断
}else if (age < 5){
    alert("123")
}else{//否则
    alert("addada")
}

while循环，避免死循环

while(age < 100){
    age = age + 1;
    console.log(age)
}

for循环

for (let i = 0; i < 100; i++) {
    console.log(i)
}

foreach循环

var age1 = [1,2,3,4,56,7]
age1.forEach(function (value){
  console.log(value)
})

for….in

/*
* for(Type str : element){}
*num为索引
* for(var index in object){}
* */
for (var num in age1) {
    console.log(age1[num])
}

3.5Map和Set

Map：

var map = new Map([["tom",12],["jack",13],["rose",14]]);
console.log(map.get("tom"))//通过key获取
map.set("jeery",15);//通过set设置
map.delete("tom")//通过key删除
console.log(map)

Set:无序不重复集合

var set = new Set([1,2,3,4,51,1,1])//set去重
set.add(12);//增加
set.delete(2)//删除
set.has(3)//判断是否包含
document.write(set)

3.6 iterator

for… of

//通过forof
var num = new Set([1,2,3,5,6,7,8,9,9,1,2,8]);
for (var number of num) {
    document.write(number)
}
//遍历值打印
number为值

//遍历map
var map = new Map([["tom",100],['jack',123],['rose',1233]])
    for (let x of map) {
        document.write(x)
    }
//遍历set
var set = new Set([2,3,4,51,23,123,2321])
    for (let x of set) {
        document.writeln(x)
}

4.函数

4.1 定义函数

定义方式一

绝对值函数

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可以传任意个参数，也可以不传递参数·

规避不存在参数，进行规避。

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

参数存在多个

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

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

function abs(x){
    //手动抛出异常判断
    if(typeof x !== 'number'){
        throw 'Not a number';
    }
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }

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

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

rest

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

function abc(x,n,...rest){
    console.log(x);
    console.log(n);
    console.log(rest);
}

rest参数只能卸载最后面，必须用…标识

4.2变量的作用域

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

假设在函数体中声明,则在函数体外不可以使用~(非要想实现的话，闭包)

function aj(){
    var x = 1;
    x = x + 1;
}
x = x + 2;//not defined

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

function aj(){
       var x = 1;
       x = x + 1;
   }
   function aj1 (){
       var x = 1;
       x = x + 1;
   }

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

function aj(){
    var x = 1;
    //内部函数可以访问外部函数成员，反之则不行
    function aj1 (){
        var y = x + 1;
    }
    var z = y + 1;
}

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

   function aj(){
        var x = 1;
        aj1();
        function aj1 (){
            var x = 'A';
            console.log('inner' + x);
        }
        console.log('outer' + x);

    }

aj();

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

提升变量的作用域

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

    }

结果: xundefined

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

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

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

function aj(){
    var x = 1,
        y = x + 1,
        a,b;//undefined
    //之后随便使用
}

全局函数

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

全局对象window

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

alert()这个函数本省也是一个window变量;

//全局变量
var x = 1;
window.alert(x);
var new_alert = window.alert;
new_alert(123)
window.alert = function (){

};
//发现alert()失效
window.alert(123);
//恢复
window.alert = new_alert;
window.alert(23123231231)

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

规范

由于所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，冲突~>如何减少冲突

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

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

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

JQuery == $()

局部作用域 let

function ab(){
       for (var i = 0; i < 50; i++) {
           console.log(i)
       }
       console.log(i+1)//i出了作用域还可以使用
   }

通过let关键字解决局部作用域冲突的问题

function ab(){
       for (let i = 0; i < 50; i++) {
           console.log(i)
       }
       console.log(i+1)//not defined
   }

建议使用let关键字定义局部作用域的变量;

常量 const

在ES6之前，全部用大写的字母命名的变量就是常量，不建议修改

var PI = '3.14';

console.log(PI)
PI ='2131231';//可以被修改
console.log(PI)

在ES6之后引入常量关键字const

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

console.log(PI)
PI ='2131231';
console.log(PI)

4.3 方法

定义方法

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

var lwj = {
  name:"lwj",
  birth:2000,
  //方法
  age:function (){
    var fullYear = new Date().getFullYear();
    return fullYear - this.birth;
  }
}

//属性
lwj.name
//方法,一定要带()
lwj.age()

拆开写

function getAge(){
  var fullYear = new Date().getFullYear();
  return fullYear - this.birth;
}
var lwj = {
  name:"lwj",
  birth:2000,
  //方法
  age:getAge
}

单独使用getAge()会出现NaN window中没有birth

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

apply

在js中可以控制this的指向

  function getAge(){
    var fullYear = new Date().getFullYear();
    return fullYear - this.birth;
  }
  var lwj = {
    name:"lwj",
    birth:2000,
    //方法
    age:getAge
  };
getAge.apply(lwj,[])//this指向了lwj，参数为空

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.1Date

基本使用

var date = new Date(); //Fri Nov 19 2021 09:40:19 GMT+0800 (中国标准时间)
date.getFullYear() //年
date.getMonth() //月 0-11月
date.getDate()  //日
date.getDay()   //星期几
date.getHours() //时
date.getMinutes()   //分
date.getSeconds()   //秒

date.getTime()//时间戳 从1970.1.1 0:00:00 开始的毫秒数

console.log(new Date(1637286213962))//时间戳转换为时间

转换

date = new Date(1637286213962)
Fri Nov 19 2021 09:43:33 GMT+0800 (中国标准时间)
date.toLocaleString()
'2021/11/19 上午9:44:25'
date.toGMTString//注意：调用一个方法，而不是一个属性
ƒ toUTCString() { [native code] }
date.toGMTString()
'Fri, 19 Nov 2021 01:44:25 GMT'
date.toLocaleDateString()
'2021/11/19'

5.2 Json

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

格式：

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

JSON字符串和JS对象的转化

var user = {
       name:"lwj",
       age: 333,
       sex: '男'
   }
   //对象转换为Json字符串{"name":"lwj","age":333,"sex":"男"}
   var s = JSON.stringify(user);

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

JSON和JS对象的区别

var obj = {name:"lwj",age:333,sex:"男"}
var json = '{"name":"lwj","age":333,"sex":"男"}'

5.3 Ajax

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

6.面向对象编程

原型对象

JavaScript、java、c# 。。。。。。JavaScript的区别

类:模板原型对象

对象:具体的实例

在JavaScript中需要更换思维方式!

原型:

var user = {
    name:"lwj",
    age: 333,
    sex: '男',
    run : function (){
        console.log(this.name + 'run ......')
    }
}
var nan  = {
    name: '小明'
}
//小明的原型是user
nan.__proto__ = user;

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

class继承

class关键字，在ES6引入

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

class student{
    constructor(name) {
        this.name = name
    }

    hello(){
        alert('hello')
    }
}
class littleStudent extends student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }

    run(){
        console.log(this.name+'run')
    }
}


var xiaoming = new student('xiaoming')
//继承
var little = new littleStudent('student',1);

本质:查看对象原型

原型链

proto:

7.操作BOM对象

BOM:浏览器对象模型

window

window代表浏览器窗口

window.innerHeight

window.innerWidth

window.outerHeight

window.outerWidth

Navigator

Navigator,封装了浏览器的信息

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

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

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

screen

屏幕尺寸

screen.width
1920
screen.height
1080

location

localtion代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('https://www.bilibili.com/')

document

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

document.title
'百度一下，你就知道'
document.title = 'lwj'
'lwj'

获取具体的文档树节点

<dl id="name">
  <dt>JAVA</dt>
  <dd>javaSE</dd>
  <dd>javaEE</dd>
</dl>
<script>
  var elementById = document.getElementById('name');
console.log(elementById)

获取cookie

document.cookie
'BIDUPSID=567751749BFAD91A7FB2ADB91BB794FF; PSTM=1619270293; BAIDUID=567751749BFAD91A29C272E2D4AACA5A:FG=1; BD_UPN=12314753; ispeed_lsm=2; BAIDUID_BFESS=567751749BFAD91A29C272E2D4AACA5A:FG=1; baikeVisitId=7185c3ed-5ecc-4950-8178-d94cc69ca498; COOKIE_SESSION=23580_2_9_9_11_9_1_1_9_3_0_1_23587_170840_10_5_1637216732_1637216727_1637216722%7C9%23170837_168_1637216722%7C9; MCITY=-315%3A; BD_HOME=1; H_PS_PSSID=35105_31660_35049_35065_34584_34505_35234_34872_26350_35144; sugstore=0; BA_HECTOR=002585200l05ak8ldc1gpglf60r'

劫持cookie原理

获取cookie上传至他的服务器

服务器端可以设置cookie：httponly

history

history代表浏览器的历史记录

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

8.操作DOM对象

DOM：文档对象模型

核心

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

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

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

获得dom节点

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

</div>


<script>
    //对应css的选择器
    var feather = document.getElementById('feather');
    var tagName = document.getElementsByTagName('h1');
    var byId = document.getElementById('p1');
    var className = document.getElementsByClassName('p2');

    var children = feather.children;//获取父节点下的所有子节点
    //feather.firstChild;
    //feather.lastChild;

    

</script>

</body>

这是原生代码，之后尽量使用JQuery

更新节点

<div id="id1"></div>
<script>
    var id = document.getElementById('id1');
    

</script>

操作文本

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

id1.innerHTML = '<strong>123</strong>'可以解析HTML文本标签

操作JS

id1.style.color = 'red';
    id1.style.fontSize = '50px'
    id1.style.margin = '100px'
    id1.style.padding = '100px'

删除节点

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

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

</div>

<script>
    var byId = document.getElementById('p1');
	var feather = byId .parentElement;
	feather.removeChild(p1)

	//删除是一个动态的过程
	feather.removeCHild(feather.children[0])
	feather.removeCHild(feather.children[1])
	feather.removeCHild(feather.children[2])
</script>

注意：删除多个节点的时候,children是在时刻变化的，删除节点的时候一定要注意

插入节点

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

追加:

<p id="js">JavaScript</p>
<div id="list">
    <p id="javaSE">javaSE</p>
    <p id="JavaEE">javaEE</p>
    <p id="JavaME">javaME</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.append(js);//追加到后面
</script>

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

<p id="js">JavaScript</p>
<div id="list">
    <p id="javaSE">javaSE</p>
    <p id="JavaEE">javaEE</p>
    <p id="JavaME">javaME</p>
</div>
<script>
    var js = document.getElementById('js');//已存在的节点
    var list = document.getElementById('list');

    //通过JS创建一个新的节点
    var newp = document.createElement('p')//创建一个p标签
    newp.id = 'newP';
    newp.innerText = "Hello Word";

    //创建一个标签节点
    var newScript = document.createElement('script');
    newScript.setAttribute('type','text/javascript')


    var myStyle = document.createElement('style');//创建一个空的style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:red}'//设置标签的内容
    document.getElementsByTagName('head')[0].append(myStyle);


    document.getElementsByTagName('body')[0].innerHTML = '<style>body{background-color: yellow}</style>'


</script>

insert

<p id="js">JavaScript</p>
<div id="list">
    <p id="javaSE">javaSE</p>
    <p id="JavaEE">javaEE</p>
    <p id="JavaME">javaME</p>
</div>
<script>
   var EE = document.getElementById('JavaEE');
   var JS = document.getElementById('js');
   var list = document.getElementById('list')

   //要包含的节点.insertBefore(newNode,targetNode)
   list.insertBefore(JS,EE);


</script>

9.操作表单(验证)

表单 form DOM树

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

表单的目的：提交信息

获得要提交的信息

<body>
<form action="post">
    <p>
    <span>用户名:</span><input type="text" id="username">
    </p>
    <p>
<!--        单选框/多选框的值就是定义好的value值-->
     <span>性别:</span>
        <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女

    </p>
    <p></p>
    <p></p>
</form>
<script>
    var username = document.getElementById('username');
    var boy_radio = document.getElementsByTagName('input')[1];
    var girl_radio = document.getElementsByTagName('input')[2];
    //得到输入框的值
    username.value;
    //修改输入框的值
    username.value = '123';

    //对于单选框，多选框等固定的值。只能取到当前的值
    boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中
    boy_radio.checked = true;

</script>

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

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
<body>
<!--表单绑定提交事件
onsubmit = 绑定一个提交检测的函数，true,false
将这个结果返回给表单，使用onsubmit接收
onsubmit=" return f()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit=" return f()">
    <p>
        <span>用户名:</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码:</span><input type="password" id="password">
    </p>
    <p>
        <input type="hidden" id="md5" name="password"  name="password">
    </p>
    <p>
<!--绑定事件 onclick被点击-->
       <button type="submit" > <!--onclick="f()"--> 提交</button>
    </p>
</form>
<script>
function f(){
    var uname = document.getElementById('username');
    var pwd = document.getElementById('password');
    var md5pwd = document.getElementById('md5')
    //MD5 算法
    console.log(uname.value)

    md5pwd.value = md5(pwd.value)
    console.log(pwd.value)
//可以校验判断表单内容，true就是通过提交，false阻止提交
return true;

}
</script>


</body>

10.jQuery

JavaScript

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

获取jQuery

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

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

</body>
</html>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--
公式:$(selector).action()
-->
<a href="" id="test-jquery">点击</a>
<script>
    //选择器就是css的选择器
    $('#test-jquery').click(function (){
        alert('点击')
    })



</script>

选择器

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

//jQuery
$('p').click()//标签
$('#id1').click()//id
$('.class').click()//class

事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        #divMouse{
            width: 500px;
            height: 500px;
            border: yellow 1px solid;
        }
    </style>
</head>
<body>
<!--获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMouse">
    请移动鼠标
</div>
<script>
    //当网页元素加载完毕之后，响应事件
    // $(document).ready(function () {
    //    
    // })
    $(function () {
        $('#divMouse').mousemove(function (e){
            $('#mouseMove').text('x:' + e.pageX + 'y:' +e.pageY)
        })
    })
    
</script>

</body>
</html>

操作DOM

节点文本操作

$('#test_ul li[name = java]').text()//获得值
$('#test_ul li[name = java]').text('123')//设置值
 $('#test_ul').html()//获得值
 $('#test_ul').html('<strong>123321312</strong>')//设置值

css

$('#test_ul li[name = java]').css({'color':'red','background':'blue'})

元素的显示和隐藏: 本质 display : none

$('#test_ul li[name = java]').hide()
$('#test_ul li[name = java]').show()

$(window).width()
952
$(window).height()
348
$('#test ul li[name = java]').toggle();

半页

https://eternallyevery.github.io/2021/11/20/7-javascript/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源半页 !

学习笔记

09-MySQL

MySQL

2022-01-24 java学习笔记

java学习笔记

08-注解与反射

注解与反射

2021-10-25 java学习笔记

java学习笔记

7-JavaScript

JavaScript

1.什么是JavaScript

1.1 概述

2.快速入门

2.1引入JavaScript

2.2基本语法入门

2.3数据类型

2.4严格检查模式

3.数据类型

3.1字符串

3.2数组

3.3对象

3.4流程控制

3.5Map和Set

3.6 iterator

4.函数

4.1 定义函数

4.2变量的作用域

4.3 方法

5.内部对象

5.1Date

5.2 Json

5.3 Ajax

6.面向对象编程

7.操作BOM对象

8.操作DOM对象

9.操作表单(验证)

10.jQuery

你的赏识是我前进的动力