爱睡的虫虫
本人博客只供自己学习和笔记用途
展开
-
获取文档元素节点方法 querySelector querySelectorAll
querySelectorAll 是找出所有匹配的节点后,返回对应的元素节点数组.querySelector 是找到一个后立刻返回找到的第一个节点对象,如果没有则返回null.返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果下面是几个简单的Demo样例,方便后面可以清晰的get到关键点:找出body标签下的第一个divdocument.body.querySelectorAll("div")[0]找出所有标签document.querySelectorAll(.原创 2022-01-12 11:02:12 · 969 阅读 · 0 评论 -
JS移动端浏览器取消右划后退的几种方法
方法一:var mo=function(e){ e.preventDefault();}/***禁止滑动***/function stop(){ //禁止页面滑动 document.addEventListener("touchmove",mo,false);}stop()方法二:屏蔽浏览器的后退事件。 //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('p.原创 2021-07-04 09:42:01 · 1255 阅读 · 0 评论 -
数组去重 Set 和 Array
将Set数据结构转换为数组,通常有以下两种方法const arr = [1,1, 2,2,3, 4 ]const s = new Set(arr);// 方法一 用方括号直接包裹用“…”扩展后的Set数据结构const newArr = [ …s ];console.log(newArr); // [ 1, 2, 3, 4 ];// 方法二 用Array.from()转换Set数据结构const newArr = Array.from(s);console.log(newArr); // [原创 2021-06-17 18:06:35 · 1565 阅读 · 2 评论 -
面向对象 OOP es6 Class 类
面向对象编程 (Object Oriented Programming)单例设计模式单例模式解决的问题高级单例模式基于单例模式实现模块化开发工厂模式单例设计模式1、表现形式 (对象)var obj = { xxx:xxx};2、作用把描述同一件事务的属性和特性进行 分组,归类(存储在一个堆内存空间中)。因此避免了全局变量之间的冲突和污染var pa...原创 2020-02-06 22:43:20 · 240 阅读 · 0 评论 -
js 数组 Array数组
迭代方法:filter:用于把 Array 的某些元素过滤掉,然后返回剩下的元素。(把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。)filter():接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:<script&amp原创 2018-12-01 19:17:01 · 370 阅读 · 0 评论 -
箭头函数
箭头函数优点:语法简单可以隐式返回匿名函数<script> const number = [5, 6, 13, 0, 1, 18, 23]; const double = number.map(function (number) { return number*2; }); const double2 = number...原创 2019-10-14 22:11:34 · 448 阅读 · 0 评论 -
JavaScript Array map()方法
Array map()方法定义:对数组中的每个元素进行处理,得到新的数组;特点:不改变原数组;例子:const array = [1, 3, 6, 9];const newArray = array.map(function (value) { return value + 1;});console.log(newArray); // [2, 4, 7, 10]console....原创 2019-10-14 21:35:25 · 253 阅读 · 0 评论 -
ES6 之 Promise
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &原创 2018-07-18 15:46:35 · 1010 阅读 · 0 评论 -
移动端适配方案 flexible.js
;(function flexible (window, document) { var ua = navigator.userAgent.toLowerCase(); var doc = window.document; var docEl = document.documentElement; var metaEl = document.querySelector('me...原创 2018-12-09 23:11:27 · 1477 阅读 · 0 评论 -
JavaScript数据结构和算法
为什么要学习数据结构和算法数据结构和算法对于很多前端工程师来说,一直觉得是可有可无的,但其实不然,个人觉得,前端工程师其实是最需要重视数据结构和算法的人,因为前端所做的东西是用户访问网站第一眼看到的东西,特别在移动浪潮到来之后,对用户体验越来越高,对前端提出了更高的要求,面对越来越复杂的产品,需要坚实的数据结构和算法基础才能驾驭。如果没有学习过计算机科学的程序员,当我们在处理一些问题时,比较熟...转载 2019-04-07 14:52:53 · 447 阅读 · 1 评论 -
解析 原型链
1、 解读函数的 prototype 属性每个函数都有一个prototype 属性,它默认指向一个Object空对象(即称为:原型对象)原型对象中有一个属性constructor,它指向函数对象给原型对象添加属性(一般都方法)作用:函数的所有实例的对象自动拥有原型中的属性(方法)...原创 2019-04-18 09:04:05 · 190 阅读 · 0 评论 -
axios 使用方法
一、安装1、 利用npm安装npm install axios --save2、 利用bower安装bower install axios --save3、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>二、例子1、 发送一个GET请求//通过给定的ID来发...原创 2019-05-06 09:47:28 · 1553 阅读 · 0 评论 -
json
什么是 JSON ?JSON : JavaScript Object Notation (JavaScript 对象表示法)JSON : 是轻量级的文本数据交换格式JSON : 独立于语言,支持不同编程语言(PHP,JSP,.NET)JSON 语法规则JSON 语法是 JavaScript 对象表示语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组JS...原创 2019-06-20 16:13:08 · 2212 阅读 · 2 评论 -
JS阻止冒泡和取消默认行为
http://caibaojian.com/javascript-stoppropagation-preventdefault.html原创 2019-07-29 15:30:42 · 346 阅读 · 0 评论 -
ES6 知识点总结
let 和 const 命令let 用来声明变量,只在let命令所在的代码块中有效。【代码块:使用花括号包住的内容称为代码块{}】{ let a = 10; var b = 1;}a // ReferenceError: a is not definedb // 1表明:let声明的变量只在它所在的代码块有效。for循环的计数器,就很合适使用let命令。for (let...原创 2019-08-23 22:46:16 · 451 阅读 · 0 评论 -
JS 随机数
前言:对象在JavaScript 中被称为引用类型的值。Math 是引用类型的单体内置对象,Math对象提供了很多属性和方法,用于辅助完成复杂的数学计算任务。Math 对象方法方法描述Math.ceil(x)进行上舍入,即向上取整。 例:Math.ceil(25.9) //26 Math.ceil(25.1) //26Math.floor(x)进行向下舍入,即...原创 2019-10-05 22:57:48 · 574 阅读 · 0 评论 -
实现页面的多个倒计时效果
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Jquery实现页面的多个倒计时</title></head>原创 2018-05-23 16:00:47 · 3934 阅读 · 0 评论 -
获取地址栏参数
/* 功能:获取地址栏参数 使用:getQueryString(‘str’) http://localhost:9010/index.html?order_id=001002&amp;amp;amp;order_title=123&amp;amp;amp;total_amount=1.99 */ js:function getQueryString(name) { var search = document.l...原创 2018-04-27 20:48:09 · 294 阅读 · 0 评论 -
判断对象中是否存在某个对象和属性
描述:判断一个输入框中的值是在一个对象中的解决办法var obj = {'name':'孙悟空','age':10,'address':'水帘洞'};//定义对象//联想功能校验 var continueFor = 0; for(var item in obj ){ //判断对象中 if(this.gangedCard == this.obj[item].cod...原创 2018-05-09 16:41:39 · 4897 阅读 · 0 评论 -
JS原生脱敏
substring(str){ if(typeof str == 'string'){ //参数为字符串类型 let ruten = str.substring(3,8); //提取字符串下标之间的字符。 return str.replace(ruten,'*****'); //字符串中用字符替换另外字符,或替换一个与正则表达式匹配的子串。 }}效果展示原创 2017-09-26 11:11:05 · 5631 阅读 · 0 评论 -
基于vue、react的倒计时demo
HTML: <div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span> <span v-if="!s原创 2017-10-10 17:38:59 · 1928 阅读 · 0 评论 -
js 字符串
字符串连接 使用(+)msg = “Hello,” + “world”; //生成字符串 “”Hello,world“”要确定一个字符串的长度,使用字符串 length 属性。s.lengthvar s = "hello, world" //定义一个字符串s.charAt(0); // "h":第一个字符串s.charAt(s.length-1) // "d":最后一个字符s.subs原创 2017-11-16 18:41:11 · 289 阅读 · 0 评论 -
JS移动端浏览器取消右划后退的几种方法
在开发过程中,发现我们公司所使用的APP有点BUG,在APP中打开网页、H5应用之后,处于首页时,轻微的右划触发了后退事件,导致直接退出网页或者H5应用的页面,这样使得很多需要交互的手势没办法使用。本来这个右划后退事件是不应该出现在第一页的,这个BUG也应该由APP得开发来解决,不过当时这个APP是外包做的,如果更改这些比较麻烦,因此解决问题的任务就由我来了。 在使用某些JS插件(fullpage原创 2020-09-09 21:17:13 · 12273 阅读 · 0 评论 -
金额输入框正则表达式,金额校验
金额输入框:&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;script&原创 2017-12-13 11:29:44 · 9830 阅读 · 1 评论 -
索引对应显示隐藏
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>索引对应</title> <link rel="stylesheet" href=""> <script type="text/jav原创 2017-12-13 14:37:28 · 745 阅读 · 0 评论 -
Jquery AJAX解决跨域请求
function ajax() {console.log("b");$.ajax({url: "https://api.douban.com/v2/movie/top250",// url: "urlsn,// get_time()",dataType: "jsonp",success: function(data) {$("#loadding").hide();console.lo原创 2017-12-13 14:38:02 · 350 阅读 · 0 评论 -
广告位一直滚动特效
HTML:<div id="demo" class="embed"> <div class="box"> <div id="demo1" class="t_news"> <ul> <a><li><i class="iocn_lab"></i><i>[公告2016.01.20]</i> · 投1元新手标,随机送1-1000元,次日可提现。</li原创 2017-12-13 14:48:39 · 248 阅读 · 0 评论 -
广告位一直滚动特效
广告位一直滚动特效 - 非凡主力 - 非凡主力HTML:<div id="demo" class="embed"> <div class="box"> <div id="demo1" class="t_news"> <ul> <a><li><i class="iocn_lab"></i><i>[公告2016.01.20]</i> · 投1元新手原创 2017-12-14 13:42:15 · 359 阅读 · 0 评论 -
一天弹一次,关闭了就没了
<script type="text/javascript" src="js/jquery.cookie.js"></script><script type="text/javascript">$(function(){$(".fixe_close-bg").click(function(){$(".fixe-bg").hide();}); if($.cookie("isClose")原创 2017-12-14 13:59:51 · 595 阅读 · 0 评论 -
倒计时 多个同时支持 -- 显示*(时:分:秒)
$(function(){ updateEndTime();});function updateEndTime(){ var NowTime = new Date(); var time = NowTime.getTime(); $(".settime").each(function(I){ var aa = $(this).text(); var endDate原创 2017-12-14 13:41:15 · 845 阅读 · 0 评论 -
//判断微信客户端移动客户端判断ios和android平台
//判断是否是移动客户端function isMobile() { var sUserAgent = navigator.userAgent.toLowerCase(), bIsIpad = sUserAgent .match(/ipad/i) == "ipad", bIsIphoneOs = sUserAgent .match(/iphon原创 2017-12-13 14:47:08 · 1233 阅读 · 0 评论 -
将在几秒钟后返回首页!
1、//隔几秒自动刷新或者跳转<meta http-equiv="refresh"content="10;url=http://www.xiaojinpiao.cn/"> 2、 //倒计时自动刷新或者跳转<div class="img"> <img src="../images/404.png" alt="页面有错误,请返回首页" title="页面有错误,请返回首页" width="30原创 2017-12-14 14:56:47 · 1637 阅读 · 0 评论 -
GitHub 提交本地项目到 GitHub(gh-pages分支)发布网站展示自己的项目
密钥配置公密(配置一次可以了)/提交/ git initgit add . (.代表项目里面所有的文件、css/index.css)git commit -m “版本号” (必须写)git remote add origin git@github.com:JSFFZL/ffzl.git (git@github.com:JSFFZL/ffzl.git 远程项目地址)(连接成功就可以)git push原创 2018-01-02 11:16:28 · 938 阅读 · 0 评论 -
H5页面字体大小使用rem (重置字体大小)setFontSize.js
注意: html字体大小要先设置成100px,并且JS在CSS重置为100px以后引入。//初始化rem(function(){ var getStyle = (function(){ if(window.currentStyle){ return function(obj, name){ retur原创 2018-01-16 11:04:29 · 3741 阅读 · 0 评论 -
JavaScript中遍历数组和对象的元素
遍历数组var arr = ['关羽','张飞','赵云','马超','黄忠'];//定义数组//遍历数组for(var i = 0;i&lt;arr.length;i++){ console.log(arr[i]); //赋值给对象objectGather{} this.objectGather[i] = {name:arr.issuer_name,cod...原创 2018-05-09 12:00:38 · 405 阅读 · 0 评论 -
从移动端 click 到摇一摇
以前听到前辈们说移动端尽量不要使用click,click会比较迟钝,能用touchstart还是用touchstart。但是用touchstart会有一个问题,用户在滑动页面的时候要是不小心碰到了相关元素也会触发touchstart,所以两者都有缺点。那怎么办呢?首先为什么移动端的click会迟钝呢?从谷歌的开发者文档《300ms tap delay, gone away》可以找到答案: 因为移动原创 2017-09-15 14:43:48 · 486 阅读 · 0 评论