一些实用的js高级技巧

五段实用的js高级技巧

技巧一之setTimeout. 应用案例:比如你想一个函数循环执行10次,怎么办?以前通常是先setInterval,然后clearInterval,技巧一就是克服这个问题复制代码代码如下: (function () { var i = 0; function job() { console.log(i++); if (i < 10) { setTimeout(job, 1000); } } job(); })(); 上面这个job函数就只会乖乖的执行10次.然后自动停止技巧二之高效的fo…

一些实用的js高级技巧

技巧一之setTimeout. 应用案例:比如你想一个函数循环执行10次,怎么办?以前通常是先setInterval,然后clearInterval,技巧一就是克服这个问题 (function () { var i = 0; function job() { console.log(i++); if (i < 10) { setTimeout(job, 1000); } } job(); })(); 上面这个job函数就只会乖乖的执行10次.然后自动停止技巧二之高效的for循环应用案例:抛弃…

实用的JS代码段（表单篇）

整理了下比较实用的Javascript代码段,完整的代码参考 1 多个window.onload方法由于onload方法时在页面加载完成后,自动调用的.因此被广泛的使用,但是弊端是只能实用onload执行一个方法.下面代码段,可以保证多个方法在Onload时执行: function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload =…

JS高级技巧学习小结

安全类型检測 var isArray = value instanceof Array; 以上代码要返回true,value必须是一个数组,并且还必须与Array构造函数在同一个全局作用域中(Array是window的属性). 假设value是在还有一个框架中定义的数组.那么以上代码就会返回false. Demo: <body> <iframe src="test.html" id="myIframe"></iframe> <…

简单实用angular.js购物车功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script> <style type="text/css"> td,th{…

js高级技巧之高级定时器

实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级. 可以吧js想象成在时间线上运行的. JavaScript中没有任何代码是立刻执行的,但一旦进程空闲则尽快执行. 1.重复的定时器: setInterval()的重复定时器存在两个缺点: (1)某些间隔会被跳过 (2)多个定时器的代码执行之间的间隔可能比预期的小: 假设,某个onclick事件处理程序使用setInterval()设置了一个200ms间隔的重复定时器.如果事件处理程序花了300ms多一点的时间完成,同时定时器代码也…

一些实用的JS

1.str.split(/\s+/) 这句是表示以和/\s+/匹配的字符串作为分界,分割字符串str 比如一个空格或者多个或者空格以及回车等其中+表示一个或者多个 var a = "b-c-d"; var d = a.split("-"); alert(d[1]); //c 2.var up_class; if(!(up_class = $(this).data('up_class'))) $(this).data('up_class', up_clas…

很实用的js限制不让输入其他字符，只让输入数字和 js生成UUID

onkeyup="this.value=this.value.replace(/\D/g,'')" js生产UUID var createUUID = (function (uuidRegEx, uuidReplacer) { return function () { return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(uuidRegEx, uuidReplacer).toUpperCase(); }; })(…

js高级技巧笔记(一)

安全的类型检测 Js的类型检测机制并非完全可靠,发生错误否定及错误肯定的情况也不少: 在safari 在对正则表达式应用typeof操作符时返回"function",因此很难确定某个值到底是不是函数 Instanceof在包含多个框架的时候出现错误. 解决上述问题的办法都一样,在任何值上调用Object原生的toString方法,都会返回一个[object NativeConstructorName]格式的字符串,每个类内部都有一个[[Class]]属性,这个属性中就指定了上述字符串中…

JS高级技巧(简洁版)

高级函数由于在JS中,所有的函数都是对象,所以使用函数指针十分简单,也是这些东西使JS函数有趣且强大安全的类型检测 JS内置的类型检测机制并不是完全可靠的 typeof 操作符返回一个字符串,表示未经计算的操作数的类型,在大多数情况下很靠谱,但是当然还有例外正则表达式 typeof /s/ === 'function'; // Chrome 1-12 , 不符合 ECMAScript 5.1 typeof /s/ === 'object'; // Firefox 5+ , 符合 ECMAS…

几个实用的js函数

在阅读JavaScript DOM编程艺术这本书时看到了一些比较实用的代码. //加载多个window.onload事件 function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } }…

js-xlsx 一个实用的js 导出列表插件

在前端开发过程中,导出列表功能的开发无非两种,一种是有后台生成,发生给前端下载,第二种是前端进行列表的导出工作.之前接触了一种前端导出列表的插件 tableExport.js ,但是其缺点很明显,需要将需要导出的列表通过table表格的标准形式渲染到页面中,才能够导出.当数据量大的时候,浏览器渲染大量数据到页面中,很容易出现卡顿甚至是崩溃.为了导出大量数据,查找测试了一些其他的列表导出插件,最后发现js-xlsx 比较出众. js-xlsx 无需将数据渲染到页面中,他是通过流转换的形式来导出列…

极其实用的JS单行代码

个人博客地址:https://www.wenhaofan.com/a/20190629211647 1.强制布尔值要将变量强制转换为布尔值而不更改其值: const myBoolean = !! myVariable; !!null // false !!undefined // false !!false // false !!ture // ture !!"" // false !!"string" // true !!0 // false …

一个很酷炫也挺实用的JS库leader-line

简单粗暴,直入主题,看看效果再说. 是不是这效果挺棒?这样的效果在做系统时,可以有很多的应用,可以让枯燥的页面生动起来. 具体效果,大家可以上这个搜索网站Mag[i]上面看,切身体会一下. 这是一个开源JS库,具体参见:leader-line 详细用法也很简单,可以直接参看其帮助文档,这个帮助文档写得相当不错,国内的开源贡献者应该好好学习,再好的东西,如果没有一个简洁.人性化的帮助文档,会让很多人打退堂鼓的. 我们来看看其帮助文档: leader-line帮助文档 ,不要一说帮助文档,就觉得头大…

各种实用的js,bootstrap插件

1.nivoSlider 非常优秀的Banner轮播插件 2.BootstrapTable 表格插件使用技巧 = http://www.cnblogs.com/landeanfen/p/4976838.html 3.http://www.cnblogs.com/landeanfen/p/5461849.html…

[原创作品]一个实用的js倒计时器 postby:zhutty.cnblogs.com

今天做了一个手机短信发送倒计时,额,就是每隔多长时间可以重新发送的功能.贡献出来给园有吐槽点评. //倒计时,time:时长(秒),scb:每秒回调,cb:计时完成回调 var timing = function (time, scb, cb) { var _time = time; var sid = setInterval(function(){ scb(--_time) },1000); setTimeout(function(){ clearInterval(sid); cb(); },…

Firefox 插件 JSview是一套比较实用的JS，CSS文件查看工具，很方便，很快捷地查看页面引用了哪些文件，作为Web前端开发者是一套必备的插件，由于Firefox升级过快，插件很快不兼容了，这里对插件做了一些调整，可以兼容最新Firefox浏览器（目前FireFox 21）

JSView Firefox Plugins Download 点击下载…

实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)

//校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) return false return true } //校验登录名:只能输入5-20个以字母开头.可带数字.“_”.“.”的字串 function isRegisterUserName(s) { var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/; if (!patrn.exec(s)…

上学时的HTML+JS+CSS(小总结)

html:超文本标记语言基本标签: { 文本标签:<pre></pre>:原封不动的保留空白区域. <br />:换行. <hr width="宽度(单位:%)" size="高度" noshade(该行不带阴影) color="线条颜色" />:在文档中画一条水平线,可用来分割文档. <strong></strong>:加…

exp.validate.js

简单实用的js基础数据验证 prototype /// <reference path="/Scripts/expand-fn/exp_validate.js" /> /*数据验证 liuph 2015-03-03 扩展String方法 */ //验证整数 String.prototype.exp_isInt = function () { return /^[+-]?\d+$/.test(this); } //验证正整数 String.prototype.exp_isIn…

【正则】精通JS正则表达式，没消化信息量太大，好文

http://www.jb51.net/article/25313.htm 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证 •替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字 •根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字正则表达式语法一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称…

常用js效果：选项卡切换

js选项卡,很多网站都会用到,我这里用jquery给整了一个简单但是却很实用的js选项卡,废话不多说,直接上代码: <style> .txtadsblk01{ width:200px;} .txtadsblk01 ul{ padding:0; margin:0;} .txtadsblk01 li{ float:left; list-style:none; margin-left:3px; border:1px solid #ccc; padding:0 12px;} .xuanxiangkad…

js判断手机端操作系统(Andorid/IOS)

非常实用的js判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL = "http://xxx/xxx.apk"; var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return { android: u.indexOf('Android') > -1 || u.indexOf('Linux') >…

Js仿弹框

收藏一个简单实用的JS弹框,通过隐藏和显示div来实现,代码来自脚本之家! <html> <head> <title> LIGHTBOX EXAMPLE </title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1…

JS实现单选按钮回显时页面效果出现，但选中单选框的值为空

最近做了很多前端页面的工作,遇到的一个感觉很头疼的问题在这里记一下: 经常用JS回显单选框,但是明明从页面效果上来看,单选框已经被选中了,可是却不能触发单选框的change事件,取值的时候用某种方法取不能取的选中单选框的值(单选框取值有很多种方法,我的意思是有的能够取到,有的方法取不到). 想了很久,整理出一套看起来很复杂却非常实用的JS回显方法.试验了多种前端框架和浏览器,均好使.假设我们需要给name为gender,value为1的单选框进行回显: $("[name='gender'][va…

获取页面所有链接的JS

写了一个实用的JS脚本,获取当前页面所有的JS: var str = " \n"; var list = document.getElementsByTagName("a"); for(var i=0; i<list.length; i++){ str += list[i].href + ' \n'; }; console.log(str);…

【js】中的小技巧

本文主要介绍一些JS中用到的小技巧 1. 类型强制转换 1.1 string强制转换为数字可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN,或者使用 a !== a 来判断是否为NaN,因为 NaN !== NaN '32' * 1 // 32 'ds' * 1 // NaN null * 1 // 0 undefined * 1 // NaN 1 * {…

js filter用法比较

讲解一个很实用的JS小语法 filter 就是从数组中找到适合条件的元素(比如说大于某一个元素的值) var arr=[1,23,5,78,34,55,13]; 如何才能找到大于23的所有元素呢, 1,下面是传统的解决思路,就是用$.each(),这种用法,先不说这种用法好不好,先看代码: var max23=[]; $.each(arr,function(index,value){if(value>23){ max23.push(value)}}); 然后在console中输入max23 输出…

原生JS快速实现拖放

原生 JS 快速实现拖放拖放是很常见的一种交互效果,很多时候我们都会借助于第三方的控件来实现,其实用原生 js 实现起来也非常的方便.接下来我们就用原生 js 和 css 快速实现拖放效果 html <body> <div class="droppable"> <div class="draggable" draggable="true"></div> </div> <div c…

Blazor组件自做一 : 使用JS隔离封装viewerjs库

Viewer.js库是一个实用的js库,用于图片浏览,放大缩小翻转幻灯片播放等实用操作本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor JS 隔离优势导入的 JS 不再污染全局命名空间. 库和组件的使用者不需要导入相关的 JS.即不需要再在ssr的 Pages/_Host.cshtml 或 Pages/_Layout.cshtml ,wasm的 wwwroot/index.html 里写第一遍载入静态资产请求包含值为 no-…

【一些实用的js高级技巧】的更多相关文章