韩式摄影网站源码,2018网站开发的革新,公司小程序怎么制作,做试卷的网站目录 JavaScript简介
主要特点
主要用途
JavaScript的基本特性 JavaScript的引入方式
1. 内联方式 (Inline JavaScript)
2. 内部方式 (Internal JavaScript / Embedded JavaScript)
3. 外部方式 (External JavaScript)
JavaScript的语法介绍
1.书写语法 2.输出语句
3.…目录 JavaScript简介
主要特点
主要用途
JavaScript的基本特性 JavaScript的引入方式
1. 内联方式 (Inline JavaScript)
2. 内部方式 (Internal JavaScript / Embedded JavaScript)
3. 外部方式 (External JavaScript)
JavaScript的语法介绍
1.书写语法 2.输出语句
3.变量 1变量的声明关键词
a. var
b. let
c. const
2 变量的命名规则
3 变量的作用域
4 变量的提升Hoisting 4.数据类型
1基本数据类型原始类型
a. 数字Number
b. 字符串String
c. 布尔值Boolean
d. undefined
e. null
f. Symbol符号
2复杂数据类型引用类型
a. 对象Object
b. 数组Array
c. 特殊对象Date, RegExp, Error等
3类型转换
a. 转字符串
b. 转数字 c. 转布尔值
4值得注意的细节
a. typeof运算符
b.instanceof
5.运算符 6.流程控制语句
7.函数
1 函数的定义方式
a.函数声明Function Declaration
b.函数表达式Function Expression
c.箭头函数Arrow Function
2函数参数的语法和细节
a. 默认参数Default Parameters
b. 剩余参数Rest Parameters
c. 参数解构Destructuring
3 函数作用域与闭包
a. 作用域
b. 闭包
4函数的this绑定规律
a. 普通函数
b. 箭头函数
c. 更复杂的绑定规则
5函数的返回值
6 生成器函数Generator Functions 8.对象
1常用对象 2自定义对象
a. 对象的创建方式 对象字面量Object Literal- 最常用
new Object() 构造函数
构造函数Constructor Function- 创造类实例的“模板”
使用原型Prototype优化构造函数 - 共享方法
ES6 class 语法 - 现代JS推荐的面向对象方式
b. 访问和修改对象属性/方法
点表示法Dot Notation
方括号表示法Bracket Notation
c. 删除对象属性
d. 检查属性是否存在
in 运算符
hasOwnProperty() 方法
e. 遍历对象属性
for...in 循环
Object.keys()
Object.values()
Object.entries()
f. 短属性名和短方法名ES6
g. 计算属性名Computed Property NamesES6
9.JSON
1什么是JSON
2JSON的语法规则
a.基本结构
b.JSON对象Object
c. JSON数组Array
d. 数值Number
e. 字符串String
f. 布尔值Boolean
g. null值
h. 不能出现
3在JavaScript中操作JSON
a.转换为JSON字符串JSON.stringify
b. 解析JSON字符串JSON.parse
4扩展自定义对象转JSON的细节 10.BOM
1什么是BOM
2BOM的核心对象和功能
3BOM的常用对象及使用细节
a. window对象
b. location对象
c. history对象
d. navigator对象
e. screen对象
f. 定时器函数
4弹窗相关函数
5浏览器宽高与窗口操作
a. innerWidth 和 innerHeight
b. outerWidth 和 outerHeight
c. resize事件
d. 弹出新窗口或标签页
e. 控制窗口大小与位置 11.DOM
1什么是DOM
2DOM的基本结构
3常用的DOM操作语法和细节
a. 访问元素
b. 修改元素
c. 创建新元素
d. 删除元素
e. 事件绑定
f. 其他常用操作
4DOM操作的细节注意点
5示例 JavaScript简介
JavaScript简称JS是一种广泛使用的动态脚本语言主要用于网页开发赋予网页动态交互功能。它由网景公司Netscape的布兰登·艾奇Brendan Eich在1995年开发最初名为LiveScript后来改名为JavaScript。 主要特点 客户端脚本主要在浏览器中执行使网页具有动态效果和交互能力如表单验证、动画、实时更新内容等。 动态类型变量类型在运行时确定不需要预定义。 弱类型类型转换自动进行使用灵活。 事件驱动响应用户操作点击、悬停、提交等。 多范式支持面向对象、函数式、命令式编程。 主要用途 网页交互实现按钮点击、表单验证、动画效果。 网页开发框架如React、Vue、Angular。 服务器端编程通过Node.jsJavaScript还能在服务器执行。 移动应用如React Native。 桌面应用、游戏开发通过特殊平台和引擎实现。 JavaScript的基本特性 简洁灵活的语法类似C、Java的语法但比它们简单易用。 原生支持事件处理可以直接在HTML或JavaScript中绑定事件。 DOM操作可以直接操作网页结构Document Object Model。 异步编程支持Promise、async/await等技术方便处理异步任务。 JavaScript的引入方式
1. 内联方式 (Inline JavaScript)
概念 将JavaScript代码直接作为HTML标签的属性值使用。通常用于处理特定的事件例如点击按钮时执行一段JS代码。
优点 简单直接适用于非常短小、针对特定元素的逻辑。 无需额外的文件或script标签。
缺点 极其不推荐 严重违反了结构HTML、样式CSS、行为JavaScript分离的原则。 代码可读性差难以维护。 代码复用性差。 增加了HTML文件的体积。
!DOCTYPE html
html
headtitle内联JavaScript示例/title
/head
bodybutton onclickalert(你点击了我内联方式);点击我/buttona href# onmouseoverthis.style.colorred;onmouseoutthis.style.colorblack;鼠标悬停/a
/body
/html2. 内部方式 (Internal JavaScript / Embedded JavaScript)
概念 将JavaScript代码放置在HTML文件的script标签内部。script标签可以放在HTML文档的head部分也可以放在body部分。
优点 代码都在一个HTML文件中方便小型项目或单页面应用。 避免了额外的HTTP请求。
缺点 不利于代码复用。如果多个HTML页面需要相同的JavaScript代码就需要复制代码。 增加了HTML文件的体积下载时需要加载整个JS代码。 如果JS代码量很大可能会阻塞页面内容的渲染尤其是放在head里。
建议放置位置 通常推荐将 script 标签放置在 body 标签的闭合标签 /body 之前。这样做的原因是 避免阻塞渲染 浏览器在解析HTML时遇到 script 标签会暂停HTML的解析和渲染转而去下载和执行JavaScript代码。如果JavaScript在页面的顶部head中且代码量较大用户可能会看到空白页面的时间延长。 确保DOM可用 JavaScript代码通常需要操作HTML元素DOM。如果JavaScript在元素加载之前就执行可能会找不到要操作的元素导致错误。将JavaScript放置在 /body 之前可以保证它执行时页面上的所有HTML元素已经被浏览器解析并创建为DOM树。
!DOCTYPE html
html langzh-CN
!-- HTML文档的语言设置为中文 --
head!-- 字符集为UTF-8 --meta charsetUTF-8!-- 设置浏览器兼容性 --meta nameviewport contentwidthdevice-width, initial-scale1.0title内部JavaScript示例/titlescript// 这是放置在 head 标签内的 JavaScript 代码function showHeadMessage() {console.log(这是来自 head 标签内的 JavaScript。);}/script
/head
bodyh1内部JavaScript/h1p idmyParagraph这是一个段落。/pbutton onclickchangeText()点击改变段落/buttonscript// 这是放置在 body 标签末尾的 JavaScript 代码function changeText() {document.getElementById(myParagraph).innerText 段落内容已被JavaScript改变;}// 页面加载完成后执行window.onload function() {showHeadMessage(); // 调用 head 中的函数console.log(页面已加载完成这是来自 body 标签末尾的 JavaScript。);};/script
/body
/html3. 外部方式 (External JavaScript)
概念 将JavaScript代码单独保存在一个.js文件中然后在HTML文件中通过script标签的 src 属性引入。
优点 最推荐的方式 实现了结构、样式、行为的完全分离代码清晰易于维护。 代码复用性高 多个HTML页面可以引用同一个.js文件避免重复编写代码。 浏览器缓存 .js文件可以被浏览器缓存当用户再次访问或访问其他页面时无需重新下载加快页面加载速度。 优化加载性能 可以使用 defer 属性脚本会延迟到文档解析完成后才执行但会按照它们在文档中出现的顺序执行。不会阻塞HTML解析。 可以使用 async 属性脚本会异步加载并在加载完成后立即执行不保证执行顺序也会阻塞HTML解析但只在脚本下载期间。 推荐将 script 标签放在 /body 闭合标签之前。
缺点 增加了一个HTTP请求但可以通过浏览器缓存弥补。
// script.js
function sayHello() {alert(你好这是来自外部JavaScript文件);
}
function updateDiv() {document.getElementById(messageDiv).innerText 外部JS已修改此内容。;
}
// 页面加载完成后执行
window.onload function() {console.log(外部JavaScript文件已加载并执行。);
};!DOCTYPE html
html langzh-CN
head!-- 字符集为UTF-8 --meta charsetUTF-8!-- 设置浏览器兼容性 --meta nameviewport contentwidthdevice-width, initial-scale1.0title外部JavaScript示例/title!-- 推荐使用 defer 或放在 body 底部 --script srcscript.js defer/script
/head
bodyh1外部JavaScript/h1p这是来自HTML页面的内容。/pdiv idmessageDiv原始内容/divbutton onclicksayHello()点击问候/buttonbutton onclickupdateDiv()更新内容/button
/body
/htmlJavaScript的语法介绍
1.书写语法 2.输出语句 3.变量 1变量的声明关键词
JavaScript中声明变量主要使用三种关键词var、let和const。这三者在作用域、可变性等方面存在差异。
a. var 最早的变量声明方式。 作用域为函数作用域函数内部有效函数外面不可见 可以重复声明同一变量后声明会覆盖前面。
b. let ES6ECMAScript 2015引入。 作用域为块作用域比如在if、for、while块内有效 不允许重复声明同一变量。
c. const 也是ES6引入。 作用域为块作用域 必须初始化声明后不可再赋值 对于对象和数组虽然引用不可变但对象内容还是可变的。
2 变量的命名规则 只能以字母、$、_开头 后续可以使用字母、数字、$、_ 不能使用JavaScript关键字如if, var, function等作为变量名 推荐命名具有描述性语义清晰。
3 变量的作用域 var声明的变量函数作用域或全局作用域如果在函数外部声明 let和const声明的变量块作用域例如在if、for、while内有效
4 变量的提升Hoisting var声明的变量会提升变量声明会被提升到作用域顶部但赋值不会。 let和const不会提升会在块内形成“暂时性死区TDZ”访问会报错。
console.log(x); // undefined因为var会提升声明
var x 5;console.log(y); // 报错Cannot access y before initialization
let y 10;console.log(z); // 报错Cannot access z before initialization
const z 15;4.数据类型
1基本数据类型原始类型
a. 数字Number 表示整数和浮点数。 JavaScript中的数字采用双精度浮点IEEE 754标准。 特殊值Infinity, -Infinity, NaN非数字
let integerNum 42; // 整数
let floatNum 3.1415; // 浮点数
let infinity Infinity; // 正无穷
let nanValue NaN; // 非数字注意NaN表示“非数值”且NaN本身不等于任何值包括自己。
console.log(NaN NaN); // false
console.log(isNaN(NaN)); // trueb. 字符串String 用单引号或双引号也支持反引号 表示。 支持转义字符和模板字符串。
let str1 Hello;
let str2 World;
let str3 Hello, ${str2}!; // 模板字符串支持插值c. 布尔值Boolean 只有两个值true 和 false。
d. undefined 表示变量未定义或未赋值。
e. null 表示“空值”需要显式赋值。
f. Symbol符号 在ES6引入。 用于创建唯一的标识符。
const sym1 Symbol(foo);
const sym2 Symbol(foo);
console.log(sym1 sym2); // false符号唯一2复杂数据类型引用类型
a. 对象Object 键值对集合属性名为字符串或Symbol值可以为任何类型。 字面量定义
let obj {name: Alice,age: 25,greet: function() { return Hello; }
};b. 数组Array 数对象的特殊类型存储有序元素。
let arr [1, 2, 3, a, true];c. 特殊对象Date, RegExp, Error等
let dateNow new Date();
let regex /abc/;3类型转换
JavaScript会在需要时自动进行类型转换隐式转换也可以手动转换。
a. 转字符串
String(123); // 123
(123).toString(); // 123b. 转数字
Number(456); // 456
parseInt(123, 10); // 123
parseFloat(3.14); // 3.14
parseInt(12abc); //12
parseInt(abc); //NaN c. 转布尔值
Boolean(0); // false
Boolean(); // false
Boolean(hello); // true
Boolean(undefined); // false注意 以下值在转换为布尔值时为false称为“假值”或“false值” false 0 -0 0nBigInt零 null undefined NaN 空字符串
其他值为真true。
4值得注意的细节
a. typeof运算符
用来判断变量的数据类型。
typeof 123; // number
typeof hello; // string
typeof true; // boolean
typeof undefined; // undefined
typeof null; // object这是一个历史遗留问题null实际上是原始类型
typeof Symbol(foo); // symbol
typeof {a:1}; // object
typeof [1,2,3]; // object数组也是对象
typeof function(){}; // function函数也是对象的一种b.instanceof
判断对象是否是某个类的实例。
let arr [1,2,3];
console.log(arr instanceof Array); // true
console.log({} instanceof Object); // true5.运算符 6.流程控制语句
和Java相近。 7.函数
1 函数的定义方式
a.函数声明Function Declaration
function 函数名(参数列表) {// 函数体
}特点 函数会被提升hoisted可以在声明之前调用。 适合定义在代码顶层或块内的标准函数。
b.函数表达式Function Expression
const func function(参数) {// 函数体
};特点 不会被提升只能在声明后使用。 通常用作回调函数。
c.箭头函数Arrow Function
const func (参数) {// 函数体
};特点 语法简洁尤其适合写短函数。 不绑定自己的this常用于回调或匿名函数。
2函数参数的语法和细节
a. 默认参数Default Parameters
function greet(nameGuest) {console.log(Hello, name);
}
greet(); // Hello, Guestb. 剩余参数Rest Parameters
收集多余参数为数组
function sum(...numbers) {return numbers.reduce((acc, curr) acc curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 10c. 参数解构Destructuring
解构数组或对象参数
function display({name, age}) {console.log(name, age);
}
display({name: Alice, age: 30});3 函数作用域与闭包
a. 作用域 函数定义的变量在函数内部有效外部不可访问除非返回或传递。 函数内部可以访问外部作用域。
b. 闭包 函数配合其定义环境形成闭包能“记住”当时的作用域。
function outer() {let count 0;return function inner() {count;console.log(count);}
}
const increment outer();
increment(); // 1
increment(); // 24函数的this绑定规律
a. 普通函数 在严格模式(use strict)下this为undefined。 在非严格模式下this指向全局对象浏览器window。
function show() {console.log(this);
}
show(); // 在非严格模式window严格模式下undefinedb. 箭头函数 没有自己的this继承自定义声明时所在的作用域。
const obj {value: 42,getValue: function() {const arrowFunc () this.value;return arrowFunc();}
};
console.log(obj.getValue()); // 42c. 更复杂的绑定规则 使用call、apply、bind可以强制指定this。
const obj {name: Bob};
function showName() {console.log(this.name);
}
showName.call(obj); // Bob5函数的返回值 默认返回undefined。 使用return语句返回值。 函数可以返回任何类型的数据。
注意 一旦遇到return函数立即结束。 可以返回对象、数组、函数等。
6 生成器函数Generator Functions 使用function*定义。 产生可迭代的值。
function* gen() {yield 1;yield 2;yield 3;
}
const iterator gen();
console.log(iterator.next()); // { value: 1, done: false }8.对象
1常用对象 2自定义对象
在JavaScript中对象是键值对的无序集合。键key是字符串或Symbol值value可以是任何数据类型包括原始类型、其他对象、函数等。
a. 对象的创建方式 对象字面量Object Literal- 最常用
这是创建对象最简单、最常用的方式。
// 语法
let objectName {key1: value1,key2: value2,// ...
};// 示例
let person {name: Alice, // 属性propertyage: 30, // 属性isStudent: false, // 属性greet: function() { // 方法methodconsole.log(Hello, my name is this.name);}
};细节 属性名可以是标识符不带引号如name也可以是字符串带引号如user-id。如果属性名是无效的标识符如包含连字符、空格或数字开头则必须用引号。 属性值可以是任何数据类型。 方法是值为函数的属性。 this关键字在对象方法中指向当前对象本身。
new Object() 构造函数
不常用但也是一种创建方式。
let person new Object();
person.name Bob;
person.age 25;
person.greet function() {console.log(Hi, Im this.name);
};构造函数Constructor Function- 创造类实例的“模板”
用于创建具有相同属性和方法的多个对象。
// 语法
function ConstructorName(param1, param2) {this.property1 param1;this.property2 param2;this.method function() {// ...};
}// 示例
function Person(name, age) {this.name name;this.age age;this.greet function() {console.log(Hello, my name is this.name and I am this.age years old.);};
}// 使用 new 关键字创建实例
let person1 new Person(Charlie, 40);
let person2 new Person(Diana, 28);person1.greet(); // Hello, my name is Charlie and I am 40 years old.
person2.greet(); // Hello, my name is Diana and I am 28 years old.细节 函数名通常首字母大写约定。 this关键字在构造函数中指代新创建的实例。 必须使用new关键字来调用构造函数否则this会指向全局对象非严格模式下。 每个实例都会有自己的greet方法这可能会造成内存浪费因为方法相同。
使用原型Prototype优化构造函数 - 共享方法
为了避免每个实例都拥有独立的方法副本可以将方法定义在构造函数的原型上。
function Person(name, age) {this.name name;this.age age;
}// 将方法添加到 Person.prototype
Person.prototype.greet function() {console.log(Hello, my name is this.name and I am this.age years old.);
};let person3 new Person(Eve, 35);
person3.greet(); // Hello, my name is Eve and I am 35 years old.细节 Person.prototype是一个对象所有由Person构造函数创建的实例都会通过原型链继承Person.prototype上的属性和方法。 greet方法现在只存在一份被所有Person实例共享节约内存。
ES6 class 语法 - 现代JS推荐的面向对象方式
class是JavaScript中用来创建对象的语法糖底层依然是原型和构造函数。
class Person {constructor(name, age) {this.name name;this.age age;}greet() { // 方法直接定义在类内部会被添加到原型上console.log(Hello, my name is ${this.name} and I am ${this.age} years old.);}// 静态方法属于类本身不属于实例static sayHello() {console.log(Hello from the Person class!);}
}let person4 new Person(Frank, 50);
person4.greet(); // Hello, my name is Frank and I am 50 years old.
Person.sayHello(); // Hello from the Person class!细节 constructor方法是类默认的构造函数当使用new关键字创建实例时会自动调用它。 在constructor之外定义的方法会自动添加到原型上。 static关键字用于定义静态方法只能通过类本身调用不能通过实例调用。
b. 访问和修改对象属性/方法
点表示法Dot Notation
console.log(person.name); // Alice
person.age 31;
person.greet();方括号表示法Bracket Notation
当属性名包含特殊字符、空格、或是一个变量时必须使用方括号表示法。
console.log(person[name]); // Alicelet propName age;
console.log(person[propName]); // 31person[favorite-color] blue; // 可以添加带连字符的属性
console.log(person[favorite-color]);c. 删除对象属性
使用delete运算符。
delete person.isStudent;
console.log(person.isStudent); // undefinedd. 检查属性是否存在
in 运算符
检查属性是否在对象或其原型链上。
console.log(name in person); // true
console.log(toString in person); // true (继承自Object.prototype)
console.log(job in person); // falsehasOwnProperty() 方法
检查属性是否是对象自身的属性非继承。
console.log(person.hasOwnProperty(name)); // true
console.log(person.hasOwnProperty(toString)); // falsee. 遍历对象属性
for...in 循环
遍历对象可枚举的属性包括原型链上的。
for (let key in person) {console.log(${key}: ${person[key]});
}
// 注意for...in 会遍历原型链上的可枚举属性需要结合 hasOwnProperty() 筛选
for (let key in person) {if (person.hasOwnProperty(key)) {console.log(Own property - ${key}: ${person[key]});}
}Object.keys()
返回一个包含对象自身所有可枚举属性名的数组。
let keys Object.keys(person);
console.log(keys); // [name, age, greet, favorite-color]keys.forEach(key {console.log(${key}: ${person[key]});
});Object.values()
返回一个包含对象自身所有可枚举属性值的数组。
let values Object.values(person);
console.log(values); // [Alice, 31, Function, blue]Object.entries()
返回一个包含对象自身所有可枚举属性的[key, value]对数组。
let entries Object.entries(person);
console.log(entries); // [[name, Alice], [age, 31], [greet, Function], [favorite-color, blue]]for (let [key, value] of entries) {console.log(${key}: ${value});
}f. 短属性名和短方法名ES6
当变量名和属性名相同时可以简写。
let myName Grace;
let myAge 22;let user {myName, // 等同于 myName: myNamemyAge, // 等同于 myAge: myAgewalk() { // 等同于 walk: function() { ... }console.log(Walking...);}
};
console.log(user.myName); // Grace
user.walk(); // Walking...g. 计算属性名Computed Property NamesES6
属性名可以是一个表达式的结果。
let prop dynamicKey;
let obj {[prop 1]: value1,[another Key]: value2
};
console.log(obj.dynamicKey1); // value1
console.log(obj.anotherKey); // value29.JSON
1什么是JSON JSONJavaScript Object Notation是一种轻量级的数据交换格式易于读写和解析。 它是基于JavaScript对象字面量语法的文本格式但不仅限于JavaScript可以在多种编程语言中使用。
2JSON的语法规则
a.基本结构 数据是键值对的集合 可以是对象用{}包围或数组用[]包围
b.JSON对象Object
{key1: value1,key2: value2,...
}c. JSON数组Array
[value1,value2,...
]d. 数值Number 支持整数和浮点数
e. 字符串String 必须用双引号包围 支持转义字符如\n、\t、\、\\
f. 布尔值Boolean
g. null值
h. 不能出现 单引号字符串必须双引号 函数、日期对象、undefined这些在JSON中不被支持 不能有函数作为值
{name: John,age: 25,isStudent: false,scores: [95, 82, 88],address: {city: New York,zip: 10001},skills: null
}3在JavaScript中操作JSON
a.转换为JSON字符串JSON.stringify
将JavaScript对象转成JSON字符串常用于数据传输或存储
const obj { name: Alice, age: 30 };
const jsonStr JSON.stringify(obj);
console.log(jsonStr); // {name:Alice,age:30}b. 解析JSON字符串JSON.parse
将JSON字符串转成JavaScript对象常用于接收数据
const jsonStr {name:Bob,age:25};
const obj JSON.parse(jsonStr);
console.log(obj.name); // Bob4扩展自定义对象转JSON的细节
当调用JSON.stringify()时可以传入replacer参数用于控制序列化过程。
const obj {name: Tom,age: 28,greet() { return Hi; }
};
console.log(JSON.stringify(obj)); // 无greet方法输出{name:Tom,age:28}// 只序列化特定字段
JSON.stringify(obj, [name, age]);// 美化输出添加空格缩进
JSON.stringify(obj, null, 2);注意除数据外函数和符号会被忽略。 10.BOM
1什么是BOM
BOMBrowser Object Model是JavaScript在浏览器环境中提供的一组API用于访问和操作浏览器窗口和与浏览器相关的对象。它提供了除DOM以外的各种工具使得脚本可以控制浏览器窗口、导航、历史记录、屏幕信息等。
注意BOM不是标准的一部分它在不同浏览器中的实现和支持略有差异。
2BOM的核心对象和功能 对象 描述 常用方法或属性 window 浏览器窗口的全局对象所有BOM对象都通过window访问 代理全局变量如alertdocument等 location 当前窗口的URL信息与导航 href, reload(), assign(), replace() history 访问浏览器的历史记录 back(), forward(), go() navigator 浏览器信息比如浏览器类型、版本、操作系统 userAgent, platform screen 屏幕相关信息(如宽高、色深) width, height, colorDepth alert()、confirm()、prompt() 弹窗相关的函数但这些是全局函数/方法不是对象 弹窗 functions setTimeout() 和 setInterval() 定时器函数用于延时或定时操作 clearTimeout(), clearInterval()
3BOM的常用对象及使用细节
a. window对象 定义整个浏览器窗口的代表实际上是全局作用域的对象。 访问方式无需window.直接使用window是全局对象的引用。
// 弹出提示框
alert(这是一个提醒);console.log(window.innerWidth); // 视口宽度
console.log(window.location.href); // 当前页面URLb. location对象 作用用于获取或设置页面的URL信息和进行导航。 常用属性和方法 属性 / 方法 说明 示例 href 当前文档的完整URL console.log(location.href); protocol 协议部分http:、https: location.protocol host 主机名和端口如localhost:8080 location.host pathname 路径部分 location.pathname search 查询字符串URL中?后部分 location.search hash URL中的锚点#后 location.hash reload() 重新加载页面 location.reload(); assign(url) 跳转到指定URL location.assign(https://example.com); replace(url) 跳转但不会在历史记录中留下原页面 location.replace(https://example.com);
// 导航到新页面
location.href https://www.google.com;// 重新加载页面
location.reload();c. history对象 作用操作浏览器的历史记录。 常用方法 方法 作用 示例 back() 后退一页 history.back(); forward() 前进一页 history.forward(); go(n) 前进或后退n步n可以为负 history.go(-2);
// 后退一页
history.back();// 前进两页
history.go(2);d. navigator对象 作用提供有关用户浏览器和设备的信息。 常用属性 属性 描述 示例 userAgent 浏览器的用户代理字符串 console.log(navigator.userAgent); platform 操作系统平台 navigator.platform appName 浏览器应用名少用因兼容性差 navigator.appName language 当前用户的语言偏好 navigator.language
e. screen对象 作用显示屏相关信息。 常用属性 属性 描述 示例 width 屏幕宽度像素 screen.width height 屏幕高度像素 screen.height colorDepth 色深每个像素的色彩位数 screen.colorDepth pixelDepth 像素深度 screen.pixelDepth
f. 定时器函数 setTimeout()延时执行 clearTimeout()取消超时 setInterval()周期执行 clearInterval()取消周期
// 一次性延时
const timerId setTimeout(() {alert(一秒后弹出);
}, 1000);// 取消延时
clearTimeout(timerId);// 周期执行
const intervalId setInterval(() {console.log(每两秒执行一次);
}, 2000);// 取消周期
clearInterval(intervalId);4弹窗相关函数 alert(message)显示信息对话框 confirm(message)显示确认对话框返回布尔值 prompt(message, default)输入框返回用户输入字符串或null。
alert(这是一个提示);if (confirm(是否确定继续)) {console.log(用户点击确定);
} else {console.log(用户点击取消);
}const name prompt(请输入你的名字, 张三);
console.log(用户输入的名字是 name);5浏览器宽高与窗口操作
a. innerWidth 和 innerHeight 视口内容区宽高 例window.innerWidth
b. outerWidth 和 outerHeight 包含边框、滚动条等内容的全窗口尺寸
c. resize事件
监听窗口变化动态调整布局。
window.addEventListener(resize, () {console.log(窗口宽度${window.innerWidth});
});d. 弹出新窗口或标签页
// 打开新窗口
const newWin window.open(https://example.com, _blank);// 关闭窗口
newWin.close();e. 控制窗口大小与位置 resizeTo(width, height)调整当前窗口大小 moveTo(x, y)移动窗口注意大部分浏览器限制
window.resizeTo(800, 600);
window.moveTo(100, 100);11.DOM
1什么是DOM DOMDocument Object Model文档对象模型是HTML和XML文档的编程接口。 它以树状结构节点树表示页面的所有内容每个元素、属性、文本都是节点。 JavaScript可以通过DOM操作网页实现动态内容更新和交互。 2DOM的基本结构 树状结构 Document整个文档的入口对象。 元素节点Element网页的标签divpa 等。 文本节点Text元素内部的文本内容。 属性节点Attr标签的属性。 注释节点CommentHTML中的注释。
Document├── html├── head└── body├── div│ └── text└── p└── text3常用的DOM操作语法和细节
a. 访问元素 方法 作用 例子 getElementById(id) 按ID获取元素 const div document.getElementById(myDiv); getElementsByTagName(tagName) 按标签名获取元素HTMLCollection类数组 document.getElementsByTagName(p); getElementsByClassName(className) 按类名获取元素HTMLCollection document.getElementsByClassName(myClass); querySelector(selector) 选择第一个符合条件的元素CSS选择器 document.querySelector(.myClass); querySelectorAll(selector) 选择所有符合条件的元素返回NodeList document.querySelectorAll(div p);
b. 修改元素 修改内容
element.innerHTML 新的HTML内容; // 更改元素内部HTML
element.textContent 纯文本内容; // 仅文本内容修改样式
element.style.color red;
element.style.backgroundColor blue;修改属性
element.setAttribute(title, 提示信息); // 添加或修改属性
const title element.getAttribute(title); // 获取属性
// 也可以直接用属性访问
element.id newId; // 直接通过属性c. 创建新元素
const newDiv document.createElement(div); // 创建一个div元素
newDiv.innerHTML 我是新添加的元素; // 赋内容
document.body.appendChild(newDiv); // 添加到body尾部d. 删除元素
const parent document.getElementById(parentId);
const child document.getElementById(childId);
parent.removeChild(child); // 从父元素中删除子元素
// 也可以直接使用
child.remove(); // 现代浏览器支持e. 事件绑定 添加事件监听器
element.addEventListener(click, function(event) {alert(元素被点击了);
});移除事件监听器需要用到引用函数
function handleClick() {alert(点击事件);
}
element.addEventListener(click, handleClick);
// 移除
element.removeEventListener(click, handleClick);f. 其他常用操作 获取子元素
element.children; // 元素的子元素HTMLCollection
element.childNodes; // 所有子节点包括文本、注释兄弟元素
element.nextElementSibling; // 下一个兄弟元素
element.previousElementSibling; // 上一个兄弟元素父元素
element.parentNode; // 或 parentElement4DOM操作的细节注意点 性能 多次操作DOM可能影响性能建议批量操作或使用文档片段DocumentFragment 兼容性 getElementsByClassName和querySelector在现代浏览器都支持 动态更新UI 修改innerHTML和textContent会影响子元素要小心使用 事件代理 给父元素绑定事件利用冒泡机制管理子元素事件提高效率 classList API
element.classList.add(newClass);
element.classList.remove(oldClass);
element.classList.toggle(active);
element.classList.contains(active);5示例
!DOCTYPE html
html langzh-CN
head!-- 字符集为UTF-8 --meta charsetUTF-8!-- 设置浏览器兼容性 --meta nameviewport contentwidthdevice-width, initial-scale1.0titleDOM操作示例/title
/head
bodydiv idcontainerp classtext这是一个段落/pbutton idbtn点击我/button/divscriptconst btn document.getElementById(btn);btn.addEventListener(click, () {// 创建新元素const newParagraph document.createElement(p);newParagraph.textContent 新添加的段落;// 添加样式newParagraph.style.color blue;// 添加到容器中document.getElementById(container).appendChild(newParagraph);// 修改已有元素const existingPara document.querySelector(.text);existingPara.textContent 内容被修改了;// 移除按钮示例btn.remove();});/script
/body
/html
