公告

JavaScript基础

e01428034bcfe96784ca8897be09fb9a

JavaScript

1 JavaScript概述

ECMAScript

JavaScript的一个标准

ES5：全部浏览器支持
ES6：开发常用的版本

浏览器控制台使用

简单介绍

控制台

输入指令

调试

设置断点，然后刷新网页进行调试

2 JavaScript基础语法

2.1 引入方式

1.内部script标签


xxxxxxxxxx
3
1
<script>
2
    alert('hello world!')
3
</script>

2.外部引入


xxxxxxxxxx
1
1
<script src="js/script.js"></script>

快速使用：


xxxxxxxxxx
22
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>JavaScript</title>
6

7
    <!--script标签，写JavaScript语句
8
    不要使用自闭和 成对出现
9
    -->
10
<!--    <script>-->
11
<!--        alert('hello world!')-->
12
<!--    </script>-->
13

14
    <!--外部引入 默认javaScript不用显式定义-->
15
    <script src="js/script.js"></script>
16

17
</head>
18
<body>
19

20
<!--Js也会插入到body尾部-->
21
</body>
22
</html>


xxxxxxxxxx
1
1
alert('hello world!')

2.2 数据类型

number（不区分小数，整数）


xxxxxxxxxx
6
1
12     //整数
2
12.12  //小数
3
1.22e3 //科学计数
4
-12    //负数
5
Nan    //Not a number
6
Infinity //无限大

字符串


xxxxxxxxxx
3
1
'abc'
2
"abc"
3
//还有转义字符等

逻辑运算


xxxxxxxxxx
3
1
&&  //与
2
||  //或
3
！  //非

比较运算


xxxxxxxxxx
2
1
==  //等于 数值相等（类型不同也反返回ture）
2
=== //绝对等于 类型相同，数值相同

判断是否为NaN使用isNaN()判断

NULL与undefined

null 空
undefined 未定义

快速使用数据类型


xxxxxxxxxx
33
1
//1.定义变量
2
/*定义区分大小写*/
3
var num = 35;
4

5
//2.条件控制
6
if (num>30&&num<40){
7
    alert("30~40,num="+num);
8
}else{
9
    alert("other")
10
}
11
/*console.log()打印变量 浏览器控制台*/
12

13
console.log(1=="1");      //true
14
console.log(1==="1");     //false 绝对等于
15
console.log(NaN===NaN);   //false
16
console.log(isNaN(NaN));  //true  判断为NaN的方法
17
console.log(1/3===1-2/3); //false 由于损失精度，小数不能使用等于判断
18
console.log(Math.abs(1/3-(1-2/3))<0.00000001) //小数的近似的等于判断
19

20
var arr = [1,2,3,null,"hello",true] //数组允许不同类型
21

22
arr1 = new Array(1,2,3,null,"hello",true)
23

24
console.log(arr[4],arr[5],arr[6])
25

26
/*创建对象，类似Python字典*/
27
var person ={
28
    name:"ZhangSan",
29
    age:3,
30
    tags:["js","java","web"]
31
}
32

33
console.log(person.name)

2.3 字符串类型


xxxxxxxxxx
27
1
'use strict'
2
console.log("a");
3
/*输出特殊使用转义\'*/
4

5
console.log("a\'");
6
console.log("abc\nabc");
7
console.log("\u4e2d"); //unicode
8
console.log("\x41")    //Ascll
9

10
/*多行字符*/
11
let msg = `hello
12
        你好
13
        再见`;
14
console.log(msg);
15

16
/*模板*/
17
let name = "ZhangSan";
18
let age= 3;
19

20
msg = `你好，${name},今年${age}岁`;
21
console.log(msg);
22

23
/*字符串长度*/
24
console.log(msg.length);
25
console.log(msg[0]);//类似字符串数组
26
console.log(msg.toUpperCase());//大写
27
console.log(msg.substring(1,4));//类似切片

2.4 对象类型


xxxxxxxxxx
39
1
"use strict"
2
/*对象*/
3
let person = {
4
    name: "ZhangSan",
5
    age: 3,
6
    email: "12345@qq.com",
7
    score: 0
8
};
9

10
console.log(person.name);
11

12
/*对象赋值*/
13
person.name = "LuoXian";
14

15
/*动态删除属性*/
16
delete person.score;
17
console.log(person);
18

19
/*动态添加属性*/
20
person.sex = "man";
21
console.log(person);
22

23
/*判断值是否在对象中*/ //true
24
if ('age' in person){ 
25
    console.log(true);
26
}
27
/*可以找到继承的属性*/ //true
28
if ('toString' in person){
29
    console.log(true);
30
}
31
/*判读是否是对象自身属性*/ //true
32
if (person.hasOwnProperty("age")){
33
    console.log(true);
34
}
35
if (person.hasOwnProperty("toString")){ //false 这里继承的不是自身属性
36
    console.log(true);
37
}else {
38
    console.log(false);
39
}

2.5 数组类型


1
'use strict'
2
/*数组*/
3
let arr = [1,2,3,4,5,6];
4
console.log(arr);
5
console.log(arr.length); //6
6
/*动态改变长度*/
7
arr.length = 10;
8
console.log(arr);
9
console.log(arr[8]); //undefined
10
//减少长度会损失数据
11
arr.length = 4;
12
console.log(arr);
13

14
/*indexOf 字符串和数字类型不同*/
15
arr = [1,2,"1","2"];
16
console.log(arr.indexOf(2)); //1
17
console.log(arr.indexOf("2")); //3
18

19
/*slice数组切片*/
20
console.log(arr.slice(1,3)); //arr[1,3]  [2,"1"]
21

22
/*push(),pop()*/
23
console.log(arr.push("a","b")); //在后面插入
24
console.log(arr);
25

26
console.log(arr.pop()); //弹出最后面
27
console.log(arr);
28

29
/*unshift(),shift()*/
30
console.log(arr.unshift("a","b")); //在前面插入
31
console.log(arr);
32

33
console.log(arr.shift()); //弹出最前面
34
console.log(arr);
35

36
/*sort()*/
37
let arr1 = ["b","a","c"];
38
arr1.sort(); //排序
39
console.log(arr1); //["a","b","c"]
40

41
/*元素反转*/
42
arr1.reverse();
43
console.log(arr1); //["c","b","a"]
44

45
/*拼接 返回新数组*/ //注意是返回不是修改
46
console.log(arr1.concat(["1","2","3"]));//["a","b","c","1","2","3"]
47

48
/*连接符join*/
49
console.log(arr1.join('-')); //c-b-a
50

51
/*多维数组*/
52
let arr2 = [[1,2],[3,4],["5","6"]];
53
console.log(arr2);
54
console.log(arr2[1][1]) //4

2.6 流程控制


xxxxxxxxxx
33
1
'use strict'
2
/*if判断*/
3
let age = 3;
4
if (age>3){
5
    alert("haha");
6
}else {
7
    alert("ku");
8
}
9

10
/*while循环*/
11
while (age<100){
12
    age = age + 1;
13
    console.log(age);
14
}
15

16
/*for循环*/
17
for (let i = 0; i < 100; i++) {
18
    console.log(i);
19
}
20

21
/*数组循环*/
22
let arr = [12,41,436,12,4568,12]
23
arr.forEach(function (value){
24
    console.log(value);
25
})
26

27
for (let num in arr){
28
    console.log(arr[num]);
29
}
30
//推荐使用
31
for (let num of arr){
32
    console.log(num);
33
}

2.6 Map和Set集合


xxxxxxxxxx
18
1
'use strict'
2
/*map*/
3
let map = new Map([['ZhangSan',100],['LiSi',90],['LiHua',0]]);
4
/*取值 key -> value*/
5
console.log(map.get('ZhangSan')); //100
6
map.set("admin",123456); //添加元素
7
console.log(map);
8
map.delete('LiSi'); //删除元素
9
console.log(map);
10

11
/*set 无序不重复集合*/
12
let set = new Set([1,2,2,3,3,3,4]);
13
console.log(set); //1,2,3,4
14
set.add(5);
15
console.log(set);
16
set.delete(4);
17
console.log(set);
18
console.log(set.has(2)); //ture

2.7 函数定义


xxxxxxxxxx
40
1
'use strict'
2
/*定义方式二:匿名函数
3
var abs = function(x){
4
    if (x<=0){
5
        return -x;
6
    }
7
    return x;
8
}
9
* */
10

11
/*JS可以传递任意个参数，也可以不存在参数*/
12
function abs(x){
13
    if (typeof x !== 'number'){ //不是数字
14
        throw 'Not a Number'
15
    }
16
    if (x<=0){
17
        return -x;
18
    }
19
    return x;
20
}
21

22
/*通过arguments可以获取所有的参数*/
23
function a(x){
24
    for (let argument of arguments) {
25
        console.log(argument);
26
    }
27
}
28

29
/*rest只能放在最后面，加...*/
30
function b(a,b,...rest){
31
    console.log("a="+a);
32
    console.log("b="+b);
33
    console.log("rest="+rest);
34
}
35

36
console.log(abs(-100));
37
a(1,2,3,4,5,6,7,8,9);
38
b(1);         // a=1 b=undefined rest = 
39
b(1,2);       // a=1 b=2 rest = 
40
b(1,2,4,5,6); // a=1 b=2 rest=4,5,6

2.8 变量作用域


x
1
'use strict'
2
/*var在函数体内声明吗，函数体外不能使用（可以使用闭包）*/
3
//定义全局变量
4
var y = 1;
5

6
function a(){
7
    var x = 1;
8
    x = x + 1;
9
    console.log(y); //1
10
}
11

12
/*js函数内局部变量 会自动放在最前面进行定义 防止错误引用不报错 手动将所有变量定义放在函数最前面*/
13
function b(){
14
    var a = b + "1";
15
    console.log(a); //输出undefined1 b这时已经存在了 但是没赋值
16
    var b = "2";
17
}
18

19
//这里无法使用function a 中的 x (函数内的var)
20
a();
21
b();
22

23
var oldAlert = window.alert;
24
window.alert("123") //正常输出
25
window.alert = function (){
26

27
}
28
alert("456") //alert已经被替换了无法使用
29
window.alert = oldAlert;
30
alert("567") //正常输出
31

32
/*任何变量（函数也可以视为变量），由内向外查找，window最外层*/
33
/*所有全局变量会绑定到window，不同文件会导致全局命名冲突 建议使用以下方式*/
34
/*唯一全局变量*/
35
var App = {}; //只在本文件内使用
36

37
//定义全局变量
38
App.name = "ZhangSan";
39
App.add = function (a,b){
40
    return a + b;
41
}
42

43
function c(){
44
    for (var i = 0; i < 100; i++) {//let
45
        console.log(i);
46
    }
47
    console.log(i);//出了作用域依然能使用，建议用let定义局部变量，防止错误产生
48
}
49
c();
50

51
/*ES6 const 常量*/ //ES5没有

2.9 方法定义


x
1
//定义对象
2
let person = {
3
    name: "ZhangSan",
4
    age: 10,
5
    //定义方法 方式1
6
    birth: function (){
7
        let now = new Date().getFullYear();
8
        return now - this.age;
9
    }
10
}
11

12
let student = {
13
    name: "ZhangSan",
14
    age: 11,
15
    //定义方法 方式2
16
    birth:getBirth
17
}
18

19
/*方法放在外面*/
20
//不能直接调用此函数，这里的this不会直指向student，所以使用前要委派this指向的对象,再进行调用
21
function getBirth(){
22
    let now = new Date().getFullYear();
23
    return now - this.age;
24
}
25

26
console.log(person.birth());
27
console.log(student.birth());
28
//console.log(getBirth()); //NaN
29
let birth = getBirth.apply(student,[]); //委派this指向的对象
30
console.log(birth);

2.10 Data对象


12
1
'use strict'
2
let now = new Date();
3
console.log(now);
4
console.log(now.getFullYear()); //年
5
console.log(now.getMonth()); //月 0~11
6
console.log(now.getDate()); //日期
7
console.log(now.getDay()); //星期
8
console.log(now.getHours());//小时
9
console.log(now.getTime()); //时间戳
10
console.log(now.toLocaleString()); //本地时间
11

12
console.log(new Date(now.getTime())); //时间戳获得当前时间 （全世界统一）

2.11 JSON对象


xxxxxxxxxx
15
1
"use strict"
2
/*对象*/
3
let person = {
4
    name: "ZhangSan",
5
    age: 3,
6
    email: "12345@qq.com",
7
    score: 0
8
};
9

10
/*对象转换为json字符串*/
11
let json = JSON.stringify(person);
12
console.log(json); //输出JSON字符串
13

14
let user = JSON.parse("{\"age\":3,\"name\":\"ZhangSan\",\"score\":0}");
15
console.log(user); //通过JSON字符串输出对象

3 JavaScript面向对象

3.1 原型继承

一个对象的原型为另一个对象，这个对象就会有原型对象的属性（但是这里的原型继承是类似类嵌套的关系，原型对象相当于嵌套进当前对象，使得当前对象可以使用原型的方法）


x
1
"use strict"
2
/*对象*/
3
let person = {
4
    name: "ZhangSan",
5
    age: 3,
6
    email: "12345@qq.com",
7
    score: 0,
8
    run: function (){
9
        console.log(this.name+" run.");
10
    }
11
};
12

13
let XiaoMing = {
14
    name: "XiaoMing"
15
}
16

17
/*XiaoMing原型是person*/
18
XiaoMing.__proto__ = person;
19

20
console.log(XiaoMing.run());

3.2 Class继承

ES6新特性，Class的机制与Java中的类似（但是JS的本质还是把Class转化成原型继承）


xxxxxxxxxx
1
"use strict"
2
/*class ES6规范*/
3
/*对象*/
4
class person{
5
    constructor(name) {
6
        this.name = name;
7
    }
8

9
    hello(){
10
        alert('hello')
11
    }
12
}
13

14
class student extends person{
15
    constructor(name,grade) {
16
        super(name);
17
        this.grade = grade;
18
    }
19

20
    getGrade(){
21
        alert(this.grade);
22
    }
23
}
24

25
let XiaoMing = new person("XiaoMing");
26
console.log(XiaoMing.name);
27
XiaoMing.hello();
28

29
let XiaoHong = new student("XiaoMing",6);
30
XiaoHong.hello();
31
XiaoHong.getGrade();

3.3 原型链

简单理解原型与原型链的概念

1. 函数与 prototype

定义一个Person函数：


x
1
function Person(age){
2
    this.age = age
3
}
4
//打印Person函数的prototype
5
console.log(Person.prototype)
6
Person.prototype.name = "Person";//添加一个属性

会发现函数是有原型对象的 Person函数存在一个Person.prototype对象，而这个函数就作为这个对象的构造函数，形成了如下的关系：

原型链

2. 原型继承

使用Person构造器创建一个对象ZhangSan


xxxxxxxxxx
1
1
let ZhangSan = new Person(1);

这时就有了以下的关系：

原型链(2)

给ZhangSan增加name属性：


x
1
ZhangSan.name = "ZhangSan";

查看ZhangSan的结构：

发现ZhangSan的原型对象中同时存在name属性，如果ZhangSan没有name属性就会向下找到ZhangSan原型中name = "Person"，所以可以看出原型是类似嵌套的方式继承的（或者说类似子类重写父类的属性）

3. 原型链

继续往下查看原型对象的原型


x
1
/*原型对象的原型*/
2
console.log(Person.prototype.__proto__ === Object.prototype);  //true 对象
3
console.log(Person.prototype.__proto__.constructor === Object);//true
4
console.log(Object.prototype.__proto__ === null)               //没有原型，可以停止检查了

通过上面三条判断语句得出了下面的结构：

原型链(3)

可以看出Object的原型对象没有原型了，指向了NULL这时就可以停止检查了，这就是我们创建对象的原型链的结构了

测试代码：


x
1
'use strict'
2
function Person(age){
3
    this.age = age
4
}
5
console.log(Person.prototype)
6
Person.prototype.name = "Person"; //每个函数都有一个prototype属性，指向函数的原型对象
7
let ZhangSan = new Person(1);     //Person相当于构造函数 做为Person.prototype实例原型的构造函数
8
console.log(ZhangSan.name);       //"Person"
9
console.log(ZhangSan)             //通过Person构造函数创建的对象
10
console.log(ZhangSan.__proto__ === Person.prototype);  //true ZhangSan的原型对象是Person.prototype
11
ZhangSan.name = "ZhangSan";
12
console.log(ZhangSan);
13
/*ZhangSan对象的结构：
14
*ZhangSan {age: 1, name: 'ZhangSan'}
15
*age: 1
16
*name: "ZhangSan"  //没有此属性就会向下寻找到Person.prototype.name  张三的名字
17
*__proto__: Person.prototype
18
*  name: "Person" //Person的名字
19
*  constructor: ƒ Person(age) //Person.prototype.constructor === Person
20
*  __proto__: Object
21
* */
22

23
/*原型对象的原型*/
24
console.log(Person.prototype.__proto__ === Object.prototype);//true 对象
25
console.log(Person.prototype.__proto__.constructor === Object);//true
26
console.log(Object.prototype.__proto__ === null)//没有原型，可以停止检查了

4 JavaScript操作BOM对象

BOM：浏览器对象模型

Window

浏览器窗口


x
1
>window.innerHeight
2
<831
3
>window.innerWidth
4
<729
5
>window.outerHeight
6
<1127
7
>window.outerWidth
8
<1690

Navigator

navigator,封装浏览器信息


xxxxxxxxxx
1
1
>navigator.appName
2
<'Netscape'
3
>navigator.appVersion
4
<'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34'
5
>navigator.platform
6
<'Win32'

navigator，会被人为修改

screen

屏幕属性：


xxxxxxxxxx
1
1
screen.width
2
2560
3
screen.height
4
1440

location

代表当前页面的URL信息，可以用来设置重定向

5 JavaScript操作DOM节点

5.1 获取DOM节点

html:


x
1
<div id="main">
2
    <h1>标题</h1>
3
    <p id="p1">第一段</p>
4
    <p class="p2">第二段</p>
5
</div>

js:


x
1
'use strict'
2
let h1 = document.getElementsByTagName("h1");  //获取标题 对象
3
let p1 = document.getElementById("p1"); //获取第一段 对象
4
let p2 = document.getElementsByClassName("p2"); //获取第二段 对象
5
let main = document.getElementById("main");
6

7
console.log(main.children);//父节点下的所有子节点
8
// main.firstChild;
9
// main.lastChild;

获取到了DOM节点就能操作DOM节点了

5.2 更新DOM节点

操作DOM节点，动态添加文本与样式

html:


xxxxxxxxxx
3
1
<div id="main">
2

3
</div>

js:


x
1
'use strict'
2
let main = document.getElementById("main");
3
main.innerText="hello world";//修改文本的值
4
main.innerHTML="<strong>hello world</strong>\n"//插入HTML
5
main.style.color="red";//操作样式
6
main.style.fontSize="20px"

5.3 删除DOM节点

html:


xxxxxxxxxx
5
1
<div id="main">
2
    <h1>标题</h1>
3
    <p id="p1">第一段</p>
4
    <p class="p2">第二段</p>
5
</div>

js:


x
1
'use strict'
2
//不能自己删除自己
3
let p1 = document.getElementById("p1");
4
let main = p1.parentElement;
5
//通过父节点删除子节点
6
main.removeChild(p1);

5.4 创建DOM节点

html:


6
1
<div id="main">
2
    <h1>标题</h1>
3
    <p id="p1">第一段</p>
4
    <p id="p2">第二段</p>
5
    <p id="p3">第三段</p>
6
</div>

js:


xxxxxxxxxx
1
'use strict'
2

3
//移动已有的标签
4
let main = document.getElementById("main");
5
let p1 = document.getElementById("p1");
6
main.append(p1);//追加到后面
7

8
/*创建新节点*/
9
let pNew = document.createElement('p');
10
pNew.id = "pNew";
11
pNew.innerText = "java";
12
pNew.style.color="red"
13
main.append(pNew);
14

15
/*创建Script标签*/
16
let myScript = document.createElement("script");
17
myScript.setAttribute("type","text/javascript");
18
myScript.setAttribute("src","test.js");
19
main.append(myScript);//加入一段JS代码
20

21
let body = document.getElementsByTagName("body");
22
body[0].style.backgroundColor = "yellow";

test.js：


6
1
/*创建新节点*/
2
let pNew2 = document.createElement('p');
3
pNew2.id = "pNew2";
4
pNew2.innerText = "javaScript";
5
pNew2.style.color="blue"
6
main.append(pNew2);

5.5 表单操作

html:


11
1
<form action="post">
2
    <p>
3
        <span>用户名：</span>
4
        <input type="text" id="userName" value="123">
5
    </p>
6
    <p>
7
        <span>性别：</span>
8
        <input type="radio" name="sex" class="sex" value="man" >男
9
        <input type="radio" name="sex" class="sex" value="woman" checked>女
10
    </p>
11
</form>

js:


x
1
'use strict'
2
//获取表单文本框都值
3
let userName = document.getElementById("userName");
4
let value = userName.value;//得到输入框的值
5
console.log(value);
6

7
//判断单选框的选中的元素并且打印 
8
//通过遍历所有选项用checked的值判断是否被选中
9
let sexCheck = document.getElementsByClassName("sex");
10
let Checked;
11
for (let sexCheckElement of sexCheck) {
12
    if (sexCheckElement.checked){
13
        Checked = sexCheckElement.value;
14
    }
15
}
16
console.log(Checked);

5.6 表单验证

前端检查的好处：减少服务器压力，但是会被修改代码绕过检查

html：


x
1
<!--表单提交绑定事件 检查提价内容
2
false 提交不通过
3
true 允许提交
4
-->
5
<form action="5%20创建DOM节点.html" method="post" onsubmit="return checked()">
6
    <p>
7
        <span>用户名：</span>
8
        <input type="text" id="userName" name="userName" placeholder="请输入用户名" required>
9
    </p>
10
    <p>
11
        <span>性别：</span>
12
        <input type="radio" name="sex" class="sex" value="man" >男
13
        <input type="radio" name="sex" class="sex" value="woman">女
14
    </p>
15
    <p>
16
        <!--直接修改加密密码框的值会看到提交的时候密码变长-->
17
        <span>密码：</span>
18
        <input type="password" id="password" placeholder="请输入密码" required><!--name="password" 不作为表单元素提交-->
19
    </p>
20
    <!--隐藏加密数据-->
21
    <input type="hidden" id="md5-pwd" name="password"><!--提交的为隐藏元素-->
22
    <p>
23
        <button type="submit" >提交</button>
24
        <button type="reset">重置</button>
25
    </p>
26
</form>

js:


x
1
'use strict'
2
function checked(){
3
    //获取表单文本框都值
4
    let userName = document.getElementById("userName");
5
    let NameValue = userName.value;//得到输入框的值
6
    console.log(NameValue);
7

8
    if (NameValue.length > 5){
9
        alert("用户名不能大于5个字符");
10
        return false;
11
    }
12

13
    //判断单选框的选中的元素并且打印
14
    let sexCheck = document.getElementsByClassName("sex");
15
    let Checked;
16
    for (let sexCheckElement of sexCheck) {
17
        if (sexCheckElement.checked){
18
            Checked = sexCheckElement.value;
19
        }
20
    }
21
    if (Checked === undefined){
22
        alert("未选择性别");
23
        return false;
24
    }
25
    console.log(Checked);
26
    
27
    //检查密码是否合法
28
    let pwd = document.getElementById("password");
29
    let pwdValue = pwd.value;
30
    if (pwdValue.length>10||pwdValue.length<1){
31
        alert("密码不能大于10个字符或小于1个字符");
32
        return false;
33
    }
34

35
    /*提交加密密码*/
36
    let md5Pwd = document.getElementById("md5-pwd");
37
    md5Pwd.value = md5(pwdValue);  //给隐藏元素value赋值 这是真正提交的值
38
    console.log(pwdValue);    
39

40
    /*debug 弹框*/
41
    alert("提交成功\n"+NameValue+"  "+Checked+"  "+pwdValue+"\n"+md5Pwd.value);
42
    return true;

css:


x
1
#password{
2
    margin-left: 15px;
3
}
4
.sex:nth-of-type(1){
5
    margin-left: 15px;
6
}
7
.sex:nth-of-type(2){
8
    margin-left: 50px;
9
}
10
button[type="submit"]{
11
    width: 100px;
12
}
13
button[type="reset"]{
14
    margin-left: 35px;
15
    width: 100px;
16
}
17
form{
18
    width: 300px;
19
    height: 300px;
20
    margin: 200px auto;
21
}

6 JQuery简单入门

需要下载JQuery并导入


xxxxxxxxxx
1
1
<a href="" id="test">屠龙宝刀点击就送</a>
2

3
<script>
4
    'use strict'
5
    /*选择器 和css一样*/ /*添加点击事件*/
6
    $('#test').click(function() {
7
        alert("傻宝");
8
    });
9
</script>

6.1 JQuery事件

获取鼠标位置：


x
1
<style>
2
     body{
3
         padding: 0;
4
         margin: 0;
5
     }
6
     #div{
7
         width: 500px;
8
         height: 500px;
9
         background: chartreuse;
10
     }
11
     #text{
12
         position: relative;
13
         font-size: 20px;
14
         font-weight: bolder;
15
         left: 210px;
16
         top: 230px;
17
     }
18
</style>
19

20
<div id="div">
21
    <span id="text">动我试试</span>
22
</div>
23
position: <span id="position"></span>
24

25
<script>
26
    'use strict'
27
    $(function (){
28
        $("#div").mousemove(function (e){//鼠标移动事件
29
            $("#position").text("x:"+e.pageX+"  y:"+e.pageY)
30
        })
31
    });
32
</script>

posted on 2021-11-30 19:00 Egoistic_Flowers 阅读(26) 评论(0) 编辑收藏举报

刷新页面返回顶部