关于JS的几点TIPS

原文:关于JS的几点TIPS

作为前端基本工作每天都会用到JS...但是我们对JS真的都了解吗,或者说有什么tips是我们不知道的呢。。

So..此文关于JS的几点tips.....

一:定时器(可传多个参数)

首先是一个一般的定时器,一般我们使用就用到定时器的2个参数,一个是function函数,一个是时间。

setTimeout(function(){  //函数
	alert(1);
},2000)  //时间

但是其实定时器有很多个参数参数,tips:

setTimeout(function(num){  //传一个形参
	alert(num);
},2000,123) //回调参数

二:拼接字符串

在工作中经常会遇到拼接字符串的问题,比如我们给一个body元素添加内容:

window.onload=function(){
	document.body.innerHTML='<div>div</div><span>span</span></p>p</p>123';
}

当这些字符串在一行上的时候,这样添加没有问题,如果我们添加的内容过多需要这行的时候,一般是这样拼接的:

window.onload=function(){
	document.body.innerHTML=
	'<div>div</div>'+
	'<span>span</span>'+
	'</p>p</p>'+
	'123';
}

这种普遍方法妥妥的,一定问题都没。

下面是一种也许不那么常用的tips:

window.onload=function(){
	document.body.innerHTML=
	'<div>div</div>\          //在字符后天加一个反斜杠
	<span>span</span>\
	</p>p</p>\
	123';
}

一样,妥妥的,木有一点问题!

三:Console.log()  

主要用于打印,调试信息,首先,在调试台输出一个hallo

<script>
	var a = 'hallo';
	console.log(a);
</script>

OK,没有问题,其实我们不但可以输出一个字符, 还可以输出图像,样式。 我们现在给这个hallo添加样式

<script>
	var a = 'hallo';
	console.log('%c'+a,'font-size:400%;background:blue;color:red;');
</script>

挺靠谱~

四:tipeof

这个平时常用,用于检测数据类型的,一般这么用

var a = [];
alert(typeof a)  //用空格连接,弹出object

还可以这么用

var a = [];
alert(typeof(a)) //用()连接,弹出object

五:嵌套for循环

首先定义2个for循环

for(var i=0;i<5;i++){   //i循环
	for(var j=0;j<1;j++){  //j循环
		if(i==3){
			break;  //没有跳出i循环, 只是跳过了3.
		}
		alert(i);
	}
}

有时候我们需要跳出整个大的循环,so

a:for(var i=0;i<5;i++){   //给循环一个名称
	for(var j=0;j<1;j++){
		if(i==3){
			break a;  //跳出这个循环
		}
		alert(i);
	}
}

六:for循环

1.最常用

for(var i=0;i<5;i++){  //3个值
	alert(i)
}

2.也常用

var i = 0;  //外部定义i
for(;i<5;i++){ //2个值
	alert(i)
}

3.不常用

var i = 0;
for(;;){  //0个值
	alert(i)
	if(++i>=5){  //需if判断,不然死循环
		break;
	}
}

七:call

var obj = {
	a : function(){
		alert(this)
	}
}
var arr = [1,2,3];
obj.a();  //this指向obj

如果要使this指向arr,只需call(arr)

obj.a.call(arr);

如果call()里面没有指向,自动指向window。

八:匿名函数自执行

错误写法

function(){
    alert(123);
}();

正确写法 加(小括号)

(function(){
    alert(123);
})();   //自动执行alert();

如果不想加小括号又想自执行,可以这样

!function(){
	alert(123);
}();

加运算符,也是不会报错,不但可以加!,还可以~,或者+ (统统都不报错了)

九:创建对象

一般

var arr = new Array();
alert(arr.length);

其实可以不用对象后面的();

var arr = new Array;
alert(arr.length);

其实都是很多很小很小很小的细节方面,写的更少,做的更多,多么愉悦的一件事哈!

最后,细节决定成败! \ 0.0 /

时间: 2024-09-11 23:39:17

关于JS的几点TIPS的相关文章

js 鼠标划过tips切换效果

js 鼠标划过tips教程切换效果 //获取对象属性兼容方法 function $(objectid){     if (document.getelementbyid && document.getelementbyid(objectid)) {         return document.getelementbyid(objectid);// w3c dom     }     else         if (document.all && document.al

网页前端设计资源:前端设计资源收藏夹

文章简介:今天在邮件中收到一个由 Dimi Navrotskyy在Github上发布的前端收藏夹,里面的资源太丰富了.我在想很多同学肯定喜欢.本想直接发个链接与大家分享,但时间久了,找起来辛苦.特意copy了一份发在w3cplus上. 今天在邮件中收到一个由 Dimi Navrotskyy在Github上发布的前端收藏夹,里面的资源太丰富了.我在想很多同学肯定喜欢.本想直接发个链接与大家分享,但时间久了,找起来辛苦.特意copy了一份发在w3cplus上.而且我在后面还增加了一份我自己整理的学习

JavaScript中利用jQuery绑定事件的几种方式小结_jquery

开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式: 先写几个好看的button //引入JQuery <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <span id="tips"></span> <input type="button" id="btn1"

jQuery消息提示框插件Tipso_jquery

今天我们用Tipso插件来演示八种不同提示效果,并且了解下Tipso API. <div class="dowebok"> <h2>1.默认</h2> <div class="inner"> <span id="tip1" data-tipso="dowebok.com">Tipso</span> </div> </div> 演示一

分析Cache 在 Ruby China 里面的应用情况_ruby专题

首先给大家看一下 NewRelic 的报表 最近 24h 的平均响应时间 流量高的那些页面 (Action) 访问量搞的几个 Action 的情况: TopicsController#show UsersController#show (比较惨,主要是 GitHub API 请求拖慢) PS: 在发布这篇文章之前我有稍加修改了一下,GitHub 请求放到后台队列处理,新的结果是这样: TopicsController#index HomeController#index 从上面的报表来看,目前

jquery-tips悬浮提示插件分享_jquery

由于是在mac下写的,没什么低版本浏览器测试工具没做具体的兼容测试,而且我也不是前端还请多多包涵,js库用的jquery1.11.1,低版本应该也是可以的,需要自己去下jquery,只是写的好玩,分享一下,希望大家能一起改进 /** * jquery tips 提示插件 jquery.tips.js v0.1beta * * 使用方法 * $(selector).tips({ //selector 为jquery选择器 * msg:'your messages!', //你的提示消息 必填 *

超过 40 款很有用而且很新的 jQuery 插件

MotionCAPTCHA ( Demo | Download ) MotionCAPTCHA是一个 jQuery 的验证码 CAPTCHA 插件,要求用户按照图中指示画出大概的形状.基于 HTML5 的 Canvas 技术实现. Smart Validate ( Demo | Download ) 信用卡号校验的 jQuery 插件.支持的信用卡类型包括:American Express, MasterCard, Visa, Diners Club, and Discover. Multi N

js tips 代码

function Tips(TipsContent,Type) {  var box = document.getElementById("TipsDiv");  if (Type == "Error")  {  box.style.backgroundImage = "url(Images/Error.jpg)";  }  else if (Type == "Sucess")  {   box.style.backgroun

js tips 效果代码

提供一个js tips教程提示效果,主要是用于图片,文字当-鼠标经过时有小提示信息,离开时自动消失. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net /1999/xhtml&qu