前端html页面和js编码的一些小技巧

1、设置浏览器不使用缓存中的图片
一般的浏览器可以使用如下的标签：

    <meta http-equiv="pragma" content="no-cache"> 
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
ie浏览器上面的标签可能无效，可以在请求的图片上加上如下所示代码：
   <img src="img/xxx.jpg?temp=<%=Math.random()%>"/>

2、==和===的区别
对于String、number等基础类型，==和===是有区别的：
1）不同类型间比较,”==”对值转换成同一类型后比较；“===”类型不同就不相等。
2）同类型比较，直接对值进行比较，二者相等。
对于array、object等高级类型，“==”和“===”没有区别的进行指针地址的比较；
3、js中with的用法
with对象能够使我们很方便的使用某个对象的一些属性，而不用每次都去写对象名.属性的形式，直接使用对象名。下面是示例：

<script language="javascript">  
function Lakers() {  
       this.name = "kobe bryant";  
       this.age = "28";  
       this.gender = "boy";  
}  
var people=new Lakers();  
with(people)  
{  
       var str = "姓名: " + name + "<br>";  
       str += "年龄：" + age + "<br>";  
       str += "性别：" + gender;  
       document.write(str);  
}  
</script>

4、js循环
JavaScript 支持不同类型的循环：
1）、for - 循环代码块一定的次数

for (var i=0,len=cars.length; i<len; i++)
{
    document.write(cars[i] + "<br>");
}

2）、for/in - 循环遍历对象的属性

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
  {
  txt=txt + person[x];
  }

3）、while - 当指定的条件为 true 时循环指定的代码块

while (i<5)
  {
      x=x + "The number is " + i + "<br>";
      i++;
  }

4）、do/while - 同样当指定的条件为 true 时循环指定的代码块

do
  {
      x=x + "The number is " + i + "<br>";
      i++;
  }
while (i<5);

5、windows对象
1）、window.onunload和window.onbeforeunload
onunload，onbeforeunload都是在刷新或关闭时调用，可以在< script >脚本中通过window.onunload来指定或者在< body >里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。
onbeforeunload也是在页面刷新或关闭时调用，onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而 onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。onunload是无法阻止页面的更新和关闭的而onbeforeunload可以。
2）、window.location.search
window.location.search方法是截取当前url中“?”后面的字符串，从问号 (?) 开始的 URL（查询部分）。如:http://www.51js.com/viewthread.php?tid=22720它的search就是?tid=22720 。
6、oncontextmenu事件
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
1）、< body >中用oncontextmenu=’return false’来取消鼠标右键点击。
2）、在js中使用window.document.oncontextmenu= function(){ return false;}
7、jQuery noConflict()
jQuery 使用符号作为 jQuery 的简写。如果其他javascript框架也使用这个简写怎么办？jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。可以使用全名代替,示例：

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行！");
  });
});

也可以创建自己的简写：

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行！");
  });
});

前端html页面和js编码的一些小技巧

猜你喜欢