JavaScript使用注意事项

2023-07-22 22:56:04

1、jQuery和JS中页面加载完后执行方法的写法

（1）在javascript中用来执行页面加载中的操作时候，我们会使用

window.onload=function(){}

 window.onload=函数名；

也可以在body中调用onload事件调用方法。

<body onload="函数名">

在一个页面写多个只会执行最后一个onload。

（2）在jQuery中也有相同作用的代码，代码如下:

$(function(){});

jQuery(function(){});

$(document).ready(function(){});

jQuery(document).ready(function(){});

(document)意思是说，获取整个网页文档对象（类似的于window.document）。$(document).ready意思就是说，获取文档对象就绪的时候。

以上四个代码执行同一个动作，但是当与其他js程序库一起使用的时候，特别是prototype.js同时使用时，不能使用$方法，因为他们也有该方法，可以用如下方法回避这种冲突：

jQuery(function($){});

他们都是当DOM加载完后执行的操作，所以放在HTML的任何位置都可以。

2、JS和jQuery获取各种屏幕的宽度和高度

JavaScript:

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的上方： document.body.scrollTop
网页被卷去的左边： document.body.scrollLeft
网页正文部分上方： window.screenTop
网页正文部分左边： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

jQuery:

获取浏览器当前窗口可视区域高度： $(window).height();
获取浏览器当前窗口可视区域宽度：$(window).width();
获取浏览器当前窗口文档的高度：$(document).height();
获取浏览器当前窗口文档的宽度：$(document).width();
获取滚动条到顶部的垂直高度：$(document).scrollTop();
获取滚动条到左边的垂直宽度：$(document).scrollLeft();
获取浏览器当前窗口文档body的高度：$(document.body).height();
获取浏览器当前窗口文档body的宽度：$(document.body).width();
获取浏览器当前窗口文档body的总高度，包括border padding margin：$(document.body).outerHeight(true);
获取浏览器当前窗口文档body的总宽度，包括border padding margin：$(document.body).outerWidth(true);

3、jQuery对象和JS(DOM)对象的互相转换

jQuery对象转成DOM对象：

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

var JObject = $("#ID"); //jQuery对象

var Object = JObject[0]; //DOM对象

(2)jQuery本身提供，通过 .get(index)方法，得到相应的DOM对象。

var JObject = $("#ID"); //jQuery对象

var Object = JObject.get(0); //DOM对象

DOM对象转成jQuery对象：

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)。

var Object = document.getElementById("ID"); //DOM对象

var JObject = $(Object); //jQuery对象

转换后，就可以任意使用jQuery的方法了。

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

4、document.all

（1）document.all是页面内所有元素的一个集合。例如:document.all(0)表示页面内第一个元素

（2）document.all可以判断浏览器是否是IE

if(document.all){

    alert("is IE!");

}

（3）也可以通过给某个元素设置id属性（id=abc），然后用document.all.abc调用该元素。

5、request.getHeader();

request.getHeader，简单的说就是获取请求的头部信息，根据http协议，它能获取到用户访问链接的信息，以下是我们常用的：

（1）request.getHeader("referer")获取来访者地址。只有通过链接访问当前页的时候，才能获取上一页的地址；否则request.getHeader("referer")的值为null。当你在地址栏输入一个地址时，它的引用是null，相当于你第一次打开浏览器一样。通过window.open打开当前页或者直接输入地址，也为null。

request.getHeader("referer")，它主要是用于获取链接的上一个引用。比如，从a.jsp跳转到b.jsp，那在b.jsp中获取到的引用就是a.jsp，如果手动刷新b.jsp，获取到的引用仍然是a.jsp，刷新的时候，会检查服务端是否会有更新，没有的话，则使用本机的缓存，也就是说，你刷新时得到的响应依然是前一次得到的服务端的内容，因为你的jsp文件没有变化。

（2）request.getHeader("host")获取请求服务器的主机，如你的http://localhost：8080/bbs/index.jsp。获取到的就是localhost:8080

可以使用以下代码对登录进行安全控制，只有在添加了指定头部信息的浏览器才能成功登录。

var tt= '<%=request.getHeader("sdfsssssssag") %>';

function denglu(){

　　if(tt==null||tt==''||tt=='null'){

　　　　alert("sorry!不支持登录系统！请联系技术。");

　　　　return false;

　　}

}

6、浏览器的ajax

Ajax请求是马上发起(如Chrome)还是在当前执行栈空了以后再发起(如Firefox)都可以，是浏览器自己如何实现的问题。

但是真正符合异步过程精神的应该是Chrome那样的(即Ajax线程不应该被主线程阻塞)。Firefox的实现很奇怪！

Flex上传文件在火狐与谷歌中的不同表现：session

参考文章：http://blog.csdn.net/ycpanda/article/details/40148059

Firefox中，FileReference使用的URLRequest和Flash所在页面用的不同的session。

码农公寓