JavaScript

最新推荐文章于 2022-11-20 14:02:46 发布

Mootry

最新推荐文章于 2022-11-20 14:02:46 发布

阅读量319

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Mootry/article/details/114742623

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、概述

ECMAScript可以理解为JavaScript的一个标准

1.1、引入JavaScript

1、内部标签

<script>
	//....
</script>

2、外部引入

abc.js
<script src = "abc.js"> <script>

1.2、基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--JavaScript严格区分大小写-->
    <script>
        // 1.定义变量       变量类型 变量名 = 变量值
        // var全局变量啊  let局部变量  const常量
        var num = 1;
        // alert(num);
        // 2.条件控制
        if (2>1){
            alert("ture");
        }
        //console.log(score) 在浏览器的控制台打印变量
    </script>
</head>
<body>

</body>
</html>

浏览器必备调试须知在这里插入图片描述

13、数据类型

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

变量
var 全局变量、 let 局部变量、 const 常量

number
js不区分小数和整数

	123	//整数123
	123.1	//浮点数123.1
	1.123e3	//科学计数法
	-99	//复数
	NaN	 //not a number
	Infinity	//表示无限大

字符串
‘abc’，“abc”

布尔值
ture，false

逻辑运算


&&	两个都为真，结果为真
l l	一个为真，结果为真
!	真即假，假即真

比较运算符

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

须知：

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

浮点数问题：

console.lon(1/3) === (1-2/3)
尽量避免使用浮点数进行运算，存在精度问题

    <script>
        console.log(Math.abs(1/3-(1-2/3))<0.00001);
    </script>`

null 和 undefined

null空
undefined未定义

数组
Java的数组必须是类型相同的一组数据、JavaScript不需要

//保证代码的可读性，尽量使用 []
    <script>
      var arr = [1,2,3,"小莫", 'abc'];
      new Array(1,56,'hello' );
    </script>

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

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

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

    <script>
        //Person person = new Person
        var person = {
            name:"小莫",
            age : 3,
            tags:["可爱",17,'java']
        }
    </script>

取对象的值

person.age
3
person.tags
(3) ["可爱", 17, "java"]

1.4、严格检查模式strict

在这里插入图片描述

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

</head>
<body>

</body>
</html>

2、数据类型

2.1、字符串

正常字符串使用单引号or双引号包裹
注意转义字符 \

序列	代表字符
\0	Null字符（\u0000）
\b	退格符（\u0008）
\t	水平制表符（\u0009）
\n	换行符（\u000A）
\v	垂直制表符（\u000B）
\f	换页符（\u000C）
\r	回车符（\u000D）
"	双引号（\u0022）
’	撇号或单引号（\u0027）
\	反斜杠（\u005C）
\xXX	由 2 位十六进制数值 XX 指定的 Latin-1 字符
\uXXXX	由 4 位十六进制数值 XXXX 指定的 Unicode 字符
\XXX	由 1~3 位八进制数值（000 到 377）指定的 Latin-1 字符，可表示 256个字符。如 \251 表示版本符号。注意，ECMAScript 3.0 不支持，考虑到兼容性不建议使用。

多行字符串编写
多行字符串编写，tab上面 esc下面

    <script>
        'use strict';
        //多行字符串编写
        //tab上面 esc下面
        var msg = `你
                   好
                   呀`
    </script>

模板字符串

   <script>
        'use strict';
        //多行字符串编写
        //tab上面 esc下面
        let name = "小莫";
        var msg = `你好呀，${name}`;

    </script>

字符串长度
str.length
通过字符串下标访问
字符串的可变性：不可变
大小写转换

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

student.indexOf(‘t’)
substring

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

2.2、数组

用于存储数据（如何存、如何取，方法都可以自己实现），Array可以包含任意的数据类型

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

长度

arr.length

注意：假如给arr.length赋值，数组大小就会发生变化，如果赋值国小，元素就会丢失

indexOf 通过元素获得下标索引

arr.length(2)	//返回元素2的下标
arr.length("1")	 //返回元素 "1" 的下标
//字符串 和 数字 是不同的

slice() 截取Array的一部分，返回一个新数组，类似与String中的substring（包头不包尾）
push()、pop() 尾部弹出压入

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

unshift()、shfit()头部压入弹出

unshift: 压入到头部
shift: 弹出头部的一个元素

排序sort()

["B", "C", "A"]
arr.sort()
["A", "B", "C"]

元素反转reverse()

["A", "B", "C"]
arr.reverse()
["C", "B", "A"]

链接concat（）
注意：concat（）并没有修改数组，只是会返回一个新的数组

["C", "B", "A"]
arr.concat([1,2,3])
["C", "B", "A", 1, 2, 3]
arr
["C", "B", "A"]

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

["C", "B", "A"]
join()
"C-B-A"

多维数组

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

2.3、对象

若干个键值对

var 对象名 = {
	属性名: 属性值,
	属性名: 属性值,
	属性名: 属性值
}

//定义了一个person对象 它有3个属性
    <script>
        'usr strict';
        var person = {
            name: "小莫",
            age: 17,
            hobby: "singing"
        }
    </script>

Js中对象，{……}表示一个对象，键值对描述属性 xxx: xxx，多个属性之间使用逗号隔开，最后一个属性不加逗号。Javascript中所有的键都是字符串，值是任意对象

对象赋值

person.name = "kk"
"kk"
person.name
"kk"

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

person.hah
undefined

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

delete person.name
true
person
{age: 17, hobby: "singing"}

动态的添加

person.name = "小莫"
"小莫"
person
{age: 17, hobby: "singing", name: "小莫"}

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

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

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

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

2.4、流程控制

if判断
while循环
for循环

'use strict';
let age = 4;
if(age>3){
    alert("haha");
}else if(age<5){
 alert("123456")   
}else{
    alert("5555")
}

forEach循环

let age = [12, 5, 1, 5, 51, 51, 21];
//函数
age.forEach(function (value) {
    console.log(value);
})

for…in

 for(变量 in 对象){
 		在此执行代码
}
//"变量" 可以用来指定变量，指定的变量可以是数组元素，也可以是对象的属性

let age = [12, 5, 1, 5, 51, 51, 21];
//for(let index in object){}
for(let num in age){
    if (age.hasOwnProperty(num)){
        console.log("存在");
        console.log(age[num])
    }
}
    for(let num in age){
                console.log(age[num])
        }
//num 是下标

2.5、Map和Set

ES6新特性

Map：

    'use strict';
        //学生的成绩与学生的名字
        let map=new Map([['tom',80],['jock',90]]);
        let name = map.get('tom'); //通过key获得value
        map.set('admin',100);  //新增
        map.delete('tom');  // 删除
        console.log(name);

Set：无序不重复的集合

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

2.6、iterator

遍历数组

//通过 for(xxx of xxx) 输出数组值    
//for(xxx in xxx) 输出下标
let arr = [3,4,5];
for(let x of arr){
    console.log(x)
}

遍历Map

let map = new Map([['a', 100], ['b', 90]]);
for (let x of map) {
    console.log(x)
}

遍历Set

let set = new Set([2, 3, 4,]);
for (let y of set) {
    console.log(y)
}

3、函数

对象（属性，方法）
函数丢进对象里就成了方法

3.1、定义函数

方式一

绝对值函数

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

一旦执行到return代表函数结束，返回结果。如果没有执行return，函数执行完也会返回结果，结果就是undefined

方式二

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

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

调用函数

abs(10) ;//10
abs(-1); //1

参数问题：

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){
        console.log('x>='+x);
        for(let i =0; i<arguments.length; i++){
            console.log(arguments[i]);
        }

abs(2,3,5)
x>=2
2
3
5

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

3.2、变量的作用域

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

变量在函数体中声明，在函数体外不可以使用（非要想实现的话，后面可以研究用：闭包）

'use strict';
function a() {
    var x = 1;
    x = x + 1;
}
x = x + 2; // Uncaught ReferenceError: x is not define

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

function a() {
    let x = 1;
    x = x + 1;
}
function b() {
    let x = 'A';
    x = x + 2;
}

可以在两个不同函数内部使用了相同的变量名，不冲突

function a() {
    let x = 1;
    x = x + 1;
}
function b() {
    let x = 'A';
    x = x + 2;
}

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

function a() {
    let x = 1;
    //内部函数可以访问外部函数的成员，反之则不行
    function b() {
        let y = x+1; //2
    }
    let z = y+1; //错误：Uncaught ReferenceError: z is not defined
}

内部函数变量和外部函数的变量重名时，若内部变量没有再给此变量赋值，则此时内部变量的值为外部变量的值；若重新赋值，则为新值

        function a() {
            let x = 1;
            function b() {
                let x='A';
                console.log('inner'+x); //outer1
            }
            console.log('outer'+x); //innerA
            b();
        }
        a();

提升变量的作用域

function a(){
    let x="x"+y;
    console.log(x);
    let y='y'
}

结果：Uncaught ReferenceError: q is not defined
    at <anonymous>:1:1

JS执行引擎，自动提升了y的声明，但是不会提升变量y的赋值。

等价于

function b(){
    let y;
    let x="x"+y;
    console.log(x)
    y='y';
}

所有的变量定义都放在函数的头部，不要乱放，便于代码的维护

function a(){
    let x=1,
        y=x+1,
        z,i,a; //undefined
    //之后随意用
}

全部函数可使用

'use strict';
let x = 1;  //全局变量
function f() {
    console.log(x)
}
function k{
	console.log(x)
}

全局对象window，默认所有的全局变量，都会自动绑定在window对象下

var x='xxx';
alert(x);
alert(window.x);

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

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)

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

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

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

// 唯一全局变量
var liapp ={};
//定义全局变量
liapp.name='mo';
liapp.add = function (a,b){
    return a+b;
}

ES6 let关键字，解决局部作用域冲突问题，使用let取定义局部变量

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

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

常量 const

const PI = '3.14'; //只读变量
console.log(PI);
PI = '541'  //报错TypeError:Assignment to constant variable.

3.3、方法

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

var Mo={
    name:'小莫',
    birth:2000,
    //方法
    age:function (){
        // 今天-出生的年
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
//属性
Mo.name
//方法，一定要带()
Mo.age()

this.代表什么？this是无法指向的，是默认指向调用它的那个对象；

function getage(){
    // 今天-出生的年
        var now = new Date().getFullYear();
        return now-this.birth;
}
var Mo={
    name:"小莫",
    birth:2000,
    age:getage
}
//Mo.age()     OK
//getage()   Nan   window对象

apply
在JS中可以控制this指向

function getage() {
    // 今天-出生的年
    var now = new Date().getFullYear();
    return now - this.birth;
}
var Mo = {
    name: "小莫",
    birth: 2000,
    age: getage
}
// Mo.age()     OK
getage.apply(Mo, []); //this,指向了Mo，参数为空。

4、内部对象

标准对象

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

4.1、Date

基本使用

let now = new Date();
now.getFullYear(); //年
now.getMonth();//月   0~11 代表月
now.getDate();//日
now.getDay();//星期几
now.getHours()//时
now.getTime(); //时间戳   全世界统一  1970  1. 12  0：00：00  毫秒数
console.log(new Date(1607158351693))  //时间戳转为时间

转换

now.getTime()
1607158644346
now = new Date(1607158644346)
Sat Mar 13 2021 04:52:52 GMT-0800 (GMT-08:00)
now.toLocaleString()
"2021/3/13上午4:51:05"
now.toGMTString()
"Sat, 13 Mar 2021 12:51:05 GMT"

4.2、JSON

JSON是什么

Json(JavaScript Object Notation,js对象简谱)是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
JSON就是一串字符串只不过元素会使用特定的符号标注。

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

格式：

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

JSON字符串和JS对象的转换

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

JSON和JS对象的区别

var obj = {a:'hello',b:'hellob'};
var json = '{"a":'hello',"b":'hellob'}'

4.3、Ajax

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

5、面向对象编程

什么是面向对象

类：模板原型对象
对象：具体的实例
在Javascript这个需要换一下思维方式！

原型对象

var Student = {
    name:'lijin',
    age:3,
    run:function () {
        console.log(this.name+"runing....");
    }
};
var xiaoming={
    name:'xiaoming'
};
var Bird={
    fly:function () {
        console.log(this.name+"fly...");
    }
};
//原型对象
xiaoming.__proto__=Student;	//小明的原型是Student
xiaoming.__proto__=Bird; //小明的原型是 Bird

class继承
class关键字在ES6引入，定义一个类，属性，方法

class Student{
    constructor(name) {
        this.name=name;
    }
    hello(){
        alert('hello');
    }
}
var xiaoming=new Student('xiaoming');
var xiaohong=new Student('小红');

//控制台
xiaoming.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('i am a student');
    }
}
var xiaoming = new Student('xiaoming');
var xiaohong = new xiaoStudent('小红', 100);

原型链
__proto__

6、操作BOM对象（重点）

JavaScript和浏览器的关系？

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

BOM：浏览器对象模型（在浏览器里操作）

IE 6
Chrome
Safari
FireFox

第三方浏览器

QQ浏览器
360浏览器

window代表浏览器窗口

在这里插入代window.alert(1525)
undefined
window.innerHeight
474
window.innerHeight
507
window.innerWidth
845
//可以调整浏览器窗口再试试码片

Navigator

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

Navigator,封装了浏览器的信息
大多数时候，我们不会使用navigator对象，因为会被人修改。不建议使用这些属性来判断和编写代码。

screen 屏幕尺寸像素

screen.width
1920 px
screen.height
1080 px

location（重要）

host: "www.baidu.com" 	//主机
hostname: "www.baidu.com"	//
protocol: "https:"	//协议
href: "https://wwww.baidu.com/"	//当前指向的位置
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('www.xxx.com') //跳转页面

document (内容：DOM)
document代表当前的页面，HTML DOM文档树

document.title
"新建标签页"
document,title='李'
"李"

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
    <script>
        var dl = document.getElementById('app')
    </script>

获取cookie

document.cookie
"UM_distinctid=175b28ea52d3b-024d49a6993e2b-c7d6957-1fa400-175b28ea52e2b8; CNZZDATA155540=cnzz_eid%3D1738546486-1605016482-%26ntime%3D1605016482"

劫持cookie原理

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

服务器端可以设置cookie：httpOnly

history
history代表浏览器的历史记录

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

7、操作DOM对象

DOM：文档对象模型
（浏览器网页就是一个Dom树形结构）

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点

获得DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JS/1.js"></script>
</head>
<body>
<div id="father">
    <h1>标签一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
</body>
</html>

<script>
    var h1 = document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2')
    var father=document.getElementById('father')
    var childrens=father.children; //获取父节点下的所有子节点
    var childrens=father.children[index]; //获取具体第几个节点
</script>

在控制台输入
 father.firstChild
 father.lastChild

更新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="id1">o1</div>
</body>
</html>
<script>
    let id1 = document.getElementById('id1');
</script>

控制台输入
id1.innerText='456'修改文本的值为456
id1=innerHTML='<strong>123</strong>'相当于HTML的文本标签，可以修改等(解析HTML文本标签)

//属性使用 字符串 包裹
id1.style.color='red'     // 字变为红色
id1.style.fontSize='30px'  // - 转 驼峰命名问题
id1.style.padding='50px'

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

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

//删除是一个动态的过程：
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。就比如（删除了第一个，那么第二个就变成了第一个）。

插入节点（比较复杂）
我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dmo节点已经存在元素了，我们就不能这样做了！这样会产生覆盖，把原来已有的覆盖掉。

追加操作

<!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="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' );
</script>
</body>
</html>

控制台输入
list.appendChild(js); //追加到后面

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

let newp=document.createElement('p');//创建一个p标签
newp.id='newp';
newp.innerText='hello world';
list.append(newp);

//创建一个标签节点（通过这个属性，可以设置任意的值）
let myScripte = document.createElement('script');
myScripte.setAttribute('type', 'text/javascript');
list.appendChild('myScript')

//创建一个style标签
var myStyle = document.createElement('style'); //创建一个空标签style
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{backgeound-color:green;}'; //设置标签内容

document.getElementsByTagName('head')[0].appendchild(myStyle);

insertBefore

<body>
<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 ee = document.getElementById('EE');
    var js = document.getElementById('js');
    var lsit = document.getElementById('list');
    //要包含的节点，insertBefore(nowNode,targetNode)
    lsit.insertBefore(js, ee);
</script>

8、操作表单

8.1、表单是什么

form DOM树

文本框：text
下拉框:
单选框:radio
多选框:checkbox
隐藏域:hidden
密码框:password
……

表单的目的：提交信息

8.2、获得要提交的信息

<!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>
    <!--    多选框的值，就是定义好的value值-->
    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>
</body>
</html>

<script>
    'use strict';
    let input_text = document.getElementById('username');
    let boy_radio = document.getElementById('boy');
    let girl_radio = document.getElementById('girl');
</script>

在控制台输入

//得到输入框的值：
input_text.value
//修改输入框的值
input_text.value = 'xxx';
//对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
boy_radio.checked; //查看返回结果，是否为true，如果为true，则被选中~
boy_radio.checked = true; //用代码来手动选中（赋值）

8.3、提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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="submit" onclick="a()">提交</button>
</form>
</body>
</html>

<script>
    function a() {
        let uname = document.getElementById('username');
        let pwd = document.getElementById('password');
        console.log(uname.value);
        //MD5算法：
        pwd.value = md5(pwd.value);
        console.log(pwd.value);
    }
</script>

8.4、提交表单（MD5加密密码+表单优化）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表单绑定提交事件
onsubmit=绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit接收
-->
<form action="https://www.taobao.com/" method="post" onsubmit=" return a()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="input-password">
    </p>
    <input type="hidden" id="'md5-password" name="password">
    <!--    绑定事件 onclick被点击时..-->
    <button type="submit">提交</button>
</form>
</body>
</html>
<script>
    function a() {
        let uname = document.getElementById('username');
        let pwd = document.getElementById('password');
        let md5pwd = document.getElementById('md5-password');
        md5pwd.value = md5(pwd.value);
        //可以校验判断表单内容，true就是通过提交，false就是阻止提交
        return true;
    }
</script>

9、jQuery

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

获取JQuery：

$(选择器).action(); 【选择器就是css选择器】
百度搜索 cdn jQuery 复制到htm文件
下载导入到lib包

百度复制jQuery引入

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

9.1、选择器

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


//jQuery      css中的选择器全都能用
$('p').click();//标签选择器
$('#id').click(); //ID选择器
$('.class').click(); //类选择器

文档工具站：http://jquery.cuishifeng.cn/

9.1、事件

鼠标事件、键盘事件

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        #divMove {
            width: 200px;
            height: 300px;
            border: #b1ff62 solid 2px;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    移动鼠标
</div>
<script>
    //当网页元素加载完毕之后，响应事件
    // $(document).ready(function (){})
    $(function () {     //就绪函数简写
        $('#divMove').mousemove(function (e) {  //选择id为divMove的东西.当mousemove时,执行f
            $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
        })
    });
</script>
</body>
</html>

操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<ul id="test-ul">
    <li id="js">JavaScript</li>
    <li id="python">Pythom</li>
</ul>
</body>
</html>

在控制台输入
$('#test-ul li[id=js]').text(); //获得值		//若想获得子类,必须先获得父类
$('#test-ul li[id=js]').text('xxx');//设置值
$('test-ul').html();
$('test-ul').html('<strong>123</strong>');

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

在控制台输入
$('#test-ul li[id=js]').show();
$('#test-ul li[id=js]').hide();

娱乐测试

$(window).width();
$(window).height();
$('#test-ul li[id=js]').toggle();  //显示隐藏切换

如何巩固

看jQuery源码，看游戏源码
巩固HTML。CSS（扒网站，全部down下来，然后对应修改看效果）

Mootry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

1、概述ECMAScript可以理解为JavaScript的一个标准1.1、引入JavaScript1、内部标签<script> //....</script>2、外部引入abc.js<script src = "abc.js"> <script>2.2、基本语法入门
复制链接

扫一扫