javascript知识点
# javascript知识点
熟悉的新风景
我还是喜欢呢个高中时候的自己
展开
-
js修改地址栏参数
js修改地址栏参数转载 2023-03-06 13:44:38 · 1074 阅读 · 0 评论 -
markdown将文档目录转换成json树形结构
docsify将文档目录转换成json树形结构原创 2022-12-07 09:45:27 · 1393 阅读 · 0 评论 -
使用Babel将ES6代码转为ES5代码,从而在现有环境执行。
es5 、 es6原创 2022-10-31 20:12:58 · 2159 阅读 · 0 评论 -
js使用elasticsearch.jquery.js对elasticsearch进行增删改查
js使用elasticsearch.jquery.js对elasticsearch进行增删改查原创 2022-09-04 02:21:02 · 282 阅读 · 0 评论 -
vscode常用正则表达式搜索(跨行搜索包含的特定字符串)
注意事项:在VSCode中使用时,要先把通配符开关打开(开关是查找输入框右边的".*"符号)转义字符匹配内容\ttab\r回车符号\r\n换行符号\n\特殊符号转义,如"*" ,转义后匹配的是字符"*", “(” 匹配的是括号"("[字符序列]匹配[ ]中的任意字符,如[ae],字符a和字符e均匹配[^字符序列]匹配不在[ ]中的任意字符,如[^ae]除了a和e,其他字符都匹配[字符1-字符2]匹配在[ ]之间的任意字符,如[a-x],原创 2021-02-22 10:58:35 · 32373 阅读 · 0 评论 -
js常用处理请求到的数据的方法(即map,filter,find,findIndex,some,every一些常用方法的使用)
话不多说,平时我们最长用道的就是同ajax或者其他方式请求数据,所以对数据进行处理就很重要例如想下面的数据,我们只是想要轮播图链接组成的数组{ "message": [ { "image_src": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3857696996,2875137765&fm=26&gp=0.jpg", "open_type": "navigate", "goods_id": 129, "navig原创 2020-11-27 15:44:46 · 405 阅读 · 0 评论 -
js获取地址栏的各种信息(location)
function args(getParam='id') { //创建一个存放键值对的数组 var args = []; //去除?号 var qs = location.search.length > 0 ? location.search.substring(1) : ''; //按&字符串拆分数组 var items = qs.split('&'); var item = null, name = null,value..原创 2020-06-05 00:33:27 · 1214 阅读 · 0 评论 -
开发中一些常用的代码片段(持续更新,要是各位大牛看见了麻烦也给在评论区添一下常用的代码)
代码片段php 使用js跳转//返回上一界面并刷新echo "<script type='text/javascript'>window.location.href=document.referrer</script>";//掏出警告框并返回上一页面(不刷新跳转的页面)echo "<script type='text/javascript'>alert('账号或密码不正确');window.history.back();</script>";e原创 2020-05-31 00:28:56 · 484 阅读 · 0 评论 -
layui实现后台表格数据显示--学生管理系统(layui搜索,删除,批量删除,增加,修改,php接口后台)
需要源码的话评论一下谢谢## data,html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"原创 2020-05-17 22:24:18 · 2790 阅读 · 17 评论 -
es6之模块化(module)--绝对能看懂
ES6的模块化的基本规则或特点:1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取。 一个模块就是一个单例,或者说就是一个对象;2:每一个模块内声明的变量都是局部变量, 不会污染全局作用域;3:模块内部的变量或者函数可以通过export导出;4:一个模块可以导入别的模块实例index.html<!DOCTYPE html>...原创 2020-04-22 00:59:34 · 378 阅读 · 0 评论 -
通过ajax实现简单的数据交互(模板引擎)
最后的结果是这样的,样式什么的自己调节,本节主要内容是ajax。思路: 1,对ajax进行封装 2,调用ajax获取数据 3,在ajax获取成功的函数中进行操作 3.1,模板的书写 将需要改变的数据全部使用{# demo #}这样的格式书写,以便替换里面的数据 3.2,将模板里的数据替换成.json里的数据 3.2.1 创建一个模板格式化函数 使...原创 2020-01-02 13:12:14 · 590 阅读 · 0 评论 -
js之prototype、__proto__与constructor(图解)以及原型链
本节知识点1,前言这里说明一点,_ proto _ 属性的两边是各由两个下划线构成(这里为了方便大家看清,在两下划线之间加入了一个空格:’_ _ proto_ _’1、所有的引用类型(数组、函数、对象)可以自由扩展属性(除null以外)。2、所有的引用类型都有一个 ’_ _ proto_ _'属性(也叫隐式原型,它是一个普通的对象)。3、所有的函数都有一个’prototype’属性(这...原创 2019-12-07 17:06:52 · 257 阅读 · 0 评论 -
javascript之new的实质
new的实质1,创建对象,并给予属性名为__proto__,值为构造函数原型(prototype)的属性。2,将构造函数的this指向为刚创建的对象(call)。3,执行构造函数的语句。4,将创建的对象进行返回。但是这里需要看构造函数有没有返回值,如果构造函数的返回值为基本数据类型string,boolean,number,null,undefined,那么就返回新对象,如果构造函数的...原创 2019-12-06 17:05:44 · 247 阅读 · 0 评论 -
js之面向对象编程,封装 继承 多态(详细篇)
什么是面向对象编程面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。面向对象和面向过程的区别面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了。面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问...原创 2019-12-06 16:50:59 · 493 阅读 · 1 评论 -
js之类 面向对象的书写方式(详细篇)
下半年就要实习了,时不我待,开始为面试做准备,收罗一些需要掌握的知识,现在都忘的差不多了 什么是类 类的书写方法 工厂模式java中类的概念:把具有共同性质的事物归结为一类,得出一个抽象的概念——类。 在面向对象的编程语言中,类是一个独立的程序单位,是具有相同属性和方法的一组对象的集合。类的概念使我们能对属于该类的全部对象进行统一的描述。js 中的类:js是一种弱类型语...原创 2019-12-05 19:53:46 · 658 阅读 · 0 评论 -
php基础之字符串和数组的相互转换及其常用属性(与js相对应的属性 比较)
我将来想从事的行业的是前端行业,所以会与js进行比较,以便更好的区别字符串 =》 数组 //split()有两个参数,第一个为字符串或正则,第二个为返回的数组的最大长度<script> var str = "测试1,测试2 测试3"; var arr1 = str.split(','); var arr2 = str.split(' '); ...原创 2019-12-02 22:48:55 · 157 阅读 · 0 评论 -
动画效果之 Canvas学习-globalCompositeOperation详解
本节介绍一下globalCompositeOperation,以的形式说明每个属性。globalCompositeOperation与cilp()的区别:globalCompositeOperation用于控制源图像在目标图像上的显示方式。源图像: 指你准备绘制到画布上的图像目标图像:在画布上已经绘制的图像clip() 方法从原始画布中剪切任意形状和尺寸。提示:一旦剪切了某个区域...原创 2019-10-17 14:51:56 · 3212 阅读 · 0 评论 -
javascript基础之拖拽(2)(详细篇)---FileReader对象,blod对象
接上一篇文章:目标导航:4,FileReader对象(方法 事件) 4,1使用方法5,bold对象6,文件拖拽 =》从浏览器外获取数据 6.1,拖拽读取文件信息–使用dataTransfer 6.2拖拽显示图片及信息–使用blob对象4,File...原创 2019-09-07 19:49:49 · 431 阅读 · 0 评论 -
javascript 基础之手机端相关事件-touch(详细篇)(1)
计划打乱了,又得重新制定计划,最近学习手机端想关的事件,话不多说,直接开整最近才知道PC端和移动端各有各的事件,不能混用,所以整理了关于移动端的基础事件,本篇分为两节,介绍两个事件,分别为触摸(touch)事件和手势(gesture)事件 ,本节为第一小节本节只介绍常用到的,不常用的暂时忽略,在模拟器下不支持用on的方式来给元素加touch事件,推荐用addEventListener方式to...原创 2019-09-20 16:15:42 · 335 阅读 · 0 评论 -
javascript 轮播图(缓存效果)详细篇
对现在的我来说,这样的操作还是有点麻烦,综合使用的话还是有很多毛病,话不多说,做一个上下平移的轮播图(纯js),因为不会,所以可能比较冗余,以便复习到更多知识点过程1、生出数字按钮,就是呢个代表着图片的小圆点,就暂且当图片不知道几张 1.1通过获取图片...原创 2019-08-06 20:20:53 · 669 阅读 · 0 评论 -
javascript 使用drop元素实现拖动(ondragstart、ondrag、 ondragend、ondragenter,ondragover、ondragleave、ondrop )
ondrag 事件在元素或者选取的文本被拖动时触发。拖放是 HTML5 中非常常见的功能。注意: 为了让元素可拖动,需要使用 HTML5 draggable 属性。提示: 链接和图片默认是可拖动的,不需要 draggable 属性。一、ondrag属性在拖动目标上触发事件 (源元素): ondr...原创 2019-08-04 13:49:17 · 9920 阅读 · 2 评论 -
javascript基础之拖拽(1)(详细篇)--dataTransfer对象
最近学了的一些关于拖拽的一些案例,原来的认识太过浅薄,所以以多个案例说明一下相关知识点导航1,拖放事件 目标对象 过程对象 目标对象2,dataTransfer对象 ...原创 2019-09-06 20:40:21 · 990 阅读 · 0 评论 -
javscript 简单拖拽(drag)拖放事件、dataTransfer详解,垃圾桶效果
例子<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML5拖放API之回收站效果</title> <style type="text/css"> #container { border: 1px solid...原创 2019-08-10 23:37:57 · 1483 阅读 · 0 评论 -
ajax 详解(GET,POST方式传输以其封装)
1,什么是ajax2,为什么ajax这么火 特点3,Ajax的工作原理4,Ajax的工作流程5,请求服务器调用方式GET,POST6,同源策略,数据传输方式及接口设计原则7,ajax操作.txt 格式(详细)8,ajax操作php(GET方式和POST方式)8,ajax操作php封装1,什么是ajax &nb...原创 2019-09-02 08:12:05 · 561 阅读 · 0 评论 -
javascript 字符串与数组之间的相互转换(join、split)与splice介绍
一、数组转字符串需要将数组元素用某个字符连接成字符串,示例代码如下: var a, b; a = new Array(0,1,2,3,4); b = a.join("-"); //打印出 "0-1-2-3-4"二、字符串转数组实现方法为将字符串按某个字符切割成若干个字符串,并以数组形式返回,示例代码如下: var s = "abc,abcd,aaa"; ss = s.spli...原创 2019-07-23 23:06:07 · 430 阅读 · 0 评论 -
javascript及css实现居中效果
CSS实现绝对定位元素的居中效果 position: absolute; top: 50%; left: 50%; width: 400px; height: 200px; border: 4px solid #f90; margin: -102px 0 0 -202px; //宽高的一半javascript实现元素的居中效果 居中的元素的top =(网页高 ...原创 2019-07-26 20:28:21 · 602 阅读 · 0 评论 -
javascript 变量及作用域(栈、堆、块级作用域、执行环境)详细篇
JavaScript 的变量与其他语言的变量有很大区别。JavaScript 变量是松散型的(不强制类型)本质。变量的值及其数据类型可以在脚本的生命周期内改变。强制类型 如数字型,一旦声明不能改变1. 变量及作用域1) 基本类型和引用类型的值ECMAScript 变量可能包含两种不同的数据类型的值:基本类型值和引用类型值 。基本类型值 指的是那些保存在栈内存中 的简单数据段,即这种值...原创 2019-07-25 20:54:19 · 488 阅读 · 0 评论 -
javascript 面向对象的理解、数据属性的特征,基本数据类型、三大引用类型,方法
1.JavaScript面向对象的理解JavaScript面向对象和其他基于类的面向对象语言相比他是基于原型的,面向对象其实就是一种接近人类思维的一种概念,举个例子,先有一个苹果(对象),我们知道这个苹果能吃,之后才知道所有苹果都能吃(类)。类对象的定义类是现实世界或思维世界中的实体在计算机中的反映,它将数据以及这些数据上的操作封装在一起。对象是具有类类型的变量。类和对象是面向对象编程技术...原创 2019-07-25 21:16:42 · 250 阅读 · 0 评论 -
JavaScript 事件-事件流,事件冒泡,事件捕获,事件绑定与解绑,事件委托、阻止冒泡、阻止默认行为详细篇
一、事件流事件流描述的是从页面中接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式:冒泡和捕获当一个DOM事件被触发时,它不仅仅只是单纯地在本身对象上触发一次,而是会经历三个不同的阶段:捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象...原创 2019-07-31 00:22:05 · 522 阅读 · 0 评论 -
javascript ()、[]、{}的区别
一、{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数体在js中,[]表示的是数组对象,{}表示的是对象;var arr = {} ; arr[“属性名”]=属性值; var demo = {"name": "weicunbin", "age": "20"}; var demo={ "name":function(){ retu...原创 2019-07-30 15:24:39 · 373 阅读 · 0 评论 -
javascrit 数组方法总结(数组对象、栈,队列、重排序、操作数组方法、位置方法、归并方法、迭代方法)
一.数组对象 作用:使用单独的变量名来存储一系列的值。JavaScript中创建数组有两种方式.(一)使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(2); // 创建一个数组并指定长度为2,注意不是上限,是长度(长度不是固定的) arr2["name0"]="xdp";//ar...原创 2019-07-29 21:15:42 · 214 阅读 · 0 评论 -
javascript 遍历数组的常用方法(迭代、for循环 、for… in、for…of、foreach、map、filter、every、some,findindex)
1. for循环var arr = ["first",8]; for(var i = 0; i < arr.length;i++){ console.log(arr[i]); } first82.for… invar arr = ["first","second",'third' ,"fourth",3,5,8];for(var i in ar...原创 2019-07-23 21:16:04 · 642 阅读 · 0 评论 -
JavaScript基础知识指南-思维导图
原创 2019-07-23 16:56:35 · 77 阅读 · 0 评论 -
javascript 事件练习:封装兼容性添加、删除事件的函数、addEventListener用法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>事件练习:封装兼容性添加、删除事件的函数</title> <script type="text/javascript"> //封装一个函数 window.onload ...原创 2019-07-30 22:47:24 · 248 阅读 · 0 评论 -
javascript BOM基础
BOM 也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准。所以,BOM 本身是没有标准的或者还没有哪个组织去标准它。1、 window 对象BOM 的核心对象是 window,它表示浏览器的一个实例。window 对象处于 JavaScript结构的最顶层,对于每个打开的窗口,系统都会自动...原创 2019-08-26 14:16:18 · 154 阅读 · 0 评论 -
javascript 本地存储(cookies、sessionStorage和localStorage解释及区别)
JavaScript 存储对象Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加、删除、修改、查询操作。localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除...原创 2019-08-24 08:43:42 · 283 阅读 · 0 评论 -
javscript DOM基础知识(常用篇)
学习要点:1.DOM 介绍2.查找元素3.DOM 节点4.节点操作 DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口)。DOM描绘了一个层次化的节点树,运行开发人员添加、移除和修改页面的某一部分。DOM 脱胎...原创 2019-08-10 18:25:42 · 344 阅读 · 0 评论 -
javascript Date属性(月份英语)
JavaScript下,new Date([params]),参数传递有以下五种方式:直接输出new Date Fri Aug 09 2019 16:08:39 GMT+0800 (中国标准时间)1、new Date(“month dd,yyyy hh:mm:ss”); new Date("Jun 2,2017 12:00:00"); //Fri Jun 02 2017 12:00:...原创 2019-08-09 16:13:18 · 1644 阅读 · 0 评论 -
javascript 图解 event对象offsetX, clientX, pageX, screenX, layerX, x区别
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性.所以必然是“鼠标事件”发生时候才会有意义;一、不同浏览器对这些属性的支持:二、作用及其测试clientX:当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等),鼠标相对于浏览器(这里说的是浏览器的有效区域)x轴的位置...原创 2019-08-01 18:11:08 · 716 阅读 · 0 评论 -
javascript offsetLeft,Left,clientLeft 各种浏览器位置相关属性
DOM已经提供给我们计算后的样式,但是还觉得不方便,所以DOM又提供给我们一些API:ele.offsetLeftele.offsetTopele.offsetWidthele.offsetHeightele.clientWidthele.clientHeight将上图进行拆分1、offsetWidth(offsetHeight): 为元素的width+元素的padding+边框...原创 2019-08-01 14:04:10 · 841 阅读 · 0 评论