javascript
客户端脚本语言
是小王啊i
沉淀
展开
-
cookie函数封装总结
cookie函数封装设置cookie读取cookie删除cookie创建并存储cookie获取cookie测试cookie是否被客户端禁用了:设置cookiefunction setCookie (name,value) { var days = 30;//30天过期 var exp = new Date(); exp.setTime(exp.getTime() +days*24*60*60*1000); document.cookie = name +"="+ escape(value原创 2020-10-04 18:30:34 · 184 阅读 · 0 评论 -
localStorage和sessionStorage讲解
本地存储html5本地存储localStoragelocalStorage API总结sessionStoragecookie和stotage的区别html5本地存储1.localStorage2.sessionStoragelocalStorage1.localStorage为永久性保存数据,不会随着浏览器的关闭而消失,可以在同域名跨页访问。2.按域名进行存储,不会和其他域名冲突3.键值对存储:key/valuelocalStorage API总结setItem(key , valu原创 2020-10-04 18:30:12 · 391 阅读 · 0 评论 -
cookie的用法总结(客户端存储cookie)
cookie总结什么是cookie?cookie的优缺点cookie的设置cookie读取cookie删除什么是cookie?cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。cookie是一些数据, 存储于你电脑上的文本文件中cookie是浏览器提供的一种机制可以由JavaScript对其进行控制(设置、读取、删除)cookie的特性cookie可以实现跨页面全局变量 cookie可以跨越同域名下的多个网页,但不能跨越多个原创 2020-10-04 18:29:55 · 1199 阅读 · 0 评论 -
纯原生js实现百度搜索框案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; } #txt { width: 350px; } /* #pop {原创 2020-10-05 08:03:12 · 741 阅读 · 0 评论 -
js实现放大镜效果
放大镜效果htmlcssjs放大镜完整代码html <div id="big"> <img src="./imgs/2.jpg" width="100%" alt=""> <div id="small"></div> </div> <div id="list"> <ul> <li><img src="./imgs/2.jpg" alt=""></li> &l原创 2020-10-02 11:08:17 · 1080 阅读 · 2 评论 -
JavaScript高级函数预解析(练习题解析)
为了锻炼函数预解析的思路,下面大家一起看看练习题<script type="text/javascript"> var a = b = 10; (function(){ var a=b=20; })(); console.log(b); //20 // var x = 1; // function fn(n){ // n = n+1 // }; // x = fn(x);原创 2020-10-02 10:55:17 · 700 阅读 · 0 评论 -
JavaScript事件对象
事件对象什么是event对象?event对象-事件添加方法Event相关方法与属性什么是event对象?Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!event对象-事件添加方法监听方法1、有两个方法用来添加和移除事件处理程序: addEventListener()和removeEventListener()。 它们都有三个参数:第一个参数是事件名(如click);第二个参数是事件原创 2020-10-02 10:42:25 · 127 阅读 · 0 评论 -
JavaScript事件讲解
事件讲解什么是JavaScript事件?事件流事件冒泡事件捕获事件冒泡和事件捕获关系图DOM事件流事件类型什么是JavaScript事件?1.事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了。2.事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是Web浏览器中发生的事情,比如说某个Web页面加载完成,或者是用户滚动窗口或改变窗口大小。3.简单的说:事件是文原创 2020-10-02 10:34:40 · 259 阅读 · 0 评论 -
js之闭包和作用域链及垃圾回收讲解
闭包:概念:闭包就是能够读取其他函数内部变量的函数。(有权访问另一个函数作用域中的变量的函数。)(就是拿到本不该属于他的东西)作用:闭包可以用在许多地方。它的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。注意:由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。作用域链概念:在一个函数中嵌套多个函数,并且各自定义的相同的变量名,当函数访问变量时,就形成了作用域链。查找原创 2020-10-01 21:54:34 · 989 阅读 · 0 评论 -
js之继承
js中原型继承js继承概念原型链原型链继承js继承概念js里常用的如下两种继承方式:1.通过原型链方式实现继承(对象间的继承)2. 类式继承(构造函数间的继承)原型链构造函数、原型、实例的关系:每个构造函数都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个指向原型对象的内部指针(__proto__)。(每个对象都有一个内部属性__proto__属性,属性的值可以是一个对象,也可以是null.如果它的值是一个对象,则这原创 2020-10-01 21:49:43 · 445 阅读 · 0 评论 -
js中in运算符讲解
JavaScript中in操作符定义:in操作符用来判断某个属性属于某个对象,可以是对象的直接属性,也可以是通过prototype继承的属性。1.对于数组属性需要指定数字形式的索引值来表示数组的属性名称(固有属性除外,如length)。// Arrays var trees = new Array(“redwood”, “bay”, “cedar”, “oak”, “maple”); 0 in trees // returns true2.in的右边必须是一个对象,如原创 2020-10-01 17:45:52 · 4070 阅读 · 0 评论 -
js中对象方法hasOwnProperty()讲解
hasOwnProperty()1.hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有,返回true,否则返回false。2.语法:object.hasOwnProperty( propertyName )3.hasOwnProperty()函数的返回值为Boolean类型。如果对象object具有名称为propertyName的属性,则返回true,否则返回false。4.此方法不会检查对象的原型链中是否存在该属性,该属性只有是对象本身的一个成员原创 2020-10-01 17:44:41 · 1614 阅读 · 0 评论 -
JavaScript高级之原型讲解
原型讲解什么是原型?原型写法原型关系图详解什么是原型?1.原型是一个对象,其他对象可以通过它实现属性继承。2.每个函数都有一个属性叫做prototype。3.这个prototype的属性值是一个对象(属性的集合,再次强调!),默认的只有一个叫做constructor的属性,指向这个函数本身。原型写法function Car() {}Car.prototype.color = "blue";Car.prototype.doors = 4;Car.prototype.mpg = 25;原创 2020-10-01 17:41:23 · 97 阅读 · 0 评论 -
javascript中BOM总结
BOM总结浏览器对象模型 (BOM)window对象window函数三个系统对话框location对象navigator对象screen对象history对象浏览器对象模型 (BOM)浏览器对象模型(Browser Object Model)BOM提供了独立于内容而与浏览器窗口进行交互的对象。由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性BOM缺乏标准,javaScript语法的标准化组织是ECMA,DOM原创 2020-09-30 09:29:54 · 279 阅读 · 0 评论 -
js中DOM总结
DOM总结DOM概念查找元素文档结构和遍历节点操作DOM高级DOM概念当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 DOM是“Document Object Model”(文档对象模型)的首字母缩写。dom节点类型元素类型节点类型元素element1属性attr2文本text3注释comments8文档document9节点属性1.nodeName定义和用法:nodeName原创 2020-09-30 09:14:17 · 2033 阅读 · 0 评论 -
javascript日期和时间
日期对象Date 对象用于处理日期和时间。通过 new 关键词来定义 Date 对象。 var data = new Date()方法总结toString() 方法可把 Date 对象转换为字符串,并返回结果。toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串,并返回结果。valueOf() 方法返回 Date 对象的原始值。getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。setTime() 方法以毫秒设置 Date 对象。原创 2020-09-30 08:16:59 · 346 阅读 · 0 评论 -
js中函数math对象字符串总结
函数变量作用域作用域:就是起作用的范围。或者说有效范围。局部变量(家里的厕所) 局部变量就是定义在函数内部的变量,这个变量只能在函数内部使用,即作用域范围只是函数内部,另外,形参也是局部变量。 全局变量(公共厕所) 全局变量就是定义在函数外部的变量,这个变量在任何函数中都有效,即作用域范围是当前文件的任何地方。函数参数function 函数名(参数1,参数2){ //函数代码}注意:参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔开。原创 2020-09-29 20:54:26 · 387 阅读 · 0 评论 -
js数据类型详解(+隐式和显示转换)
js数据类型1.基本数据类型number string boolean null undefined2.引用数据类型regexp array function object3.变量 由数字,字母,下划线组成,区分大小写4.typeof操作符 定义:返回一个用来表示表达式的数据类型的字符串。说明:typeof 运算符把类型信息当作字符串返回。语法:typeof (变量名);例: typeof 100 “number” typeof true “boolean”js类原创 2020-09-29 09:29:29 · 323 阅读 · 0 评论 -
javascript入门及语法结构
什么是javascript?1、javascript是一种基于对象和事件驱动的客户端脚本语言。2、javascript最初的设计师为了检验HTML表单输入的正确性3、javascript起源于Netscape公司的livescript语言。4.JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页原创 2020-09-29 09:07:04 · 366 阅读 · 0 评论 -
js实现数组去重总结
数组去重方式一: //数组去重 var arr=[1,2,20,25,25,66,25,66]; for(var i=0;i<arr.length;i++){ for(var j=i+1;j<arr.length;j++){ if(arr[i]==arr[j]){ arr.splice(j,1); j-- } } } console.log(arr);方式二 //取出两个数组中相同的数据原创 2020-09-29 08:23:00 · 319 阅读 · 0 评论 -
js求数组Array最大值方法总结
求数组最大值方法总结方式一: var arr=[1,2,5,70,66,55]; var max=arr[0]; for(var i=0;i<arr.length;i++){ if(max<arr[i]){ max=arr[i]; } } console.log(max);方式二: var arr1=[10,11,15,66,90]; //apply(obj,[]); 第一个参数为对象 第二个参数为数组 c原创 2020-09-29 08:16:58 · 3723 阅读 · 0 评论 -
js实现案例全选全不选(超详细)
完整代码如下<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;原创 2020-09-29 08:12:20 · 1061 阅读 · 0 评论 -
原生js实现移动端轮播图
大家一起复制以下代码查看效果吧!htm代码 <div id="box"> <ul id="one"> <li><img src="./img/3.jpg" alt=""></li> <li><img src="./img/1.jpg" alt=""></li> <li><img src="./img/2.jpg" alt=""></li>原创 2020-09-28 09:23:40 · 614 阅读 · 1 评论 -
纯原生实现瀑布流特效
瀑布流的布局原理解析瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式。即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。特点1.瀑布流布局在我们现在的前端页面中经常会用的到,它可以有效的降低页面的复杂度,节省很多的空间,对于整个页面不需要太多的操作,只需要下拉就可以浏览用户需要看到的数据;并且,在当前这个APP至上的时代,瀑布流可以提供很好的用户体验,通过结合下拉刷新,上拉加载进行数据的懒加载等操作,对于用户的体验感原创 2020-09-28 09:15:40 · 200 阅读 · 0 评论 -
js封装函数总结
封装日期函数/** * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值是格式化的字符串日期 */function getDates(dt) { var str = "";//存储时间的字符串 //获取年 var year = dt.getFullYear(); //获取月 var month = dt.getMonth() + 1; //获取日 var day = dt.getDate();原创 2020-09-28 09:08:42 · 253 阅读 · 0 评论 -
前端浏览器兼容性问题(一)
什么是浏览器兼容性?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 var listenerEvent={ getEvent:function(event){ return event||window.event; //后者为IE },原创 2020-09-28 09:01:27 · 366 阅读 · 0 评论 -
js封装动画函数
以下俩个封装动画函数一般用于一些特效(例:轮播图,手风琴,运动的小球等等)匀速动画函数封装function animate(element, target) { //先清理定时器,这样可以保证每次点击按钮都只产生一个定时器 clearInterval(element.timeId); element.timeId = setInterval(function() { //获取div的当前位置 var current = element.offsetLeft; //设置每次移动多少像素原创 2020-09-28 08:57:30 · 372 阅读 · 0 评论 -
js实现轮播图
复制下面的代码查看神奇的效果(有趣的特效轮播图)html部分 <div id="outer"> <ul id="imgList"> <li><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""><原创 2020-09-28 08:53:10 · 130 阅读 · 0 评论 -
promise对象详解
promise的含义1.Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。2.所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。promise对象的特点1.Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和r原创 2020-09-27 20:44:25 · 4660 阅读 · 0 评论 -
js中this指向问题解析
this指向(分场景)1.普通函数function fn(){ console.log(this); //this指向全局window}fn()2.构造函数(首字母大写)function Fn(a,b){ this.a=a; this.b=b; console.log(this); //this指向构造函数的实例}var Fn = new Fn(1,2);3.object对象中this指向问题var obj = { 'name':'巴拉巴拉', 'age':'18',原创 2020-09-23 10:41:08 · 206 阅读 · 0 评论 -
js堆栈原理解析
首先说一下JavaScript的数据类型1.基本数据类型number string boolean null undefined2.引用数据类型 (简单来说,就是能用new关键字创建的都是引用数据类型)array(数组) function(函数) regexp(正则) object(对象)栈与堆栈(stack) :用来保存简单的数据字段 (先进后出)堆(heap): 用来保存栈中简单数据字段对指针的引用 (队列优先,先进先出)*基本数据类型都存在于栈中,引用数据类型存在于堆中(可以这样理原创 2020-09-20 19:52:28 · 244 阅读 · 0 评论 -
js创建对象的方式
//1- 构造函数创建对象 var per = new Object(); per.name = "花花"; //2- 字面量创建对象 var per1 = {name:"花花"}; per1.age = 19; //3- 自定义构造函数 function Per2(name,age){ this.name = name; this.age = age; this.eat = function (){ return this.name; } } var per3 =原创 2020-09-20 19:29:52 · 101 阅读 · 0 评论 -
js正则总结
什么是正则表达式?1.正则表达式是由一个字符序列形成的搜索模式。2.当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。创建正则的俩种方式1.使用字面量let regexp = /^a/igm2.使用构造函数let regexp = new Regexp(’’)匹配模式i 不区分大小写g 全局匹配m 多行匹配元字符\d 匹配任意一个数字\D 匹配非数字\w 匹配数字/字母/下划线\W 匹配非数字/字母/下划线\s 匹配空白字符\S 匹配非空白字符\b原创 2020-09-20 19:24:35 · 112 阅读 · 0 评论 -
js数组方法总结
创建数组方法1.let arr = new Array()2.let arr = []数组方法总结1.filter 返回数组每一个符合条件的数组,并组成一个新的数组let arr = [1,2,3,4];arr.filter(item => {item>3}) // [4]2.join 数组转字符串var arr2 = ['a','b','c'];console.log(arr2.join('')); //'abc'3.concat 拼接数组(合并)var原创 2020-09-17 08:49:27 · 96 阅读 · 0 评论 -
js实现数组去重
array去重方法一: var arr=[1,2,20,25,25,66,25,66]; for(var i=0;i<arr.length;i++){ for(var j=i+1;j<arr.length;j++){ if(arr[i]==arr[j]){ arr.splice(j,1); j-- } } } console.log(arr);//取出两个数组中相同的数据 var arr1=[1,2,原创 2020-09-14 08:26:05 · 679 阅读 · 0 评论