JavaScript
关注
分享
扫一扫
文章平均质量分 74
JavaScript
无知的小菜鸡
404
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JavaScript实现页面元素拖放操作
定义拖放元素为绝对定位，以及设计事件的响应过程清楚几个左边概念：按下鼠标时的指针坐标，移动中当前鼠标的指针坐标，松开鼠标时的指针坐标，拖放元素的原始坐标，拖动中的元素坐标算法设计：按下鼠标时，获取被拖放元素和鼠标指针的位置，在移动中实现计算鼠标偏移的距离，并利用该偏移距离加上被拖放元素的原坐标位置，获得拖放元素的实时坐标<div id="box"></div><script type="text/javascript"> //初始化拖放对象 var box.原创 2020-05-12 16:47:23 · 284 阅读 · 0 评论
-
JavaScript API： IntersectionObserver
JavaScript API： IntersectionObserver原创 2023-12-12 14:45:52 · 1301 阅读 · 0 评论 -
前端设计模式：工厂方法模式、单例模式、订阅模式、中介者模式
前端设计模式：工厂方法模式、单例模式、订阅模式、中介者模式原创 2023-06-29 18:10:49 · 2015 阅读 · 0 评论 -
如何实现JS主动触发事件
如何实现JS主动触发事件原创 2022-10-19 23:14:55 · 4149 阅读 · 0 评论 -
实现一个简单的 ctrl+ f 搜索
实现一个简单的 ctrl+ f 搜索原创 2022-09-04 21:06:54 · 3905 阅读 · 7 评论 -
借助CSS来管理js事件
借助CSS来管理js事件原创 2022-08-20 14:32:34 · 385 阅读 · 0 评论 -
Web API：ResizeObserver——监听元素大小的变化
Web API：ResizeObserver——监听元素大小的变化原创 2022-08-20 13:04:07 · 9733 阅读 · 0 评论 -
JavaScript动画库：Anime.js
JavaScript动画库：Anime.js原创 2022-08-07 11:42:08 · 8650 阅读 · 0 评论 -
Web API：Animation
Web API：Animation原创 2022-06-14 21:12:18 · 608 阅读 · 0 评论 -
前端复制、剪切、禁止复制等
前端复制、剪切、禁止复制等原创 2022-05-28 23:31:48 · 3231 阅读 · 0 评论 -
js回调函数
前言最近在修改之前项目的bug，发现有关同事很喜欢写回调函数。就简单看了一下，还是挺简单的实例<el-button type="primary" @click="printName">输出名字</el-button>printName() { this.getNameById(1,name => { if(name) { console.log('id为1的name是：',name); }else{原创 2022-03-05 12:57:32 · 287 阅读 · 0 评论 -
ES6学习记录
推荐：ES6 入门教程let 和 constletlet用于声明变量，声明的变量是局部的只在对应的代码块（代码块就是一对大括号内的代码）里有效，在代码块外使用会报错。var声明的变量全局有效let不存在变量提升，定义了之后才可以使用，否则报错；var存在变量提升，可以在声明前使用，默认undefined在同一个作用域（代码块）里不允许重复声明同一个变量constconst用于定义常量，常量定义后不允许修改，修改会报错。解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋原创 2021-10-19 09:57:20 · 270 阅读 · 0 评论 -
正则表达式
语法/正则表达式主体/修饰符(可选)正则表达式修饰符i 忽略大小写g 全局匹配m 多行匹配正则表达式模式方括号用于查找某个范围内的字符[abc] 或 [a-z] 查找方括号内的任何字符[012] 或 [0-9] 查找方括号内的任何数字(x|y) 查找任何以 | 分隔的选项元字符是拥有特殊含义的字符. 查找单个字符，除了换行和行结束符\w 查找单词字符。(查找字母、数字、下划线，注意不包括“-”中间横线)\W 查找非单词字符\d 查找数字\D 查找原创 2021-08-27 17:30:19 · 373 阅读 · 0 评论 -
异步编程：异步、promise
异步菜鸟异步编程概念异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。常见的两种异步：回调函数、异步Ajax回调函数回调函数最常见的是setTi原创 2020-10-31 22:02:31 · 318 阅读 · 0 评论 -
本地数据存储（2）：localStorage、sessionStorage、设计网页皮肤、设计计数器
HTML5的Web Storage提供了两种在客户端存储数据的方法：localStorage和sessionStorage。它们可以以键值对的形式在本地保存数据localStorage： 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期sessionStorage： 保存会话期内数据，当用户关闭浏览器后，则这些数据会被删除优点与缺点：存储空间更大；存储内容不会发送到服务器；提供一套丰富的接口，使得数据操作更为简便；存储在本地的数据未加密而且永远不会过期，极易造成隐私泄漏基本操作lo原创 2020-05-25 12:39:41 · 401 阅读 · 0 评论 -
本地数据存储（1）：使用cookie、cookie案例——打字游戏
描述cookie是保存客户端系统中的一个文件文本，每个cookie文本文件都与指定Web服务器的域中的固定目录相关联。当浏览器向服务器请求该目录下的页面时，关联的cookie信息就会随着HTTP请求以头部信息的方式发送给服务器一个良好的JavaScript应用项目应该选择使用cookie存储下面几类信息：a、复杂的JavaScript对象实例b、复杂的DOM节点的状态c、表单中各种域的初始状态，如文本框、下拉框的初始值d、用户经常性的操作结果写入cookie使用document.cookie原创 2020-05-24 22:19:01 · 452 阅读 · 0 评论 -
使用Ajax实现异步通信（3）：使用Ajax
Ajax是利用JavaScript脚本与XML数据实现客户端与服务器进行异步通信的一种方法定义XMLHttpRequest对象XMLHttpRequest对象提供了与服务器通信的协议，浏览器可以通过XMLHttpRequest对象向服务器发送请求，并使用JavaScript处理响应信息，然后在DOM中显示数据XMLHttpRequest对象属性属性说明onreadystatechange指定当readyState属性改变时的事件处理函数readyState返回当前响应的原创 2020-05-23 16:33:01 · 516 阅读 · 0 评论 -
使用Ajax实习异步通信（2）：使用JSON数据
JSON结构JSON结构可以由下面3种类型的数据组成：值：可以是字符串、数值、布尔值、对象、数组和null，不能是undefined对象：一组无序键值对数组：一组有序的值列表注：1、JSON可以由无数个对象、数组嵌套组合而成，构成一个复杂的数据结构2、JSON仅是一种表示结构化数据的格式，不支持变量、函数或类型实例，与JavaScript数据语法相同，但仅是JavaScript的一个子集示例1[ { "name": "Tom", "age": 15 }, { "na原创 2020-05-22 21:47:22 · 282 阅读 · 0 评论 -
使用Ajax实现异步通信（1）：使用XML数据
新建XML文档XML是可宽展的标识语言，用户根据需要可以自定义标记，实现数据格式的自由定义于传输XML文档是由各种标签组成，文档内容由一个根节点包含。XML标签能够自己命名，标记数据的语义，标签不承担显示效果XML文档一般包含3部分：XML声明（必须）、处理指令（可选）、XML结构数据。XML声明中必须指定version属性值，指明文档所采用的XML版本号，同时使用encoding定义文档字符集示例<?xml version="1.0" encoding="utf-8"?><原创 2020-05-22 09:10:28 · 286 阅读 · 0 评论 -
事件处理（3）：使用页面事件（页面初始化、窗口重置、页面滚动、错误处理）、使用UI事件（焦点处理、选择文本、字段值变换检测、剪切板数据）
使用页面事件页面初始化load事件类型在页面完全加载完毕的时候触发，在加载之前任何DOM操作都不会发生。为window对象绑定load事件类型的方法有两种。（1）直接为window对象注册页面初始化事件处理函数window.onload = function() { alert("页面加载完毕")}（2）在页面body标签中定义onload事件处理属性<body onload="f()"> <script type="text/javascript">原创 2020-05-16 09:23:46 · 1024 阅读 · 0 评论 -
事件处理（2）—— 鼠标事件、键盘事件
鼠标事件鼠标点击鼠标点击事件包括4个：click(单击)、dblclick（双击）、mousedown（按下）、mouseup（松开）。其中click事件类型比较常用，而mousedown和mouseup事件类型多用于鼠标拖放、拉伸操作中。当这些事件处理函数的返回值为false时，则会禁止绑定对象的默认行为。示例 当定义超链接指向自身时（多在设计过程中href属性值暂时使用#或？表示），可以取消超链接被单击时默认行为，即刷新页面<a href="#">刷新</a><s原创 2020-05-13 17:08:26 · 1345 阅读 · 0 评论 -
事件处理（1）—— 事件基础：事件流、绑定事件、注册与销毁事件、event对象、事件托管
事件基础事件流1、冒泡型（从内往外依次触发）从最特定的目标向最不特定的目标（document对象）依次触发事件，也就是事件从下向上进行响应，这个过程被称为冒泡示例 文档包含5层div元素，为它们定义相同的click事件，同时为每层div标签定义不同的类名。当单击div标签时，设计当前对象边框显示为红色虚线，同时抓取当前标签的类名，以此识别每个标签的响应顺序<!DOCTYPE html><html> <head> <meta charset="ut原创 2020-05-10 21:17:25 · 657 阅读 · 0 评论 -
DOM操作
使用节点节点类型DOM规定：整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是一个文本节点，元素的属性是一个属性节点，注释属于注释节点等。每个节点都有一个nodeType属性，用于表面节点的类型var $h=$('h1')console.log($h[0].nodeType) //1常见类型Element表示元素，nodeType返回值为1；Attr表示属性，no...原创 2020-05-06 21:39:37 · 240 阅读 · 0 评论 -
JavaScript使用对象（2）：使用方法、使用原型
使用方法在JavaScript中，Object对象默认定义了多个原型方法，由于继承关系所有对象都将拥有这些方法toString()toSting方法能够返回一个对象的字符串表示，它返回的字符串比较灵活示例1function F(x,y){ this.x=x, this.y=y}var f=new F(1,2)console.log(f.toString()) //[obj...原创 2020-04-26 20:49:02 · 242 阅读 · 0 评论 -
JavaScript使用对象（1）：创建对象、操作属性
创建对象使用构造函数创建对象var objectName=new functionName(args)objectName表示构造的示例对象functionName表示一个构造函数，构造函数与普通函数没有本质区别。一般情况下，构造函数不需要返回值，构造函数体内使用this指代objectName示例对象示例 使用构造函数创建对象var o = new Object(); //创建一个...原创 2020-04-21 20:40:28 · 368 阅读 · 0 评论 -
JavaScript函数（2）：使用函数对象、使用闭包函数
使用函数对象使用this原创 2020-04-05 20:41:18 · 190 阅读 · 0 评论 -
JavaScript函数（1）：定义函数、使用参数
定义函数1）声明函数function funName([args]){} //常规函数function (args){} //匿名函数匿名函数（函数直接量）可以作为一个函数表达式。当把函数结构作为一个值赋给变量后，变量就可以作为函数被调用，此时变量就指向那个匿名函数示例1var f = function(a, b) { return a + b;}...原创 2020-03-23 20:36:59 · 534 阅读 · 0 评论 -
JavaScript数组（2）：使用数组对象
检索数组检索数组一般可使用for/in循环实现，也可以使用for循环实现var a = [1, 2, true, "a", "b"] /* for in 循环*/ for (let i in a) { if (typeof a[i] == 'string') { console.log("for in:", a[i]) } } /* for 循环 */ let l = ...原创 2020-03-17 20:28:49 · 226 阅读 · 0 评论 -
JavaScript数组（1）：定义数组、使用数组
定义数组构建数组示例1 当调用Array构造函数时，没有传递参数，可以创建一个空数组var a=new Array()示例2 当调用Array构造函数时，明确指定数组元素的值，可以创建一个实数组var a=new Array(1,2,"string",[1,2],{x:1,y:2})在这种形式中，构造函数带有一个参数列表，每个参数指定一个元素的值，值的类型是任意的示例3 给Arr...原创 2020-03-14 17:14:13 · 1566 阅读 · 0 评论 -
JavaScript： sort函数
sort函数原创 2020-03-17 20:26:50 · 1032 阅读 · 0 评论 -
JavaScript迭代：forEach、every、some、map、filter、find、findIndex、for in、includes
forEach：为数组中的每个元素调用定义的回调函数evary：检查定义的回调函数是否为数组中的所有元素返回truesome：检查定义的回调函数是否为数组的任何元素返回truemap：对数组的每个元素调用定义的回调函数，并返回包含结果的数组filter：对数组的每个元素调用定义的回调函数，并返回回调函数为其返回true的值的数组...原创 2020-03-17 13:42:19 · 390 阅读 · 0 评论 -
使用navigator对象
navigator对象包含了浏览器的基本信息，如名称、版本和系统等。通过window.navigator可以引用该对象，并利用他的属性来读取客户端的基本信息检测浏览器方法一：特征检测法根据浏览器是否支持特定功能来决定操作的方式，这是一种非精确判断法，但却是最安全的检测法。如果不关心浏览器的身份，仅仅在意浏览器的执行能力，可以使用特征检测法if(document.getElementsByN...原创 2019-12-11 20:04:13 · 529 阅读 · 0 评论 -
控制窗口的位置与大小
控制窗口位置使用window对象的screenLeft 和screenTop属性可以读取或设置窗口的位置，即相对于屏幕左边和上边的位置，但是FireFox支持使用window对象的screenX 和screenY属性进行相同操作跨浏览器获取窗口左边和上边的位置var leftPos = (typeof window.screenLeft == 'number') ? window.scree...原创 2019-12-11 19:31:07 · 607 阅读 · 0 评论 -
斐波那契数列
斐波那契数列： var start = new Date().getTime(); var fibonacci = function(n) { return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2); } document.write(fibonacci(30)); var end = new Date().getT...原创 2019-12-03 21:03:48 · 188 阅读 · 0 评论 -
创建Ajax对象
备注：来源于JavaScript从入门到精通使用if语句直接实现定义XMLHttpRequest实例对象 <script type="text/javascript"> function createXHR() { if(typeof XMLHttpRequest != 'undefined') { return new XMLHttpRequest();...原创 2019-12-03 20:27:43 · 537 阅读 · 0 评论