JavaScript学习笔记

已于 2022-01-20 15:38:55 修改
阅读量147 收藏 1
点赞数 1
分类专栏： JavaScript学习 文章标签： javascript
于 2021-07-26 17:07:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52476758/article/details/119113012
版权

1、什么是JavaScript

1.1、概述

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

1.2、历史

​ https://blog.csdn.net/kese7952/article/details/79357868

2、快速入门

2.1、引入JavaScript

1、内部标签使用

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

2、外部引入

abs.js

//....

test.html

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

测试代码

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

    <!--  script标签内，写JavaScript代码  -->
    <!--    <script>-->
    <!--        alert('hello,world');-->
    <!--    </script>-->

    <!--  外部引入，script必须成对出现  -->
    <script src="js/qj.js"></script>
</head>
<body>

</body>
</html>

2.2、基本语法入门

<!--  JavaScript严格区分大小写  -->
        <script>
        // 1、定义变量    变量类型    变量名=变量值
        var score=78;
        // 2、条件控制
        if(score>60&&score<70){
            alert("60~70")
        }else if(score>70&&score<80){
            alert("70~80")
        }else{
            alert("other")
        }

        // console.log(score) 在浏览器的控制台打印变量，相当于System.out.println();
        /*
        * aadasdan
        * */

    </script>

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

2.3、数据类型

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

变量

var _$

number

js不区分小数和整数，Number

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

字符串

‘abc’ “abc”

布尔值

true false

逻辑运算

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

比较运算符

=	赋值
==	等于(类型不一样，值一样，也会判断为true)
===	绝对等于(类型一样，值一样，结果为true)
  • NaN===NaN，这个与所有的数值域都不相等，包括自己

浮点数问题：

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

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

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

null和undefined

  • null 空
  • undefined 未定义

数组

​ java的数组不许是相同类型的对象，而js中不需要这样

// 保证代码的可读性，尽量使用中括号
var arr=[1,2,3,4,5,'hello',null,true];
new Array(1,12,2,3,4,4,5,'hello');

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

对象

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

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

// Person person=new Person(1,2,3,4,5);
var person={
    name:"zhiyu",
    age:18,
    tages:['js','java','web','...']
}

取对象的值

person.name
> "zhiyu"
person.age
> 18

2.4、严格检查模式

<script>
    'use strict';   // 前提：IEDA需要设置支持ES6语法，严格检查模式，预防JavaScript的随意性                            产生的一些问题，必须写在JavaScript的第一行
    // 局部变量建议使用let定义	ES6 let 
    // 全局变量
    var i=1;
</script>

3、数据类型

3.1、字符串

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

  2. 注意转义字符 \

    \'
\n     换行
\t
\u4e2d    \u#####	unicode字符
\x41	Ascll字符

  3. 多行字符串编写

    // tab上面esc键下面
var msg=
	'hello
	world
	你好ya
	你好'

  4. 模板字符串

    let name="zhiyu";
let age=18;
let msg='你好呀,${name}';
console.log(msg);

  5. 字符串长度

    var student="student";
console.log(student.length)

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

  7. 大小写转换

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

  8. 获取指令的下标

    student.indexOf('t')
> 1

  9. 截断

    student.substring(1)	// 从第一个截取到最后一个
> tudent
student.substring(1,3)	// [1,3)
> tu

3.2、数组

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

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

  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. 排序

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

  7. 元素反转

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

  8. concat()

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

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

  9. 连接符jojn

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

    > (3) ["C", "B", "A"]
arr.join('-')
> "C-B-A"

  10. 多维数组

    arr=[[1,2],[3,4],["5","6"]]
> (3) [Array(2), Array(2), Array(2)]
arr[1][1]
> 4

3.3、对象

​ 若干个键值对

var 对象名={
    属性名:属性值,
    属性名:属性值,
    属性名:属性值,
    ...
}
    //定义一个person对象，它有四个属性
    var person={
            name:"zjhiyu",
            age:18,
            email:"267891772@qq.com",
            score:0
        }

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

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

  1. 对象赋值

    person.name="queen"
> "queen"
person.name
> "queen"

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

    person.faf
> undefined

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

    delete person.name
> true
person

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

    person.haha="haha"
> "haha"
person

  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判断

var age = 3;
if(age>3){
    alert("hahaha");
}else if(age<5){
    alert("wmwm");
}else{
    alert("kuang");
}

循环,避免程序死循环

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

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

for循环

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

forEach循环

5.1引入

var age=[12,3,12,3,12,3,12,31,23,123];
age.forEach(function (value) {// 函数
    console.log(value)
})

for…in

for(var num in age){
    if(age.hasOwnProperty(num)){
        console.log("存在")
        console.log(num)
    }
}

3.5、Map和Set

ES6新特性

//ES6
// 学生的成绩，学生的名字
// var names=["Tom","Jack","haha"];
// var scores=[100,90,80];

var map=new Map([["Tom",100],["Jack",90],["Haha",80]]);
var name=map.get("Tom");// 通过key获得value
map.set("Admin",123456);//新增
map.delete("Tom");	//删除
console.log(name);

Set：无序不重复的集合

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

3.6、iterator

遍历数组

// 通过for of/ for in 下标
var arr=[3,4,5];
for (var x of arr){
    console.log(x)
}

遍历map

var map=new Map([["Tom",100],["Jack",90],["Haha",80]]);
for(let x of map){
    console.log(x)
}

遍历Set

var set=new Set([5,6,7]);
for(let x of set){
    console.log(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就可以调用函数

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

参数进来是否存在的问题？

假设不存在参数，如何规避？

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

arguments

arguments是一个js免费赠送的关键字，代表传递进来的所有参数，是一个数组！

function abs(x){
    console.log("x=>"+x);
    for(var i=0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

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

rest

以前：

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

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

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

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

4.2、变量作用域

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

假设在函数体中声明，则在函数体外不能使用，（非要实现的话，可以研究一下闭包）

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

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

function qj() {
    var x=1;
    x=x+1;
}
function qj2() {
    var x='A';
    x=x+1;
}

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

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

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

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

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

提升变量的作用域

function qj() {
    var x="x"+y;
    console.log(x);	//结果xundefined，说明js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值
    var y="y";
}
function qj2() {   // 等价与qj()
    var y;
    var x="x"+y;
    console.log(x);
    y="y";
}

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

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

全局函数

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

全局对象window

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

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 LiuApp={};
// 定义全局变量
LiuApp.name='zhiyu';
LiuApp.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出了这个作用域还可以使用
}

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

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

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

常量const

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

var PI='3.14';
console.log(PI);
PI='314';   // 可以改变这个值
console.log(PI);

在ES6引入了常量关键字const

const PI='3.14';
console.log(PI);
PI='314';   // TypeError:Assignment to constant variable
console.log(PI);

4.3、方法

定义方法

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

var zhiyu={
    name:'栀虞',
    birth:2020,
    // 方法
    age:function () {
        // 今年-出生的年
        var now=new Date().getFullYear();
        return now-this.birth;
    }
}

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

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

function getAge() {
    // 今年-出生的年
    var now=new Date().getFullYear();
    return now-this.birth;
}
var zhiyu={
    name:'栀虞',
    birth:2020,
    // 方法
    age:getAge();
}

// zhiyu.age()   OK
// getAge()   NaN window

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

apply

在js中可以控制this指向

function getAge() {
    // 今年-出生的年
    var now=new Date().getFullYear();
    return now-this.birth;
}
var zhiyu={
    name:'栀虞',
    birth:2020,
    // 方法
    age:getAge();
}

getAge().apply(zhiyu,[]);   // this. 指向了zhiyu,参数为空

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

基本使用

var now=new Date(); //Fri Jul 23 2021 11:16:11 GMT+0800 (中国标准时间)
now.getFullYear();  // 年
now.getMonth(); // 月    0~11
now.getDate();  // 日
now.getHours(); // 时
now.getDay();   // 星期
now.getMinutes();   // 分
now.getSeconds();   // 秒

now.getTime();  // 时间戳，全世界统一 1970 1.1 0:00:00 毫秒数
console.log(new Date(1627010468844))	// 时间戳转为时间

转换

now=new Date(1627010468844)
> Fri Jul 23 2021 11:21:08 GMT+0800 (中国标准时间)
now.toLocaleString	// 注意调用是一个方法，不是一个属性
> ƒ toLocaleString() { [native code] }	
now.toLocaleString()
> "2021/7/23上午11:21:08"
now.toGMTString()
> "Fri, 23 Jul 2021 03:21:08 GMT"

5.2、JSON

JSON是什么？

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

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

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

格式：

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

JSON字符串和JS对象的转化

var user={
    name:"zhiyu",
    age:18,
    sex:"女"
}
// 对象转换为JSON对象,{"name":"zhiyu","age":18,"sex":"女"}
var jsonUser=JSON.stringify(user)
// json 字符串转换为对象,参数为json字符串	{name: "zhiyu", age: 18, sex: "女"}
var obj=JSON.parse('{"name":"zhiyu","age":18,"sex":"女"}')

JSON字符串和JS对象的区别

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

5.3、Ajax

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

6、面向对象编程

原型对象

在JavaScript中需要换一下思维方向！

  • 类：模板

  • 对象：具体的实例

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

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')
    }
}

var xiaoming=new Student("xiaoming");
var xiaohong=new Student("xiaohong");
xiaoming.hello()

  2. 继承

    class XiaoStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    myGrade(){
        alert("我是一名小学生")
    }
}

var xiaohong=new XiaoStudent("xiaohong",1);

    本质：查看对象原型

在这里插入图片描述

原型链

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

7、操作BOM对象

浏览器介绍

JavaScript和浏览器关系？

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

BOM:浏览器对象模型

  • IE 6~11
  • Chrome
  • Safari
  • Firefox

三方浏览器

  • QQ浏览器
  • 360浏览器

window

window 代表浏览器窗口

window.alert(1)
> undefined
window.innerHeight
> 150
window.innerWidth
> 640
window.outerHeight
> 696
window.outerWidth
> 656
// 可以调整浏览器窗口进行查看

Navigator 不建议使用

Navgator ，封装了浏览器信息

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

大多数时候，我们不会使用Navigator对象，因为会被认为修改！

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

screen

// 代表屏幕尺寸
screen.width
> 1280
screen.height
> 720

location

location 代表当前网页的URL信息

hash: ""                 //代表主机
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ƒ reload()		// 重新加载，刷新网页
location.assign('https://blog.kuangstudy.com/')	//设置新的地址

document

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

document.title
> "百度一下，你就知道"
document.title='栀虞'
> "栀虞"

获取具体的文档结点

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

获取cookie

document.cookie
> ""

劫持cookie

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

服务器端可以设置 cookie:httpOnly

history 代表浏览器的历史记录 不建议使用

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

8、操作DOM对象

BOM：文档对象模型

核心：

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

  • 更新：更新DOM节点
  • 遍历DOM结点：得到DOM节点
  • 删除：删除一个DOM节点
  • 添加：添加一个新的节点##

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

<script>
    // 对应css的选择器
    var h1=document.getElementsByClassName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementById('father');
    
    var childrens=father.children;  // 获取所有父节点下的子节点
    // father.firstChild
    // father.lastChild
    
    p1.next
</script>

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

更新结点

操作文本

  • id1.innerText='123' 修改文本的值
  • id1.innerHTML='<strong>123</strong>' 可以解析HTML文本

操作css

id1.style.color='red'
> "red"
id1.style.fontSize='200px'
> "200px"
id1.style.padding='2em'
> "2em"

删除结点

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

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

	// 删除是一个动态过程
	father.removeChild(father.children[0])	//移除第一个元素
	father.removeChild(father.children[1])
	father.removeChild(father.children[2])
</script>

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

插入节点

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

追加

<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>

效果：

在这里插入图片描述

创建一个新的标签

<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');

    // 通过js一个新的节点
    var newP=document.createElement('p');   // 创建一个p标签
    newP.id='newP';
    newP.innerText='Hello,zhiyu';
	//创建一个标签节点	（通过这个属性，可以设置任意的值）
    var myScript=document.createElement('script');
    myScript.setAttribute('type','text/javascript');
	// 可以创建一个style标签
    var myStyle=document.createElement('style');    // 创建了一个空style标签
    myStyle.setAttribute('type','text/css');    
    myStyle.innerHTML='body{background-color: chartreuse;}';    // 设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle);

    list.appendChild(newP);
</script>

insertBefore

var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode);
list.insertBefore(js,ee);

9、操作表单（验证）

表单是什么？ form DOM树

  • 文本框 text
  • 下拉框
  • 单选框 redio
  • 多选框 checkbox
  • 隐藏域 hidden
  • 密码框 password
  • …

表单的目的：提交信息

获得要提交的消息

<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="woman" id="girl">女
    </p>
</form>
<script>
    var input_text=document.getElementById('username');
    var boy_radio=document.getElementById('boy');
    var girl_radio=document.getElementById('girl');
    // 得到输入框的值
    input_text.value;
    // 修改输入框的值
    input_text.value='123';
    // 对于单选框、多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;  // 查看返回的结果，是否为true，如果为true，则被选中
    boy_radio.checked=true; // 赋值 
</script>

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

<!-- 表单绑定提交事件
οnsubmit=绑定一个提交检测的函数，true，false
这个结果返回给表单，使用onsubmit 接收
οnsubmit="return aaa()"
-->

<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="input-passworld">
    </p>
    <input type="hidden" id="md5-passworld" name="passworld">
    <!--  绑定事件 onclick 被点击 -->
    <button type="submit" onclick="aaa()">提交</button>
</form>

<script>
    function aaa() {
        alert(1)
        var uname=document.getElementById('username');
        var pworld=document.getElementById('input-passworld');
        var md5pworld=document.getElementById('md5-passworld');
        
        // pworld.value=md5(pworld.value)
        
        md5pworld.nodeValue = md5(pworld.value);
        // 可以判断表单内容，true就是通过提交，false阻止提交
        return true;
    }
</script>

md5工具

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

10、jQuery

JavaScript

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

获取jQuery https://www.bootcdn.cn/jquery/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    // <script src="lib/jquery-3.4.1.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>

选择器

文档工具站：https://jquery.cuishifeng.cn/ 或 https://www.jquery123.com/

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

    // jQuery   css中的选择器他都能用
    $('p').click();  // 标签选择器
    $('#id1').click();   // id选择器
    $('.class1').click();    // class选择器
</script>

事件

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--要求：获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">在这里移动鼠标试试</div>
<script>
    // 当网页元素加载完毕之后响应事件
    //$(document).ready(function () {
    $(function () {
        $('#divMove').mousemove(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('12312');	// 设置值
$('#test-ul').html();	// 获得值
$('#test-ul').html('<strong>12312</strong>');		// 设置值

css的操作

$('#test-ul li[name=python]').css({"color","red"})

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

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

娱乐测试

$(window).width()
> 1280
$(window).height()
> 194
$(document).width()
> 640
$(document).height()
> 193
栀虞子
关注
专栏目录
javascript学习笔记
Creabine的博客
12-02 1578
◆javascript的基本介绍 1.js 是用于web开发的脚本语言       脚本语言是什么？       1）脚本语言往往不能独立使用，它和html/jsp/php/asp/asp.net配合使用       2）脚本语言有自己的变量，函数，控制语句（顺序，分支，循环）       3）脚本语言实际上是解释性语言（即在执行的时候直接对源码进行执行）       4）ja
Javascript学习笔记
Web技术学习笔记
09-14 360
待学习
iframe给主页面元素赋值【使用jquery获取页面数据】
weixin_30839881的博客
03-01 161
在框架中，我将组织成的 HTML 代码，最后将其填充至上层文档的一个元素中。按照一般的写法，我们需要用到类似如下的语句： 1.window.parent.document.getElementById("myEle").innerHTML = html;使用 jQuery ，写法如下： 1.$("#myEle", window.parent.document).html(html);...
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1077
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 885
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
使用 uni-app 开发微信小程序的详细指南
2301_79685859的博客
09-16 506
uni-app是一个使用 Vue.js 框架开发跨平台应用的前端框架。开发者通过编写一套代码，可以生成多端应用，包括 H5、iOS、Android、微信小程序、支付宝小程序、字节跳动小程序等。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 530
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 293
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 276
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 633
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 815
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
echarts饼图内容循环播放实现
qq_39877681的博客
09-12 309
echarts饼图内容循环播放实现
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 918
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
计算机毕业设计 网上书店系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
最新发布
weixin_19164791635
09-16 839
本文介绍了一款基于Java、SpringBoot和Vue.js技术的网上书店系统。该系统为管理员、用户和卖家提供了图书信息浏览、订单管理、个人中心管理等功能，旨在打造一个便捷、高效的在线购书平台。系统通过优化图书销售流程，提升用户体验，推动出版行业的数字化转型，促进知识传播和文化交流。
一文读懂 JS 中的 Set 结构
沐爸的博客
09-11 1006
Set 如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值