JavaScript
文章平均质量分 50
真爱计划
需要源码的(https://github.com/Chicksqace),B站搜索(真爱计划)感谢三连支持!!!
展开
-
前端测试常用随机生成自定义token,写死token方式
/ 从测试字符串中随机拿一个字符跟msg进行拼接。采用的原理是随机从预设字符串中随机抽一个字符,然后拼接成一个token。原创 2023-03-19 12:49:58 · 563 阅读 · 0 评论 -
JavaScript中err=null及if(err){}是否执行
就是if(变量)是if(变量==true)的简写。原创 2022-11-08 16:21:06 · 321 阅读 · 0 评论 -
JavaScript学习笔记——JS基础0
JavaScript的起源:JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证。所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则。比如:用户名的长度,密码的长度,邮箱的格式等。打个比方:用户输入表单中。密码长度的要求为不少于4个字符,用户若输入3个字符,上传到服务器中,由于当时带宽的缘故,就是我们常说的56kb,上传到服务器大约30秒,服务器检测出问题又要传回来,用户又要重新输入,如果输入错误,有要重新修改,太消耗时间了,并且这些功能很容易在网页中实现...原创 2022-04-25 22:13:26 · 1982 阅读 · 0 评论 -
Math对象的案例:封装Math的最大值方法和猜数
① 随机生成一个1~10 的整数 我们需要用到 Math.random() 方法。② 需要一直猜到正确为止,所以一直循环。③ 用while 循环合适更简单。④ 核心算法:使用 if else if 多分支语句来判断大于、小于、等于。习题: 要求用户猜1-50之间的一个数字,但是只有10次猜的机会。利用对象封装自己的数学对象 里面有 PI 最大值和最小值。原创 2022-10-11 15:29:27 · 522 阅读 · 0 评论 -
Web APIs:节点操作(兄弟)及创建、添加节点和简单版发布留言案例
因为这些元素原先不存在, 是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。node.previousElementSibling//上一个兄弟元素节点。如何解决兼容性问题?node.nextElementSibling//下一个兄弟元素节点。node.nextSibling//下一个兄弟节点 但是包括了空格。原创 2022-10-19 18:26:34 · 316 阅读 · 0 评论 -
Web APIs:事件高级--删除事件(解绑事件)
第二次点击就是没有效果的。2. 方法监听注册方式。原创 2022-10-22 09:31:00 · 97 阅读 · 0 评论 -
Web APIs:获取自定义属性值和设置移除自定义属性
element.getAttribute(‘属性’);主要获得自定义的属性 (标准) 我们程序员自定义的属性。element.setAttribute(‘属性’);主要设置自定义的属性 (标准)element.setAttribute('属性', '值');element.属性 获取内置属性值(元素本身自带的属性)element.getAttribute('属性');element.属性 = ‘值’ 设置内置属性值。element.属性 设置内置属性值。element.属性 获取属性值。原创 2022-10-17 13:37:22 · 159 阅读 · 0 评论 -
JavaScript高级学习笔记:相关问题2
上次存在的问题,当开始是指向同一个对象,但是当 obj={age:13}时,就相当于创建了一个新的对象,指向另一个内存,因此不会改变a的值。问题: 在js调用函数时传递变量参数时, 是值传递还是引用传递?对象:成为垃圾对象=》垃圾回收器回收。问题: JS引擎如何管理内存?分配小内存空间,得到它的使用权。局部变量:函数执行完自动释放。存储数据,可以反复进行操作。原创 2022-10-09 00:05:15 · 183 阅读 · 0 评论 -
Web APIs:JS 执行队列
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做 饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。1. 先执行执行栈中的同步任务。原创 2022-10-23 20:59:18 · 146 阅读 · 0 评论 -
Web APIs:事件高级--DOM事件流及DOM事件流程代码验证
我们向水里面扔一块石头,首先它会有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具 体元素(目标点)的捕获过程;5. 有些事件是没有冒泡的,比如 onblur、onfocus、onmouseenter、onmouseleave 6. 事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件.事件冒泡: IE 最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点的过程。事件捕获: 网景最早提出,由 DOM 最顶层节点开始,然后逐级向下传播到到最具体的元素接收的过程。原创 2022-10-22 09:31:12 · 207 阅读 · 0 评论 -
JavaScript学习笔记——JS基础9
我是一个按钮// 游览器已经为我们提供了 文档节点 对象这个对象是Windows属性// 可以在页面中直接使用,文档节点代表的整个网页// 通过获取button对象// 修改按钮的文字原创 2022-10-01 15:27:09 · 631 阅读 · 0 评论 -
JavaScript高级学习笔记:02相关问题
理解var a='123' a是没有类型的,只是指向存放‘123’的地址值。null定义并赋值,只是值为null。什么时候给变量赋值为null呢?undefined代表定义未赋值。3、严格区别变量类型和数据类型?*基本类型:保存的基本类型的数据。初始赋值,表明对象要赋值为对象。变量的类型(变量内存值的类型)1.undefined和null的区别?*引用类型:保存的地址值。原创 2022-10-07 00:21:28 · 91 阅读 · 0 评论 -
Web APIs:PC 端网页特效--动画函数封装
将这个函数作为参数传到另一个函数里面,当那个函数执行完之后, 再执行传进去的这个函数,这个过程就叫做回调。我们可以给不同的元素使用不同的定时器(自 己专门用自己的定时器)。因为以后经常使用这个动画函数,可以单独封装到一个JS文件里面,使用的时候引用这个JS文件即可。缓动动画 就是 盒子是当前的位置+变化的值(目标-现在的位置)/10。匀速动画 就是 盒子是当前的位置+固定的值(例如10 )3. 停止的条件是: 让当前盒子位置等于目标位置就停止定时器。回调函数写的位置:定时器结束的位置。原创 2022-10-23 21:01:16 · 384 阅读 · 0 评论 -
脚本学习:2
分析:更简单的一道题,倒是让我无语很久,其实一句话就可以实现了,就是获取这俩个元素,然后事件onclick触发就disabled =!2)在外部脚本文件中编写代码,实现:在页面加载后,获取复选框和按钮,并设置复选框为选中状态;在用户点击复选框使复选框的选中状态发生变化时,判断,如果未选中,则按钮不可用,反之则按钮可用;思路:很简单的一道题,先获取input元素和command元素,当按钮点击事件触发时,获取input的value值,然后相乘,在span元素显示出来,就是innertext。原创 2022-10-09 00:05:49 · 146 阅读 · 0 评论 -
Web APIs:排他思想(算法)和百度换肤效果案例
3. 注意顺序不能颠倒,首先干掉其他人,再设置自己。1. 所有元素全部清除样式(干掉其他人)2. 给当前元素设置样式 (留下我自己)原创 2022-10-16 12:11:40 · 95 阅读 · 0 评论 -
JavaScript学习笔记——JS基础2
21赋值运算符<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> /* = 将符号右侧的值赋值给左侧的变量 += 等价 = +...原创 2022-05-15 19:12:04 · 234 阅读 · 0 评论 -
字符串对象案例:返回字符位置,统计最多字符,替换字符
课后作业['red','blue','red','green','pink','red'],求red出现的次数。案例:返回字符位置 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数。③ 因为indexOf 只能查找到第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找。把每个字符都存储给对象, 如果对象没有该属性,就为1,如果存在了就 +1 这一步用代码实现为。5、 截取指定开始位置到结束位置的字符串,如:取得1-5的字符串。原创 2022-10-11 15:30:40 · 720 阅读 · 0 评论 -
Web APIs:PC 端网页特效--元素偏移量 offset 系列及模态框拖拽和仿京东放大镜案例
⑤ 拖拽过程: 鼠标移动过程中,获得最新的值赋值给模态框的left和top值, 这样模态框可以跟着鼠标走了。⑨ 鼠标移动,就让模态框的坐标 设置为 : 鼠标坐标 减去盒子坐标即可,注意移动事件写到按下事件里面。⑤ 如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动事件 mousemove。④ 用鼠标距离页面的坐标减去盒子在页面中的距离,得到鼠标在盒子内的坐标。3. 鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。⑦ 鼠标的坐标 减去 鼠标在盒子内的坐标, 才是模态框真正的位置。原创 2022-10-23 21:00:09 · 174 阅读 · 0 评论 -
Web APIs:PC 端网页特效--常见网页特效案例--轮播图及节流阀思想
② 此时用到animate动画函数,将js文件引入(注意,因为index.js 依赖 animate.js 所以,animate.js 要写到 index.js 上面)⑥ 此时需要知道小圆圈的索引号, 我们可以在生成小圆圈的时候,给它设置一个自定义属性,点击的时候获取这个自定 义属性即可。② 最简单的做法是再声明一个变量circle,每次点击自增1,注意,左侧按钮也需要这个变量,因此要声明全局变量。② 声明一个变量num, 点击一次,自增1, 让这个变量乘以图片宽度,就是 ul 的滚动距离。原创 2022-10-24 12:10:27 · 968 阅读 · 0 评论 -
Web APIs:H5自定义属性
2. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持。注意:如果自定义属性里面有多个-链接的单词,我们获取的时候采取驼峰命名法。1. 兼容性获取 element.getAttribute(‘data-index’);但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。自定义属性获取是通过getAttribute(‘属性’) 获取。H5规定自定义属性data-开头做为属性名并且赋值。原创 2022-10-17 19:19:49 · 397 阅读 · 0 评论 -
Web APIs:事件高级--事件对象
简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象 event,它有很多属性和方法。当我们注册事件时, event 对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)。e.target 返回的是触发事件的对象(元素) this 返回的是绑定事件的对象(元素)官方解释:event 对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。2. 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。1. 谁绑定了这个事件。原创 2022-10-22 09:31:24 · 276 阅读 · 0 评论 -
Web APIs:移动端网页特效--移动端常用开发插件(fastclick,swiper及zy.media.js)
SuperSlideTouchSlide官方网站 (superslide2.com)插件的使用总结1. 确认插件实现的功能2. 去官网查看使用说明3. 下载插件4. 打开demo实例文件,查看需要引入的相关文件,并且引入5. 复制demo实例文件中的结构html,样式css以及js代码。原创 2022-10-24 12:11:53 · 1214 阅读 · 0 评论 -
Web APIs:移动端网页特效--触屏事件
移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动 端也有自己独特的地方。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。3. 移动端拖动的原理: 手指移动中,计算出手指移动的距离。targetTouches[0]就可以得到正在触摸dom元素的第一手指相关信息比如手指的坐标等等。(2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子。4. 手指移动的距离: 手指滑动中的位置 减去手指刚开始触摸的位置。原创 2022-10-24 12:10:56 · 687 阅读 · 0 评论 -
脚本学习:1
就是goodslist放着图片,通过《》对于的元素控制goodslist.left向左右移动 通过定义一个变量iN ,其正负值来移动图片的方向。鼠标移动到topnav-mytb,pop-mytb显示,移除,隐藏。2.通过点击《 》使图片向左向右移动,当图片碰到底,停止移动。1.用脚本实现,鼠标移动到我的淘宝显示菜单,移除菜单隐藏。基本思路通过display来控制。今天所学的就俩个案例。原创 2022-10-03 00:12:05 · 416 阅读 · 0 评论 -
JavaScript学习笔记——JS基础4
41嵌套for循环<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> /* 通过程序,在页面中输出如下的图形: * ** *** ***...原创 2022-05-17 21:05:51 · 324 阅读 · 0 评论 -
JavaScript学习笔记——JS基础6
61this<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> /* 解析器在调用函数每次都会向函数内部传递一个隐含的参数 这个隐含的参数就是this,this指向的是一个对象 ............原创 2022-07-02 10:46:02 · 571 阅读 · 0 评论 -
Web APIs:移动端网页特效--移动端常见特效移动端轮播图和返回顶部及 click 延时解决方案
就是我们想要图片显示在同一行,用了浮动,但是父元素的宽度不够,因此给他设置宽度,有多少图片,它父元素的宽度就是多少,我们有5张图片,因此是500%,但是有发现是图片放大了,原来img的找他的父元素li如果没有设置宽度,它就会去找ul的宽度,因此最后是img=500%,所有要设置li的宽度,而li的宽度是将一个块区域分成5等分,每等分占20%,所有li的宽度为25%,最后还要清除浮动,如果没有清除,后面的元素也会跟着浮动。CSS3里面的样式,之前考虑到了兼容性问题,所有没有使用这个,而移动端没有这个问题。原创 2022-10-24 12:11:13 · 765 阅读 · 1 评论 -
JavaScript学习笔记:定时器的应用2
就是将上次写的代码,向右移动。因为代码都是相似的,所以使用函数的方式更加简便。原创 2022-10-06 01:01:14 · 146 阅读 · 0 评论 -
Web APIs:事件基础
(2)事件类型 如何触发 什么事件 比如鼠标点击(click),经过 还是键盘按下。起始位置到终止位置的全部内容,包括 html 标签,同时保留空格和换行。根据不同时间,页面显示不同图片,同时显示不同的问候语。1.事件是有三部分组成 事件源 事件类型 事件处理程序。如果上午时间打开页面,显示上午好,显示上午的图片。如果下午时间打开页面,显示下午好,显示下午的图片。如果晚上时间打开页面,显示晚上好,显示晚上的图片。(1)事件源 事件被触发的对象 谁 按钮。表单中的一些属性要特定的属性修改。原创 2022-10-11 15:31:40 · 519 阅读 · 0 评论 -
Web APIs:样式属性操作-淘宝关闭二维码案例和精灵图案例
我们发现第一张到第二张的距离为44px 第二张到第三张为88px,发现规律,就是我们的下标*44就是图片的距离。② 核心思路: 利用for循环 修改精灵图片的 背景位置 background-position。④ 让循环里面的 i 索引号 * 44 就是每个图。当鼠标点击二维码关闭按钮的时候,则关闭整个二维码。注意的一点 js中的样式采用驼峰命名法。③ 剩下的就是考验你的数学功底了。① 首先精灵图图片排列有规律的。原创 2022-10-11 19:21:24 · 224 阅读 · 0 评论 -
Web APIs:节点操作(父、子)及新浪下拉菜单案例
网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。它只返回子元素节点,其余节点不返回 (这个是我们重点掌握的)。主要的结构是整个是一个ul,ul里面套4个li,而一个li又分上下俩部分,上部分就是一个a标签,下部分就是ul,而下部分的ul又分li。一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个 基本属性。parentNode 属性可返回某节点的父节点,注意是最近的一个父节点。原创 2022-10-18 13:04:23 · 448 阅读 · 0 评论 -
Web APIs:BOM浏览器对象模型--BOM概述
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏 览器标准的一部分。在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如 alert()、2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM 学习的是浏览器窗口交互的一些对象。window 对象是浏览器的顶级对象。原创 2022-10-23 13:01:43 · 98 阅读 · 0 评论 -
JavaScript学习笔记:定时器的应用3
【代码】JavaScript学习笔记:定时器的应用3。原创 2022-10-07 00:21:09 · 86 阅读 · 0 评论 -
Web APIs:自定义属性应用场景--tab栏切换布局
首先是一个大的div,大的div里面有上下俩个模块 上面的一个div里面套5个li标签 下面的是有五个div使用的时候将要用的div显示出来。⑥ 当我们点击tab_list 里面的某个小li,让tab_con 里面对应序号的 内容显示,其余隐藏(排他 思想)⑤ 核心思路: 给上面的tab_list 里面的所有小li 添加自定义属性,属性值从0开始编号。② 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式。④ 规律:下面的模块显示内容和上面的选项卡一一对应,相匹配。原创 2022-10-17 19:19:38 · 189 阅读 · 0 评论 -
Web APIs:事件高级--键盘事件,京东按键输入及模拟京东快递单查询案例
这里用的是keyup,因为如果使用keydown或keypress会把s也给输入到文本框中,同时要注意的是给文档设置事件。④ 注意: keydown 和 keypress 在文本框里面的特点: 他们两个事件触发的时候,文字还没有落入文本框中。⑥ 当我们失去焦点,就隐藏这个con盒子 ⑦ 当我们获得焦点,并且文本框内容不为空,就显示这个con盒子。在我们实际开发中,我们更多的使用keydown和keyup, 它能识别所有的键(包括功能键)要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容。原创 2022-10-22 09:32:29 · 349 阅读 · 0 评论 -
JavaScript学习笔记——滚动的事件
需求:鼠标滚轮向上,box变长,反之变短。原创 2022-10-04 00:10:48 · 207 阅读 · 0 评论 -
JavaScript学习笔记——键盘事件
需求:介绍减少按下,松开事件。原创 2022-10-04 00:11:03 · 164 阅读 · 0 评论 -
JavaScript学习笔记:完成轮播图
体验不好,到最后一张会往后走。自动切换和按钮点击优先问题。原创 2022-10-07 00:22:57 · 167 阅读 · 0 评论 -
JavaScript学习笔记——拖拽2
解决鼠标当前位置拖拽移动不变。原创 2022-10-04 00:09:48 · 78 阅读 · 0 评论 -
JavaScript学习笔记:完成轮播图界面
如果有多张图片,写死了,太麻烦了,因此用JS写。图片下的导航栏也是用js实现。原创 2022-10-07 00:21:50 · 132 阅读 · 0 评论