JavaScript最新 笔记

最新推荐文章于 2024-08-23 15:59:39 发布
最新推荐文章于 2024-08-23 15:59:39 发布
阅读量287 收藏 2
点赞数 1
分类专栏： # 笔记 JavaWeb 笔记 文章标签： javascript js 脚本语言 java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/swaeleeuknow/article/details/114756697
版权

JavaScript

文章目录

1、什么是JavaScript

1.1、概述

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

Java、JavaScript的关系就像周杰和周杰伦的关系（没关系）

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

1.2、历史

JavaScript历史

ECMAScript它可以理解是JavaScript的一个标准
最新版本已经到 es6 版本
但大部分浏览器在停留在 es5 代码上
开发环境—线上环境，版本不一致

2、快速入门

2.1、引入JavaScript
  1. 内部标签
<script>
	alert('hello,world');
</script>
  1. 外部引入
alert('hello,world1');

test.html

    <!--注意：script必须成对出现-->
    <script src="js/qj.js"></script>
2.2、基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本语法</title>

    <script>
        // 1. 定义变量   变量类型    变量名 = 变量值;
        // var num = 1;
        // var name = "swae lee";
        // alert(name);
        var score = 75;
        // 2.条件控制
        if (score>60 && score<70) {
            alert("60~70");
        } else if (score>70 && score<80){
            alert("70~80")
            console.log(score)
        } else {
            alert("other")
        }

        //在浏览器的控制台打印变量！

        /*
        * 多行注释
        * */

    </script>

</head>
<body>



</body>
</html>

浏览器调试必备：
复刻网站：Elements
调试js：Console
打断点：Sources
装包：Network
查看网站cookie：Application
在这里插入图片描述

2.3、数据类型

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

变量
不能以数字开头，可以以 $ 开头

var la = 1;
var 王者荣耀 = "倔强青铜";

number
js不区分小数和整数，Number

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

字符串
‘abc’ “abc”

布尔值
true,false

逻辑运算

&& 双真为真

| | 单真为真

！ 真即假，假即真

比较运算符（重要）

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

这是一个JS的缺陷，坚持不要使用 == 比较
须知：

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

浮点数问题：

alert((1/3) === (1-2/3)) -> false;
alert(Math.abs(1/3-(1-2/3))<0.00000000001) -> true;

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

null 和 undefined

  • null 定义了，为空
  • undefined，未定义

数组
一系列相同类型的对象，JS中不需要这样
Java的数组必须是相同类型的对象

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

        new Array(1,2,3,null,true,'SwaeLee');

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

对象
对象是大括号，数组是中括号
每个属性之间用逗号隔开，最后一个不需要

var person = {
            name:"Swae Lee",
            age:20,
            tags:['hiphop','r&b','pop','jazz','...']
        }

对象取值

person.name

person.age
2.4、严格检查格式

在这里插入图片描述

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

    局部变量名建议使用 let 去定义（前提：IDEA 需要设置支持ES6语法）
    -->
    <script>
        'use strict'
        //默认是全局变量
        let i = 1;
       //ES6 let
    </script>

3、数据类型

3.1、字符串
  1. 正常字符串我们使用 单引号或者双引号包裹
  2. 注意转移字符 \

换行\n
\t
\u4e2d Unicode字符
\x41 Ascll字符

  1. 多行字符串编写
var msg = `
        hello
        world
        你好
        `;
  1. 模板字符串
       let name = "Swae Lee";
        let age = 20;
        let msg = `Wassup,${name}`;

        alert(msg);
  1. 字符串长度
str.length

  1. 字符串的可变性，不可变。

  2. 大小写转变

student.toUpperCase()
student.toLowerCase()
  1. student.indexOf(‘t’)
  2. substring
student.substring('1') //从第一个字符串截取到最后一个字符串
student.substring(1,3)	//[1,3)
3.2、数组

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

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

arr.length

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

  1. indexOf，通过元素获得下标索引
var arr = [0,2];
arr.indexOf(2)
2

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

  1. slice() 截取Array的一部分，返回一个新的数组，类似于String中的substring
  2. push()，pop()
push: 压入到尾部
pop: 弹出尾部的一个元素
  1. unshift（），shift（） 头部
unshift: 压入到头部
shift: 弹出头部的一个元素
  1. 排序 sort()
["B","C","A"]
arr.sort()
["A","B","C"]
  1. 元素反转
arr.reverse()
  1. concat()
concat([1,2,3])

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

  1. 连接符 join
    打印拼接数组，使用特定的字符串连接
["A","B","C"]
arr.join('-')
"A-B-C"
  1. 多维数组
arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
4

数组：存储数据（如何存，如何取，方法都可以自己实现！）

3.3、对象

诺干个键值对

	    var 对象名 = {
          属性名:属性值,
          属性名:属性值  
        }
        var person = {
            name:"Swae Lee",
            age:20,
            email:"swaelee@qq.com",
            score:10
        }

Js中对象，{…}表示一个对象，键值对描述属性 xxx：xxx

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

  1. 对象赋值
person.name = "Swae Lee"
"Swae Lee"
  1. 使用一个不存在的对象属性，不会报错！它只会是undefined
  2. 动态的删减属性
delete person.name
true
  1. 动态的添加，直接给新的属性添加值即可
person.zz = "haha"
"haha"
  1. 判断属性值是否在这个对象中！xx in xx
'age' in person
true

//继承
'toString' in person
true
//可以找到父类的方法
  1. 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('toString')
false
3.4、流程控制

if判断

 var age = 3;
        if (age>3){//第一个判断
            alert("说话")
        } else {
            alert("笑")
        }

while循环

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

for循环

 for (let i = 0; i < 10; i++) {
            console.log("zz")
        }

forEach循环

var age = [1,2,3,4,5,6,7,8,9,10];

        age.forEach(function (value) {
            console.log(value)
        })

for…in

 var age = [5,6,7,8,9,10,11,12,13,14,15];

        //函数
        /*
        for(Type : str : el){
            console.log(num)
        }
         */
        for (var num in age){
            if (age.hasOwnProperty(num)){
                console.log("存在")
            }
            console.log(num)
        }
        存在
 0
 存在
 1
 存在
 2
 存在
 3
存在
 4
 存在
 5
存在
6
存在
 7
存在
 8
 存在
 9
 存在
 10

for (var num in age){
            if (age.hasOwnProperty(num)){
                console.log("存在")
            }
            console.log(age[num])
        }
3.5、Map 和 Set

ES6 的新特性

Map:

<script>
        'use strict';

        //ES6
        //学生的成绩，学生的名字

        var map = new Map([['tom',100],['jack',90],['swae lee',60]]);

        var name = map.get('jack');//通过key获得value
        map.set('admin','123456');//
        console.log(name);

    </script>

Set:无序不重复的集合

 var set = new Set([1,2,1,2,2,1,2,1]);//Set可以去重
        console.log(set);
        Set(2) {1, 2}
        0: 1
		1: 2
        set.add(3)//新增
        set.delete(4)//删除
        console.log(set.has(1))
        true
3.6、iterator

作用：使用 iterator 来遍历迭代我们的Map，Set

遍历map

var map = new Map([['tom',100],['jack',90],['swae lee',60],['sam',70]])
        for (var x of map){
            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){  //把函数赋给abs，abs就是一个函数

}

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

调用函数

abs(10)	 //10
abs(-10) //10

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

参数进来是否存在的问题？
假设不存在参数，如何规避

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

arguments

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

var abs = function(x,y){

            console.log("x=>" + x);

            for (let i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }

            if (arguments.length>1){
                arguments[1];
            }

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

问题：arguments 包含所有的参数，我们有时候想使用多余的参数，我们要排除已有的参数

rest

以前：

function text(a,b){
        console.log("a=>" + a);
        console.log("b=>" + b);
        if (arguments.length>2){
            for (let i = 2; i < arguments.length; i++) {
                
            }
        } 
    }

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

function text(a,b,...rest){
        console.log("a=>" + a);
        console.log("b=>" + b);
        console.log(rest);//不管输入多少个函数，除了a，b都写出来
        
    }

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

4.2、变量的作用域

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

  • 假设在函数体中声明，则在函数体外不可以使用（要想实现，研究闭包）
 function swaelee(){
        var x= 1;
        x = x + 1;
    }
    x = x + 2;//错误

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

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

function swaelee(){
        var x= 1;
        function s2(){
            y = x + 1;
        }
        var z = y + 1;//报错
    }
  • 假设，内部函数变量和外部函数的变量，重名。在JavaScript，函数查找变量从自身函数开始
function swaelee(){
        var x= 1;
        function s2(){
            x = 'A' + 1;
            console.log(x);
        }
        console.log(x);
    }
  • 提升变量作用域
function s2(){
            x = 'x' + y;
        }
        console.log(x);
        function s3(){
            var y;
            var y = 'y';
        }

它会把y的声明自动提上去，但赋值不会被提。

这个是在JavaScript建立之处就存在的特性。养成规范：把变量定义放在函数头部，不要乱放，便于代码维护。

  • 全局函数
//全局变量
    var x = 1;

    function f(){
        console.log(x);
    }

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

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

var x = 'xxx';

    window.alert(x);

    var bialert = window.alert;

    //bialert(x);

    window.alert = function (){

    };

    //alert失效
    window.alert(123);

    //恢复
    window.alert = bialert;
    window.alert(456);

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

  • 规范
    由于所有全局变量都会绑定到window 上。如果不同的js文件，使用了相同的全局变量，冲突-> 如何减少冲突
// 唯一全局变量
    var SwaeLee = {};

    // 定义全局变量
    SwaeLee.name = "SwaeLee";
    SwaeLee.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关键字，解决局部作用域冲突问题！
建议使用 let 去定义局部作用域的变量

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

在 ES6 引入了常量关键字 const

 const PI = '3.14';//只读变量
    console.log(PI);
    PI = '123';//错误
4.3、方法

定义方法

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

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

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

function getAge(){
            //今年 - 出生年
            var now = new Date().getFullYear();
            return now - this.birth;
    }

    var SwaeLee = {
       name:'SwaeLee',
       birth:2000,
       //方法
       age:getAge
    }

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

apply

在js 中可以控制 this 指向

function getAge(){
            //今年 - 出生年
            var now = new Date().getFullYear();
            return now - this.birth;
    }

    var SwaeLee = {
       name:'SwaeLee',
       birth:2000,
       //方法
       age:getAge
    }
    getAge().apply(SwaeLee,[]);//this指向了 SwaeLee，参数为空

5、内部对象

标准对象
type of 123
“number”

5.1、Date

基本使用

var now = new Date();
    now.getFullYear();// 年
    now.getMonth();// 月 0~11    代表月
    now.getDate();// 日
    now.getDay();// 周几
    now.getHours();// 时
    now.getMinutes();// 分
    now.getSeconds();// 秒

    now.getTime();// 时间戳    全世界统一 1970 1.1 0:00:00  毫秒数

    console.log(new Date(123123123213123123));// 时间戳改为时间

转换

now.toLocaleString//调用是一个方法，不是一个属性
now.toGMTString();
5.2、JSON (重点)

json 是什么
早期的传输习惯使用 XML 文件！

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

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

格式：

  • 对象都用 {}
  • 数组都用 []
  • 所有的键值对，都是用 key : value
 var user = {
        name:"swaelee",
        age:18,
        sex:'男'
    }
    var arr = [1,2,3,4,5,6];

    //对象转化为json字符串
    var jsonUser = JSON.stringify(user);//
    var jsonArr = JSON.stringify(arr);//

    //JSON 字符串转化为对象
    var obj = JSON.parse('{"name":"swaelee","age":18,"sex":"男"}');//解析
    var biarr = JSON.parse('[1,2,3,4,5,6]');

console.log(jsonArr)
[1,2,3,4,5,6]
console.log(biarr)
(6) [1, 2, 3, 4, 5, 6]
console.log(jsonUser)
{"name":"swaelee","age":18,"sex":"男"}
console.log(obj)
{name: "swaelee", age: 18, sex: "男"}

JSON 和 JS 对象的区别

JSON
{"name":"swaelee","age":18,"sex":"男"}
JS
{name: "swaelee", age: 18, sex: "男"}
5.3、Ajax (提前了解)
  • 原生的js写法 xhr异步请求
  • jQuey 封装好的 方法$("#name").ajax("")
  • axios 请求

6、面向对象编程

6.1、上面是面向对象

javascript,java,c#… 面向对象：javascript有些区别！

  • 类：模板
  • 对象：具体的实例

在JavaScript大家需要换一下思维方式！

原型:

 var Studnet = {
        name:"swaelee",
        age:19,
        sex:'男',
        run:function(){
            console.log(this.name + "runnin'...")
        }
    };

    //原型对象
    var xiaoming = {
        name:"xiaoming"
    };

    xiaoming.__proto__ = Studnet;
    
    var Bird = {
        fly:function () {
            console.log(this.name + "fly...")
        }
    }

    //  小明的原型 是 Student
    xiaoming.__proto__ = Bird;

class继承

class关键字，是在ES6引入的

  1. 定义一个类，属性，方法
function Student(name){
        this.name = name;
    }

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

    // ES6 之后
    // 定义一个学生的类
    class Student{
        constructor(name){
            this.name = name;
        }
        hello(){
            alert('hello')
        }
    }

继承

// ES6 之后
    // 定义一个学生的类
    class Student{
        constructor(name){
            this.name = name;
        }
        hello(){
            alert('hello' + this.name)
        }
    }

    var xiaoming = new Student("xiaoming");


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

        myGrade(){
            alert('我是一名小学生');
        }
    }
    var xiaohong = new XiaoStudent("xiaohong",1);

本质：查看对象原型

原型链

_pro_:
在这里插入图片描述

7、操作BOM对象（重点）

浏览器介绍

JavaScript 和 浏览器有什么关系？
JavaScript 诞生就是为了能够让他在浏览器中运行！

B/S
BOM：浏览器对象模型

  • IE 6~11
  • Chrome
  • Safari
  • FireFox （Linux默认）

三方

  • QQ浏览器
  • 360浏览器

window

window代表 浏览器窗口

Navigator(不建议使用)

Navigator，封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"

大多数时候，我们不会使用 navigator 对象，因为会被人为修改！
不建议使用这些属性来判断和编写

screen

screen.height
screen.width

location (重要)

location代表当前页面的URL信息

host:主机
href:当前指向位置
protocol:协议
reload:f reload() // 刷新网页

// 设置新的地址
location.assign(新地址)

document

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

document.title = ''

获取具体的文档树节点（能获取就能进行增删）

<script>
    var dl = document.getElementById('app');
</script>

获取cookie

document.cookie

劫持 cookie 原理

<script src="aa.js"></script>
<!--恶意人员:获取你的cookie通过ajax上传到他的服务器-->

服务器端可以设置 cookie：httpOnly

history(不建议使用)

history 代表浏览器的历史记录

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

8、操作DOM对象（重点）

核心

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

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

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

获得dom节点

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

</div>


    <script>

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

            // father.firstChild
            // father.lastChild

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

更新节点

操作文本

    var id1 = document.getElementById('id1');
    id1.innerText='666';// 修改文本的值
    id1.innerHTML='<strong>666</strong>';

操作JS

id1.style.color = 'yellow'; // 属性使用 字符串
id1.style.fontsize='20px'; // 驼峰命名问题

删除节点

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

 <div id="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
    </div>

<script>
		father.removeChild(p1)
</script>

正常流程

<script>
 //找父亲元素
    var self = document.getElementById('p1');
    var father = self.parentElement;
    father.removeChild(p1);
</script>

	father.children;//查看
    father.children[0];//查看
    father.children[1];
    father.removeChildren[0];
    father.removeChildren[1];

注意：删除多个节点的时候，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'),
         list = document.getElementById('list');
        list.append(js);
    </script>

创建一个新的标签，实现差距

//通过JS 创建一个新的节点
    <script>
        var
         js = document.getElementById('js'),//已存在的节点
         list = document.getElementById('list');
        list.append(js);
        //通过JS 创建一个新的节点
        var newP = document.createElement('p');//创建一个P标签
        newP.setAttribute('type','text/javascript');
        /*newP.id = 'newP';
        newP.innerText = 'Travis Scott';

        list.appendChild(newP);*/
        /*
        JavaSE

        JavaEE

        JavaME

        JavaScript

        Travis Scott
         */
        // 创建一个标签节点
        var myScript = document.createElement('script');
        myScript.setAttribute('type','text/javascript');//key value
        list.append(myScript);

    </script>

         */

在head中创建一个css标签

 //可以创建一个Style标签

        var newStyle = document.createElement('style');
        newStyle.setAttribute('type','text/css');
        newStyle.innerHTML = 'body{background-color: greenyellow;}';

        document.getElementsByTagName('head')[0].appendChild(newStyle);

在前面插入 inser

    <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 list = document.getElementById('list');
        //list 当作父节点，在第二个参数节点前面插入第一个参数节点
        list.insertBefore(js,ee);
    </script>

替换、后移节点

		list.after(js);//把参数节点放入最后
        list.replaceChild(js,me);//把第二个参数节点，替换成第一个参数节点的位置，被替换的节点消失。

9、操作表单（验证）

表单是什么？ form DOM

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

表单的目的：提交信息

获得要提交的信息

<form action="post">
    <p>
        <span>用户名:</span> <input type="text" id="username">
    </p>

    <!--多选框的值，就是定义好的value-->
    <p>
        <span>性别:</span>
        <input type="radio" name="gender" value="male" id="boi">男
        <input type="radio" name="gender" value="female" id="girl">女
    </p>
</form>


<script>
    var input_username = document.getElementById('username');
    var radio_boi = document.getElementById('boi');
    var radio_girl = document.getElementById('girl');
    //input_username.value得到输入框的值
    //input_username.value = '123'修改输入框的值


    // 对于单选框，多选框等等固定的值
    // radio_boi.value，只能取得当前的值
    // radio_girl.checked，查看返回的结果，是否为true，是的话被选中
</script>

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

 
 <!--
表单绑定提交事件
onsubmit = 绑定一个提交验证检测的函数，true，false
将这个结果返回给表单，使用 onsubmit 接收

-->

<form action="https://www.baidu.com" method="post" onsubmit="check()">
    <p>
        <span>用户名:</span>
        <input type="text" id="username" required name="username">
    </p>
    <p>
        <span>密码:</span>
        <input type="password" id="pwd" name="input-pwd">
    </p>

    <input type="hidden" id="md5-pwd" name="pwd">

    <!--绑定事件 onclick 被点击-->
    <!--<button type="button" onclick="check()">提交表单</button>-->

    <button type="submit">提交表单z</button>

</form>

<script>
    function check() {
        alert("a");
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-pwd');
        var md5pwd = document.getElementById('md5-pwd');

        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true就是通过提交，false就是组织提交
        return true;
    }
</script>

</body>
</html>

高级设置

<!--
表单绑定提交事件
onsubmit = 绑定一个提交验证检测的函数，true，false
将这个结果返回给表单，使用 onsubmit 接收

-->

<form action="https://www.baidu.com/" method="post" onsubmit="check()">
    <p>
        <span>用户名:</span>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码:</span>
        <input type="password" id="input-pwd">
    </p>

    <input type="hidden" id="md5-pwd" name="pwd"><!--高级方法-->

    <!--绑定事件 onclick 被点击-->
    <!--<button type="button" onclick="check()">提交表单</button>-->

    <button type="submit">提交表单z</button>

</form>

<script>
    function check() {
        alert("a");
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-pwd');
        var md5pwd = document.getElementById('md5-pwd');
        pwd.value = md5(pwd.value)
        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true就是通过提交，false就是组织提交
        return true;
    }
</script>

10、jQuery

JavaScript 和 jQuery

jQuery库，里面存在大量的JavaScript

获取 jQuery

cdn导入


<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>

公式介绍 $(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn导入-->
    <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>

<!--公式: $(选择器).action()-->

<a href="" id="test-query">点我</a>

<script>
    document.getElementById('id');
    //选择器就是css的选择器
    $('#test-query').click(function () {
        alert('hello,it is jquery');
    })
</script>


</body>
</html>

选择器对比

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

   //jQuery
    $('p').click()          // 标签选择器
    $('#id').click()        // id选择器
    $('.class').click()     // class选择器


</script>

js事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.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>
    //当网页元素加载完毕之后，响应事件
    $(function () {
       $('#divMove').mousemove(function (e) {
           $('#mouseMove').text('x:' + e.pageX+',y:' + e.pageY);
       })
    });
</script>

</body>
</html>

js操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>

<ul id="ulx">
    <li class="js1">JavScript</li>
    <li class="p2">Python</li>
    <li name="j3">Java</li>
</ul>

<script>
    // document.getElementById() 原来

    $('#ulx li[name=j3]').text();//文本操作，有值搜索，无值赋值
    $('#ulx li[name=j3]').css("color","greenyellow");//css操作
</script>

</body>
</html>

小技巧

  1. 如何巩固JS (看jQuery源码，看游戏源码！)
  2. 巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果）
PinkandWhite
关注
专栏目录
js javascript笔记
PrimaryColor
07-30 311
JavaScript JavaScript是什么 Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。 JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。 JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果. JavaScript与Java没有任何关系 JavaScript是一种
李立超JavaScript基础篇笔记
02-02
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。JavaScript不是Java的子集，两者之间没有直接关联。JS起初名为LiveScript，但在...
最新版JavaScript笔记
有空就记录一下
07-05 261
1.HTML 2.JavaScript 1).在HTML中引入JS(写在head标签里面） (1) <script type="text/javascript"> ....... </script> (2)src路径可以为绝对路径或者相对路径。 <script type="text/javascript" src="xx.js"> </script> PS：这两种方式只能二选一。 2）特殊的值 值 含义 ...
又双叒叕JavaScript 新增了 7 个方法！
最新发布
08-23 575
在此示例中，odds 集合与 squares 集合的差集是 odds 集合中除去 squares 集合元素后剩余的元素 3, 5, 7，因此 difference() 方法返回了一个包含这些元素的新集合。symmetricDifference() 方法返回一个新集合，该集合包含了此集合或给定集合中的所有元素，但不包含同时存在于这两个集合中的元素，即它们的对称差集。difference() 方法返回一个新集合，该集合包含了此集合中的所有元素，但不包含给定集合中的任何元素，即它们的差集。
Javascript 笔记
ld705454682的博客
06-04 125
1<a href="javascript:void(0);">含义 https://www.cnblogs.com/cyjy/p/6182587.html 2location.search https://www.runoob.com/jsref/prop-loc-search.html
JavaScript笔记
09-02 127
1.document.getElementById("demo").innerHTML = "我的第一段 JavaScript"; 2. 使用window.alert()写入警告框 使用document.write()写入 HTML 输出 使用innerHTML写入 HTML 元素 使用console.log()写入浏览器控制台 3.JavaScrip...
狂神说系列 JavaScript笔记
06-15
【狂神说系列 JavaScript笔记】是一份全面且深入的JavaScript学习资源，旨在帮助开发者和初学者深入理解这门广泛应用于Web开发的脚本语言。这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性，旨在构建一个...
javascript学习笔记
11-24
JavaScript是一种广泛应用于网页和网络应用的编程语言，它在客户端运行，无需专门的编译步骤，而是由浏览器实时解释执行。这种解释型的特性使得JavaScript轻便且灵活，能够快速响应用户交互，提升Web应用程序的动态...
JavaScript学习笔记
08-16
### JavaScript学习笔记精要 #### 一、JavaScript概述 JavaScript是一种重要的编程语言，在现代Web开发中扮演着不可或缺的角色。它最初由Netscape公司的Brendan Eich在1995年开发完成，并且最初的名字叫做...
Javascript基础笔记
08-22
JavaScript 基础笔记 JavaScript 是一种高级的、动态的、基于对象的脚本语言，主要用于客户端的脚本编程。下面是 JavaScript 基础笔记的知识点总结： JS 的位置 * 行内式 JS：直接在 HTML 文件中编写 JavaScript ...
2018JavaScript最新高级编程完整版
03-21
基础篇： 主要包括JavaScript和HTML的基础知识链接: 进阶篇： 主要是对JavaScript一些封装库的讲解链接: 高级篇： 主要是一些项目设计模式和Html5游戏开发的讲解链接:
javascript笔记 (持续更新)
weixin_30586257的博客
02-18 80
1.语言主要分为两大类：编译型语言和解释型语言。 对于静态语言来说（如Java、C++、C），处理上述这些事情的叫编译器（Compiler），相应地对于JavaScript这样的动态语言则叫解释器（Interpreter）。 这两者的区别用一句话来概括就是： 编译器是将源代码编译为另外一种代码（比如机器码，或者字节码），而解释器是直接解析并将代码运行结果输出。我们常用的firebug就是一...
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值