网站开发与设计500强公司网站制作与建设书籍

网站开发与设计500强公司,网站制作与建设书籍,wordpress怎么导入模板文件,做网站页面多少钱API学习 1web api基本认知 1.1作用和分类 作用#xff1a;使用JS操作html和浏览器 分类#xff1a;DOM与BOM 1.2DOM 定义#xff1a;DOM#xff08;Document Object Model—— 文档对象模型#xff09;是用于呈现及交互任意 HTML 或 XML 文档的 API。 通俗解释#…API学习1web api基本认知1.1作用和分类作用使用JS操作html和浏览器分类DOM与BOM1.2DOM定义DOMDocument Object Model—— 文档对象模型是用于呈现及交互任意 HTML 或 XML 文档的 API。通俗解释DOM 是浏览器提供的、专门用于操作网页内容的功能集合。核心作用支持开发网页内容特效、实现用户与网页的交互功能。tipsDOM 是前端开发的核心技术之一它将 HTML/XML 文档解析为 “对象树”节点结构开发者可通过 JavaScript 操作这些节点如修改内容、样式、结构从而实现网页的动态效果与交互逻辑。1.3DOM树DOM 树的概念将 HTML 文档的所有标签按照层级关系父子、兄弟组织成的树状结构也称为文档树。作用直观地体现 HTML 标签之间的嵌套、包含等关系是浏览器解析 HTML 文档的基础结构便于开发者通过 DOM API 定位和操作特定标签。1.4 DOM 对象重要DOM 对象的定义由浏览器根据 HTML 标签生成的 JavaScript 对象。该对象包含对应 HTML 标签的所有属性可直接通过对象访问标签属性。修改 DOM 对象的属性会自动同步到对应的 HTML 标签上实现网页内容的动态更新。DOM 的核心思想将网页内容抽象为对象进行操作通过对象的属性 / 方法来控制网页元素。document 对象是 DOM 树的根节点对象代表整个 HTML 文档是访问 DOM 节点的入口。2获取DOM元素document.querySelector(CSS选择器)获取匹配的第一个元素一个htmlelement对象可以直接改变元素的值如果没有匹配返回nulldocument.querySelectorAll(CSS选择器)选择相匹配的多个元素返回值为与之匹配的对象集合为一个伪数组有长度有索引号没有pop和push等方法不能直接改变元素的值只能通过遍历的方式3操作元素内容DOM 对象都是根据标签生成的所以操作标签本质上就是操作 DOM 对象。就是操作对象使用的点语法。如果想要修改标签元素的里面的内容则可以使用如下几种方式学习路径对象.innerText 属性 对象.innerHTML 属性3.1 innerText将文本内容更新到任意标签的位置显示纯文本不解析标签3.2 innerHTML会解析标签其他与innerText相同one.innerHTML personarr[num1] personarr.splice(num1,1)4操作元素样式属性4.1. 通过 style 属性操作 CSS语法对象.style.样式属性 值举例说明const box document.querySelector(.box)修改元素样式box.style.width 200px box.style.marginTop 15px box.style.backgroundColor pink注意修改样式需通过style属性引出若样式属性含-连接符需转换为小驼峰命名法例如margin-top对应marginTop赋值时需根据需求添加 CSS 单位如pxdocument.querySelector(body) document.body.style.backgroundImageurl(../)4.2 操作类名 (className) 操作 CSS适用场景当需要修改的样式较多时直接用style属性会比较繁琐可借助 CSS 类名来批量修改样式。语法active 是一个已定义的CSS类名元素.className active注意因为class是 JavaScript 的关键字所以用className来表示元素的类名属性。className会用新值覆盖旧值即替换原有类名若要在原有类名基础上添加新类需保留之前的类名例如元素.className ‘原有类名 active’。如果想要保留原来的样式的同时添加新的样式只需在新类名和旧类名之间打空格4.3 通过 classList 操作类控制 CSS解决的问题className会覆盖原有类名classList可实现类名的追加、删除、切换更灵活。// 追加一个类原有类名保留元素.classList.add(类名)// 删除一个类元素.classList.remove(类名)// 切换类有则删除无则添加元素.classList.toggle(类名)4.4表单元素的属性操作应用场景表单常需修改属性例如点击眼睛显示密码本质是将typepassword的输入框转为type“text”。操作逻辑表单的属性有取值的和普通标签属性的操作方式一致。获取属性值DOM对象.属性名设置属性值DOM对象.属性名 新值示例表单.value 用户名 // 设置输入框的内容 表单.type password // 设置输入框为密码类型表单的布尔型属性操作特性这类表单属性 “添加即生效、移除即失效”统一用布尔值true/false表示状态button.disabledtrue禁用true代表添加该属性属性生效false代表移除该属性属性失效常见属性示例disabled禁用、checked选中、selected下拉选项选中4.5 自定义属性标准属性标签天生自带的属性如class、id、title以及disabled、checked、selected等可直接通过点语法操作。自定义属性HTML5 中推出data-前缀的专用自定义属性标签中需以data-开头定义DOM 对象中通过dataset对象获取。示例代码bodydivclassboxdata-id10盒子/divscriptconstboxdocument.querySelector(.box)console.log(box.dataset.id)// 输出10/script/body5定时器函数目标能够使用定时器函数重复执行代码定时器函数可实现定时器的开启与关闭5.1. 开启定时器setInterval(函数名, 间隔时间)作用每隔指定的时间重复调用传入的函数间隔时间的单位为毫秒例如1000代表 1 秒此处的括号内只写函数名不打括号不然系统在程序执行时自动运行定时器函数可以开启和关闭定时器5.2. 关闭定时器let 变量名 setInterval(函数, 间隔时间) clearInterval(变量名)6事件监听检测程序是否有事件产生一旦有事件触发就立刻调用一个函数做出响应元素对象.addEventListener(事件类型,要执行的函数)三要素事件源获取dom元素事件类型什么方式出发事件调用的函数要做什么7事件类型7.1鼠标触发Clik点击 mouseenter鼠标经过 mouseleave鼠标离开鼠标经过事件mouseover 和 mouseout 会有冒泡效果mouseenter 和 mouseleave 没有冒泡效果 (推荐)7.2焦点时间Focus获得焦点 bluf失去焦点7.3键盘事件Keydown键盘按下触发Keyup键盘抬起触发7.4文本事件Input 用户输入事件7.5事件对象语法如何获取在事件绑定的回调函数的第一个参数就是事件对象一般命名为 event、ev、e元素.addEventListener(click, function (e) {目标能够使用常见事件对象属性部分常用属性type获取当前的事件类型clientX/client获取光标相对于浏览器可见窗口左上角的位置offsetX/offset获取光标相对于当前 DOM 元素左上角的位置key用户按下的键盘键的值现在不提倡使用 keycode如Input.addEventListener(keyup,function(e){}) console.log(e.key)8环境对象目标能够分析判断函数运行在不同环境中 this 所指代的对象环境对象指的是函数内部特殊的变量 this它代表着当前函数运行时所处的环境作用弄清楚 this 的指向可以让我们代码更简洁函数的调用方式不同this 指代的对象也不同【谁调用this 就是谁】是判断 this 指向的粗略规则Console9回调函数把函数当做另外一个函数的参数传递这个函数就叫回调函数回调函数本质还是函数只不过把它当成参数使用使用匿名函数做为回调函数比较常见10事件流、10.1 事件流和两个阶段说明目标能够说出事件流经过的 2 个阶段事件流指的是事件完整执行过程中的流动路径图示层级结构为 Document → Element html → Element body → Element div标注了阶段顺序说明假设页面里有个 div当触发事件时会经历两个阶段分别是捕获阶段、冒泡阶段简单来说捕获阶段是 从父到子 冒泡阶段是从子到父10.2事件捕获概念从 DOM 的根元素开始去执行对应的事件从外到里事件捕获需要写对应代码才能看到效果DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)说明addEventListener 第三个参数传入 true 代表是捕获阶段触发很少使用false 代表冒泡阶段触发为默认值10.3事件冒泡目标能够说出事件冒泡的执行过程事件冒泡概念当一个元素的事件被触发时同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡简单理解当一个元素触发事件后会依次向上调用所有父级元素的 同名事件事件冒泡是默认存在的L2 事件监听第三个参数是 false或者默认都是冒泡代码片段示例const father document.querySelector(.father) const son document.querySelector(.son)10.4 阻止冒泡目标能够写出阻止冒泡的代码问题因为默认就有冒泡模式的存在所以容易导致事件影响到父级元素需求若想把事件就限制在当前元素内就需要阻止事件冒泡前提阻止事件冒泡需要拿到事件对象事件对象.stopPropagation()10.5阻止默认行为e.preventDefaulte11页面滚动元素为scrollDOM.addEventListener(scrolll, 事件处理函数) scrollLeft 和 scrollTop属性▶ 获取被卷去的大小▶ 获取元素内容往左、往上滚出去看不到的距离▶ 这两个值是数值型不带单位可读写的11.1 页面滚动事件 - 滚动到指定的坐标scrollTo () 方法可把内容滚动到指定的坐标// 让页面滚动到 y 轴1000像素的位置 window.scrollTo(0, 1000)11.2获取宽高▶ 获取元素的自身宽高、包含元素自身设置的宽高、padding、border▶ offsetWidth 和 offsetHeight▶ 获取出来的是数值方便计算▶ 注意获取的是可视宽高如果盒子是隐藏的获取的结果是 0获取位置▶ 获取元素距离自己定位父级元素的左、上距离▶ offsetLeft 和 offsetTop 注意是只读属性12时间对象12.1 实例化目标能够实例化日期对象在代码中发现了 new 关键字时一般将这个操作称为实例化创建一个时间对象并获取时间▶ 获得当前时间const date new Date()12.2使用方法 作用 说明getFullYear() 获得年份 获取四位年份getMonth() 获得月份 取值为 0 ~ 11得到的月份小一getDate() 获取月份中的每一天 不同月份取值也不相同getDay() 获取星期 取值为 0 ~ 6getHours() 获取小时 取值为 0 ~ 23getMinutes() 获取分钟 取值为 0 ~ 59getSeconds() 获取秒 取值为 0 ~ 59const data new Date() let m(data.getMonth)12.3时间戳目标能够获得当前时间戳使用场景如果计算倒计时效果前面方法无法直接计算需要借助于时间戳完成什么是时间戳是指 1970 年 01 月 01 日 00 时 00 分 00 秒起至现在的毫秒数它是一种特殊的计量时间的方式算法将来的时间戳 - 现在的时间戳 剩余时间毫秒数剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间比如 将来时间戳 2000ms - 现在时间戳 1000ms 1000ms1000ms 转换为就是 0 小时 0 分 1 秒12.4得到时间戳使用 getTime () 方法const date new Date() console.log(date.getTime())简写 new Date ()▶ 无需实例化console.log(new Date()) 使用 Date.now ()▶ 无需实例化13节点操作目标能说出 DOM 节点的类型DOM 节点DOM 树里每一个内容都称之为节点节点类型:元素节点所有的标签 比如 body、divhtml 是根节点属性节点所有的属性 比如 href文本节点所有的文本其他.parentNode直接获取父节点childNodes获得所有子节点、包括文本节点空格、换行、注释节点等children 属性重点仅获得所有元素节点返回的还是一个伪数组父元素.children下一个兄弟节点nextElementSibling 属性上一个兄弟节点previousElementSibling 属性13.1. 创建节点即创造出一个新的网页元素再添加到网页内一般先创建节点然后插入节点创建元素节点方法// 创造一个新的元素节点 document.createElement(标签名)13.2. 追加节点要想在界面看到还得插入到某个父元素中插入到父元素的最后一个子元素// 插入到这个父元素的最后 父元素.appendChild(要插入的元素)插入到父元素中某个子元素的前面// 插入到某个子元素的前面 父元素.insertBefore(要插入的元素在哪个元素前面)13.3 增加节点特殊情况下我们新增节点按照如下操作复制一个原有的节点把复制的节点放入到指定的元素内部克隆节点// 克隆一个已有的元素节点 元素.cloneNode(布尔值)cloneNode 会克隆出一个跟原标签一样的元素括号内传入布尔值若为 true则代表克隆时会包含后代节点一起克隆若为 false则代表克隆时不包含后代节点默认为 false13.4 删除节点目标能够具备根据需求删除节点的能力若一个节点在页面中已不需要时可以删除它在 JavaScript 原生 DOM 操作中要删除元素必须通过父元素删除父元素.removeChild(要删除的元素)注如不存在父子关系则删除不成功删除节点和隐藏节点display:none有区别的隐藏节点还是存在的但是删除则从 html 中删除节点14 M端事件目标了解 M 端常见的事件移动端也有自己独特的地方。比如触屏事件 touch也称触摸事件Android 和 IOS 都有。触屏事件 touch也称触摸事件Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指也可能是一根触摸笔。触屏事件可响应用户手指或触控笔对屏幕或者触控板操作。常见的触屏事件如下触屏 touch 事件 说明touchstart 手指触摸到一个 DOM 元素时触发touchmove 手指在一个 DOM 元素上滑动时触发touchend 手指从一个 DOM 元素上移开时触发15 插件插件就是别人写好的一些代码我们只需要复制对应的代码就可以直接实现对应的效果学习插件的基本过程熟悉官网了解这个插件可以完成什么需求 https://www.swiper.com.cn/看在线演示找到符合自己需求的 demo https://www.swiper.com.cn/demo/index.html查看基本使用流程 https://www.swiper.com.cn/usage/index.html查看 APi 文档去配置自己的插件 https://www.swiper.com.cn/api/index.html注意多个 swiper 同时使用的时候类名需要注意区分