javascript中文文档,javascript中文教程

最新推荐文章于 2024-03-04 01:36:32 发布

2301_81337765

最新推荐文章于 2024-03-04 01:36:32 发布

阅读量210

点赞数 1

文章标签： python 开发语言前端

本文链接：https://blog.csdn.net/2301_81337765/article/details/134753747

版权

大家好，小编为大家解答javascript中文文档的问题。很多人还不知道javascript中文教程，现在让我们一起来看看吧！

大家好，本文将围绕java怎么读中文展开说明，java 怎么读是一个很多人都想弄明白的事情，想搞清楚java的发音需要先了解以下几个事情。

1、什么是javaScript

1.1 概述

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

java是一个人用了10天时间开发出来的语言

一个合格的java程序员必须精通

1.2 历史

ECMAScript 它可以理解为JavaScript的标准

最新版本已经到了es6版本

但是大部分浏览器还只支持es5

线上环境版本不一致

2、快速入门

2.1、引入JavaScript

1、内部标签使用

<>
	alert("梦走了")
</>

2、外部引入

a.jsp

alert("梦走了")

test.html

< src="a.jsp"></>

测试代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>

    <%--    <>--%>
    <%--        alert("梦走了")--%>
    <%--    </>--%>

    < src="js/a.js"></>
</head>
<body>
$END$
</body>
</html>

2.2、基本语法入门


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>

    <%--    <>--%>
    <%--        alert("梦走了")--%>
    <%--    </>--%>

    <>
        <%--        严格区分大小写--%>
        var a = "test";
        // alert(a);
        var score = 71;
        if (score > 60 && score < 70) {
            alert("60-70")
        } else if (score > 70 && score < 80) {
            alert("70-80")
        } else {
            alert("other")
        }
        //打印变量
        console.log(score);

        /**
         *
         */
    </>
</head>
<body>
$END$
</body>
</html>

浏览器必备调试：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2nqa7iVj-1619176466994)(C:\Users\15986\AppData\Roaming\Typora\typora-user-images\image-20210422155712158.png)]

2.3、数据类型

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

变量

var $1=1
var _1 = 1
'use strict' //严格检查模式
i=1 //如果开启了严格检查模式，这串代码就会报错
let i =1 //开启了严格检查模式，局部变量建议使用let去定义

局部变量建议都是使用let去定义

number

js不区分小数和证书，Number

123 //整数
123.1 //浮点数
1.1233e12 // 科学计数
-99 //负数
NaN // not a number
Infinity //无穷大

字符串

'abc'
"cdf"

布尔值

1<2
2>1

逻辑运算

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

比较运算符

=  //赋值符号
== //类型不一致，值一致，也会判断为true
=== // 绝对等于 必须要类型一样 值一样 结果为true

这是js的一个缺陷，我们要坚持使用===来进行比较

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

浮点数问题：

(1/3) === (1-2/3)
	false

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

console.log(Math.abs((1 / 3) - (1 - 2 / 3)) < 0.000001)

null和Undefined

null 空
Undefined 未定义

数组

Java的数值必须是相同类型的对象，Js不需要这样

var arr = ["1", 2, 3, 4, true, null]
new Array(1,2,3,4,null,true)

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

对象

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

每个属性之间用逗号分隔，最后一个不需要添加快码论文。

var parson = {
            name: "ydj",
            age: 3,
            tar: ["1", 2, 3, true, null]
        }
// 取出对象的值
        parson.name
        parson.age
        parson.tar

2.4、严格检查模式

<>
        'use strict'

        let i = 1;
</>

预防JavaScript代码的随意性导致产生的一系列问题。

必须写到JavaScript的第一行，而且idea必须支持es6语法。

3、数据类型

3.1、字符串

1、正常字符串我们是用单引号或者双引号包裹

2、注意转义字符：\

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

3、多行字符串编写

var str =
            `
        123
        1212
        aaa
        true
        caaa
        `

4、模板字符串

坑爹的玩意：他妈的得转义，找了半拉点

<>
        "use strict";

        name = "ydj";
        console.log(name)
        console.log(`1222\${name}`)
        // alert(name)
</>

5、字符串长度

<>
        "use strict";

        

        var student = "student"
        //打印字符的长度
        console.log(student.length)
        console.log()

</>

6、字符串是不可变得

<>
        "use strict";


        var student = "student"
        //打印字符的长度
        console.log(student.length)
        console.log(student[0])
        student[0] = 5
        console.log(student[0])

</>

7、大小写转换

//这里是方法，不是属性

console.log(student.toUpperCase()) //将所有字母转换为大写
console.log(student.toLowerCase()) //将所有字母转换小写

8、获取指定的下标

console.log(student.indexOf("s"))

9、字符串截取

console.log(student.substr(2, 3)) //包含第二个不包含第三个
console.log(student.substr(1)) //截取从第一到最后一个的

3.2、数组

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

var arr = ["1",2,true,null]

1、长度

arr.lenth
arr[0]
arr[0]=1
arr.lenth=10

注意：加入给arr.lenth 赋值，数组长度就会发生变化，如果赋值过小，则元素丢失

2、indexOf，通过元素获得下标索引

arr.indexOf(2)
1

字符串的"1"和int类型的1是不一样的。

3、Slice()截取Array的一部分，返回一个新数组。类似String的中substr

Slice(4)

4、push ，pop

arr.push('a','b') //在数组最后添加元素
arr.pop() //将数组中最后一个元素弹出  数组就没有弹出的这个元素了

5、UNshift()，shift() 头部

arr.unshift('m','n') //在数组头部添加元素
arr.shift() //将数组中头部的元素弹出，数组中就没有弹出的这个元素了

6、数组排序 sort

arr.sort()

7、元素反转

arr.reverse()

8、concat()

arr.concat("1","2","3")
(7) [1, 2, "a", "b", "1", "2", "3"]
arr
(4) [1, 2, "a", "b", lenth: 10]

最后添加元素
arr.pop() //将数组中最后一个元素弹出数组就没有弹出的这个元素了


5、UNshift()，shift() 头部

```java
arr.unshift('m','n') //在数组头部添加元素
arr.shift() //将数组中头部的元素弹出，数组中就没有弹出的这个元素了

6、数组排序 sort

arr.sort()

7、元素反转

arr.reverse()

8、concat()

arr.concat("1","2","3")
(7) [1, 2, "a", "b", "1", "2", "3"]
arr
(4) [1, 2, "a", "b", lenth: 10]

返回了新的数组，没有改变旧的数组

4、函数

4.1、定义函数

定义方式一

绝对值函数：

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

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

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

这是一个匿名函数，但是可以把记过赋值给abs，通过abs就可以调用函数

调用函数

abs(10);
abs(-10)

参数问题：javaScript可以传入人以参数，也可以不传递任意参数！

参数进到方法后是否存在问题，需要判断

手动返回异常：

function abs(x) {
    if (typeof x !== 'number') {
        throw '你个谢雄传了个啥类型的参数';
    }
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

arguments

arguments 是一个JS免费赠送的一个关键字，拿来即用就行

代表，传递进来的所有参数，是一个数组！

function abs(x) {

    for (const x of arguments) {
        console.log(x);
    }
    /*if (typeof x !== 'number') {
                throw '你个谢雄传了个啥类型的参数';
            }*/
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

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

rest

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

function abs(x, ...rest) {

    console.log(rest)
    /*if (typeof x !== 'number') {
                throw '你个谢雄传了个啥类型的参数';
            }*/
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

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

4.2、变量的作用域

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

假设在函数体重申明，则在函数体外不可使用（使用闭包可以实现函数体外可用）

function ydj() {
    var x = 1;
    x = x + 1;
}

x = x + 2 //Uncaught ReferenceError: x is not defined at (index):24 DevTools failed to load S

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

function ydj() {
    var x = 1;
    x = x + 1;
}

function ydj2() {
    var x = 1
    x = x + 1
}

内部函数可以调用外部函数的变量成员，反之则不行

function ydj() {
    var x = 1;

    function ydj2() {
        console.log(x)
        var y = x + 1
        }

    var z = y + 1
    }

假设内部变量和外部变量的重名

function ydj() {
    var x = 1;

    function ydj2() {
        var x = 2;
        console.log('inner' + x)
    }

    ydj2()
    console.log('outer' + x)
}

ydj()

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

提升变量的作用域

function ydj() {
    var x = 1;
    console.log('x' + y)
    var y = 'y'
    }

ydj()

结果为：xundefined

说明：JavaScript执行引擎，自动提升了变量y的申明，但是不会提升y的赋值，就等同于下面这种写法

function ydj() {
    var y;
    var x = 1;
    console.log('x' + y)
    y = 'y'
}

ydj()

这个是在JavaScript建立之初就存在的一个特性，所有的变量定义都放在函数的头部，便于代码的维护。

function ydj() {
    var x=1,y=2,z,c,u;
    // 上面定义完变量后，下面随便用，如果下面突然想增加一个变量，则要把变量提升到上面
}

全局函数

var x = '1'

function ydj() {
    console.log(x)
}

ydj()
console.log(x)

全局对象 windows

var a= 'xxx'
window.alert(a)
alert(window.a)

alert这个函数本身也是windows中的一个变量

window.alert('123')

var oldalert = window.alert;
oldalert("222")
var alert = function () {

}

// 发现alert失效了
alert("1")

//恢复
var alert = oldalert;

// 好使了
alert('1999')

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

规范：

由于我们所有的全局变量都会绑定到windows上，如果不通的js文件，使用了相同的全局变量，就会发生冲突。如何能减少冲突呢？

// 定义唯一全局的变量
var ydj = {}

ydj.x = "1";
ydj.add = function (x, y) {
    return x + y;
}

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

JQuery

局部作用域 let

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

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

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

建议大家都是用let 来定义局部作用域的变量。

常量：const

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

var A = '123'
console.log(A)
A = '456'
console.log(A)

在ES6 引入了常量关键字，const

const A = '123'//只读变量
console.log(A)
A = '456'
console.log(A)

4.3、方法

定义方法

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

var ydj = {
    name: 'ya',
    bitrh: 2021,
    age: function () {
        return new Date().getFullYear() - this.bitrh;
    }
}
// 属性：ydj.name
// 方法：ydj.age();

将上述方法拆开如下：

function getage() {
    return new Date().getFullYear() - this.bitrh;
}

var ydj = {
    name: '杨',
    bitrh: 2021,
    age: getage
}

//ydj.age ok
//getage() //NaN 使用的是window变量

在java中，this是无法指向的，是默认指向调用它的对象，在JavaScript是可以指向的

apply

"use strict";

function getage() {
    return new Date().getFullYear() - this.bitrh;
}

var ydj = {
    name: '杨东瑾',
    bitrh: 2021,
    age: getage

};


getage.apply(ydj, []) // 将this 指向了ydj的对象，参数为空

5、内部对象

标准对象

typeof 123
"number"
typeof 'ddd'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof {}
"object"
typeof []
"object"
typeof PaymentMethodChangeEvent
"function"
typeof undefined
"undefined"

5.1、Date

基本使用

const now = new Date();
now.getFullYear(); //年
now.getMonth(); //月
now.getDay(); //星期几
now.getDate(); //日
now.getHours(); //时
now.getMinutes(); //分
now.getSeconds(); // 秒
now.getTime();//时间戳

console.log(new Date(1619432274130)) //时间戳转为时间

转换：

now.toLocaleString() //调用的是方法
"2021/4/26下午6:17:54"
now.toUTCString();
"Mon, 26 Apr 2021 10:17:54 GMT"

5.2、json

json是什么

早期，所有的数据传输，使用的是xml文件。

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

在JavaScript中，一切皆为对象。任何js支持的类型都可以用json来表示。number、String …

格式：

对象都用花括号：{}
数组都用中括号：[]
所有的键值对都是用 key:value

JSON字符串和Json对象的转换

var person = {
    "name": "ydj",
    "age": 3,
    "sex": "man"
}

// 转换为json字符串
const perjson = JSON.stringify(person)


//将json字符串转换为json对象
const perobject = JSON.parse('{"name": "ydj", "age": 3, "sex": "man"}')

很多人搞不清楚json和JS对象的区别

var obj = {a:'hello',b:'hi'}
var jsonstr = '{"a":"hello","b":"hi"}'
var jsonobj = {"a":"hello","b":"hi"}

5.3、Ajax

原生的js写法，xhr异步请求
JQuery封装好的方法
axios 请求

6、面向对象编程

原型对象

javaScript、java、c#等语言都具有面向对象思想

类：模板，原型对象

对象：具体的实例

原型:

var student = {
    'name': 'xiaowang',
    'age': 18,
    run: function () {
        console.log(this.name + "    run...")
    }
};

var xiaowang = {
    'name': 'xiaowang'
};

const bird = {
    fly: function () {
        console.log(this.name + " fly....")
    }
};

xiaowang.__proto__ = bird;

function student(name) {
    this.name = name
}

student.prototype.hello = function () {
    alert("hello")
}

class继承

class关键字是在ES6之后引入的

1、定义一个类，属性和方法

// ES6之后：
// 定义一个学生类
class studentTwo {
    constructor(name) {
        this.name = name
    }

    hello() {
        alert('hello')
    }
}

var xiaoming = new studentTwo("xiaoming")
var xiaohong = new studentTwo('xiaohong')
xiaoming.hello()

2、继承

class smallstuden extends studentTwo {
    constructor(name, age) {
        super(name);
        this.age = age;
    }

    mygrad() {
        alert("老子是小学生之王")
    }
}

var xiaoming = new studentTwo("xiaoming")
var xiaohong = new smallstuden('xiaohong', 1)

本质：查看对象原型：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fazKv0Bq-1619607731723)(C:\Users\15986\AppData\Roaming\Typora\typora-user-images\image-20210427164504505.png)]

原型链

_ proto _ ：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yJg0rdbW-1619607731725)(C:\Users\15986\AppData\Roaming\Typora\typora-user-images\image-20210427170302243.png)]

7、操作BOM对象（重点）

7.1、浏览器介绍

JavaScript和浏览器的关系？

JavaScript的诞生就是为了让它在浏览器中运行。

BOM：浏览器对象模型

IE 6-11
Chrom
Safari
Firefox
Opera

三方浏览器：

QQ浏览器
360浏览器

7.2、windows

window代表咱们的浏览器窗口

window.innerHeight
368
window.innerHeight
368
window.outerHeight
1040
window.outerWidth
1920
window.innerHeight
257
window.innerHeight
300
// 可以调整浏览器窗口试试

7.3、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.90 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象，因为会被人为修改!

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

7.4、screen

代表屏幕的尺寸

screen.width
1920 px
screen.height
1080 px

7.5、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://www.ydjsjy.top")

7.6、document

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

document.ti
undefined
document.title = "猪猪"
"猪猪"

获取具体的文档树节点：

<dl id="app">

    <dt>Java</dt>
	<dt>JavaSE</dt>
	<dt>JavaEE</dt>

</dl>

<>
    const dl = document.getElementById("app");
</>

获取网页的cookie

document.cookie
""

劫持cookie的原理

www.taobao.com

<>
    document.cookie
</>
<%--使用ajax上传到其他服务器，自己的cookie就被劫持了--%>

服务器端可以设置cookie为：httpOnly，这样就安全了

7.7、history（不建议使用）

代表浏览器的历史记录

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

8、操作DOM

DOM：文档对象模型

8.1、核心

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

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

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

const h1 = document.getElementsByTagName('h1');
const p1 = document.getElementById("p2");
const p2 = document.getElementsByClassName("p1");
const father = document.getElementById("father");
father.children; //获取节点下的所有子节点
father.firstChild; // 获取节点下的第一个节点
father.lastChild; // 获取节点下的最后一个节点
p1.lastChild; //获取上一个几点
p1.nextSibling; //获取下一个节点

这是原生代码，之后我们要使用JQuery。

8.2、更新Dom节点

修改文本的值

father.innerText='111'
"111"

可以解析html文本

father.innerHTML='<strong>222</strong>'
"<strong>222</strong>"

操作JS：

father.style.color = 'red' // 属性使用字符串包裹
"red"
father.style.fontSize='200px' //驼峰命名
"200px"
father.style.padding='2em'
"2em"

8.3、删除节点：

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

<div id="father">
    <h1>标题</h1>
    <p1 class="p1">p1</p1>
    <p2 id="p2">p2</p2>
</div>
<>
    var self = document.getElementById('p1')
    var father = p1.parentNode // 获取子节点的父节点
    father.removeChild(p1) // 通过父节点来删除子节点
    
    
    // 删除是一个动态的过程，删除前一个，后一个的角标会变
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候要注意

8.4、插入节点

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

追加：append

<p id="append">追加</p>
<div id="father">
    <h1>标题</h1>
    <p1 class="p1">p1</p1>
    <p2 id="p2">p2</p2>
</div>
<>
var apped = document.getElementById('append')
father.appendChild(apped)
</>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PosQjuzv-1619607731727)(C:\Users\15986\AppData\Roaming\Typora\typora-user-images\image-20210428110905892.png)]

创建一个新的标签，然后插入到其他节点中！

let newp = document.createElement('p');

newp.innerText = '我是新的'
newp.id = 'newp'
father.appendChild(newp)

// 创建标签，并追加到父节点
let myScript = document.createElement("");
// 通过这个属性可以设置任意的值
myScript.setAttribute("id", "my")

father.appendChild(myScript)

插入到前面 insertbefore

<div id="father">

    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaMe</p>
</div>


<>

    let htmlParagraphElement = document.createElement("p");

    htmlParagraphElement.id = 'append';
    htmlParagraphElement.innerText = '追加'

    const selet = document.getElementById('se');
    const eelet = document.getElementById('ee');
    const fatherlet = document.getElementById('father');


</>

9、操作表单

表单是什么 form DOM树

文本框 text
密码框 password
下拉框
复选框 checkbox
隐藏域 hidden
单选框 radio
等等等。。。。。

表单的目的就是：提交信息

获取表单提交的信息

<form action="post">

    <p>
        <scan>用户名：</scan>
        <input id="username" ,type="text" value="caonima">
    </p>

    <p>
        <scan>性别：</scan>
        <input type="radio" name="sex" id="man">男
        <input type="radio" name="sex" id="woman">女
    </p>

</form>


<>

    const username = document.getElementById('username');
    let man = document.getElementById("man");

    let woman = document.getElementById("woman");

    // 获取input框的值
    username.value

    // 判断复选框是否被选中
    man.checked


</>

10、JQuery

JavaScript

JQuery库，里面存在大量的JavaScript函数

获取JQuery库

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TqO2q5Ry-1619607731730)(C:\Users\15986\AppData\Roaming\Typora\typora-user-images\image-20210428142144320.png)]

引入JQuery

< src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></>

初体验：

<body>

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

<>
    "use strict";

	//公式：$(selector).action()

    $('#test-jquery').click(function () {
        alert("让你点就点？憨批？")
    })

</>
</body>

选择器

//原生js：
document.getElementsByTagName(); //获取标签
document.getElementsByClassName(); //获取类
document.getElementById(); //获取id


// 使用JQuery后：
$('p').click() //标签选择器
$('#p').click() //id选择器
$('.class1').click() //class选择器

文档工具站：[https://jquery.cuishifeng.cn/]:

事件

鼠标事件、键盘事件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>

    < src="https://code.jquery.com/jquery-3.6.0.js"
            integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></>

    <style>

        #divmove {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<%--鼠标：<span id="spanmonve"></span>--%>
<p id="demo"></p>
<div id="divmove">
    在这里移动鼠标试试
</div>

<>
    "use strict";

    /*document.addEventListener('mousemove', (e) => {
        console.log(e.pageX, e.pageY)
    });*/

    $(function () {
        $('#divmove').mousemove(function (e) {
            // $('#spanmonve').text("x: " + e.pageX + " y: " + e.pageY)
            $('#demo').text("鼠标轨迹：x: " + e.pageX + " y: " + e.pageY);
            // document.getElementById("demo").innerHTML = "鼠标轨迹：x: " + e.pageX + " y: " + e.pageY;
        })


        $('#divmove').mouseout(function () {
            // document.getElementById("demo").innerHTML = "";
            $('#demo').text("");
        })
    })

    /*function mymoutse(e) {
        const x = e.clientX;
        const y = e.clientY;
        console.log(x)
        console.log(y)
        $('#spanmonve').innerText = "x: " + x + " y: " + y;
    }

    function mymouseout(e) {
        $('#spanmonve').innerText = '';
    }*/
</>
</body>
</html>

操作Dom

节点文本操作

<ul id="test">
    <li class="js">Java</li>
    <li name="Python">Python</li>
</ul>

<>
    // 如果text没参数则是取，如果有参数则是赋值
    $('#test li[name="Python"]').text()
    $('#test').html()
</>

CSS的操作：

$('#test li[name="Python"]').css("color", "red");

元素显示和隐藏：本质dispaly：none

$('#test li[name="Python"]').show() // 显示
$('#test li[name="Python"]').hide() // 隐藏

娱乐：

$(window).width()
1920
$(window).height()
409

完结。。。。离论文又近了一步。。。

2301_81337765

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中文文档,javascript中文教程

javaScript是一门世界上最流行的脚本语言java是一个人用了10天时间开发出来的语言一个合格的java程序员必须精通定义方式一if(x>=0){return x;一旦执行到return代表函数结束，返回结果！如果没有执行return，函数执行完也会返回结果，结果就是undefined定义方式二if(x>=0){return x;这是一个匿名函数，但是可以把记过赋值给abs，通过abs就可以调用函数调用函数。
复制链接

扫一扫