js
m0_63400611
这个作者很懒,什么都没留下…
展开
-
JS中的闭包
当需要重复使用一个对象,但邮箱保护这个对象不被其他代码污染时就可以使用。原创 2022-07-18 22:27:37 · 68 阅读 · 0 评论 -
JS有关数组
代码】JS有关数组。原创 2022-07-18 21:57:41 · 67 阅读 · 0 评论 -
ToDoList案例(本地存储)
分析刷新页面不会丢失数据,需要用到本地存储localStorage 不管按下回车,还是点击复选框,都是把本地存储的数据加载到页面中,保证刷新关闭页面不会丢失数据 存储的数据格式:var todolist = [{title: 'xxx', done: false}] 注意点1:本地存储localStorage里面只能存储字符串格式,因此需要把对象转换为字符串JSON.stringify(data) 注意点2:获取本地存储数据,需要把里面的字符串转换为对象格式JSON.parse()才能使用里面的原创 2022-03-16 20:58:45 · 515 阅读 · 0 评论 -
jQuery其它方法
jQuery对象拷贝想拷贝某个对象(合并)给另外一个对象使用,此时可以使用$.extend()方法语法:$.extend([deep}, target, objectN]);deep:如果设置为true为深拷贝,默认为浅拷贝 target:要拷贝的目标对象 object1:待拷贝到第一个对象的对象 objectN:带拷贝到第N个对象的对象 浅拷贝是把拷贝的对象复杂数据类型中的地址(即代码演示中的msg{})拷贝给目标对象,修改目标对象会影响被拷贝对象...原创 2022-03-16 17:24:45 · 45 阅读 · 0 评论 -
jQuery发布微博案例
分析 点击发布按钮,动态创建一个li元素,放入文本框的内容和删除按钮,并且添加到ul中 点击删除按钮,可以删除当前的微博留言 使用slideUp()和slideDown()实现缓动的添加和删除留言 代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c原创 2022-03-16 16:28:45 · 208 阅读 · 0 评论 -
jQuery事件
jQuery事件注册单个事件注册语法:element.事件(function() {})$('div').click(function() {事件处理程序});写法基本和原生一致jQuery事件处理事件处理 on()绑定事件on()方法在匹配元素上绑定一个或多个事件的事件处理函数语法:element.on(events, [selector), fn)events:一个或多个用空格分隔的事件类型,如'click'或'keydown' selector:原创 2022-03-10 23:08:38 · 491 阅读 · 0 评论 -
jQuery尺寸,位置操作
jQuery尺寸语法 用法 width() / height() 取得匹配元素宽度和高度值 只算width/height innerWidth() / innerHeight() 取得匹配元素宽度和高度值 包含padding outerWidth() / outerHeight() 取得匹配元素宽度和高度值 padding,border outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度值 包含padding,b原创 2022-03-10 22:56:23 · 78 阅读 · 0 评论 -
jQuery元素操作
主要是遍历,创建,添加,删除元素操作遍历元素jQuery隐式迭代是对同意元素做了同样的操作,如果想要给同一类元素做不同操作就需要遍历语法1:$('div').each(function(index, domEle) {xxx;})each()方法遍历匹配的每一个元素,主要用DOM处理,each每一个 里面的回调函数有2个参数:index是每个元素的索引号,domEle是每个DOM元素对象,不是jQuery对象 如果想使用jQuery方法,需要给这个DOM元素转换为jQuery对象$原创 2022-03-10 21:28:03 · 37 阅读 · 0 评论 -
jQuery购物车全选总价案例
分析全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走 因为checked是复选框的固有属性,所以利用prop()方法获取和设置该属性 将全选按钮状态赋值给小复选框达到全选与取消效果 每当点击小的复选框就判断是否已选中所有小的,是则勾选全选按钮,否则不选代码index.html<!DOCTYPE html><html lang="zh-CN"><head> <met原创 2022-03-10 17:09:26 · 645 阅读 · 0 评论 -
jQuery手风琴案例
分析鼠标经过某个li进行两步操作 当前li宽度变为224px,同时里面的小图片淡出,大图片淡入 其余兄弟li宽度变为69px,小图片淡入,大图片淡出代码<!doctype html><html><head> <meta charset="utf-8"> <title>手风琴案例</title> <style type="text/css"> * {原创 2022-03-09 22:18:06 · 160 阅读 · 0 评论 -
jQuery案例:鼠标经过切换图片
代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 12px;原创 2022-03-09 17:58:59 · 637 阅读 · 0 评论 -
jQuery方法
jQuery选择器jQuery基础选择器名称 用法 概述 ID选择器 $('#id') 获取指定ID的元素 全选选择器 $('*') 匹配所有元素 类选择器 $('.class') 获取同一类class的元素 标签选择器 $('div') 获取同一类标签的所有元素 并集选择器 $('div,p,li') 选取多个元素 交集选择器 $('li.current') 交集元素 子代选择器原创 2022-03-08 22:43:57 · 81 阅读 · 0 评论 -
js案例:记住用户名
分析用本地存储把数据存起来,使用LocalStorage关闭页面也可以显示用户名 打开页面先判断是否有这个用户名,如果有就在表单里显示用户名,并且勾选复选框 当复选框发生改变的时候触发change事件,如果勾选就存储,否则移除存储的数据代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp原创 2022-03-08 14:16:36 · 131 阅读 · 0 评论 -
本地存储Storage
本地存储特性数据存储在用户浏览器中 设置,读取方便,甚至网页刷新不丢失数据 容量较大,sessionStorage约5M,LocalStorage约20M 只能存储字符串,可以将对象JSON.stringify()编码后存储window.sessionStorage生命周期为关闭浏览器窗口 在同一个窗口(页面)下数据可以共享 以键值对的形式存储使用存储数据sessionStorage.setItem(key, value);获取数据sessionStorage.getI原创 2022-03-08 14:03:08 · 146 阅读 · 0 评论 -
classList类名操作
classList类名操作可以更加方便的对元素的类名进行增加,删除和切换代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2022-03-05 22:44:49 · 676 阅读 · 0 评论 -
js案例:移动端轮播图
分析可以自动播放图片 手指可以拖动播放轮播图原创 2022-03-03 20:04:41 · 490 阅读 · 0 评论 -
移动端网页特效
触屏事件概述移动端浏览器兼容性较好,不需要考虑JS的兼容性问题,可以使用原生JS书写效果,但是移动端有特殊的事件,触屏事件touch,android和IOS都有常见的触屏事件如下:触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触发 触摸事件对象(TouchEvent)TouchEvent是描述手指在触摸平面的状态变化原创 2022-03-02 18:00:58 · 63 阅读 · 0 评论 -
js案例:筋斗云跟随鼠标以及停留在点击位置
分析利用动画函数做动画效果 设置筋斗云的起始位置为0 鼠标经过某个li元素,将当前li的offsetLeft位置作为目标值即可 鼠标离开时将目标值设置为0代码原创 2022-03-01 21:59:40 · 145 阅读 · 0 评论 -
js案例:带有动画的返回顶部
分析使用封装的动画函数animate.js 将动画函数中left相关值改为垂直滚动相关 页面滚动的距离可以通过window.pageYOffset获得代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-03-01 16:57:21 · 218 阅读 · 0 评论 -
节流阀(结合案例轮播图)
防止轮播图按钮连续点击造成播放过快节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个动画,让事件无法连续触发核心实现思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数开始设置一个变量var flag = true;if(flag = false; do something) 关闭水龙头利用回调函数 动画执行完毕,flag = true 打开水龙头代码为网页轮播图优化后的代码HTML<!DOCTYPE html><html lang="Z原创 2022-03-01 15:43:45 · 239 阅读 · 0 评论 -
js案例:网页轮播图
功能需求鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮 点击左右两侧按钮执行相应操作,上一张或下一张 图片播放同时,下面的小圆点也随之变化 点击小圆点播放相应图片 鼠标不经过轮播图,图片开始自动轮播 鼠标经过轮播图则停止自动轮播...原创 2022-01-23 22:15:08 · 302 阅读 · 0 评论 -
动画效果函数
动画实现原理核心原理:通过定时器setInterval()不断移动盒子位置实现步骤:获得盒子当前位置 让盒子在当前位置加上一个移动距离 利用定时器不断重复这个操作 加上一个结束定时器的操作注意:一定要给动画的元素添加定位才能使用element.style.left等方法代码<!doctype html><html><head><meta charset="utf-8"><title>333333</ti原创 2022-01-20 22:31:04 · 233 阅读 · 0 评论 -
js案例:固定侧边栏
分析需要用到页面滚动事件scrol,事件源为document 滚动到指定位置,就是判断页面被卷去的上部值 页面被卷去的头部,可以通过window.pageYOffset获得,如果是左侧则window.pageXoffset 元素被卷去的头部是element.scrollTop,如果是页面被卷去的头部则是window.pageYOffset代码<!doctype html><html><head><meta charset="utf-8">原创 2022-01-19 21:05:20 · 433 阅读 · 0 评论 -
js案例:flexible.js源码分析
立即执行函数(function(){})()主要作用:创建一个独立的作用域,避免了命名冲突问题 //写法规范: (function(){})() 或者 (function(){}()); //(function(){})() 第二个小括号可以看作是调用函数 可以用作传递参数 (function(a, b) { console.log(a + b); })(1, 2); //(function(){}()) 多个立即执行函数需要用分号;结尾 可原创 2022-01-19 15:50:17 · 224 阅读 · 0 评论 -
js案例:放大镜查看图片
分析与模态框案例一致,先获取鼠标的坐标和鼠标在盒子内的坐标 实现半透明mask的中心,即正方形的宽度高度的一半跟随鼠标移动 限制半透明mask只能在preview-img的范围内移动 使用offsetWidth和offsetHeight获取preview-img和mask的宽度,用来判断是否超出 当mask.offsetWidth/Height超出preview-img.offsetWidth/Height的范围时,则停止mask的移动代码<!DOCTYPE html>&l原创 2022-01-19 15:28:35 · 93 阅读 · 0 评论 -
js案例:拖动模态框
分析点击弹出层模态框和遮挡层就会显示(display:blick) 点击关闭按钮,模态框和遮挡层机会隐藏起来 在页面中拖拽的原理:按下并移动鼠标,移动完毕后松开鼠标 触发事件有:mosedown,mousemove,mouseup 在鼠标拖拽过程中,获取鼠标最新的坐标赋值给模态框的left和top值 鼠标按下触发的事件源是最上面id为title的元素 鼠标坐标减去鼠标在盒子内的坐标就是模态框的位置...原创 2022-01-16 22:56:39 · 116 阅读 · 0 评论 -
js案例:获取鼠标在盒子内的坐标
分析在盒子内点击,得到鼠标距离盒子左右的距离 首先得到鼠标在页面中的坐标(e.pageX,e.pageY) 其次得到盒子在页面中的距离(box.offsetLeft,box.offsetTop) 使用mousemove在鼠标移动的时候获取最新的坐标代码<!doctype html><html><head><meta charset="utf-8"><title>333333</title> <style原创 2022-01-16 16:13:26 · 399 阅读 · 0 评论 -
PC网页特效(offset client scroll)
offset概述使用offset相关属性动态的获取元素的位置(偏移),大小等.获得元素距离带有定位父元素的位置 获得元素自身大小 返回的数值不带单位offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素,若无则返回body element.offsetTop 返回元素相对带有定位 element.offsetLeft element.offsetWidth element.offsetHeig原创 2022-01-05 11:43:28 · 97 阅读 · 0 评论 -
js案例:获取url参数
分析第一个登陆页面有提交表单,action提交到index.html页面 第二个页面可以使用第一个页面的参数,实现一个数据不同页面之间传递的效果 第二个页面之所以可以使用第一个页面的数据,是利用了url里面的location.search参数 在第二个页面中使用substr去掉"?"提取参数,利用"="分隔键和值 split('=');代码login.html<!DOCTYPE html><html lang="Zh-CN"><head>原创 2022-01-04 17:08:30 · 122 阅读 · 0 评论 -
js案例:5秒后自动跳转
分析第一个登陆页面有提交表单,action提交到index.html页面 第二个页面可以使用第一个页面的参数,实现一个数据不同页面之间传递的效果 第二个页面之所以可以使用第一个页面的数据,是利用了url里面的location.search参数 在第二个页面中使用substr去掉"?"提取参数,利用"="分隔键和值 split('=');代码<html><head><meta charset="utf-8"><title>333333&l原创 2022-01-04 17:03:51 · 5148 阅读 · 0 评论 -
location对象
location对象简介window对象给我们提供了一个location属性用于获取或设置窗体的url,并且可以用于解析URL,因为属性返回的是一个对象,所以我们将这个属性称为location对象URL统一资源定位符(Uniform Resource Locator)是互联网上标准资源的地址,每个文件都有唯一的url,包含的信息指出文件位置以及浏览器怎么处理它url的语法格式protocol://host:[port]/path/[?query]#fragmenthttp://w原创 2022-01-04 17:02:56 · 89 阅读 · 0 评论 -
this指向问题
this的指向在函数定义的时候确定不了,只有函数执行的时候才能确定this指向谁,一般this最终指向调用它的对象this指向三种情况 全局作用域或者普通函数中this指向全局对象window(定时器里面的this指向window对象) 方法中调谁用this的指向谁 构造函数中this指向构造函数的实例 代码演示<!doctype html><html><head><meta charset="utf-8">&l原创 2022-01-03 17:35:10 · 45 阅读 · 0 评论 -
js案例:5秒后再次点击
分析点击按钮后禁用按钮(disabled=true) 点击按钮后内容发生变化,通过innerHTML修改 利用定时器修改秒数 时间为0即停止定时器并且重新设定时间,复原按钮状态代码<!doctype html><html><head><meta charset="utf-8"><title>Document</title> <style> </style></head&原创 2022-01-03 17:05:38 · 655 阅读 · 0 评论 -
js案例:倒计时
分析这个倒计时是不断变化的,需要定时器来自动变化(setnterval) 三个黑色盒子里面的分别存放时分秒 三个黑色盒子利用innerHTML放入计算的小时分钟秒数原创 2021-12-31 18:36:49 · 146 阅读 · 0 评论 -
js案例:5秒后自动关闭
分析核心思路:5秒之后把广告隐藏起来 定时器setTimeout()代码<html><head><meta charset="utf-8"><title>5秒后自动关闭</title> <style> img { } </style></head><body> <img src="./image/微信截图_20201201231713.png"原创 2021-12-23 17:04:43 · 2106 阅读 · 0 评论 -
BOM事件
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分BOM的构成BOM比DOM更大,它包含DOMwindow对象是浏览器的顶级对象,它具有双重角色它是js访问浏览器的一个接口 它是..原创 2021-12-20 22:30:31 · 99 阅读 · 0 评论 -
js案例:输入时弹出大字号内容
分析输入内容时,上面的大号盒子(con)显示更大字体的内容 表单检测用户输入:给表单添加键盘事件 同时把快点单号里面的值(value)获取过来赋值给盒子con(innerText)作为内容 如果快递单号里面内容为空,则隐藏大号字体盒子(con)代码<html><head><meta charset="utf-8"><title>输入时弹出大字号内容</title> <style> * { margin原创 2021-12-12 19:20:43 · 174 阅读 · 0 评论 -
js案例:按下按键聚焦到输入框
分析核心思路:检测是否按下了s键,如果按下则把光标定位到搜索框里面 使用键盘事件对象里面的keyCode判断用户是否按下s键 搜索框获得焦点,使用js里面的focus()方法代码<body> <input type="text"> <script> var search = document.querySelector('input'); document.addEventListener('keyup', function(e)原创 2021-12-12 18:56:09 · 2304 阅读 · 0 评论 -
js键盘事件
键盘事件点击键盘按键后触发键盘事件代码//1.keyup 键盘按键弹起 document.addEventListener('keyup', function() { console.log('弹起'); }) //2.keydown 键盘按键按下 document.addEventListener('keydown', function() { console.log('按下down'); }) //3.keypress 键盘按键按下 .原创 2021-12-12 18:45:32 · 1090 阅读 · 0 评论 -
js案例:跟随鼠标的天使
分析鼠标不断地移动,需要使用鼠标移动事件 mousemove 在页面中移动,给document注册事件 图片要移动距离,而且不占位置,使用绝对定位 核心原理:每次鼠标移动,获取最新的鼠标坐标,把这个x和y坐标作为图片的top和left值就可以移动图片代码<html><head><meta charset="utf-8"><title>跟随鼠标的天使</title> <style> img { po原创 2021-12-12 18:17:45 · 201 阅读 · 0 评论