主要组成
- ECMAScript:定义了JavaScript语言的核心语法、类型、语句、关键字、保留字、操作符、全局对象和自动垃圾回收等。
- 文档对象模型(DOM):提供了一种方式,允许JavaScript访问和操作网页的元素和属性。
- 浏览器对象模型(BOM):允许JavaScript与浏览器交互,如窗口操作、导航、弹出窗口、浏览器信息等。
JavaScript(主要学习,为jquery做准备)
输入与输出
变量
<script>
let age = 13//声明
//var已废弃
</script>
数组
<script>
let arr = [12,13,14]
</script>
常量
<script>
const g=12//常量,值不可改变
</script>
模板字符串
运算符
分支语句
循环
<script>
//while循环
let i =10;
while (true) {
if(i<5){
break;
}
alert(i);
i--;
}
//for
for (let i = 0; i < 3; i++) {
alert(i)
}
</script>
函数
对象
随机数
BOM
操作标签,网页内容的功能
组成部分(你就随便了解了解)
- window 对象:BOM 的顶级对象,代表浏览器的窗口或标签页。它包含了许多属性和方法,用于与浏览器窗口进行交互。
- location 对象:包含当前文档的 URL 信息,允许开发者获取和修改 URL。
- history 对象:包含浏览器的历史记录,允许开发者添加、修改或删除历史记录。
- navigator 对象:包含有关浏览器的信息,如浏览器名称、版本、操作系统等。
- screen 对象:包含有关用户屏幕的信息,如分辨率、颜色深度等。
- document 对象:DOM(文档对象模型)的核心对象,代表整个 HTML 文档,允许开发者访问和操作页面内容。
- setTimeout() 和 setInterval():用于设置定时器,执行延迟或周期性任务。
- addEventListener() 和 removeEventListener():用于添加和移除事件监听器。
- alert(), confirm(), prompt():用于显示对话框,与用户进行交互。
- open(), close():用于打开新窗口或关闭当前窗口。
window 对象(就了解,用的不多)
- 属性:
window.name
:设置或返回窗口的名称。window.location
:包含当前页面的 URL 信息,可以进行页面导航。window.history
:提供对浏览器历史记录的访问。window.document
:代表当前窗口中的文档(DOM)。window.navigator
:包含关于浏览器的信息。window.screen
:包含有关用户屏幕的信息。window.scrollX
或window.pageXOffset
:获取当前页面的水平滚动位置。window.scrollY
或window.pageYOffset
:获取当前页面的垂直滚动位置。window.innerWidth
和window.innerHeight
:获取窗口的内部宽度和高度(不包括工具栏和滚动条)。window.outerWidth
和window.outerHeight
:获取窗口的外部宽度和高度(包括工具栏和滚动条)。
- 方法:(常用的我在后面标 #)
window.alert()
:显示带有指定消息和确定按钮的模态对话框。---------#window.confirm()
:显示带有指定消息和两个按钮(确定/取消)的模态对话框,并返回用户的选择。---------#window.prompt()
:显示带有输入字段和两个按钮(确定/取消)的模态对话框,并返回用户输入的值或null
。window.open()
:打开一个新的浏览器窗口或标签页。window.close()
:关闭由window.open()
打开的窗口。window.setTimeout()
和window.setInterval()
:设置一个定时器,用于延迟或周期性地执行代码。window.clearTimeout()
和window.clearInterval()
:取消由setTimeout()
或setInterval()
设置的定时器。window.scrollTo()
和window.scrollBy()
:滚动文档到指定的位置。window.focus()
和window.blur()
:将焦点移至窗口或从窗口移除焦点。window.print()
:打开浏览器的打印对话框。window.addEventListener()
和window.removeEventListener()
:添加或移除事件监听器。
- 事件:
window.onload
:当页面加载完成时触发。window.onunload
:当页面被卸载时触发。window.onerror
:当页面发生 JavaScript 错误时触发。
- 其他:
window.console
:提供控制台方法,如console.log()
、console.warn()
等,用于调试。window.performance
:提供性能相关的信息,如计时器。window.sessionStorage
和window.localStorage
:提供客户端存储,用于保存页面会话或持久数据。
document 对象(重点会用,每个都要一两个)
- 访问和修改 HTML 元素:(随便记两个,我推荐前三个,)
getElementById()
:通过元素的 ID 获取元素。getElementsByClassName()
:通过元素的类名获取元素集合。getElementsByName()
方法返回一个HTMLCollection,其中包含具有给定name
属性的所有元素。getElementsByTagName()
:通过标签名获取元素集合。querySelector()
:通过 CSS 选择器获取第一个匹配的元素。querySelectorAll()
:通过 CSS 选择器获取所有匹配的元素集合。
- 创建新元素:
createElement()
:创建一个新的 HTML 元素。
- 创建文本节点:
createTextNode()
:创建一个新的文本节点。
- 插入、替换、删除元素:
appendChild()
:将一个节点添加到另一个节点的子节点列表中。replaceChild()
:替换一个子节点。removeChild()
:移除一个子节点。insertBefore()
:在另一个节点的子节点列表中插入一个节点。
- 获取和设置元素内容:
textContent
:获取或设置元素的文本内容。innerHTML
:获取或设置元素的 HTML 内容。
- 属性操作:
getAttribute()
:获取元素的属性值。setAttribute()
:设置元素的属性值。hasAttribute()
:检查元素是否具有指定的属性。removeAttribute()
:移除元素的属性。
- 样式和类操作:(不重要)
className
:获取或设置元素的类名。classList
:提供对元素类名列表的操作,如添加、移除、切换类。style
:提供对元素样式的直接操作。
- 滚动和视口:-------(不重要)
scrollTo()
:滚动文档到指定的位置。scrollBy()
:将文档滚动指定的距离。scroll()
:滚动文档到指定的垂直和水平位置。
- 获取文档信息:----------(不重要)
doctype
:获取文档类型声明。documentElement
:获取文档的根元素(通常是<html>
)。title
:获取或设置文档的标题。URL
和documentURI
:获取文档的 URL。referrer
:获取导致当前文档被访问的文档的 URL。
- 表单和输入:---------(不重要)
forms
:获取文档中的所有表单元素集合。activeElement
:获取当前文档中获得焦点的元素。
- 事件:----------(不重要)
addEventListener()
和removeEventListener()
:添加或移除事件监听器。dispatchEvent()
:在文档上触发事件。
- Cookie 操作(虽然不是
document
的直接属性,但通常通过document.cookie
访问):cookie
:获取或设置文档的 Cookie。
location 对象
对当前页面 URL 的交互式访问和操作。
属性:-----------不重要(第一个)
location.href
:返回当前页面的 URL。---------会用location.search
:返回 URL 的查询字符串部分(即?
后面的部分)。location.pathname
:返回 URL 的路径部分。location.protocol
:返回 URL 的协议部分(如http:
或https:
)。location.host
:返回 URL 的主机名部分(如example.com
)。location.hostname
:返回 URL 的域名部分(不包括端口号)。location.port
:返回 URL 的端口号部分(如果有的话)。location.origin
:返回 URL 的源(协议 + 域名 + 端口),通常用于确定不同的页面是否来自同一个源。
方法:------不重要
location.assign(url)
:加载新的文档。相当于点击链接或在地址栏输入 URL。location.reload()
:重新加载当前文档。可选地,可以传递一个布尔值参数来强制从服务器重新加载页面,而不是从缓存。location.replace(url)
:替换当前文档为新的 URL。与assign()
不同,使用replace()
后,当前页面不会保留在会话历史中,因此用户不能使用后退按钮返回到该页面。location.toString()
:返回当前页面的 URL,与href
属性相同。
事件:
window.onpopstate
:当历史记录的条目发生变化时触发,例如用户点击后退按钮或调用history.popState()
。
history 对象-----------不重要
允许 JavaScript 访问浏览器的历史记录,并且可以对历史记录进行操作。
- 属性:
history.length
:返回会话历史中的页面数量。
- 方法:
history.go()
:加载会话历史中某个具体位置的页面。如果没有指定参数,它将重新加载当前页面。history.back()
:相当于history.go(-1)
,加载历史记录中的上一个页面。history.forward()
:相当于history.go(1)
,加载历史记录中的下一个页面。history.pushState()
:将一个新记录添加到会话历史中,允许你添加一个新页面到浏览器的历史记录,而不需要加载新页面。history.replaceState()
:替换当前历史记录中的记录,允许你更改当前页面的历史记录条目,而不需要加载新页面。
- 事件:
window.onpopstate
:当history
对象的pushState()
或replaceState()
方法被调用,或者用户点击浏览器的后退/前进按钮时触发。
DOM
DOM(Document Object Model,文档对象模型)是一个编程接口,它提供了一种方式来表示和操作HTML和XML文档。DOM将文档表示为一个由节点构成的树结构,每个节点可以是一个元素、属性、文本或注释。
组成构成:
- 文档(Document):
- DOM树的根节点,代表整个HTML或XML文档。
- 通过
document
对象访问,是所有节点的父节点。
- 元素(Elements):
- 代表HTML文档中的标签,如
<div>
,<p>
,<span>
等。 - 元素可以包含子元素、属性和文本。
- 代表HTML文档中的标签,如
- 属性(Attributes):
- 元素的属性,如
id
,class
,src
等。 - 属性通常用于定义元素的样式、行为或内容。
- 元素的属性,如
- 文本(Text):
- 元素内的文本内容。
- 文本节点通常包含可显示的文本或空白。
- 注释(Comments):
- HTML或XML文档中的注释,不会在浏览器中显示。
- 文档类型(DocumentType):
- 定义文档类型声明(DTD),如
<!DOCTYPE html>
。 - 它定义了文档的类型和版本。
- 定义文档类型声明(DTD),如
- 节点(Nodes):
- DOM中的任何对象,包括元素、属性、文本、注释等。
- 节点是DOM树中的一个单元,具有特定的属性和方法。
- 文档片段(DocumentFragment):
- 一个轻量级的DOM节点,可以包含多个子节点。
- 常用于在不直接操作DOM的情况下构建节点集合。
- 实体引用(Entity Reference):
- 代表HTML中的实体引用,如
- 代表HTML中的实体引用,如
- CDATA节(CDATA Section):
- 包含不应由浏览器解析的文本。
- 主要在XML中使用,HTML5中不推荐使用。
- 处理指令(Processing Instruction):
- 包含XML文档中的处理指令,如
<?xml-stylesheet?>
。
- 包含XML文档中的处理指令,如
- 样式(Styles):
- 虽然不直接是DOM的一部分,但可以通过DOM操作元素的样式属性。
- 脚本(Scripts):
- 虽然不直接是DOM的一部分,但JavaScript可以通过DOM API操作DOM。
访问节点--------会几个就可以了,推荐的加#
-
通过ID访问: ----------#
使用
document.getElementById(id)
方法可以访问具有特定ID的元素节点。var element = document.getElementById('myId');
-
通过标签名访问:
使
document.getElementsByTagName(tagName)
方法可以访问具有特定标签名的所有元素节点。返回的是一个HTMLCollection。var elements = document.getElementsByTagName('p');
-
通过类名访问: --------------#
使用
document.getElementsByClassName(className)
方法可以访问具有特定类名的所有元素节点。返回的是一个HTMLCollection。var elements = document.getElementsByClassName('myClass');
-
通过选择器访问: 使用
document.querySelector(selector)
方法可以访问与CSS选择器匹配的第一个元素节点。var element = document.querySelector('.myClass#myId');
-
通过选择器访问多个节点: 使用
document.querySelectorAll(selector)
方法可以访问与CSS选择器匹配的所有元素节点。返回的是一个NodeList。var elements = document.querySelectorAll('.myClass');
-
通过属性访问: 使用
element.getAttribute(attributeName)
方法可以访问元素的属性值。var attributeValue = element.getAttribute('data-custom');
-
访问子节点: 使用
element.childNodes
属性可以访问一个元素的所有子节点(包括文本节点和注释节点)。var childNodes = element.childNodes;
-
访问第一个和最后一个子节点: 使用
element.firstElementChild
和element.lastElementChild
属性可以访问元素的第一个和最后一个子元素节点。var firstChild = element.firstElementChild; var lastChild = element.lastElementChild;
-
访问父节点: 使用
element.parentNode
属性可以访问元素的父节点。var parentNode = element.parentNode;
-
访问兄弟节点: 使用
element.nextSibling
和element.previousSibling
属性可以访问元素的下一个和上一个兄弟节点。var nextSibling = element.nextSibling; var previousSibling = element.previousSibling;
-
遍历DOM树: 可以使用循环和其他DOM访问方法来遍历DOM树。
操作节点----------看着玩玩就行了
-
创建节点: 使用
document.createElement(tagName)
创建一个新的元素节点。var newElement = document.createElement('div');
-
创建文本节点: 使用
document.createTextNode(text)
创建一个新的文本节点。var newText = document.createTextNode('Hello, World!');
-
添加节点: 使用
parentNode.appendChild(node)
将一个新节点添加到其父节点的子节点列表的末尾。parentNode.appendChild(newElement);
-
插入节点: 使用
parentNode.insertBefore(newNode, referenceNode)
在父节点中将一个新节点插入到指定的参考节点之前。parentNode.insertBefore(newElement, referenceNode);
-
替换节点: 使用
oldNode.parentNode.replaceChild(newNode, oldNode)
替换一个节点。oldNode.parentNode.replaceChild(newElement, oldNode);
-
删除节点: 使用
parentNode.removeChild(node)
从其父节点中删除一个节点。parentNode.removeChild(oldNode);
-
克隆节点: 使用
node.cloneNode(deep)
克隆一个节点。deep
参数为true
时,会克隆该节点及其所有子节点。var clonedNode = node.cloneNode(true);
-
设置属性: 使用
element.setAttribute(name, value)
为元素设置属性。element.setAttribute('class', 'new-class');
-
获取属性: 使用
element.getAttribute(name)
获取元素的属性值。var className = element.getAttribute('class');
-
删除属性: 使用
element.removeAttribute(name)
从元素中删除属性。element.removeAttribute('class');
-
获取和设置样式: 使用
element.style.property
获取或设置元素的内联样式。element.style.color = 'red'; // 设置样式 var color = element.style.color; // 获取样式
-
获取子节点数量: 使用
element.children.length
获取元素的子节点数量。 -
获取子节点: 使用
element.children[index]
获取元素的特定子节点。 -
遍历子节点: 使用循环遍历
element.childNodes
或element.children
。 -
获取和设置内容: 使用
element.textContent
获取或设置元素的文本内容,不包含HTML标签。element.textContent = 'New text content'; // 设置文本内容 var textContent = element.textContent; // 获取文本内容
-
获取和设置HTML内容: 使用
element.innerHTML
获取或设置元素的HTML内容,包含标签。复制element.innerHTML = '<span>New HTML content</span>'; // 设置HTML内容 var htmlContent = element.innerHTML; // 获取HTML内容
操作样式------------不重要,有css
使用style
属性
-
获取样式:
var element = document.getElementById('myElement'); var color = element.style.color; // 获取元素的color样式
-
设置样式:
element.style.color = 'blue'; // 设置文本颜色为蓝色 element.style.backgroundColor = 'yellow'; // 设置背景颜色为黄色 element.style.display = 'block'; // 设置元素显示为块级元素
-
删除样式:
element.style.color = ''; // 删除文本颜色样式 element.style.display = ''; // 删除display样式,返回到默认值
使用className
className
属性用于获取或设置一个元素的类名。类名通常用于CSS中定义样式,或者通过JavaScript选择和操作具有特定类名的元素。
-
获取类名:
var element = document.getElementById('myElement'); var currentClassName = element.className; // 获取当前元素的类名
-
设置类名:
element.className = 'new-class'; // 设置新的类名
-
添加类名:
element.classList.add('additional-class'); // 添加一个类名,不会重复添加
-
移除类名:
复制 element.classList.remove('specific-class'); // 移除一个类名
-
切换类名:
复制 element.classList.toggle('toggleClass'); // 如果类名存在则移除,不存在则添加
-
检查类名:
复制 var hasClass = element.classList.contains('check-class'); // 检查是否含有特定类名
使用classList
属性
classList
属性提供了一组方法来添加、移除、切换和检查元素的类。
-
添加类:
element.classList.add('new-class'); // 添加新类
-
移除类:
element.classList.remove('remove-class'); // 移除指定类
-
切换类:
element.classList.toggle('toggle-class'); // 如果类存在则移除,不存在则添加
-
检查类是否存在:
var hasClass = element.classList.contains('check-class'); // 返回布尔值,检查类是否存在
-
替换类:
element.classList.replace('old-class', 'new-class'); // 替换类名
面向对象-----------和java一样
//正常定义一个类
var people={
name : "zs",//属性
age : 17,
eat : function (){//方法
console.log("吃")
}
}
//问题在于,如果有很多对象,需要写很多
//构造函数来实现
function people(name,age){
this.name = name;
this.age = age;
this.eat = function (){
console.log("吃")
}
}
let p = new people('zs',12);//方便很多
//从ES6开始,JavaScript提供了class关键字,使得定义类变得更加简单和直观:
class people{
//私有属性
#sex;
//静态static
//构造函数
constructor(name,age,sex) {
this._name = name;
this._age = age;
this.#sex = sex;
}
//方法
eat(){
console.log("吃饭")
}
//get,set方法
get name() {
return this._name;
}
set name(value) {
this._name = value;
}
get age() {
return this._age;
}
set age(value) {
this._age = value;
}
}