JavaScript 学习

m0_61422721

已于 2022-08-14 18:54:19 修改

阅读量239

点赞数

文章标签： javascript

于 2022-08-03 19:14:29 首次发布

本文链接：https://blog.csdn.net/m0_61422721/article/details/126143241

版权

一、快速入门

1.引入JavaScript

（1）内部标签

<script>
    alert("hello")
</script>

（2）外部引入

<script src="###"></script>

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--第一种方式，内部引用 -->
<script>
    /**
     * script标签内写JavaScript代码，script标签必须成对出现。
     */
    alert("hello")
</script>
<!--第二种方式，外部引用-->
<script src="js/js.js"></script>
</body>
</html>

2.基础语法

因为JS是弱语言，里面不用声明类型。
统一用var来声明变量
在ES6新增加了let和const来声明变量。

<!--JavaScript严格区分大小写！-->
    <script>
        // 1. 定义变量    变量类型  变量名  = 变量值;
        // 注：在JavaScript中不存在变量类型，一切的变量都叫var，对于var并没有一个固定的变量类型的限制
        var score = 71;// 此时score就是一个数字类型的变量
        var name='qqqdweob';// 此时name就是一个字符串类型的变量
        // alert(score);
        // 2. 条件控制
        if (score>60 && score<70){
            alert("60~70")
        }else if(score>70 && score<80){
            alert("70~80")
        }else{
            alert("other")
        }
    </script>

3.数据类型

（1）Number

//--- number
var a  = 1;
a = 123//整数
a = 123.1//浮点数
a = -99//负数
a = NaN//not a number，当无法计算结果时用NaN表示
a = 1.2345e3//科学计数法表示1.2345X1000，等同于1234.5
InFinity//InFinity表示无限大，当数值超过了JavaScript的Number能表示的最大值时表示为InFinity

（2）字符串

//--- 字符串
var b = "abc";
b = 'cba';

（3）布尔值

//--- 布尔值
var c = true;
c = false;
true; // 这是一个true值 
false; // 这是一个false值 
2 > 1; // 这是一个true值 
2 >= 3; // 这是一个false值

（4）运算符

逻辑运算符

//--- 逻辑运算符
&&  //两个都为真，结果为真
||    //一个为真，结果为真
!    //真即假，假即真

比较运算符

//--- 比较运算符
=      //赋值运算法
==     //等于（类型不一致，值一样，也会判断为true  即判断1=='1'）
===    //绝对等于（类型一样，值一样，结果为true）

（5）浮点数问题

(1/3)===(1-2/3) //结果为false

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

Math.abs(1/3-(1-2/3))<0.00000001 //结果为true

（6）null和undefined

null 空

它和 0 以及空字符串 “ “ 不同， 0 是一个数值， “ “表示长度为0的字符串，而 null 表示“空”。

undefined 未定义

大多数情况下，我们都应该用 null 。 undefined 仅仅在判断函数参数是否传递的情况下有用。

（7）数组

Java的数组必须是相同类型的对象。JS中不需要这样！
数组是一组按顺序排列的集合，集合的每个值都称为元素。
JS的数组可以包括任意数据类型。

[1, 2, 3.14, 'Hello', null, true];

（8）对象

对象是大括号，数组是中括号
每一个属性之间使用逗号隔开，最后一个不需要加逗号
JavaScript的对象是一组由键值对组成的无序集合

var person = { 
    name: 'Bob', 
    age: 20, 
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing', 
    hasCar: true, 
    zipcode: null 
};

（9）变量

变量在JS中就是用一个变量名表示
变量名是大小写英文、数字、 $ 和 _ 的组合，且不能用数字开头
变量名也不能是JS的关键字，如 if 、 while 等
申明一个变量用 var 语句

var a; // 申明了变量a，此时a的值为undefined-未定义
var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1 
var s_007 = '007'; // s_007是一个字符串
var Answer = true; // Answer是一个布尔值true 
var t = null; // t的值是null

4.严格检查模式

在同一个页面的不同的JS文件中，如果都不用 var 声明，而恰好都使用了变量 i ，将造成变量 i 互相影响，产生难以调试的错误结果。
使用 var 声明的变量则不是全局变量，它的范围被限制在该变量被声明的函数体内，同名变量在不同的函数体内互不冲突。
为了修补JS这一严重设计缺陷，ECMA在后续规范中推出了strict模式，在strict模式下运行的JS代码，强制通过 var 声明变量，未使用 var 声明变量就使用的，将导致运行错误。
启用strict模式的方法是在JavaScript代码的第一行写上

'use strict';

代码：

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

二、数据类型

1.字符串

正常字符串使用单引号、双引号包裹

console.log('a');
console.log("a");

注意转义字符

'\n'              //表示换行
'\t'              //表示制表符
'\x41';         // 完全等同于 'A';ASCII字符可以以 \x## 形式的十六进制表示
'\u4e2d\u6587'; // 完全等同于 '中文';以用 \u#### 表示一个Unicode字符

多行字符串

var msg=
`hello
world
你好呀
你好ya`
console.log(msg)

模板字符串

let name ="aaa";
let age =154;
let msg =`你好呀,${name}`//此处为反引号
console.log(msg)

字符串长度

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

console.log(student[0])

字符串的可变性

var student="student"
student[0]=1

console.log(student)

大小写转换

//注意：这里是方法，不是属性了
var student="student"
student.toUpperCase()

student.toLowerCase()

字符串查找

var student="student"
console.log(student.indexOf('t'))

console.log(student.indexOf('u'))

截取

var student="student"
student.substring(1)//从第一个字符串截取到最后一个字符串

student.substring(1,3)//下标几到下标几

student.substring(0)

2.数组

长度

arr.length

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

获得下标索引

var arr=[1,2,3,"1","3"]
arr.indexOf(3)
arr.indexOf("3")
//注意：字符串的"1"和数字的1是不一样的

数组截取

截取数组的一部分，返回一个新的数组.类似于string中的substring()

var arr=[1,2,3,4,5,6]
arr.slice(3)

元素操作

对尾部元素的操作

//  push():插入到尾部；
//  pop()：删除尾部的一个元素
var arr=[1,2,3,4,5,6]
arr.push("a","b")

arr.pop()

对头部元素进行操作

//  unshift():插入到头部；
//  shift()：删除头部的一个元素；
var arr=[1,2,3,4,5,6]
arr.unshift("a","b")

arr.shift()

排序

var arr=["c","b","a"]
arr.sort()

元素反转

var arr=["a","b","d"]
arr.reverse()

数组连接

var arr = ['A', 'B', 'C']; 
arr.concat([1, 2, 3]); 
//注意：concat（）并没有修改当前数组，只是返回了一个新的数组
console.log(arr)

指定字符串连接

var arr = ['A', 'B', 'C', 1, 2, 3]
arr.join('-');

注意：如果 Array 的元素不是字符串，将自动转换为字符串后再连接。

多维数组

let arr = [[1,2], [3,4], ['a','b']];

3.对象

var 对象名 = {
    属性名:属性值，
    属性名：属性值，
    属性名：属性值
}
//定义了一个person对象
var person ={
    name:"xiaoming",
    age:3,
    email:"123@qq.com",
    score:100
}

对象赋值

person.name="chen"

动态删减属性

delete person.name

动态添加

person.haha="haha"

判断属性值是否在对象中

'gogo' in person

判断一个属性是否自身拥有

person.hasOwnProperty('age')

4. 流程控制

if判断

var age=3;
if (age <= 3) {
    alert("haha");
} else (age<5){
    alert("kuwa~")
} else{
    alert("nb")
}

while循环

var age=3;
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循环

var array=[123,312,312,23,123,21,123];
    array.forEach(function (value){
    console.log(value);
}

for(var index in object){}利用下标遍历数组

for (var num in array){
    console.log(array[num]);
}

for……of遍历数组

var array=[123,312,312,23,123,21,123];
    for (var num of array){
    console.log(num)
}

5.Map和Set

Map：Map集合每个元素有两个值，一个key值一个value值，key用来获得value值

var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom');//通过key获得value
map.set('admin',123456);//set新增或修改
console.log(name);//返回一个100
map.delete('tom');//删除

Set：无序不重复集合

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

6.iterator

遍历map

var map = new Map([['tom',100],['jack',90],['haha',80]]);
        for (var x of map){//x是map的下标
            console.log(x);//循环下标输出
        }

遍历set

var set = new Set([3,1,1,1]);//Set可以自动去除重复
    for (var x of set){
        console.log(x);
    }

三、函数

1.函数定义调用

（1）定义方式一

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

（2）定义方式二

   var abs = function(a){//这样写出来的是匿名函数
            if(a>=0){
                return a;
            }else{
                return -a;
            }
        }
        abs(2);//可以通过变量abs来调用函数

（3）调用函数

abs（10）//10
abs（-5）//5

（4）arguments

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

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

（5）rest

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

function abs (x,y...rest){
    console.log(rest);
}

2.变量作用域

function a(){
    var x = 1;
    //内部函数可以访问外部函数的成员，反之不行
    function a1(){
        var y = x +1; //2
    }
    //外部访问了内部函数的变量，会不行
    var z = y+1; //报错
}

变量的一般使用

function zhang(){
    var x,y,z;
    //之后再赋值调用
}

全局对象

var x ='xxx';
window. alert(x);
var o1d_ _alert = window. alert;
//o1d_ alert(x);
window.alert = function () {};
//发现alertO 失效了
window. alert(123);
//恢复
window.alert = o1d_ _alert;
window. alert(456);

局部作用域

function aaa() {
for(vari=0;i<100;i++){
    console.log(i)
}
console.log(i+1); 
}
//使用let后
function aaa() {
for(leti=0;i<100;i++){
    console.log(i)
}
console.log(i+1); 
}

常量const

const PI = '3.14';
console.log(PI);
PI = '123';

3.方法

定义方法

var person = {
    name: 'wu';
    brith: 2002;
    //方法 
    age: function(){
        var now = new Date().getFullYear();
        return now - this.brith; //this是默认指向调用它的那个对象，这里值person
    }
}
//属性调用
person.name;
//方法调用，方法一定要带（）
person.age();

apply方法

function getAge(){
    var now = new Date().getFullYear();
    return now - this.brith;
}
getAge.apply(person,[]);

四、标准对象

typeof 123
"number"
typeof "sdf"
"string"
typeof NaN
"number"
typeof {}
"object"
typeof []
"object"
typeof true
"boolean"
typeof Math.abs
"function"
typeof undefined
"undefined"

1.Date

基本使用

var now = new Date();
now.getFullYear();//年
now.getDate()//日
now.getTime()//时间戳，全世界统一，  1970 1.1 0：00：00
now.getMonth() //月  0-11
console.log(new Date(1609988287431))//时间戳转为时间

转换

new Date(1609988287431)//时间戳转为时间
now.toGMTString()
"Thu, 07 Jan 2021 02:58:07 GMT"
now.toLocaleString()
"2021/1/7 上午10:58:07"

2.JSON

JSON是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
对象都用{}
数组都用[]
所有的键值对都是用key:value

var user = {
    name: "xiaoming",
    age: 3,
    sex: "boy"
}

var jsonUser =JSON.stringify(user);
//json对象转化为对象，参数为json
var obj = JSON.parse('{"name":"xiaoming","age":3,"sex":"boy"}');

json和js对象的区别

var obj = {a: 'he11o' ,b: 'he11ob'};
var json = '{"a": "he11o" , "b":"he1lob"}'

五、面向对象编程

1.面向对象原型继承

//①默认情况下，构造函数是空的
function Person（）{//构造函数首字母大写
}
//②添加属性和方法
Person.prototype.name="dp";
Person.prototype.doSomething=function(）{
    alert(this.name);
};
//③定义好构造函数和其他属性方法之后，就可以创建实例了
var person1=new Person();
var person2=new Person();

2.面向对象class继承

添加方法

//给student添加一个方法 
//1、先定义一个类、属性、方法
class student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello');
    }
}
//使用方法
var person = new student('小明');
person.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('我是小学生')
    }
}
//使用
var xiaoStudent = new xiaoStudent("xiaohong",1);

六、操作BOM

1.window

window.alert(1)
undefined
window.innerHeight
254
window.innerWidth
921
window.outerHeight
994
window.outerWidth
919

2.Navigator

Navigator,封装了浏览器的信息
但是大多数时候，我们不会使用navigatorduix，因为他可以被人为修改

3.screen

screen.width
screen.height

4.location

host: "www.baidu.com"
href: "https://www.baidu.com/?tn=18029102_3_dg"
protocol: "https:"
reload: ƒ reload() //刷新
assign: ƒ assign()//设置新的地址

5.document

//获取具体的文档树节点：
<d1 id="app">
    <dt> Java</dt>
    <dd> JavaSE</dd>
    <dd> JavaEE</dd>
</d1>
<script>
    var d] = document. getElementById(' app ');
</script>
//获取cookie
document.cookie
//劫持cookie原理：把一段能劫持cookie的js代码放在网站上 一点开就能把你的cookie拿了
<script src='劫持cookie'></script>
<!-- 获取你的cookie上传到他的服务器 -->
//服务器端可以设置cookie为httpOnly

6.history

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

七、操作DOM

更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

1.获得DOM

方法一：

// 返回ID为'test'的节点：
var test = document.getElementById('test');
// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');
// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('testdiv').
getElementsByClassName('red');
// 获取节点test下的所有直属子节点:
var cs = test.children;
// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

方法二：

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');
// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

2.更新DOM

方法一：修改innerHTML属性

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; 
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';

方法二：修改innerText属性

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';

3.插入DOM

方法一：把一个子节点添加到父节点的最后一个子节点

var
js = document.getElementById('js'),
list = document.getElementById('list');
list.appendChild(js);

<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="js">JavaScript</p>
</div>

方法二：把子节点插入到指定的位置

var
list = document.getElementById('list'),
ref = document.getElementById('python'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

<div id="list">
<p id="java">Java</p>
<p id="haskell">Haskell</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>

4.删除DOM

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self;

八、操作表单

文本框<input type="text">用于输入文本；
口令框<input type="password">用于输入口令；
单选框<input type="radio">用于选择一项；
复选框<input type="checkbox">用于选择多项；
下拉框<select>用于选择一项；
隐藏文本<input type="hidden">用户不可见，但表单提交时会把隐藏文本发送到服务器。

1.获取值

var mon = document.getElementById('monday'); 
var tue = document.getElementById('tuesday'); 
mon.checked; 
tue.checked;

2.设置值

var input = document.getElementById('email'); 
input.value = 'test@example.com';

3.提交表单

方法一：

<form id="test-form"> 
    <input type="text" name="test"> 
    <button type="button" onclick="doSubmitForm()">Submit</button> 
</form> 

<script> 
function doSubmitForm() { 
    var form = document.getElementById('test-form'); 
    // 可以在此修改form的input... 
    // 提交form: form.submit(); 
}
</script>

方法二：

<form id="test-form" onsubmit="return checkForm()"> 
    <input type="text" name="test"> 
    <button type="submit">Submit</button> 
</form> 

<script> 
function checkForm() { 
    var form = document.getElementById('test-form'); 
    // 可以在此修改form的input... 
    // 继续下一步: 
    return true; 
}
</script>

MD5加密：

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"> 
</script> 

<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username"> 
    <input type="password" id="input-password"> 
    <input type="hidden" id="md5-password" name="password"> 
    <button type="submit">Submit</button> 
</form> 

<script> 
    function checkForm(){ 
        var input_pwd = document.getElementById('input-password'); 
        var md5_pwd = document.getElementById('md5-password'); 
        // 把用户输入的明文变为MD5: 
        md5_pwd.value = md5(input_pwd.value); 
        // 继续下一步: 
        return true; 
    } 
</script>

九、jQuery

1.引入jQuery

使用jQuery只需要在页面的head引入jQuery文件即可

<html> 
<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
    ... 
</head>
<body> 
<a id="test-link" href="#0">点我试试</a> 

<script> 
    // 获取超链接的jQuery对象: 
    var a = $('#test-link'); 
    a.on('click', function () { 
        alert('Hello!'); 
    });

    // 方式二 
    a.click(function () { 
        alert('Hello!'); 
    }); 
</script> 
</body> 
</html>

公式：$(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

2.选择器

（1）按ID查找

// 查找<div id="abc">: 
var div = $('#abc');

（2）按tag查找

var ps = $('p'); // 返回所有<p>节点 
ps.length; // 数一数页面有多少个<p>节点

（3）按class查找

var a = $('.red'); // 所有节点包含`class="red"`都将返回 
// 例如: 
// <div class="red">...</div> 
// <p class="green red">...</p>

（4）按属性查找

var email = $('[name=email]'); // 找出<??? name="email"> 
var passwordInput = $('[type=password]'); // 找出<??? type="password"> 
var a = $('[items="A B"]'); // 找出<??? items="A B">

3.操作DOM

（1）修改Text和HTML

获取文本和HTML

$('#test-ul li[name=book]').text(); // 'Java & JavaScript' 
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'

设置文本或HTML

var j1 = $('#test-ul li.js'); 
var j2 = $('#test-ul li[name=book]'); 
j1.html('<span style="color: red">JavaScript</span>'); 
j2.text('JavaScript & ECMAScript');

（2）修改CSS

高亮显示动态语言

$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');

注意：jQuery对象的所有方法都返回一个jQuery对象

修改class属性

var div = $('#test-div'); 
div.hasClass('highlight'); // false， class是否包含highlight 
div.addClass('highlight'); // 添加highlight这个class 
div.removeClass('highlight'); // 删除highlight这个class

（3）显示和隐藏DOM

var a = $('a[target=_blank]'); 
a.hide(); // 隐藏 
a.show(); // 显示

注意：隐藏DOM节点并未改变DOM树的结构，它只影响DOM节点的显示。这和删除DOM节点是不同的。

（4）获取DOM信息

// 浏览器可视窗口大小: 
$(window).width(); // 800 
$(window).height(); // 600 

// HTML文档大小: 
$(document).width(); // 800 
$(document).height(); // 3500 

// 某个div的大小: 
var div = $('#test-div'); 
div.width(); // 600 
div.height(); // 300 
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效 
div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效

attr()和removeAttr()方法用于操作DOM节点的属性

// <div id="test-div" name="Test" start="1">...</div> 
var div = $('#test-div'); 
div.attr('data'); // undefined, 属性不存在 
div.attr('name'); // 'Test' 
div.attr('name', 'Hello'); // div的name属性变为'Hello' 
div.removeAttr('name'); // 删除name属性 
div.attr('name'); // undefined

（5）操作表单

var 
    input = $('#test-input'),
    select = $('#test-select'), 
    textarea = $('#test-textarea'); 

input.val(); // 'test' 
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com 

select.val(); // 'BJ' 
select.val('SH'); // 选择框已变为Shanghai 

textarea.val(); // 'Hello' 
textarea.val('Hi'); // 文本区域已更新为'Hi'

（6）添加DOM

var ul = $('#test-div>ul');

ul.append('<li><span>Haskell</span></li>');

var js = $('#test-div>ul>li:first-child'); 
js.after('<li><span>Lua</span></li>');

（7）删除节点

var li = $('#test-div>ul>li'); 
li.remove(); // 所有<li>全被删除

4.事件

（1）初始化事件

<html>
<head>
<script>
    $(document).on('ready', function () {
        $('#testForm).on('submit', function () {
            alert('submit!');
        });
    });
</script>
</head>
    <body>
    <form id="testForm">
        ...
    </form>
</body>

化简：

$(function () {
    // init...
});

（2）事件参数

所有事件都会传入Event 对象作为参数，可以从Event 对象上获取到更多的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #testMouseMoveDiv{
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>

mousemove: <span id="testMouseMoveSpan"></span>

<div id="testMouseMoveDiv">
    在此区域移动鼠标试试
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    $(function () {
        $('#testMouseMoveDiv').mousemove(function (e) {
            $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = '+ e.pageY);
        });
    });
</script>

</body>
</html>