javascript
文章平均质量分 57
httpkaidi
这个作者很懒,什么都没留下…
展开
-
移动端开发-触摸事件
移动端网页布局移动端浏览器兼容性较好,不需要考虑兼容性问题。触屏事件触屏touch事件 说明touchstart 手指触摸到一个DOM元素时触发touchmove 手指再一个DOM元素上滑动时触发touchend 手指从一个DOM上移开时触发触摸事件对象TouchEvent触摸列表 说明touches 正在触摸屏幕的所有的手指列表targetTouches 正在触摸当前元素DOM 元素的手指列表changedTouches 手指状态...原创 2021-12-04 15:05:41 · 128 阅读 · 0 评论 -
案例:仿京东放大镜效果
案例:仿京东放大镜效果功能需求:分为三个模块 鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开隐藏两个盒子功能 黄色的遮挡层跟随着鼠标移动 移动黄色遮挡层,大图片跟随着移动大图片移动距离=(遮挡层移动距离*大图片最大移动距离)/ 遮挡层最大移动距离 <style> body, div { margin: 0; padding: 0; } .product { positi原创 2021-12-03 12:36:33 · 116 阅读 · 0 评论 -
案例:模态框拖拽
案例:模态框拖拽功能需求:点出弹出层,会弹出模块框,并且显示灰色半透明的遮挡层点击关闭按钮,可以关闭模态框,同时关闭灰色半透明遮挡层鼠标放到模态框最上面一层,可以按住鼠标拖拽模块框在页面中移动鼠标松开,可以停止拖动模态框移动思路:点击弹出层,模态框和遮挡层就会显示出来 display : block点击关闭按钮,模态框和遮挡层就会隐藏起来 display : none在页面中拖拽的原理:鼠标按下并移动,之后松开鼠标触发事件是鼠标按下mousedown 鼠标移动mouseover 鼠标松原创 2021-12-03 01:16:46 · 92 阅读 · 0 评论 -
本地存储 sessionStorage / localStorage 使用及区别
本地存储特性:1.数据存储在用户浏览器中2.设置、读取方便,甚至页面刷新不丢失数据2.容量较大,sessionStorage 约5M,localStorage约20M3.只能存储字符串,可以将对象JSON.stringify()编码后存储window.sessionStorage:1.生命周期为关闭浏览器窗口2.在同一个窗口(页面)下数据可以共享3.以键值对的形式存储使用存储数据:sessionStorage.setItem(key,value);获得数据:sessionStorag原创 2021-12-05 23:56:36 · 185 阅读 · 0 评论 -
案例:筋斗云动画效果
筋斗云动画效果利用动画函数做动画效果 原先筋斗云起始位置为0 鼠标经过某个li 把当前 li 的 offsetLeft 位置作为目标值即可 鼠标离开某个li ,就把目标值设为0 如果点击了某个li ,就把 li 当前的位置存储起来,作为筋斗云的起始位置 <style> * { padding: 0; margin: 0; } li, a { text-decoration: none原创 2021-12-04 14:34:51 · 152 阅读 · 0 评论 -
案例:带有动画效果的返回顶部
<style> * { margin: 0; padding: 0; } div { width: 1200px; margin: 10px auto; } .header { margin-top: 10px; height: 100px; background-color: hsl(278, 84%, 69%); .原创 2021-12-04 13:37:50 · 192 阅读 · 0 评论 -
案例:网页轮播图
案例:网页轮播图也称为焦点图功能需求:鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮点击右侧按钮一次,图片往左播放一次,依此类推,左按钮同理图片播放的同时,下面小圆圈模块跟随一起变化点击小圆圈,可以播放相应图片鼠标不经过轮播图,轮播图也会自动播放鼠标经过轮播图模块,自动播放停止其中模块:动态生成小圆圈:核心思路:小圆圈的个数要和图片张数一致首先得到ul里面图片的数量,(图片放入li里面,所以是li的个数)利用循环动态生成小圆圈(这个小圆圈要放入ol里面)创建节点 creat原创 2021-12-04 13:09:14 · 247 阅读 · 0 评论 -
动画案例: 滑动块
动画案例:滑动块案例效果:鼠标经过就将盒子滑动到右侧,同时外盒子内容箭头指向变化鼠标离开就将盒子滑动到左侧,同时外盒子内容箭头指向变化回来思路:动画封装函数,回调函数 <style> .sliderbar { position: relative; float: right; margin-top: 100px; height: 40px; width: 60px; ba原创 2021-12-03 17:04:27 · 129 阅读 · 0 评论 -
动画函数的实现、封装、回调函数
动画函数封装动画实现原理:核心原理:通过定时器 setInterval()不断移动盒子实现步骤:获得盒子的当前位置 让盒子在当前位置加上一个移动距离 利用定时器不断重复这个操作 加一个结束定时的条件 注意此元素需要添加定位,才可以使用element.style.left <style> div { position: absolute; width: 100px; height: 100px;原创 2021-12-03 15:46:59 · 128 阅读 · 0 评论 -
元素可视区 client 系列 / 元素scroll系列 /案例:仿淘宝固定右侧侧边栏
元素可视区 client 系列client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息,通过client的相关属性可以动态获得该元素的边框、大小等。client 系列属性 作用element.clientTop 返回元素上边框的大小element.clientLeft 返回元素左边框的大小element.clientWidth 返回自身包括padding、内容区的宽度、不含边框,返回数值不带单位。element.clientHeigh...原创 2021-12-03 13:53:59 · 76 阅读 · 0 评论 -
立即执行函数 pageshow
立即执行函数立即执行函数:不需要调用,立马能够自己执行的函数写法:第一种:(function(){})()第二种:(function(){}() ) //第一种,较为常用 //(function () {})() (function () { console.log(2); //不需要调用,立马打印2 第二个函数可以看作是调用函数 })(); (function (a,b) { co原创 2021-12-03 12:47:37 · 282 阅读 · 0 评论 -
事件委托(代理)/ 鼠标事件对象/ 键盘事件 /案例: 跟随鼠标移动的图片/案例:模拟京东按键输入内容
事件委托也称为事件代理,在jQuery里称为事件委派是事件冒泡带来的好处原理:不是给每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点提高了程序的性能例: <body> <ul> <li>点击</li> <li>点击</li> <li>点击</li> <li>点击</l原创 2021-12-02 15:42:00 · 87 阅读 · 0 评论 -
事件对象/事件对象兼容性处理/事件对象常用属性和方法
事件对象event 就是一个事件对象 写到我们侦听函数的小括号里 当作形参事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息,比如鼠标坐标等,如果是键盘事件里面就包含的键盘事件的信息,比如:用户按下了哪个键事件对象可以自己命名,一般用event存在兼容性问题, ie678 可以通过 window.event 兼容性的写法;<script> va.原创 2021-12-02 15:05:57 · 119 阅读 · 0 评论 -
DOM事件流/冒泡阶段,捕获阶段
DOM事件流事件流描述的是从页面中接受事件的顺序事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流DOM事件分为三个阶段:捕获阶段当前目标阶段冒泡阶段注意:JS代码中只能执行捕获或者冒泡其中的一个阶段onclick 和 attachEvent(ie) 只能得到冒泡阶段捕获阶段:如果addEventListener 的第三个参数为true 则为捕获阶段,参数为false或者省略 则为冒泡阶段实际开发中很少使用事件捕获,我们更关注事件冒泡有些事件是没有冒泡的原创 2021-12-02 14:55:39 · 95 阅读 · 0 评论 -
删除事件(解绑事件)/ 删除事件兼容性解决方案
删除事件(解绑事件)传统注册方式:element.onclick = 'null' removeEventListener删除事件 attachEvent删除事件 <body> <div>1</div> <div>2</div> <div>3</div> <script> var divs = document.querySelectorAll("div")原创 2021-12-02 14:41:44 · 80 阅读 · 0 评论 -
注册事件(事件处理)
注册事件给元素添加事件,称为注册事件或者绑定事件注册事件有两种方式:传统方式、方法监听注册方式传统注册方式利用on开头的事件 onclick<button onclick = "alert('hi~')" ></button>btn.onclick = function () { }特点:注册事件的唯一性:同一个元素同一个事件只能设置一个函数,最后注册的处理函数会覆盖前面的处理函数方法监听注册事件W3C标准 推荐方式addEventListener()它是一原创 2021-12-02 14:22:23 · 521 阅读 · 0 评论 -
节点操作:三种动态创建元素的区别
三种动态创建元素的区别document.write() (不常用)直接将内容写入页面的内容流,但如果文档流加载完毕,再调用这句话,会导致整个页面全部重绘(即以前所写内容消失)element.innerHtml将内容写入某个DOM节点,不会导致页面重绘此方法创建多个元素的效率会更高一些(不要拼接字符串,采取数组形式拼接),结构稍微复杂document.creatElement()此方法创建多个元素效率稍微低一些,但结构清晰————————————————版权声明:本文为CSDN博主「杨蛋蛋~原创 2021-12-02 14:11:57 · 41 阅读 · 0 评论 -
节点操作(删除,复制)/案例1:删除留言板的留言 /案例2:动态生成表格
节点删除node.removeChild(child)从DOM中删除一个子节点,返回删除的节点 <body> <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> var bt.原创 2021-12-02 13:52:25 · 97 阅读 · 0 评论 -
节点操作(增加) /案例:下拉菜单/案例:简单版发布留言
节点操作因为利用DOM提供的方法获取元素逻辑性不强且非常繁琐因此学习利用节点层级关系获取元素:利用父子兄的关系获取元素逻辑性强,但兼容性差节点:页面中所有的内容都是节点(标签,属性,文本,注释等),在DOM中,节点使用node来获取HTML DOM树中的所有节点都可以通过JS来访问,所有HTML元素都可以被修改,也可以创建或者删除节点至少有:nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性元素节点 nodeType 为 1属性节点原创 2021-12-02 12:38:13 · 192 阅读 · 0 评论 -
自定义属性操作/案例:自定义tab栏切换/HTMl5自定义属性
自定义属性操作 <div id = 'demo'> </div> <script> var div = document.querySelector("div"); //1.获取元素的属性值 //(1)element.属性 console.log(div.id); //(2)element.getAttribute('属性') console.log(div.getAttribut原创 2021-12-02 11:28:03 · 166 阅读 · 0 评论 -
案例:表格鼠标经过变色 / 全选反选
案例一:表格鼠标经过变色案例:用到鼠标事件:鼠标经过 onmouseover 鼠标离开 onmouseout思路:鼠标经过tr行,当前行变换背景颜色,鼠标离开去掉当前背景颜色//注意:第一行(thead里面的行)不需要变换颜色,因此我们获取的是tbody里面的行<style> table { width: 800px; margin: 100px auto; text-align: center; bord原创 2021-12-02 01:12:01 · 352 阅读 · 0 评论 -
操作元素(排他思想)-算法
排他思想如果由同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想:所有元素全部清除样式(干掉其他人) 给当前元素设置样式(留下自己) 顺序不能颠倒(先干掉其他人,再设置自己)例:点击哪个按钮,哪个就变成粉红色<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <bu原创 2021-12-01 23:41:32 · 46 阅读 · 0 评论 -
Web APIs /APIs --DOM简述/DOM中获取元素方法/事件(含鼠标事件)/操作(含案例)
Web APIsWeb APIs 和 JS 的关联性:Web APIs是 W3C 组织的标准,主要学习DOM 和 BOMWeb APIs是 JS 所独有的部分主要学习页面交互功能Web APIs 是 JS 的应用总结:API 是一种接口工具,以实现某些功能,只要会使用就可以了Web APIs是浏览器提供的一套操作浏览器功能(BOM) 和 页面元素(DOM)的APIWeb APIs 一般都有输入和输出,Web APIs很多都是方法(函数)可以结合前面学习内置对象方法的思路学习DOMDO原创 2021-12-01 23:05:47 · 79 阅读 · 0 评论 -
简单数据类型和复杂数据类型--堆、栈/传参
简单数据类型和复杂数据类型简单数据类型:即基本数据类型或值类型 值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型(null除外) string number,bollen,undefined,null //简单数据类型null 返回的是一个空的对象 object var timer = null; console.log(typeof timer); //object //如果有个变量以后打算用来储存为对象,暂时不知道放什么,原创 2021-12-01 21:17:27 · 381 阅读 · 1 评论 -
javaScript学习笔记五--内置对象(math / Date / 数组 / 字符串 ) /案例:倒计时效果
对象对象分为三大类:自定义对象内置对象浏览器对象内置对象内置对象就是JS语言自带的一些对象,供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)帮助我们快速开发内置对象很多,可以查阅文档MDN文档:http://developer.mozilla.org/zh-CN/常用内置对象Math对象//Math 是一个内置对象,它拥有一些数学常数属性和数学函数方法。Math 不 是一个函数对象。//Math 用于 Number 类型。它不支持 BigIn.原创 2021-12-01 21:12:31 · 109 阅读 · 0 评论 -
javascript学习笔记4-预解析/对象
预解析js引擎运行js 分为两步:预解析 代码执行预解析:js 引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面代码执行:按照代码书写顺序从上往下执行预解析分为:变量预解析(变量提升)和函数预解析(函数提升)变量预解析就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作函数预解析就是把所有的函数声明提升到当前作用域的最前面 不调用函数function f1() { var a = b = c = 9; //相当于 var a =.原创 2021-12-01 14:49:45 · 47 阅读 · 0 评论 -
JavaScript学习笔记三--语句/数组/函数/作用域
if语句语法结构if (条件表达式) { //条件成立执行语句}三元表达式(简化的if语句)条件表达式 ? 表达式1 : 表达式2//如果表达式为真返回1的值,为假返回2var num = prompt("请输入数据");var result = num < 10 ? "0" + num : num; //小于10在数字前加0,否则原数字输出alert("返回数字为" + result);//switch()内的值与case内的值是全等(===),必须是原创 2021-12-01 14:41:54 · 78 阅读 · 0 评论 -
javascript学习笔记2
算术运算符算术运算符遵循先乘除后加减的原则浮点数 算数运算里面会有问题,要尽力避免不能直接判断两个浮点数相等,因为精度会有问题表达式由数字,运算符,变量等组成的式子,称为表达式任何一个表达式都会有一个返回值//前置自增和后置自增如果单独使用,效果是一样的后置自增:先返回原值,后自加一var age=10;console.log(age++ +10);//返回值20console.log(age); //返回值11console.log(age++ ++age);//返.原创 2021-12-01 14:18:22 · 30 阅读 · 0 评论 -
Javascript学习笔记1
JavaScript学习笔记 一JS是一种运行在客户端的脚本语言不需要编译,运行过程由JS解释器(JS引擎)逐行解释并执行选择也可基于Node.js技术进行服务器端编程浏览器分为两部分:渲染引擎和JS引擎渲染引擎:俗称内核JS引擎:也称JS解释器,用于读取网页中的JS代码,对其处理后运行JS的组成1.javascript语法(ECMAScript)2.页面文档对象模型(Dom)3.浏览器对象模型(Bom)1.JS有三种书写位置:行内式,内嵌式,外部式//JS中更多的使用单引号原创 2021-12-01 14:16:40 · 77 阅读 · 0 评论