JavaScript最新 笔记

最新推荐文章于 2024-07-12 17:00:05 发布
最新推荐文章于 2024-07-12 17:00:05 发布
阅读量276 收藏 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
关注
专栏目录
div 拖动 拖动层
10-30
div 拖动 div 拖动 div 拖动 div 拖动 div 拖动 div 拖动
【vue弹框和div拖拽功能】vue-elementul弹框拖拽功能，移动拖拽功能，普通div拖拽功能【拿来即用，直接复制】
seeeeeeeeeee的博客
07-23 2252
div拖拽功能，弹框拖拽功能汇总，详细注释版本
Vue 实现div或者组件的「拖拽」功能，（PC和移动端都可以用）
qq_42883292的博客
01-01 4371
Vue 实现div或者组件的 拖拽 功能，（PC和移动端都可以用） 1. 复制这个js到你的项目里 import Vue from 'vue'; /** * 1. 在调用的时候必须写v- * 2. 在使用的组件上或者div的位置必须是绝对的，在需要拖拽的最外层样式上加上 position: absolute; * 3. 使用 v-drag * * @author Zhou Xinchen * @type {DirectiveOptions} */ const drag = Vue.direc
【最近项目小结】使用 Vue 实现一个简单的鼠标拖拽滚动效果插件
最新发布
2401_84434331的博客
07-12 992
return {width:${width}pxheight:transform:这里设置了一个计算属性zoomStye，主要使用就是给外层加一个在的宽，和高，这里我还设置了一个缩放比较，为了是能放大缩小页面，下面讲。运行效果：!接着，我们需要监听鼠标的拖拽来触发滚动条效果，因为需要对 dom 的操作，所以这里把拖拽处理逻辑用 vue 指令封装起来，这样后面有需要，只要使用该指令即可。注意：在 vue 中如果需要对 dom 进行多次操作，最好是把它封装在指令中。
用vue实现H5页面托拽的div(兼容pc与移动端)
2401_84091993的博客
04-18 304
用之前的办法取到的e.target是你点到哪个元素就是哪个元素的dom节点，显然这样是不对的，甚至你点击到子元素会使父元素失效。此组件需要传入id则可以使用，传入的拖拽功能需在不同页面上。==========5.20号跟新。那么就要用jq来获取元素节点。//插槽，这里可以放子元素。
vue实现可拖拽div
zhao97的博客
09-28 3342
HTML <div class="drag-box" v-drag id="drag" v-if="isShowDrag"> <Button type="primary" @click.stop="isShowDrag = false">关闭</Button> </div> CSS .drag-box { position:absolute; top: 100px; left:100px; width:100px; height:100p
Vue项目封装div拖动组件，实现div拖拽
qq_46103732的博客
02-06 2215
场景：在pc端项目中会碰到弹框后多个页面重叠的场景，类似于电脑打开多个文件夹，这时想要同时完整的展示两个页面的内容，就可以拖动页面，改变位置。很多教程都是使用自定义方法在单个组件中使用，本文带大家在Vue项目中封装一个拖拽div的方法，注册全局使用。使用，在需要实现拖拽的div标签上直接加上 v-drag 即可，无需再单独引入。在src下的util文件夹下创建 drag.js文件，存放实现拖拽效果的代码。到此在Vue中实现div拖拽的步骤就结束了，需要的小伙伴快去试试吧！在main.js中注册方法。
从基础到进阶：实现div控件的拖拽和缩放功能
Twinkle_sone的博客
11-30 3410
如果你正在寻找一个详细的教程，从基础到进阶地学习如何实现具备拖拽和缩放特性的div控件，那么本文将是你需要的！我们将从HTML、CSS和JavaScript的基本知识入手，深入讨论拖拽和缩放的核心概念，然后逐步教你如何利用这些技术实现一个强大的div控件。无论你是初学者还是有经验的开发者，都能够从本文中获得有益的指引和实用的技巧。
vue 拖拽div 自定义div拖拽
梁小桐
04-14 758
js 可拖拽div内容框记录 【css】 .dragDrop{width:220px;height:88px;line-height:88px;text-align: center;background: #fff;border-radius: 5px;position: fixed;z-index: 9999;bottom: 8%;left: 5%;box-shadow: 0 0 6px 0 #ff5722;cursor:move;} .dragDrop>a{width: 140px;heigh
javascript拖曳互换div的位置
popstarqq的博客
06-27 771
div拖曳更换div元素位置的实现方式如下；主要利用drag事件 <!-- div拖曳调换顺序 适用gis中切换图层顺序--> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></t...
vue拖动元素
菜菜鸟的博客
11-25 358
工具类 drag.js import Vue from 'vue' // 使用Vue.directive()定义一个全局指令 // 1.参数一：指令的名称，定义时指令前面不需要写v- // 2.参数二：是一个对象，该对象中有相关的操作函数 // 3.在调用的时候必须写v- const drag = Vue.directive('drag', { // 1.指令绑定到元素上回立刻执行bind函数，只执行一次 // 2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象 //
vue制作可拖动的div（超级简单）
泥鸽鸽的博客
10-25 7803
一下方法也是我百度的 但是筛选了好几个 发现这个最简单 只要两步： 1.在单文件组件中将这个自定义指令复制进去 2.在需要的div 写上这个指令即可 // 自定义指令 实现可拖动 directives: { drag(el, bindings) { el.onmousedown = function(e) { var disx = e.pageX - el.offsetLeft var disy = e.pageY - el.offsetTop
vue实现div拖拽互换位置
cxz
09-09 1276
<template> <transition-group tag="div" class="container"> <div v-for="(item,index) in items" :key="item.key" class="item" :style="{background:item.color,width:'80px',height:'80px'}" draggable="true" @dragstart="handleDragStart($event, .
vue中可以移动div的 效果
qq_44161703的博客
10-12 1014
【代码】vue中可以移动div的 效果。
拖拽功能 php,如何使用Vue实现拖拽功能
weixin_36300491的博客
03-16 151
这次给大家带来如何使用Vue实现拖拽功能，使用Vue实现拖拽功能的注意事项有哪些，下面就是实战案例，一起来看一下。效果图：HTML代码：位置x:{{val.x}} y:{{val.y}}//注意这里要通过指令绑定函数将当前元素的位置数据传出来JS代码：Vue.directive('drag',//自定义指令{bind:function (el, binding) {let op = el; //...
div拖拽（用户托动）
可乐加冰的博客
06-17 293
div拖拽（用户托动） 直接看代码 其中，left是盒子到父级的左边距，top同理 a为元素，box是父级盒子 核心代码 // 拖拽事件 function tuozhuai(e,left,top){ // 获取盒子宽 var width = a.offsetWidth; var height = a.offsetHeight; //获取x坐标和y坐标 var nowX = e.clientX; var nowY = e.clientY; document.onmousemo
div鼠标拖拽效果
ycy69616666的博客
06-02 733
思路： 1.先定义一个div，并设置一个定位 position: absolute; （如果没有定位鼠标拖拽将无法生效） 2.监听鼠标按下mousedown，鼠标抬起mouseup，鼠标移动mousemove事件 3.定义一个变量来标记鼠标是否按下 let canMove = false； 4.在mousemove事件中判断如果按下，则将鼠标位置赋值给div 5.按下时记录鼠标与div的相对位置，移动时减去这段距离 6.在mousemove事件中阻止默认行为（ e.preventDefault();），防止
鼠标拖动div移动
H&B Blog
08-03 2216
实现鼠标能够拖动div 实现div的随意拖拽，需要注意的就是不能拖着拖着div在浏览器里面消失，因此需要进行位置计算。 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标拖动div</title> <style&gt...
event 事件div块的拖拽
weixin_33919950的博客
03-12 114
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 100px; height: 100px; background: ...
js实现DIV拖拽布局
09-08
js实现DIV拖动布局，可以用来实现自定义桌面
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值