js

JavaScript

简介

  • 使网页有动态行为，可以与用户交互
  • ECMAScript 5，Es为规范标准

引入方式

  • 1内部标签直接写
  • 2外部引用，标签src写js地址
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script>-->
<!--        // 注释和java一样-->
<!--        // 第一种引入方式，内部标签-->
<!--        alert('xax');-->
<!--    </script>-->
<!--第二种引入方式，src写js地址，外部引用-->
    <script src="js/qj.js"></script>
</head>
<body>

</body>
</html>

浏览器控制台和f12基本使用

  • js语法和java差不多，但没有java严格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    //语法和java差不多，没用java严格，但也区分大小写
    var a = 3;
    var name = "ks";
    if (a>2){
      alert(name);
    }
  </script>
</head>
<body>

</body>
</html>
image-20241219211554605

image-20241219211610062

  • f12各个块的应用
  • 元素 elements 仿写前端界面 可以拿到css和html代码
  • 控制台 可以console.log()等调试js
  • 源代码 sources 可以断点调试，先断点，再刷新，再调试
  • 网络 network 抓包
  • 性能内存 performance memory 和内存相关，暂时用不到
  • 应用程序 application 存一些数据到浏览器内，主要用来拿cookie

数据类型

  • number

    js不区分小数和整数

    //小数整数负数就不说了
NaN // not a number
Infinity // 无限大

  • 字符串

    'abc' "abc"都可以

  • 布尔值

    true false

  • 逻辑运算符

    且&& 或|| 非！

  • 比较运算符

    = //赋值
== //等于，只判断值，不判断类型
=== //绝对等于，判断值和类型

  • 浮点数问题

    console.log(1/3===(1-2/3))
false
Math.abs(1/3-(1-2/3))<0.0000000001
true

  • null和undefined

    null 表示定义了没赋值

    undefined 表示没定义，越界也会提示这个

  • 数组

    java必须存同一种，JavaScript不用

    var arr = [1,1.2,'a','axb',null,true]//用这个
new Array(1,3,5,7,9,true)

  • 对象

    对象用大括号，逗号隔开属性，最后一个不用逗号

    数组用中括号

    var person={
    name:"ax",
    age:10,
    tags:['js','html','css']
}

    取值

    console.log(person.age)
10

console.log(person.name)
ax

console.log(person.tags)
(3) ['js', 'html', 'css']

严格检查模式

// 严格检查，未定义等会红色报错，要写在第一行
'use strict';
// 一般let定义局部变量
let i = 1;

字符串

  • 单双引号都可以''或者""

  • 转义字符

    /*
转义字符都要在单双引号内才有效
常见
\n
\t
\'
\"
\u4e2d unicode字符 中字
\x41 ascii码 A
*/

console.log('a\tb')
a	b

console.log('a\nb')
a
b

  • 多行字符串编写

    let msg = `first
second
third`

  • 模板字符串

    // 用``（tap上面esc下面）包住，${}引用
let name = "zhm";
let msgg = `你好啊，${name}`;

  • 字符串长度，大小写，取值

    console.log(student)
stuednt

console.log(student.length)
7

console.log(student.toUpperCase())
STUEDNT

console.log(student.toLowerCase())
stuednt

console.log(student.charAt(1))
t

console.log(student.indexOf('t'))
1

  • substring

    // 下标1的后面所有
console.log(student.substring(1))
tudent

// 包左不包右[),2
console.log(student.substring(2,3))
u

// 2-4
console.log(student.substring(2,5))
ude

  • 字符串不可变

    student[0]
'S'
student[0]='c'
'c'
student[0]
'S'

数组

  • length长度可变

    //arr长度改变，变长会增加未定义的，变短会丢失后面的数据
var arr = [1,2,3,4,5,6,7]

arr
(7) [1, 2, 3, 4, 5, 6, 7]

arr.length
7

arr.length=3

arr
(3) [1, 2, 3]

arr.length = 10

arr
(10) [1, 2, 3, 4, 5, 6, 7, 空 ×3]

arr[7]
undefined
arr[999]
undefined

  • indexof() 和slice(begin,end)

    // slice和substring差不多，都是截取
// indexof(i) 返回第一个值是i的下标
arr = [1,2,3,4,'1','2','3']
(7) [1, 2, 3, 4, '1', '2', '3']
arr.indexOf(2)
1
arr.indexOf('2')
5
arr.slice(1)
(6) [2, 3, 4, '1', '2', '3']
arr.slice(1,4)
(3) [2, 3, 4]

  • push() 压入尾部

    pop() 弹出尾部最后一个

    arr
(7) [1, 2, 3, 4, '1', '2', '3']
arr.push('a')
8
arr
(8) [1, 2, 3, 4, '1', '2', '3', 'a']
arr.pop()
'a'
arr
(7) [1, 2, 3, 4, '1', '2', '3']

    unshift() 压入头部

    shift() 弹出头部最后一个

    arr
(7) [1, 2, 3, 4, '1', '2', '3']
arr.unshift('a')
8
arr
(8) ['a', 1, 2, 3, 4, '1', '2', '3']
arr.unshift('b')
9
arr
(9) ['b', 'a', 1, 2, 3, 4, '1', '2', '3']
arr.unshift('c','d')
11
arr
(11) ['c', 'd', 'b', 'a', 1, 2, 3, 4, '1', '2', '3']
arr.shift()
'c'
arr.shift()
'd'

    一次可以压入多个

  • sort()排序默认从小到大

    revers()数组反转

    concat([])链接返回连接结果，不改变原来数组

    arr = ['B','C','A']
(3) ['B', 'C', 'A']
arr.sort()
(3) ['A', 'B', 'C']
arr.reverse()
(3) ['C', 'B', 'A']
arr.concat('a','b')
(5) ['C', 'B', 'A', 'a', 'b']
arr
(3) ['C', 'B', 'A']
arr.concat([1,2,3])
(6) ['C', 'B', 'A', 1, 2, 3]

  • join()连接符，返回每两个元素被连接

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

  • 多维数组和java一样

    arr=[[1,2],[3,4],[5,6]];
(3) [Array(2), Array(2), Array(2)]0: 
arr[1][1]
4
arr.length
3
arr[1].length
2

对象

  • 定义对象

    键值对，定义属性

    JavaScript所有键都是字符串，值是任意对象

    /*
var 对象名 = {
	属性名: 属性值,
	属性名: 属性值,
	属性名: 属性值,
	属性名: 属性值
}
*/
// 最后一个属性不要带逗号
var person = {
    name : 'zhm',
    id : '001',
    score : 0,
    sex : '男'
}

  • 操作对象属性

    person.id
'001'
person.name
'zhm'
person.haha
undefined

  • 动态删除增加属性

    delete person.id
true
person
{name: 'zhm', score: 0, sex: '男'}
person.haha = 'haha'
'haha'
person
{name: 'zhm', score: 0, sex: '男', haha: 'haha'}

  • 判断属性是否在对象中

    xxx in xxx 包括父类继承，含有就返回true

    hasOwnProperty('') 方法，只看自己，含有就返回true

    person
{name: 23, score: 0, sex: '男', haha: 'haha', id: 1
// JavaScript所有键都是字符串，值是任意对象
name in person
false
'name' in person
true
'toString' in person
true
person.hasOwnProperty('toString')
false
person.hasOwnProperty('name')
true

  • JavaScript所有键都是字符串，值是任意对象

    person[name]
undefined
person['name']
23

name in person
false
'name' in person
true

流程控制

  • while和do while

    if else if

    for循环

    let i = 1;
if (i>0) console.log('i');
console.log('-----------------------------');

while (i<10){
  console.log(i++);
}
console.log('-----------------------------');
for (let j = 0; j < 10; j++) {
  console.log(i--);
}
console.log('-----------------------------');

  • 几种遍历数组方法

    // forEach函数
var arr = [12,3,5,2,6,5,56,5,56];
arr.forEach(function (value) {
    console.log(value);
})
console.log('-----------------------------');
// for ..in ..，取到的是下标
for (var arrKey in arr) {
    console.log(arr[arrKey]);
}
// for ..of ..，取到的是值
for (var arrKey in arr) {
    console.log(arr[arrKey]);
}

map和set集合

  • map

  • 存键值对，无序，键不可重复，值可以

    // Map 是键值对，和java map差不多，无序，无下标，键不可重复，值可重复
var map = new Map([['tom',100],['jerry',98],['faker',111]]);
var score = map.get('tom');// 通过键得值
map.delete('jerry');// 删
map.set('sm',666);// 增和改

  • set

    存值，无序，无下标，不可重复，重复自动存不了，只能存一个

    // set 无序，无下标，不可重复
var set = new Set([1,2,3,4,1,2,3,5]);
set.add(8);// 增
// set.add(`1`);
// set.add('1');
set.delete(4);// 善
console.log(set.has(1));// 判断是否包含
console.log(set.has('1'));

  • 用迭代器循环遍历

    // map.entries() map.key() map.value()返回迭代器
for (const entry of map.entries()) {
    console.log(entry);
}

for (const entry of set.values()) {
    console.log(entry);
}

函数

  • 函数和方法的区别
  • 对象里有的函数就是方法，对象由属性和方法组成
  • 函数是在对象外定义的方法

定义函数

  • 第一种

    function 函数名（参数）{函数体}

    function abs(x){
    if (x<0){
        return -x;
    }
    return x;
}

  • 第二种

    定义匿名函数，赋值给一个变量

    var max = function (x,y){
    return x>y?x:y;
};

  • arguments

    包含所有参数的数组，定义和未定义的，可以用未定义的参数进行操作

    function dc(x){
    console.log("x->"+x);
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

  • 规避不存在参数

    主动抛出异常

    function abs(x){
    // 规避不存在参数，抛出异常
    if(typeof x!=="number"){
        throw "Not a Number";
    }
  if (x<0){
    return -x;
  }
  return x;
}

  • 操作未定义参数

    ...rest 直接获取所有未定义参数存入rest数组

    // 1
function ab(a,b){
    console.log("a->"+a);
    console.log("b->"+b);
    for (let i = 2; i < arguments.length; i++) {
    // 一个方法多个函数，这里写操作ab后面的参数的函数
    }
}

// 2
function ab2(a,b,...rest){
    console.log("a->"+a);
    console.log("b->"+b);
    console.log(rest);
    for (let i = 0; i < rest.length; i++) {
        // 一个方法多个函数，这里写操作ab后面的参数的函数
    }
}

变量作用域

  • 定义在方法内就是局部变量

  • 如果方法1内的方法2定义的变量名x和方法1定义的变量名x重复，那么调用x时优先方法内

  • 定义变量最好是先在最前面先定义好所有需要，可以先不赋值

    var x = 1;
console.log(x+'x');
console.log(y+'y');// undefinedy
var y = x+1;
console.log(y+'y');// 2y

  • 定义在方法外，script内就是全局变量

  • 全局变量都绑定在window对象下，可以通过window.调用

  • alert也是window的一个变量，函数也可以是一个变量

    'use strict'
alert('我是alert');
window.alert('我是window.alert');

// alert也是window的一个变量，函数也可以是一个变量
// var alert = function () {}
let myalert1 = window.alert;
myalert1('我是myalert1');

// 修改alert
window.alert = function (x,y) {
    console.log(x+y);
}
window.alert(1,2);

window.alert = myalert1;

window.alert('1,2');

  • 局部变量最好都要let，var有时候会作用域混乱

    function ml(){
    for (let i = 0; i < 10; i++) {
        console.log(i);
    }
    console.log(i);// i is not defined
}

ml();

  • const修饰常量，不可修改

    const PI = '3.14';// 常量不可改
// PI = '1.3';

由于全局变量都在window对象下，合作容易重名，所以最好自己定义一个对象，把需要的变量用对象.变量名定义

// 定义一个对象，用于存自己需要的全局变量，以免和他人都用window存
var zhm = {};
zhm.name = 'xyz';
zhm.x = 123;
zhm.fuc = function(){
 }

方法

  • 就是对象下面的函数
  • 方法的定义有两种，1 ：后面写function(){} 2 拆开，先定义方法，再：定义的方法名
  • 方法调用要()，()为参数列表，空或者写参数
  • apply 每个方法都有，方法名.apply()，用于定义方法内this的对象和参数，没用就写空数组[]
  • 对象由属性和方法组成，都是k：v键值对
'use strict';

function getName(){
  return this.name;
}

var zhmstudy = {
  name : 'zhm',
  birth : 2001,
  age : function () {
    let now = new Date().getUTCFullYear();
    return now - this.birth;
  },
  gN : getName
};

var xxxstudy = {
  name : 'xxx',
  birth : 2001,
  age : function () {
    let now = new Date().getUTCFullYear();
    return now - this.birth;
  },
  gN : getName
};

getName.apply(zhmstudy,[]);
getName.apply(xxxstudy,[]);

内部对象（常用类）

标准对象

typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof undefined
'undefined'
typeof []// []数组
'object'
typeof Math.abs
'function'
typeof {}// {}对象
'object'

Data

  • 基本使用

    let now = new Date();
console.log(now);
console.log(now.getFullYear());// 年
console.log(now.getMonth());// 月 0-11
console.log(now.getDate());// 日
console.log(now.getDay());// 星期1到6是1-6 星期天是0
console.log(now.getHours());// 时
console.log(now.getMinutes());// 分
console.log(now.getSeconds());// 秒

console.log(now.getTime());// 从1970.1.1 0:0:0到现在的ms数
console.log(new Date(now.getTime()));// 传入ms，返回对应距离1970.1.1的ms的对象

  • 转换不同地区的对应时间

    now.toLocaleString()
'2025/1/5 12:55:41'
now.toUTCString()
'Sun, 05 Jan 2025 04:55:41 GMT'
now.toDateString// 转地区是方法要带() 
ƒ toDateString() { [native code] }
now.toDateString()
'Sun Jan 05 2025'

JSON

  • JSON是一种数据交换格式，有效提升传输速率

  • JS里一切皆对象，所以JS里的所有支持类型（都是对象）都能转化为JSON字符串

  • JSON是字符串‘ ’包住，js对象是{}包住的

  • 两个方法，JSON.stringify(objp)将对象转为字符串，JSON.parse('{"name":"zzz","age":30,"sex":"女"}')，将字符串解析为对应js对象

    'use strict';
var objp = {
  name : 'zhm',
  age : 3,
  sex : '男'
};

// 把对象转换为JSON字符串 '{"name":"zhm","age":3,"sex":"男"}'
let jsonp = JSON.stringify(objp);// typeof Jsonp 'string'

// 把字符串转换为对应对象 {name: 'zzz', age: 30, sex: '女'}
let newobjp = JSON.parse('{"name":"zzz","age":30,"sex":"女"}');

    objp
{name: 'zhm', age: 3, sex: '男'}

typeof objp
'object'

jsonp
'{"name":"zhm","age":3,"sex":"男"}'

typeof jsonp
'string'

newobjp
{name: 'zzz', age: 30, sex: '女'}

typeof newobjp
'object'

面向对象

原型继承

  • 关键字 __ proto __

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

var xiaoming = {
    name: 'xiaoming'
};

// 原型继承，意思是小明的原型是student
xiaoming.__proto__ = student;

class 定义原型 extends继承

  • 本质还是原型继承

  • 跟java差不多，更加好用

  • 区别在于构造器和方法，构造器constructor(){}，方法无返回值

    // class extends继承 本质还是原型
class person {
    constructor(name){
        this.name = name;
    }
    runa(){
        alert(this.name + '...run')
    }
}

class teacher extends person{
    constructor(name,age) {
        super(name);
        this.age = age;
    }
}

var xiaogang = new person('xiaogang');

var xiaohong = new teacher('xiaohong',3);

    xiaohong
teacher {name: 'xiaohong', age: 3}
// age: 3name: "xiaohong"[[Prototype]]: person 
// 继承person

xiaohong.runa()

xiaogang
person {name: 'xiaogang'}

xiaogang.runa()

操作BOM对象（重点）

  • js诞生就是为了操作浏览器，让js在浏览器中运行
  • BOM B是BS里的B，object，model，浏览器对象模型
typeof Window// 类
'function'
typeof window// 对象
'object'

  • window对象

    window 代表浏览器窗口，定义的全局变量默认在window下

    window.alert(1)
undefined
// 可以拖动改变
window.innerHeight
150
window.innerWidth
714
window.outerWidth
782
window.outerHeight
840

  • navigator

    封装浏览器信息，用的少（会被人为修改），一般用于判断当前浏览器的属性（手机还是pc）

    navigator
Navigator {getBattery: undefined, vendorSub: '', productSub: '20030107', vendor: 'Google Inc.', …}
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0'

  • screen

    电脑屏幕尺寸 获取宽高

    screen
Screen {availWidth: 1536, availHeight: 824, width: 1536, height: 864, colorDepth: 24, …}
screen.width
1536
screen.height
864

  • location

    当前页面url信息

    host: "www.baidu.com"// 主机

hostname: "www.baidu.com"

href: "https://www.baidu.com/index.php?tn=02049043_12_pg"// 跳转链接

origin: "https://www.baidu.com"

pathname: "/index.php"

port: ""

protocol: "https:"// 协议

reload: f reload()// 重新加载，刷新

location.assign('https://www.bilibili.com/video/BV1JJ41177di?spm_id_from=333.788.player.switch&vd_source=1b85443d48f3788670100c987a9eb19b&p=19')// 指向其他链接

  • document

    代表当前页面，HTML文档树，将html标签转换为对象

    var dl = document.getElementById('app');// 通过选择器获取标签

dl
<dl id=​"app">​<dt>​JAVA​</dt>​<dd>​JAVASE​</dd>​<dd>​JAVAEE​</dd>​</dl>​

typeof dl
'object'

// 改标题
document.title
'Title'
document.title='nb'
'nb'

//获取cookie，所以不安全会被劫持，要cookie：httpOnly

document.cookie
'BIDUPSID=09CB7A0A2FC5208BDFE2E171A865EF3B; PSTM=1602335167; __bid_n=1852e266e678c4df614207; BAIDU_WISE_UID=wapp_1723430472290_842; BAIDUID=2E1854FDB8086C84E02964AEDCF413C8:SL=0:NR=10:FG=1; BAIDUID_BFESS=2E1854FDB8086C84E02964AEDCF413C8:SL=0:NR=10:FG=1; sug=0; sugstore=0; ORIGIN=2; bdime=0; arialoadData=false; ZFY=dwkvNWoHu04ulgwI3MUpeSzNIPHzB5w9:AWoDtEO7IVk:C; BDRCVFR[r_74CZIkx53]=aeXf-1x8UdYcs; H_PS_PSSID=61027_61360_60853_61522_61568_61613_61631_61635_61573_61557_61721; BD_UPN=12314753; BA_HECTOR=01a524a02haga004a5ak8h0lb1nvbi1jnl6s11u; RT="z=1&dm=baidu.com&si=1497bc64-d415-4f34-b83b-3198f001562e&ss=m5jq8r5w&sl=2&tt=1kq&bcn=https%3A%2F%2Ffclog.baidu.com%2Flog%2Fweirwood%3Ftype%3Dperf&ld=9nu&ul=1fsh&hd=1fsj"'

  • history

    历史记录

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

操作DOM对象

  • html文档树对象模型，操作文档树节点

    文档树，下面每个都是节点

    image-20250107182453944

  • 对文档树节点的增删改查，前端的增删改查

  • 获取节点（先获取才能操作）

  • 增加新节点

  • 删除节点

  • 修改节点

  • 遍历获取节点

  • 获取节点

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

<script>
    // 对应css选择器
  var h1 = document.getElementsByTagName('h1');
  var p1 = document.getElementsByClassName('p1');
  var p2 = document.getElementById('p2');

  var father = document.getElementById('father');
  var fa = father.children;// 数组

  // p2.nextElementSibling
  // p2.previousElementSibling

</script>
</body>

  • 更新DOM节点

    先获取节点，再更新

    // 修改DOM
var div1 = document.getElementById('div1');

    // 修改内容，会直接覆盖原来的
div1.innerText = 'new'
'new'

// 修改超文本链接，可以识别html
div1.innerHTML = '<strong>newnew<strong>'
'<strong>newnew<strong>'

// 修改样式，下面跟css一样修改
div1.style.color = 'red'
'red'

div1.style.fontSize = '50px'
'50px'

div1.style.background = 'yellow'
'yellow'

  • 删除DOM节点

    删除子节点，要先获取父节点，再通过父节点删除子节点

    var p2 = document.getElementById('p2');

var fatherr = p2.parentElement;// 通过子节点获取父节点

fatherr.removeChild(p2);// 通过父节点移除子节点

    如果通过 var fa = father.children;孩子节点数组删除

    fatherr.removeChild(fa[0]);

    fatherr.removeChild(fa[1]);

    fatherr.removeChild(fa[2]);

    是不对的，因为fa数组在动态改变

  • 插入节点

    appendChild 在最后插入

    newElement 创建节点

    // 在后面插入
var newp = document.getElementById('newp');
father.appendChild(newp);

// 创建节点
var style = document.createElement('style');
// 节点内写html
style.innerHTML = 'body{background:red}';
// 给节点属性赋值
style.setAttribute('type','text/css');

document.getElementsByTagName('body')[0].append(style);


// 在father 下 div1 插到p1[0]前面
father.insertBefore(div1,p1[0]);
father.insertBefore(div1,p2);

表单相关

  • md5加密

  • 获取输入值

  • 绑定提交事件或点击事件（函数）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
</head>
<body>

<form action="" method="get" onsubmit="aaa()">
    <p><span>姓名：</span><input type="text" name="name" id = "username" required></p>
    <p><span>密码：</span><input type="password" id = "input_pwd"></p>
    <p><input type="password" hidden="hidden" name="pwd" id="md5_pwd"></p>
    <p><input type="submit" name="sub" onclick="aaa()"></p>
</form>

<script>
    var username = document.getElementById('username');
    username.value = '233';// 获取和修改输入

    // md5加密
    var input_pwd = document.getElementById('input_pwd');
    var md5_pwd = document.getElementById('md5_pwd');
    md5_pwd.value = md5(input_pwd.value);

    // 表单提交绑定事件onsubmit，按钮绑定点击事件onclick
    function aaa(){
        alert(123);
    }

</script>
</body>
</html>

JQuery

  • 引入方式

    在线 或者 项目直接引用

  • 用法公式

    $(css选择器).action();

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  在线引入-->
<!--  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>-->
<!--  直接项目引入-->
  <script src="lib/jquery-3.7.1.js"></script>
</head>
<body>
<a href="" id="aaa">点我</a>

<script>

  // 公式 $(css选择器).action()
  $('#aaa').click(function (x) {
    alert(1);
  });
</script>
</body>
</html>

  • 一些方法

    鼠标相关

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="lib/jquery-3.7.1.js"></script>
  <style>
    #mouse_div{
      width: 500px;
      height: 500px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
鼠标位置：<span id="mouse_xy"></span>
<div id="mouse_div"></div>

<script>
  /*
  $(function(){})
  等价
  $(document).ready(function () {})
  */
  // 加载完html再加载这个js
  $(function () {
    $('#mouse_div').mousemove(function (e) {
      $('#mouse_xy').text('x:'+e.pageX+'y:'+e.pageY);
    })
  })
</script>

</body>
</html>

    操作DOM节点

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="lib/jquery-3.7.1.js"></script>
</head>
<body>
<ul id="qd">
  <li id="js">JavaScript</li>
  <li class="css">CSS</li>
  <li name="html">HTML</li>
</ul>

<script>
  $(function () {
    $('#qd li[name="html"]').text();
    $('#qd li[name="html"]').text('html');
    $('#qd li[name="html"]').html();

    $('#qd').css({ "color": "#ff0011", "background": "blue" });// 多个
    $('#qd').css( "color", "yellow");// 单个


  })


</script>

</body>
</html>
posted @ 2025-04-22 22:08  学习java的白菜  阅读(87)  评论(0)    收藏  举报