销售网站怎么做的,网站后台登陆不上去,wordpress使用react,展览搭建公司1. Web API概述
Web API 是指浏览器提供的一套接口#xff0c;这些接口允许开发人员使用 JavaScript#xff08;JS#xff09;来操作浏览器功能和页面元素。通过 Web API#xff0c;开发人员可以与浏览器进行交互#xff0c;以实现更复杂的功能和效果。
1.1. 初识Web AP…1. Web API概述
Web API 是指浏览器提供的一套接口这些接口允许开发人员使用 JavaScriptJS来操作浏览器功能和页面元素。通过 Web API开发人员可以与浏览器进行交互以实现更复杂的功能和效果。
1.1. 初识Web API
JavaScript语言有三部分组成分别是ECMAScript、BOM、DOM其中ECMAScript是JavaScript语言的核心它的内容就是前面学到的基本语法、函数、对象这些。总的关系图如下 1.2. Web API 和 API 的关系
API
APIApplication Programming Interface应用程序编程接口是一种预先定义的函数或接口由某个软件开放给开发人员使用帮助开发者实现某种功能。API是给程序员提供的第一种工具以便能更轻松的实现想要完成的功能。它隐藏了软件系统的内部工作机制细节只暴露有限的接口给外部调用。
举个简单的例子
假设你是一名开发人员想要开发一个手机应用程序让用户能够查询天气信息。你可以使用某个天气预报网站或API提供的接口这样你就可以在应用程序中调用该接口来获取天气信息。这个天气预报网站或API提供了一个预先定义的函数或接口例如“获取天气信息”getWeatherInfo它隐藏了内部工作机制的细节只暴露了一个接口给外部调用。在你的应用程序中你可以调用这个“获取天气信息”的接口并提供一个城市名称作为参数。当你的应用程序调用这个接口时它会返回该城市的天气信息例如温度、天气状况等。通过使用这个天气预报网站或API的接口你就可以轻松地实现获取天气信息的功能而不需要自己编写所有的代码来查询天气信息。这样你就可以将更多的时间和精力集中在开发应用程序的其他功能上。 Web API
Web API 是针对浏览器的 API它是由浏览器提供的接口用于在 JavaScript 中与浏览器进行交互以实现各种浏览器功能和页面元素的操作。
Web API 被封装成了对象通常是全局对象例如 window 或 navigator 等。这些对象具有一系列的属性和方法开发人员可以通过调用这些属性和方法来使用 Web API。
例如window 对象提供了一些与窗口和文档相关的属性和方法例如 alert() 方法用于显示警告框document 对象提供了一些与文档结构相关的属性和方法例如 getElementById() 方法用于获取指定 ID 的元素。通过使用 Web API开发人员可以控制浏览器的行为、操作页面元素、进行网络请求等各种功能。因此Web API 是 JavaScript 在 Web 开发中非常重要的工具它使得开发人员能够轻松地实现各种功能和效果。 2. DOM
2.1. DOM概念
DOMDocument Object Model是一种编程接口它将HTML文档中的每个标签元素都视为一个对象。这些对象具有许多属性和方法可以通过编程操作这些属性或调用这些方法来动态更新HTML文档的内容、结构和样式从而为网页特效和用户交互提供技术支持。
简单来说DOM是一种用于修改HTML的动态技术它的目的是在网页中实现交互式效果和用户交互。通过使用DOM开发人员可以创建和修改网页中的元素改变它们的属性、内容和样式以及添加或删除网页中的节点和元素。这些操作可以动态地改变网页的内容和外观从而实现各种交互式效果和用户界面设计。
比如下面这个例子 上述的例子中当用户分分别点击【开始】或【结束】按钮后通过右侧调试窗口可以观察到 html 标签的内容在不断的发生改变这便是通过 DOM 实现的。 2.2. DOM树
DOM树Document Object Model Tree是指网页文档中所有元素的层次结构。在这个结构中每个HTML标签、文本节点和属性都作为一个节点表示形成一个树状结构。DOM树从网页的根节点对应于HTML文档的!DOCTYPE html标签开始逐级向下表示网页的结构。每个节点都是一个对象可以通过JavaScript或其他脚本语言进行访问和操作。
通过DOM树网页开发者可以使用JavaScript和其他脚本语言来操作和修改网页中的各个元素例如修改文本、属性、样式等。因此DOM树在网页开发中扮演着非常重要的角色它是网页的基础架构为网页开发提供了强大的操作性和灵活性。 DOM节点
DOM节点是文档树中的基本组成部分每个节点都是一个DOM对象。在HTML文档中节点可以包括元素节点、属性节点和文本节点等。
元素节点这些节点对应于HTML标签例如head、div、body等。它们表示HTML文档中的不同部分如头部、主体和特定元素。属性节点这些节点是HTML标签属性的表示如a标签的href属性或div标签的class属性。属性节点提供了关于元素的额外信息例如元素的样式或行为。文本节点这些节点代表HTML标签中的文本内容如title标签中的文字。文本节点允许开发人员修改和操作标签中的文本内容。根节点在HTML文档中根节点特指html标签。它是整个文档的起点其他所有节点都作为其子节点连接在其下面。 DOM元素
DOM元素指的是页面中的所有标签。在DOM中每个HTML标签都被视为一个对象这些对象组成了DOM树。这使得开发人员可以通过编程方式来访问和操作页面中的元素例如改变它们的属性、内容、样式等。通过DOM开发人员可以创建和修改网页中的节点和元素从而实现网页特效和用户交互。 2.3. 操作元素内容
在开发中想要操作页面上的某个部分。比如控制一个div元素的显示或隐藏现实中的例子就是你要关掉某个页面显示的广告你就点击广告的右上角的叉叉来关掉隐藏它。要实现这样的功能就需要先获取到该部分对应的元素再去进行操作。 2.3.1. 根据id获取元素
根据ID获取元素是指在DOM中通过元素的ID属性来获取对应元素的对象引用。DOM提供了document.getElementById()方法它接受一个参数作为元素的ID并返回对应元素的DOM对象。
body div idmyDivHello, World!/div button onclickhideDiv()Hide the Div/button script function hideDiv() { // 获取具有指定ID的元素对象 var divElement document.getElementById(myDiv); // 修改元素的样式为隐藏 divElement.style.display none; } /script /body 在上面的示例中我们有一个包含文本内容的div元素它的ID为myDiv。我们还添加了一个按钮当点击按钮时会触发hideDiv()函数。这个函数使用document.getElementById()方法获取到具有指定ID的div元素对象并将其样式的display属性设置为none从而隐藏该元素。
通过这种方式我们可以根据元素的ID来获取对应的DOM对象并对其进行各种操作来改变页面的内容和样式。 2.3.2. 根据标签获取元素
根据标签名获取元素有两种分别是通过document对象获取元素和通过element对象获取元素。
document.getElementsByTagName(标签名);
element.getElementsByTagName(标签名);
element是对元素对象的统称通过元素对象可以查找该元素的子元素或后代元素实现局部查找的效果。而document对象是从整个文档中查找元素。
bodydiv idparentp classparagraph段落1/pp classparagraph段落2/pspan标签元素/span/divscript// 获取文档中的所有 p 元素var pElements document.getElementsByTagName(p);console.log(文档中的 p 元素个数: pElements.length);// 获取 id 为 parent 的元素下的所有 p 子元素var parentElement document.getElementById(parent);var pElementsUnderParent parentElement.getElementsByTagName(p);console.log(在父元素下的 p 子元素个数: pElementsUnderParent.length);/script/body
在上面的示例中我们首先使用document.getElementsByTagName(p)获取文档中所有的p元素并使用console.log()输出它们的数量。然后我们使用document.getElementById(parent)获取ID为parent的元素再使用element.getElementsByTagName(p)获取该元素下所有的p子元素并使用console.log()输出它们的数量。 注意方法名里面是elements意思是返回的不是单个元素对象而是一个集合。这个集合是一个类数组对象或称为伪数组它可以像数组一样用索引来访问元素但不能使用push( )等方法。 2.3.3. 根据name获取元素
通过name属性来获取元素使用document.getElementsByName( )方法一般用于获取表单元素。
bodyp请选择你最喜欢的水果(多选)/pinput typecheckbox namefruit value苹果苹果/inputinput typecheckbox namefruit value苹果苹果/inputinput typecheckbox namefruit value橘子橘子/inputscriptvar fruits document.getElementsByName(fruit);fruits[0].checked true;/script/body
浏览器一解析后显示的界面苹果选项被选中了 通过 document.getElementsByName(fruit) 获取所有名为 fruit 的 input 元素并返回一个对象集合使用索引获取元素fruits[0].checked true将fruits的第一个元素的checked属性值设true。 2.3.4. HTML5新增的获取方式
2.3.4.1. 根据类名获取
使用document.getElementByClassName( )方法用于通过类名来获得元素集合。
以下是一个简单的HTML5和JavaScript代码示例演示如何使用 getElementsByClassName() 方法根据类名获取元素
bodydiv classmyClass我是一个div元素/div
p classmyClass我是一个p元素/p
span classmyClass我是一个span元素/spanscript
// 使用getElementsByClassName方法获取类名为myClass的元素集合
var elements document.getElementsByClassName(myClass);// 遍历元素集合并输出每个元素的类型
for(var i 0; i elements.length; i) {console.log(elements[i].tagName);
}
/script/body 使用 getElementsByClassName() 方法获取这些元素并使用for循环遍历它们。在循环中使用 console.log() 输出每个元素的类型例如 divp 或 span。 2.3.4.2. querySelector( ) querySelectorAll( )
querySelector( )方法用于返回指定选择器的第一个元素对象。
querySelectorAll( )方法用于返回指定选择器的所有元素对象集合。 querySelector() 方法示例
let element document.erySelector(#myId);// 你可以检查返回的元素是否存在
if(element ! null){console.log(element);
} else {console.log(No element found with the given selector);
}
querySelector() 方法用于寻找 ID 为 myId 的元素。如果找到了它返回该元素如果没有找到它返回 null。
querySelectorAll() 方法示例
let elements document.querySelectorAll(.myClass);// 你可以检查返回的元素集合是否存在并且是否包含元素
if(elements.length 0){console.log(elements);
} else {console.log(No elements found with the given selector);
}
querySelectorAll() 方法用于寻找所有 class 为 myClass 的元素并返回一个 NodeList 对象其中包含所有匹配的元素。如果没有找到任何匹配的元素那么返回的 NodeList 就是空的。 2.4. 事件
获取元素后如果需要为元素条件交互行为这就要用到事件来实现。
例如当鼠标指针经过导航栏中的某一项时自动展开二级菜单...诸如之类像这样的事件。
2.4.1. 事件概述
在JavaScript中事件是指用户在与网页进行交互时发生的动作或操作例如点击、鼠标移动、键盘输入等。这些事件对于开发者来说是非常重要的因为它们可以让开发者在用户与网页交互时执行特定的代码从而实现动态的、交互式的网页效果。
2.4.2. 事件三要素
事件源触发事件的元素事件类型如click单击事件事件处理程序事件触发后要执行的代码(函数形式)也称事件处理函数
上面三点简单的解释就是“谁触发了事件”、“触发了什么事件”、“触发事件以后要做什么”
示例
bodybutton idmyButton点击我/buttonscript// 获取按钮元素var button document.getElementById(myButton);// 指定事件处理程序button.addEventListener(click, function() {alert(按钮被点击了);});/script
/body
事件源是ID为myButton的按钮元素。事件类型是click表示按钮被点击的事件。事件处理程序是一个匿名函数它会在按钮被点击时执行。在这个函数中我们使用alert()函数弹出一个对话框显示消息按钮被点击了。 2.4.3. 常见事件
常见事件有很多这里不可能全部一一列举的完不然就太死板了。实际开发中更是需要用到怎样的事件就去找对应的事件属性下图的超链接表可以参考或者直接点官网查教程。
鼠标事件 属性 描述 onclick 当用户点击某个对象时调用的事件句柄。 oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发 ondblclick 当用户双击某个对象时调用的事件句柄。 onmousedown 鼠标按钮被按下。 onmouseenter 当鼠标指针移动到元素上时触发。 onmouseleave 当鼠标指针移出元素时触发 onmousemove 鼠标被移动。 onmouseover 鼠标移到某元素之上。 onmouseout 鼠标从某元素移开。 onmouseup 鼠标按键被松开。 键盘事件 属性 描述 onkeydown 某个键盘按键被按下。 onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 表单事件 属性 描述 onblur 元素失去焦点时触发 onchange 该事件在表单元素的内容改变时触发( , , , 和 onfocus 元素获取焦点时触发 onfocusin 元素即将获取焦点时触发 onfocusout 元素即将失去焦点时触发 oninput 元素获取用户输入时触发 onreset 表单重置时触发 onsearch 用户向搜索域输入文本时触发 ( inputsearch) onselect 用户选取文本时触发 ( 和 onsubmit 表单提交时触发
