织梦网站地图模板,官方网站首页,最近的新闻有哪些,网站备案必须是企业吗一、作用和分类 1、基本概念 作用#xff1a;使用JS去操作HTML和浏览器 分类#xff1a;DOM#xff08;文档对象模型#xff09;和BOM#xff08;浏览器对象模型#xff09; html的标签JS的DOM对象 2、获取DOM对象-参数必须加引号 #xff08;1#xff09;选择匹配的第…一、作用和分类 1、基本概念 作用使用JS去操作HTML和浏览器 分类DOM文档对象模型和BOM浏览器对象模型 html的标签JS的DOM对象 2、获取DOM对象-参数必须加引号 1选择匹配的第一个元素可直接进行修改 document.querySelector(选择器) //返回DOM对象 2获取多个返回伪数组只能通过遍历的方式修改 document.querySelectorAll(ul li) //返回DOM对象 3其他 二、操作元素 1、操作元素内容 1obj.innerText 仅获取文字 2obj.innerHTML 可以解译标签(添加/更改标签 2、操作元素属性 1img.src 2img.title ... 3、操作元素样式属性 1通过style修改麻烦 语法obj.style.属性值 注 a.css中带-的采用小驼峰命名法如background-color→backgroudColor b.大部分值都是字符串需要加带单位 c.修改body属性可直接使用document.body.style.属性 2通过类名修改不推荐 obj.className 缺点会覆盖原来的类名需要手动添加原类名 3通过classList修改推荐 元素.classList.add(类名) 元素.classList.remove(类名) 元素.classList.toggle(类名) 有就删掉没有就添加 【案例】轮播图 4、操作元素表单属性 表单.value 修改表单的值 表单.typepassword 修改成不可见 input.checkedtrue/false 复选框选中/不选中 button.disabledtrue/false 按钮禁用/不禁用 5、自定义属性 在元素标签中内加属性data-名称 获取自定义属性集合元素.dataset 获取自定义属性元素.dataset.名称 6、间歇函数-计时器 1开启定时器 方法1setInterval(函数名-不加小括号间隔时间-ms)
方法2setInterval(function(){},间隔实际-ms) 2关闭定时器 clearInterval定时器名 三、事件监听 事件是在编程中系统发生的动作或发生的事件 1、事件语法 元素对象.addEventListener(事件类型要执行的函数)2、事件监听三要素 事件源哪个dom元素要获取dom元素 事件类型用什么方式触发-点击、鼠标经过... 事件调用的函数要做什么事 3、事件类型 鼠标事件click鼠标点击、mouseenter鼠标经过、mouseleave鼠标离开 焦点事件focus获得焦点、blur失去焦点 键盘事件keydown键盘按下触发、keyup(键盘抬起触发推荐) 文本事件input用户输入事件 4、事件对象 是什么也是个对象有事件触发时的相关信息 在哪里事件绑定的回调函数的第一个参数就是事件对象 5、环境对象 目标能够分析判读函数运行在不同环境中this所指代的对象 定义指的是函数内部特殊的变量this它代表着当前函数运行时所处的环境 谁调用this就是谁 6、回调函数 是什么函数A作为参数传递给函数B 应用定时器、监听事件 四、事件流 事件完全执行的流动路径捕获阶段冒泡阶段 1、事件捕获 事件被触发所有元素从祖先开始到子代依次被执行 2、事件冒泡 事件被触发所有元素从子代开始到祖先依次被执行 3、阻止冒泡 把事件限制在当前元素内防止冒泡既能阻止冒泡也能阻止捕获 事件对象.stopPropagation() 4、事件解绑 1传统on注册L0 btn.οnclicknull 2事件监听注册L2 使用removeEventLisener(事件函数名) 匿名函数无法解绑只能修改成在外部定义的函数 5、鼠标经过事件 mouseover和mouseout会有冒泡效果不推荐 mouseenter和mouseleave没有冒泡效果推荐 五、事件委托 1、是什么 减少事件注册次数利用冒泡的原理给父元素添加事件-子元素点击-冒泡到父元素 2、方法 1获取父元素 2注册事件 3利用事件对象.target.tagName找到真正触发元素设置条件只有点击真正触发元素才能执行函数 3、阻止事件 1阻止冒泡 事件对象.stopPropagation() 2阻止默认行为 事件对象e.preventDefault() 六、其他事件 1、页面加载事件 1事件名load 作用所有外部资源加载完毕后执行js window.addEventListener(load.function(){}) 2事件名DOMContentLoaded 作用HTML文档被完全加载和解析完成后不用等等样式、图像等完全加载 2、元素滚动事件 事件名scroll 滚动条在滚动时触发事件 window.addEventListener(scroll.function(){}) 1获取被卷去的大小 scrollLeftscrollTop 检测方法 document.documentElement.scrollTop 2scrollTo滚动至具体位置 window.scrollTo(x,y)3、页面尺寸事件 窗口改变时触发事件 window.addEventListener(resize.function(){}) clientWidth、clientHeight获取宽高不包含border 七、元素的尺寸与位置 offsetWidth、offsetHeight获取宽高内容paddingborder offsetLeft、offsetTop得到的位置优先级以带有定位的父级文档左上角 八、日期对象 日期对象用于表示时间的对象 作用获取当前系统时间 1、实例化日期对象 //得到当前时间
const datanew Date() 2.转换日期格式 日期对象.toLocaleString()
日期对象.toLocaleTimeString() 仅显示时间
日期对象.toLocaleDateString() 仅显示日期 3.时间戳计算时间的方式—主要用于计算倒计时 三种方式获取时间戳 1、getTime() 必须实例化Date()
2、new Date() 推荐
new Date(2022-4-1 18:30:00)
3、Date.now() 仅能返回当前的时间戳 九、节点操作 1、DOM节点 元素节点属性节点文本节点其他 2、节点操作元素节点 1查找节点 通过关系来查找 父节点 元素对象.parentNode 字节点 元素对象.children 兄弟节点 元素对象.previousElementSibling 上一个兄弟元素
元素对象.nextElementSibling 下一个兄弟元素2增加节点 步骤1 创建节点 const div document.createElement(div) 步骤2 追加节点 插入到父元素的最后一个子元素 父元素.appendChild(要插入的元素) 插入到父元素中某个子元素的前面 父元素.insertBefore(要插入的元素,在哪个元素前面)
e.g ul.insertBefore(li,ul.children[0]) 3克隆节点 步骤1 克隆元素 元素对象.cloneNode(true)
参数
true 克隆标签及内容
false 仅可怜标签不克隆内容步骤2 追加元素 元素对象.appendChild(要插入的元素) 4删除节点 删除元素必须通过父元素删除 父元素.removeChild(父元素.children[0]) 十、M端事件移动端 1、了解M端常见的事件 touchstart 手指在DOM元素中触摸touchmove 手指在DOM元素中滑动touchend 手指在DOM元素中移开 2、swiper插件 1引入.css和.js文件 2复制demo的HTML内容、CSS内容、JS内容 十一、window对象 1、BOM 2、定时器延时函数 只执行一次 setTimeout(回调函数等待延迟的毫秒数) 清除延时函数 let timersetTimeout(回调函数等待的毫秒数)
clearTimeout(timer) 3、JS执行机制 同步任务都在主线程上执行形成一个执行栈 异步任务添加到任务消息队列中 1普通事件 2资源加载 3定时器 事件循环主线程不停地获取任务→执行任务→再获取任务→执行任务 4、location对象 数据类型对象 location.href获取完整的URL地址对其赋值时用于地址的跳转location.search获取地址中携带的参数符号后面部分location.hash获取地址中的哈希值符号#后面部分reload刷新页面强制刷新reloadtrue 5、navigator对象 navigator.userAgent主要用来获取浏览器信息 应用判断进入pc或者移动端 6、history对象 back()进行后退 forward()前进 go()-1后退1前进 十二、本地存储 1、本地存储的介绍 存储在本地用户浏览器中一刷新不丢失数据 2、本地存储的分类 1localStorage 本地存储只能存字符串类型 //增-添加数据
localStorage.setItem(key,value)
//查-获取数据
localStorage.getItem(key)
//删-删除数据:只删除名字
localStorage.removeItem(key)
//改-前提已有改键值
localStorage.setItem(key,value) 2sessionStorage 生命周期为关闭浏览器窗口再同一个窗口下数据可共享用法同localStorage 3、存储复杂数据类型 复杂数据类型必须先转为JSON localStorage.setItem(key,JSON.stringify(obj)) 取出来需要再转成对象 JSON.parse(localStorage.getItem(obj)) 十三、数组map和join方法 目的利用数组的方式实现字符串拼接高效开发常用 1、map 遍历处理的数据生成新的数组 const arr[red,blue,pink]
arr.map(function(ele,index){
return ele颜色
}) 2、join 把数组中所有元素转换成一个字符串 arr.join(连接字符串) 3、mapjoin渲染页面 1渲染业务要封装成一个函数render 2使用map方法遍历数组里面更换数据然后会返回有数据的tr数组 3通过join方法把map返回的数组转换为字符串 4把字符串通过innerHTML赋值给tbody 十四、正则表达式 1、介绍 正则表达式是用于匹配字符串中字符组合的模式。在JS中正则表达式也是对象。 通常来查找、替换那些符合正则表达式的文本许多语言都支持正则表达式。 2、作用 表单验证匹配过滤敏感词替换字符串中提取我们想要的部分提取 3、语法 1定义规则 const reg/规则词/ 2查找 reg.test(字符串变量)返回true/false reg.exec(字符串变量)找到返回数组找不到返回null 注也可写成下列 /哈哈/.test(哈哈 4、元字符 是具有特殊含义的字符 [a-z]表示26个字母 1边界符 ^ 开头$ 结尾 2量词 * 重复零次或更多次 重复一次或更多次重复零次或一次{n} 重复n次{n,} 重复n次或更多次{n,m} 重复n到m次 3字符类 [ ] 匹配字符串集合[^ ] ^为取反符号. 除换行符之外的字符 4预定类 5、修饰符 /表达式/修饰符 i 不区分大小写 e.g /表达式/ig 全局匹配找出所有满足正则表达式的replace const restr.replace(/java/ig前端)
