合肥微网站建设,app store切换账号,站长之家 网站模板,陕西省住房建设厅官网JS创造于1994年#xff0c;其目的是为浏览器显示的文档赋予动态行为。
1 Web编程基础
本节讲解如何编写Web应用中的js程序#xff0c;如果将这些程序加载到浏览器#xff0c;以及如何获取输入、产出输出#xff0c;如何运行响应事件的异步代码。
1.1 js 脚本
虽然现在不… JS创造于1994年其目的是为浏览器显示的文档赋予动态行为。
1 Web编程基础
本节讲解如何编写Web应用中的js程序如果将这些程序加载到浏览器以及如何获取输入、产出输出如何运行响应事件的异步代码。
1.1 js 脚本
虽然现在不再提倡使用document.write()生成内容了但由于还存在这种可能浏览器在解析遇到script元素时的默认行为是必须要运行脚本就是为了确保不漏掉脚本可能输出的HTML内容然后才能再继续解析和渲染文档。这有可能拖慢网页的解析和渲染过程。
1.1.1 脚本运行时机
script标签支持defer和async两个属性它们会导致脚本以不同的方式执行。这两个属性都会明确告诉浏览器当前链接的脚本中没有使用document.write()生成的HTML输出。
async让浏览器尽早运行脚本但不会阻塞文档解析。
defer推迟到文档完全加载和解析之后。
module默认defer但可用async覆盖。
可以把script标签放到HTML文件末尾可确保脚本运行时就知道前面的文档内容已经解析了。
1.1.2 按需加载脚本
1以模块形式编写使用import()来按需加载。
2向文档动态添加script标签。
!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head body button οnclickaddJs()点击动态加载js/button /body script function addJs() { let s document.createElement(script); s.append(console.log(hello js)); document.head.append(s); } /script /html
1.2 JS 程序的执行 图 js 程序从脚本执行阶段过度到事件处理阶段到步骤
1.3 程序错误
1window.onerror属性能定义一个终极错误处理程序在未捕获异常时调用。当未捕获异常沿调用栈一路向上传播错误消息即将现身在开发者控制台时window.onerror函数将会以三个参数被调用描述错误的消息包含导致错误的js代码的url文档中发生错误的行号。 如果onerror处理程序返回true,意味着通知浏览器它已经处理了错误不需要进一步行动了。
!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head body button οnclickmakeError()制造错误/button /body script function makeError() { throw new Error(未捕获的错误); } window.onerror (msg,url,num) { console.log(msg,url,num); return true; } // Uncaught Error: 未捕获的错误 http://localhost:63342/js-study/day5/s2.html?_ijtv4mqhcotbhl7e6bfrfbd9db8nd_ij_reloadRELOAD_ON_SAVE 12 /script /html
2window.addEventListener() 为 “unhandlerejection期约被拒绝而没有catch()函数处理它”事件注册一个处理程序来发现它。这个函数第一个参数是一个promise对象第二个参数是reason其值为本来要传给.catch()函数的拒绝理由。
!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head body button οnclickmakeError()制造错误/button /body script function makeError() { return new Promise((resolve,reject) { reject(拒绝原因); }) } window.onunhandledrejection (promise,reason) { console.log(onunhandledrejection,promise,reason); } // onunhandledrejection PromiseRejectionEvent {isTrusted: true, reason: 拒绝原因, type: unhandledrejection, target: Window, currentTarget: Window, …} undefined /script /html
2 事件 图 事件传播的三个阶段
第一个阶段也叫做“捕获”阶段。addEventListener()接收的第三个可选参数如果该值是true或{capture: true}那么就表明该事件处理程序会注册为捕获事件处理程序。
捕获阶段差不多与冒泡阶段正好相反最先调用Window对象上注册的捕获处理程序然后才调用Document对象的捕获处理程序接着才是body元素然后沿着DOM树一直向下直到事件目标父元素的捕获事件处理程序被调用。注册在事件目标本身的捕获事件处理程序不会在这个阶段被调用。
事件捕获提供了把事件发送到目标之前先行处理到机会。
2.1 事件取消
调用事件对象的preventDefault()方法可以阻止浏览器执行其默认的动作如果注册程序程序时传入了passive选项则会导致该方法失效。
事件对象的stopPropagation()方法会取消事件传播但同一对象上的其他事件处理程序会照常执行。
stopImmediatePropagation()方法会阻止同一个对象上注册的后续事件处理程序执行。
2.2 派发自定义事件
CustomEvent()构造函数创建自定义事件对象第一个参数是表示事件类型的字符串第二个参数是一个对象用于指定事件对象的属性。配置参数{bubbles: true} 表示希望其沿着文档树向上冒泡。
事件目标的dispatchEvent()方法用于派发自定义事件其唯一参数是CustomEvent类型对象
!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head body div button idbtndispatchEvent/button /div /body script let customEvent new CustomEvent(sayHello,{detail: this}); let btn document.querySelector(#btn); btn.addEventListener(sayHello,(e) { console.log(e) }); btn.dispatchEvent(customEvent); /script /html 图 btn的sayHello事件对象
3 操作DOM
Element对象的querySelector()方法接收一个css选择符作为参数返回它在文档中找到的第一个匹配的元素。
querySelectorAll()方法返回Element对象的后代及其本身所有匹配的元素。
closest()从当前元素开始沿着DOM树向上匹配而上面的方法是沿着DOM树向下匹配。
!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head body div classdivC iddiv0 div classdivC idfirstDiv span classspanC12/span span classspanC34/span div classdivC56/div /div /div div classdivCaa/div div classdivCbb/div /body script let divElement document.querySelector(#firstDiv); let nodeList divElement.querySelector(.divC); console.log(nodeList); // div classdivC56/div let elements divElement.closest(.divC); console.log(elements); // div classNamedivC idfirstDiv // span classNamespanC12/span // span classNamespanC34/span // div classNamedivC56/div // /div /script /html
3.1 元素的内容
元素的内容有HTML表示和纯文本表示。Element的textContent表示元素的纯文本内容。html表示有以下方法
1innerHTML属性。通常效率很高不过要注意通过操作符给innerHTML追加文本的效率不高这个操作既会涉及序列化操作也会涉及解析操作先把元素内容转换为字符串然后再把新字符串转换回元素内容。返回值不包含元素自身。设置innerHTML属性时新内容会替换当前元素的内容。
2outerHTML属性返回值包含元素自身。在设置outerHTML时新内容会取代元素本身。
3insertAdjacentHTML()方法用于插入与指定元素“相邻”的任意HTML标记字符串要插入的标签作为第二个参数传入而第一个枚举参数用于指定其位置beforebegin、afterbegin、beforeend、afterend。 图 inserAdjacentHTML()方法的插入位置
!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head body divbutton οnclickdivClickHandle(1)innerHTML插入div1/button/div divbutton οnclickdivClickHandle(2)outerHTML插入div2/button/div divbutton οnclickdivClickHandle(3)insertAdjacentHTML插入div3/button/div div iddiv1div1/div div iddiv2div2/div div iddiv3div3/div /body script function divClickHandle(type) { let element,str span stylecolor:red插入的内容/span; if (type 1) { element document.querySelector(#div1); element.innerHTML str; } else if (type 2) { element document.querySelector(#div2); element.outerHTML str; } else { element document.querySelector(#div3); element.insertAdjacentHTML(beforeend, str); } } /script /html style #div1,#div2,#div3 { margin-top: 20px; border: solid 1px green; width: 200px; } /style 图 依次点击一次btn后的界面
4 操作CSS
Element对象的classList属性表示元素的类集。可以通过其add或者remove方法为该元素添加或者删除类名。
样式表是通过style或link标签与HTML文档关联起来的这两个标签都是普通的HTML标签可以为其指定一个id属性来方便querySelector方法的查找其对应的Element对象都有disabled属性可以用它禁用整个样式表。
!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head body button οnclickdisabledDefaultStyle()禁用样式/button button οnclickaddBlueStyle()新增样式(字体成蓝色)/button div iddiv0这是一个样式/div /body style iddefaultStyle #div0 { color: red; } /style script function disabledDefaultStyle() { let element document.querySelector(#defaultStyle); element.disabled true; } function addBlueStyle() { let styleElement document.createElement(style); styleElement.innerText#div0{ color: blue} document.body.append(styleElement); } /script /html
