企业官网建设流程全解析

如何用图片做网站背景,陕西网站建设公司排名,番禺软件公司,查询注册过哪些网站JavaScript(WebAPI) WebAPI 背景知识 什么是 WebAPI 前面学习的 JS 分成三个大的部分#xff1a; ECMAScript#xff1a;基础语法部分DOM API#xff1a;操作页面结构BOM API#xff1a;操作浏览器 WebAPI 就包含了 DOM BOM。 这个是 W3C 组织规定的#xff08;和制…JavaScript(WebAPI)WebAPI 背景知识什么是 WebAPI前面学习的 JS 分成三个大的部分ECMAScript基础语法部分DOM API操作页面结构BOM API操作浏览器WebAPI 就包含了 DOM BOM。这个是 W3C 组织规定的和制定 ECMAScript 标准的大佬们不是一伙人。前面学的 JS 基础语法主要学的是 ECMAScript这让我们建立基本的编程思维相当于练武需要先扎马步。但是真正来写一个更加复杂的有交互式的页面还需要 WebAPI 的支持相当于各种招式。什么是 APIAPI 是一个更广义的概念而 WebAPI 是一个更具体的概念特指 DOMBOM。所谓的 API 本质上就是一些现成的函数 / 对象让程序猿拿来就用方便开发。相当于一个工具箱只不过程序猿用的工具箱数目繁多功能复杂。API 参考文档https://developer.mozilla.org/zh-CN/docs/Web/API可以在搜索引擎中按照 MDN API 关键字 的方式搜索也能快速找到需要的 API 文档.DOM 基本概念什么是 DOMDOM 全称为 Document Object Model.W3C 标准给我们提供了一系列的函数让我们可以操作:网页内容网页结构网页样式DOM 树一个页面的结构是一个树形结构称为 DOM 树.树形结构在数据结构阶段会介绍。就可以简单理解成类似于 家谱 这种结构页面结构形如:如何使用JavaScript操作网页内容如何使用JavaScript操作网页结构如何使用JavaScript操作网页样式获取元素这部分工作类似于 CSS 选择器的功能。querySelector这个是 HTML5 新增的IE9 及以上版本才能使用。前面的几种方式获取元素的时候都比较麻烦而使用 querySelector 能够完全复用前面学过的 CSS 选择器知识达到更快更精准的方式获取到元素对象。var element document.querySelector(selectors);selectors 包含一个或多个要匹配的选择器的 DOM 字符串 DOMString。该字符串必须是有效的 CSS 选择器字符串如果不是则引发 SYNTAX_ERR 异常。表示文档中与指定选择器组匹配的第一个元素的 html 元素 Element 对象。如果想得到与指定选择器匹配的所有元素的列表则应该使用 querySelectorAll ()。可以在任何元素上调用不仅仅是 document。调用这个方法的元素将作为本次查找的根元素。正因为参数是选择器所以一定要通过特殊符号指定是哪种选择器。例如 .box 是类选择器#star 是 id 选择器等。div classboxabc/div div ididdef/div h3spaninput typetext/span/h3 script var elem1 document.querySelector(.box); console.log(elem1); var elem2 document.querySelector(#id); console.log(elem2); var elem3 document.querySelector(h3 span input); console.log(elem3); /scriptquerySelectorAll使用 querySelectorAll 用法和上面类似。div classboxabc/div div ididdef/div script var elems document.querySelectorAll(div); console.log(elems); /script事件初识基本概念JS 要构建动态页面就需要感知到用户的行为。用户对于页面的一些操作点击选择修改等操作都会在浏览器中产生一个个事件被 JS 获取到从而进行更复杂的交互操作。浏览器就是一个哨兵在侦查敌情用户行为。一旦用户有反应触发具体动作哨兵就会点燃烽火台的狼烟事件后方就可以根据狼烟来决定下一步的对敌策略。事件三要素事件源哪个元素触发的事件类型是点击选中还是修改事件处理程序进一步如何处理往往是一个回调函数。简单示例button idbtn点我一下/button script var btn document.getElementById(btn); btn.onclick function () { alert(hello world); } /scriptbtn 按钮就是事件源。点击就是事件类型。function 这个匿名函数就是事件处理程序。其中btn.onclick function()这个操作称为注册事件 / 绑定事件。注意这个匿名函数相当于一个回调函数这个函数不需要程序主动来调用而是交给浏览器由浏览器自动在合适的时机触发点击操作时进行调用。操作元素获取 / 修改元素内容innerTextElement.innerText 属性表示一个节点及其后代的 “渲染” 文本内容。// 读操作 var renderedText HTMLElement.innerText; // 写操作 HTMLElement.innerText string;不识别 html 标签是非标准的IE 发起的读取结果不保留 html 源码中的换行和空格。div spanhello world/span spanhello world/span /div script var div document.querySelector(div); // 读取 div 内部内容 console.log(div.innerText); // 修改 div 内部内容界面上就会同步修改 div.innerText hello js spanhello js/span; /script可以看到通过 innerText 无法获取到 div 内部的 html 结构只能得到文本内容。修改页面的时候也会把 span 标签当成文本进行设置。innerHTMLElement.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。// 读操作 var content element.innerHTML; // 写操作 element.innerHTML htmlString;先获取到事件源的元素注册事件识别 html 标签W3C 标准的读取结果保留 html 源码中的换行和空格。div spanhello world/span spanhello world/span /div script var div document.querySelector(div); // 读取页面内容 console.log(div.innerHTML); // 修改页面内容 div.innerHTML spanhello js/span /script可以看到 innerHTML 不光能获取到页面的 html 结构同时也能修改结构并且获取到的内容保留的空格和换行。innerHTML 用的场景比 innerText 更多。获取 / 修改元素属性可以通过 Element 对象的属性来直接修改就能影响到页面显示效果。img srcrose.jpg alt这是一朵花 title玫瑰花 script var img document.querySelector(img); console.dir(img); /script我们可以在代码中直接通过这些属性来获取属性的值。img srcrose.jpg alt这是一朵花 title玫瑰花 script var img document.querySelector(img); // console.dir(img); console.log(img.src); console.log(img.title); console.log(img.alt); /script还可以直接修改属性img srcrose.jpg alt这是一朵花 title玫瑰花 script var img document.querySelector(img); img.onclick function () { if (img.src.lastIndexOf(rose.jpg) ! -1) { img.src ./rose2.png; } else { img.src ./rose.jpg; } } /script此时点击图片就可以切换图片显示状态.(需要提前把两个图片准备好)获取 / 修改表单元素属性表单 (主要是指 input 标签) 的以下属性都可以通过 DOM 来修改value: input 的值.disabled: 禁用checked: 复选框会使用selected: 下拉框会使用type: input 的类型 (文本密码按钮文件等)代码示例切换按钮的文本.假设这是个播放按钮在 播放 - 暂停 之间切换.input typebutton value播放 script var btn document.querySelector(input); btn.onclick function () { if (btn.value 播放) { btn.value 暂停; } else { btn.value 播放; } } /script代码示例点击计数使用一个输入框输入初始值 (整数), 每次点击按钮值 1input typetext idtext value0 input typebutton idbtn value点我1 script var text document.querySelector(#text); var btn document.querySelector(#btn); btn.onclick function () { var num text.value; console.log(num); num; text.value num; } /scriptinput 具有一个重要的属性 value, 这个 value 决定了表单元素的内容如果是输入框value 表示输入框的内容修改这个值会影响到界面显式在界面上修改这个值也会影响到代码中的属性如果是按钮value 表示按钮的内容。可以通过这个来实现按钮中文本的替换点击全选按钮则选中所有选项只要某个选项取消则自动取消全选按钮的勾选状态.input typecheckbox idall我全都要 br input typecheckbox classgirl貂蝉 br input typecheckbox classgirl小乔 br input typecheckbox classgirl安琪拉 br input typecheckbox classgirl妲己 br script // 1. 获取到元素 var all document.querySelector(#all); var girls document.querySelectorAll(.girl); // 2. 给 all 注册点击事件, 选中/取消所有选项 all.onclick function () { for (var i 0; i girls.length; i) { girls[i].checked all.checked; } } // 3. 给 girl 注册点击事件. for (var i 0; i girls.length; i) { girls[i].onclick function () { // 检测当前是不是所有的 girl 都被选中了. all.checked checkGirls(girls); } } // 4. 实现 checkGirls function checkGirls(girls) { for (var i 0; i girls.length; i) { if (!girls[i].checked) { // 只要一个 girl 没被选中, 就认为结果是 false(找到了反例) return false; } } // 所有 girl 中都没找到反例, 结果就是全选中 return true; } /script