引言:

  本章没有深奥的讲解js一些底层原理,比如this指针、作用域、原型啦,涉及的都是一些有利于平时开发时简化代码,提高执行效率或者说可以当做一种经验方法来使用,篇幅都不长,小步快跑的让你阅读完整篇文章,体验编程的快乐

                另 推 荐 阅 读  >>悟透javaScript<<


获取两个区间之内随机数

function getRandomNum(Min, Max){ // 获取两个区间之内随机数
// @逆火狂飙 提出有可能第一个参数大于第二个参数,所以增加一下判断更可靠
if (Min > Max)
Max = [Min, Min = Max][0]; // 快速交换两个变量值 var Range = Max - Min + 1;
var Rand = Math.random();
return Min + Math.floor(Rand * Range);
};

随机返回一个 正/负参数

function getRandomXY(num){ // 随机返回一个 正/负参数
num = new Number(num);
if (Math.random() <= 0.5)
num = -num;
return num;
}

setInterval()或setTimeOut()计时器函数传参

var s = '我是参数';
function fn(args) {
console.log(args);
}
var a = setInterval(fn(s),100); // xxxxxx错误xxxxx
var b = setInterval(function(){ // 正确,用匿名函数调用被计时函数
fn(s);
}, 100);

setInterval()或setTimeOut()计时器递归调用

var s = true;
function fn2(a, b){ // 步骤三
if (s) {
clearInterval(a);
clearInterval(b);
}
};
function fn(a){ // 步骤二
var b = setInterval(function(){
fn2(a, b) // 传入两个计时器
}, 200)
};
var a = setInterval(function(){ // 步骤一
fn(a); // b代表计时器本身,可座位参数传递
}, 100);

字符串转换为数字

// 无需 new Number(String)   也无需 Number(String) 只需字符串减去零即可
var str = '100'; // str: String
var num = str - 0;// num: Number

// var num = +str;

空值判断

var s = '';  // 空字符串
if(!s) // 空字符串默认转换为布尔false,可以直接写在判断语句里面
if(s != null) // 但是空字符串 != null
if(s != undefined) // 空字符串也 != undefined

IE浏览器parseInt()方法

// 下面的转换在IE下为0,其他浏览器则为1,这跟IE浏览器解释数字的进制有关
var iNum = parseInt(01);
// 所以,兼容的写法为
var num = parseInt(new Number(01));

Firebug便捷调试js代码

//Firebug内置一个console对象,提供内置方法,用来显示信息
/**
* 1:console.log(),可以用来取代alert()或document.write(),支持占位符输出,字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)。如:console.log("%d年%d月%d日",2011,3,26)
* 2:如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()
* 3:console.dir()可以显示一个对象所有的属性和方法
* 4:console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码
* 5:console.assert()断言,用来判断一个表达式或变量是否为真
* 6:console.trace()用来追踪函数的调用轨迹
* 7:console.time()和console.timeEnd(),用来显示代码的运行时间
* 8:性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()....fn....console.profileEnd()
*/

快速取当前时间毫秒数

// t == 当前系统毫秒值,原因:+号运算符会,会调用Date的valueOf()方法。
var t = +new Date();

快速取小数整数位

// x == 2,以下x值都为2,负数也可转换
var x = 2.00023 | 0;
// x = '2.00023' | 0;

两个变量值互换(不用中间量)

var a = 1;
var b = 2;
a = [b, b=a][0]
alert(a+'_'+b) // 结果 2_1,a和b的值已经互换。

逻辑或'||'运算符

// b不为null:a=b, b为null:a=1。
var a = b || 1;
// 较常见的用法为为一个插件方法传参,和获取事件目标元素:event = event || window.event
// IE有window.event对象,而FF没有。

只有方法对象才有prototype原型属性

// 方法有对象原型prototype属性,而原始数据没有该属性,如  var a = 1, a没有prototype属性
function Person() {} // 人的构造函数
Person.prototype.run = function() { alert('run...'); } // 原型run方法
Person.run(); // error
var p1 = new Person(); // 只有在new操作符时,此时才会把原型run方法赋值给p1
p1.run(); // run...

快速获取当天为星期几

// 计算系统当前时间是星期几
var week = "今天是:星期" + "日一二三四五六".charat(new date().getDay());

闭包偏见

/**
* 闭包:任何一个js方法体都可以称为一个闭包,并非什么只有内嵌函数来引用了外部函数的某个参数或属性才会发生。
* 它有一个独立作用域,在该作用域内可存在若干的子作用域(就是方法嵌套方法),最终该闭包作用域为最外层方法的作用域
* 它包含了本身方法参数和所有内嵌函数的方法参数,所以当一个内嵌函数在外部有引用时,该引用的作用域为引用函数所在的(顶级)方法作用域
*/
function a(x) {
function b(){
alert(x); // 引用外部函数参数
}
return b;
}
var run = a('run...');
// 由于作用域的扩大,可以引用到外部函数a的变量并显示
run(); // alert(): run..

获取地址参数字符串和定时刷新

// 获取问号?后面的内容,包括问号
var x = window.location.search
// 获取警号#后面的内容,包括#号
var y = window.location.hash
// 配合定时器可实现网页自动刷新
window.location.reload();

Null和Undefined

/**
* Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。
* Null类型也只有一个值,即null。null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。
* ECMAScript认为undefined是从null派生出来的,所以把它们定义为相等的。
* 但是,如果在一些情况下,我们一定要区分这两个值,那应该怎么办呢?可以使用下面的两种方法
* 在进行判断时根据需要,判断对象是否有值时最好用‘===’强类型判断。
*/
var a;
alert(a === null); // false,因为a不是一个空对象
alert(a === undefined); // true,因为a未初始化,值为undefined
// 引申
alert(null == undefined); // true,因为‘==’运算符会进行类型转换,
// 同理
alert(1 == '1'); // true
alert(0 == false); // true,false转换为Number类型为0

给方法动态添加参数

// 方法a多了一个参数2
function a(x){
var arg = Array.prototype.push.call(arguments,2);
alert(arguments[0]+'__'+arguments[1]);
}

自定义SELECT边框样式

<!-- 复制到页面试试效果吧,可以随意自定义样式 -->
<span style="border:1px solid red; position:absolute; overflow:hidden;" >
<select style="margin:-2px;">
<option>自定义SELECT边框样式</option>
<option>222</option>
<option>333</option>
</select>
</span>

最简单的调色盘

<!-- JS来提取其value值即可给任意对象设置任意颜色哦 -->
<input type=color />

函数、对象 is 数组?

var anObject = {}; //一个对象
anObject.aProperty = “Property of object”; //对象的一个属性
anObject.aMethod = function(){alert(“Method of object”)}; //对象的一个方法 //主要看下面:
alert(anObject[“aProperty”]); //可以将对象当数组以属性名作为下标来访问属性
anObject[“aMethod”](); //可以将对象当数组以方法名作为下标来调用方法
for( var s in anObject) //遍历对象的所有属性和方法进行迭代化处理
alert(s + ” is a ” + typeof(anObject[s])); // 同样对于function类型的对象也是一样:
var aFunction = function() {}; //一个函数
aFunction.aProperty = “Property of function”; //函数的一个属性
aFunction.aMethod = function(){alert(“Method of function”)}; //函数的一个方法

//主要看下面:
alert(aFunction[“aProperty”]); //可以将函数当数组以属性名作为下标来访问属性
aFunction[“aMethod”](); //可以将函数当数组以方法名作为下标来调用方法
for( var s in aFunction) //遍历函数的所有属性和方法进行迭代化处理
alert(s + ” is a ” + typeof(aFunction[s]));
/**
* 是的,对象和函数可以象数组一样,用属性名或方法名作为下标来访问并处理。
* 那么,它到底应该算是数组呢,还是算对象?我们知道,数组应该算是线性数据结构,线性数据结构一般有一定的规律,适合进行统一的批量迭代操作等,有点像波。
* 而对象是离散数据结构,适合描述分散的和个性化的东西,有点像粒子。
* 因此,我们也可以这样问:JavaScript 里的对象到底是波还是粒子?如果存在对象量子论,那么答案一定是:波粒二象性!
* 因此,JavaScript里的函数和对象既有对象的特征也有数组的特征。这里的数组被称为“字典”,一种可以任意伸缩的名称值对儿的集合。其实, object和function的内部实现就是一个字典结构,但这种字典结构却通过严谨而精巧的语法表现出了丰富的外观。正如量子力学在一些地方用粒子来 解释和处理问题,而在另一些地方却用波来解释和处理问题。你也可以在需要的时候,自由选择用对象还是数组来解释和处理问题。只要善于把握 JavaScript 的这些奇妙特性,就可以编写出很多简洁而强大的代码来。
*/

点击空白处能触发某一元素关闭/隐藏

/**
* 有时候页面有个下拉菜单或者什么的效果,需要用户点击空白处或者点击其他元素时将其隐藏
* 可用一个全局document点击事件来触发
* @param {Object} "目标对象"
*/
$(document).click(function(e){
$("目标对象").hide();
}); /**
* 但是有一个缺点就是当你点击该元素又想让他显示
* 如果你不及时阻止事件冒泡至全局出发document对象点击时,上面方法就会执行
*/
$("目标对象").click(function(event){
event = event || window.event;
event.stopPropagation(); // 当点击目标对象时,及时阻止事件冒泡
$("目标对象").toggle();
});

检测window.open()方法弹出窗口是否被拦截

var blocked = false;
try {
var wroxWin = window.open("http://www.baidu.com", "_blank");
if (wroxWin == null){
blocked = true;
}
} catch (ex){
blocked = true;
}
if (blocked){
alert("弹窗被拦截!");
}

location 对象(最有用的 BOM 对象之一)

js四舍五入保留2位小数

 、tofixed方法
  toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。例如将数据Num保留2位小数,则表示为:toFixed(Num);但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则,银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法。具体规则如下: 简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一。 显然这种规则不符合我们平常在数据中处理的方式。为了解决这样的问题,可以自定义去使用Math.round方法进行自定义式 的实现指定保留多少位数据进行处理。 、 round方法
  round() 方法可把一个数字舍入为最接近的整数。例如:Math.round(x),则是将x取其最接近的整数。其取舍的方法使用的是四舍五入中的方法,符合数学中取舍的规则。对于小数的处理没有那么便捷,但是可以根据不同的要求,进行自定义的处理。 例如:对于X进行保留两位小数的处理,则可以使用Math.round(X * 100) / 100.进行处理。

:)如有不错的方法还请慷慨留言推荐,我会一并加入进来。

ps:欢迎转载,转载请注明出处:http://www.cnblogs.com/liuyitian/p/4081517.html

                          写作不易,难免有疏漏和错误,还请慷慨指正,不错请推荐


                                    每天多学一点点     代码少敲一点点 

js便携小方法,你值得拥有的更多相关文章

  1. s便携小方法,你值得拥有

    引言: 本章没有深奥的讲解js一些底层原理,比如this指针.作用域.原型啦,涉及的都是一些有利于平时开发时简化代码,提高执行效率,或者说可以当做一种经验方法来使用,篇幅都不长,小步快跑的让你阅读完整 ...

  2. js调用后台方法(如果你能容忍执行的后台方法变成一个常量)

    最近一直在做一个电话拨号的系统,系统不大,但是做的时间有点长了.其中用到了一个技术:js调用后台方法.解决这个问题花了不少时间,现如今仍然还有些不明白的地方,今天跟大家分享一下.真正明白的同学欢迎指正 ...

  3. 浅谈 js 字符串 trim 方法之正则篇

    原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格   等 ...

  4. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  5. iScroll.js插件使用方法

    iScroll.js 用法参考 (share) 分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍 ...

  6. 关于js函数,方法,对象实例的一些说明

    朋友们大家好,好久没有更新文章了,最近正好有空就想着写点什么吧,加上这段时间总是能听到一些朋友们问关于js函数,方法,对象实例到底有什么区别这个问题,所以今天就献丑来简单说明一些吧! 其实这些主要都是 ...

  7. 原生JS实现new方法、new一个对象发生的四部、new里面常用的优先级

    一.js中new一个对象的过程 首先了解new做了什么,使用new关键字调用函数(new ClassA(…))的具体步骤: 1.创建一个新对象: var obj = {}; 2.设置新对象的const ...

  8. Centos7 中 Node.js安装简单方法

    最近,我一直对学习Node.js比较感兴趣.下面是小编给大家带来的Centos7 中 Node.js安装简单方法,在此记录一下,方便自己也方便大家,一起看看吧! 安装node.js 登陆Centos ...

  9. wdatepicker控件de使用小方法汇总

    在总结wdatepicker控件的使用前,先插播一条吧,下午刚心血来潮百度的一条 问?C#中Int16.Int32.Int64.之间的区别,:::嘿嘿其实百度知道就有,但还是写上吧! Int16 表示 ...

随机推荐

  1. 团队作业5-Alpha版本测试报告(彼岸芳华队)

    请根据团队项目中软件的需求文档.功能说明.系统设计和测试计划,写出软件的测试过程和测试结果,并回答下述问题. 一.在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个?(10分) 在测试过程 ...

  2. Redis内存回收:LRU算法

    Redis技术交流群481804090 Redis:https://github.com/zwjlpeng/Redis_Deep_Read Redis中采用两种算法进行内存回收,引用计数算法以及LRU ...

  3. C# 正则提取字符串(提取一个或多个)

    实例一:string result = ""; string str = "大家好! <User EntryTime='2010-10-7' Email='zhan ...

  4. javascript 组件化(转载)

    这边只是很简陋的实现了类的继承机制.如果对类的实现有兴趣可以参考我另一篇文章javascript oo实现 我们看下使用方法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  5. Alpha冲刺阶段博客汇总

    第一篇(冲刺前安排):http://www.cnblogs.com/Aragaki-Yui/p/8893752.html 第二篇(冲刺第一天):http://www.cnblogs.com/Araga ...

  6. 蜗牛慢慢爬 LeetCode 20. Valid Parentheses [Difficulty: Easy]

    题目 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the i ...

  7. Python模块Scrapy导入出错:ImportError: cannot import name xmlrpc_client

    Mac(OS version: OS X Yosemite 10.10.5)上安装Scrapy模块,使用时出现: from six.moves import xmlrpc_client as xmlr ...

  8. php htmlentities和htmlspecialchars 的区别

    很多人都以为htmlentities跟htmlspecialchars的功能是一样的,都是格式化html代码的,我以前也曾这么认为,但是今天我发现并不是这样的.   The translations ...

  9. Log4j读取配置文件并使用

    /** 设置配置路径从环境变量读取     * PropertyConfigurator类加载.properties文件的配置    * DOMConfigurator加载.xml文件的配置     ...

  10. 为什么家里的宽带的IP显示的是外地?

    作者:NightCoffee链接:https://www.zhihu.com/question/22547945/answer/21734955来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...