页面自动执行（加载）js的几种方法
一、JS方法
1.最简单的调用方式，直接写到html的body标签里面：
<bodyonload="myfunction()">
<html> <bodyonload="func1();func2();func3();"> </body> </html>
2.在JS语句调用：
<script type="text/javascript">
functionmyfun()
{ alert("this window.onload"); } /*用window.onload调用myfun()*/
window.onload = myfun;//不要括号
</script>
3。
<script type="text/javascript">
window.onload=function(){
func1();
func2();
func3(); }
</script>
二、JQ方法
1.整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM tree全部加载完成，而且要求所有的外部图片和资源全部加载完成。更不幸的是，如果外部资源，例如图片需要很长时间来加载，那么这个js方法执行感觉就比较慢了。也就是说这是一种最严谨的页面加载完再执行方法的方法。
1window.onload =function() { $("table tr:nth-child(even)").addClass("even"); //这个是jquery代码 };
2.仅只需要加载所有的DOM结构，在浏览器把所有的HTML放入DOM tree之前就执行方法。包括在加载外部图片和资源之前。
1$(document).ready(function() { $("table tr:nth-child(even)").addClass("even"); //任何需要执行的js特效 });
还有一种简写方式
1$(function() { $("table tr:nth-child(even)").addClass("even"); //任何需要执行的js特效 }
鼠标放上去小图显示大图
2013-03-11 14:37:55| 分类：
<html>
<head>
<title>test</title>
</head>
<body>
<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:300px;height:100px;border:5px solid #f4f4f4}
#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}
</style>
<div id="demo" style="overflow:hidden;width:351px;text-align:center;padding:10px">
<img src="1.jpg">
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
var ts = gg[i];
ts.onmousemove = function(event){
event = event || window.event;
ei.style.display = "block";
ei.innerHTML = '<img src="' + this.src + '" />';
ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function(){
ei.innerHTML = "";
ei.style.display = "none";
}
ts.onclick = function(){
window.open( this.src );
}
}
</script>
</body>
</html>
自己写的一个通用IE、FF居中的弹出框
function pupopen(pupoid,boxwidth){
document.getElementById(pupoid).style.display="block" ;
if(boxwidth != null){
document.getElementById(pupoid).style.width=boxwidth+"px";
}
var myhight = document.getElementById(pupoid).offsetHeight;
var mywidth = document.getElementById(pupoid).offsetWidth;
document.getElementById(pupoid).style.left = (document.documentElement.clientWidth-mywidth)/2+document.documentElement.scrollLeft+"px";
document.getElementById(pupoid).style.top = (document.documentElement.clientHeight-myhight)/2+document.documentElement.scrollTop+"px";
//alert(document.documentElement.clientWidth/2);
}
function pupclose(closeid){
document.getElementById(closeid).style.display="none" ;
}
IE和FF中js获取页面高度与宽度的对比
在做web前端开发的时候，我们经常要用JavaScript获取页面的高度和宽度，但在不同的浏览器下获取的方法又不一样，或者说方法一样，但因为IE和FF对web标准的不同实现，同样的方法两浏览器得到的是不同的高度或者宽度。下面就对IE和FF中js获取页面高度与宽度做下对比：
1、window.screen.width/.height： 显示器大小(IE和FF通用)1440 * 900 –> 和浏览器是否全屏无关
2、document.documentElement.clientHeight /clientWidth： 浏览器可视窗口大小(IE和FF通用)：该值不受样式表制约，只会随浏览器窗口大小变化。这和document.body.clientWidth 不一样。
3、document.body.clientHeight : 文档高度(IE和FF通用)：和上面一样，只是取值对象改为BODY，当BODY中无内容时，IE下为18，FF为0.当有内容时，则IE值=FF值，此值和BODY中的内容有关，是所有元素高度的总和
4、document.body.clientWidth : 文档宽度(IE和FF通用，FF会比IE取得值多2PX左右)：如IE 1440，FF：1442，此值和BODY中内容无关，但和样式有关，如在样式定义body{width:98px}，则此值为98，当浏览器大小改变时，如不是全屏，此值也会跟着变化。
3、document.documentElement.scrollLeft/scrollTop ：页面滚动后的左侧/顶端位置(IE和FF通用)。
4、document.documentElement.scrollHeight / scrollWidth : 获取对象的滚动高/宽度(IE和FF通用但有差别) IE/FF差别在于当body总高度小于浏览窗口可见区高度时，IE的scrollHeight值为body实际高度，而FF为浏览器可见区的高度。如果body高度大于浏览器可见区，则二者没什么差别。
5、document.documentElement.offsetHeight / offsetWidth : 获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的宽/高度.(和上面功能类似且IE/FF通用，但差别正好相反) offsetHeight是指浏览器可见区的高度，而offsetWidth是指浏览器宽度，差别在于当body总高度低于浏览窗口可见区高度时，IE的 offsetHeight值仍为浏览器可见区的高度,而FF为body实际高度。如果body高度大于浏览器可见区，则二者没什么差别。
注、document.body.offsetHeight 和 document.body.offsetWidth :这对和上面不同，对象为body，在FF/IE下的值都是body的高和宽。不受浏览器可视区影响。
另外，当CSS有对BODY的宽做限制时，这时如果页面有一个div的宽超过这个值，则IE的document.body.clientWidth和offsetWidth等于那个DIV的宽，但FF则仍然保留CSS中对body宽界定的值。
并且要注意的是：如果没有在CSS中对body定义了 body{margin:0px;width:1239px}，而这时有一个div的值超过了屏幕大小，比如1600px;那么在IE 中，document.body.offsetWidth/clientWidth或用document.documentElement等等都可以取到 body实际宽值为那个DIV的宽度，而FF则不论用什么，body值都是浏览器可视区的大小，不会按那个div的宽来计算。
这时要用document.documentElement.scrollWidth（不能用body）来做为文本的宽度测量。而浏览器的可视宽度测量用document.documentElement.clientWidth。如下：
function BrowserAndIEwidth() {
var str2=”
bodyWidth = document.documentElement.scrollWidth //这里不能用document.body.
BrowserWidth = document.documentElement.clientWidth
str1 = ‘ BODY的实际宽度 = ‘ +bodyWidth+’，浏览器可视宽度 = ‘+BrowserWidth
if (bodyWidth>BrowserWidth){
str2 = ‘body超过了浏览器的宽度！’
}
alert(str1+’\n’+str2);
}
//此函数在IE下当body内容未超范围时，并且用overflow=”auto”设置过后，取值会不准。
或者分开取值更好：如下函数即为取得当前页面的高度：
function(){
if (window.innerHeight && window.scrollMaxY) { //FF
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ //IE
yScroll = document.body.scrollHeight;
} else {yScroll = document.body.offsetHeight;}
return yScroll;
}
6、offsetLeft:获取对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置
7、offsetTop:获取对象相对于版面或由offsetTop 属性指定的父坐标的计算顶端位置
以下仅为IE或FF部分适用：
8、window.pageXOffset/pageYOffset: 页面滚动后的顶端位置(仅FF适用，建议用document.documentElement.scrollLeft/scrollTop)。
9、window.innerWidth /innerHeight: 浏览器可视区的大小,即不含浏览器菜单、工具栏(仅FF适用，建议用document.documentElement.clientHeight)，改变浏览器大小，此值也会改变
10、event.offsetY / .offsetX ：(仅IE适用)光标指针相对于发生事件的对象的左上角的位置，也就是把事件发生区的DIV或TABLE等元素左上角当做坐标的0，0开始计算。
11、event.clientX / .clientY ：(仅IE适用)与offsetX不同，clientX是从body窗口左上角开始计算。
12、在IE下的 event.x 等于FF中的event.pageX
13、window.scrollMaxX /window.scrollMaxY ：最大可滚动的值。仅FF可用。
应用举例：
1、当body的宽度没有受CSS样式表限制时，如没有规定body{width:863px}：则
document.body.clientWidth = document.documentElement.scrollWidth
反之当有限制时，则IE的document.documentElement.scrollWidth仍然等于document.body.clientWidth，但FF则document.documentElement.scrollWidth=浏览器窗口可视区
jquery学习笔记
//所有样式名为XX的容器隐藏
$(".样式名").hide();
//所有id名为XX的div下面所有样式名为XX的容器显现
$("div#id名字").find(".样式名").show();
//所有div下面的span的样式名为XX的全部删除XX这个样式
$("div").find("span").removeClass("样式名");
//所有id名为XX的div下面所有的span增加样式名为XX的样式
$("div#id名字").find("span").addClass("span_on");
jquery 判断表单为空
$(document).ready(function() {
$("form").submit(function(){
if ($("input[name='lang_type']").val() == ""){
alert("Problem can not be empty！");
$("input[name='lang_type']").focus();
return false;
}
if ($("input[name='todolist']").val() == ""){
alert("Answer can not be empty！");
$("input[name='todolist']").focus();
return false;
}
if ($("input[name='password']").val() == ""){
alert("New password can not be empty！");
$("input[name='password']").focus();
return false;
}
if ($("input[name='passwords']").val() == ""){
alert("Confirm password can not be empty！");
$("input[name='passwords']").focus();
return false;
}
if ($("input[name='password']").val() != $("input[name='passwords']").val()){
alert("The passwords you entered do not match. ");
$("input[name='passwords']").focus();
return false;
}
});
});
php+ajax的一个简单小例子
2012-06-09 22:19:58| 分类：
HTML部分：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<form action="" method="post">
<table border="1" width="100%">
<tr><td height="30">
邮箱是：
<input type="text" name="eMail" id="eMail" onKeyUp="valideMail();">
<span id="show"></span>
</td></tr>
</table>
</form>
</body>
</html>
实现的javascript部分：
<script language="javascript">
var xmlHttp;
function valideMail() {
var email = document.getElementById("eMail");
var url = "mail.php?email=" + email.value;
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.onreadystatechange = callBack;
xmlHttp.open('GET', url, true);
xmlHttp.send(null);
}
function callBack() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
document.getElementById("show").innerHTML = "show:" + xmlHttp.responseText;
}
}
}
</script>
返回值的PHP页mail.php
<?php
$email = $_GET["email"];
if ($email == "") {
$email = "rrrrrrrrrrrrrrrrrr !";
}
echo ($email);
exit(0);
?>
为了让页面在更改的时候保持刷新，可以在php中添加下面代码
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Pragma: no-cache" );
用Javascript删除HTML元素 .
2012-05-09 17:17:58| 分类：
var div = document.getElementById("DivId");
div.style.display = "none"; //隐藏而不删除
div.parentNode.removeChild(div); //删除
用removeChild方法，找到该元素的父对象,调用parentObject.removeChild方法。：
<div id="p"> 父对象元素
<div id="child" onclick="dele()">把这个垃圾删除!</div>
</div>
<script>
function dele(){
p.removeChild(child);
p.innerText="剩下"+p.innerText;
}
</script>
JS遇到的问题收集
// JScript 文件
//////////////////////////////
// //
// 获取url中的参数值 //
// //
// //
/////////////////////////
//获取url中的参数值function getUrlParam(url, param)
{
var re = new RegExp("(\\\?|&)" + param.toLowerCase() + "=([^&]+)(&|$)", "i");
var m = url.toLowerCase().match(re);
if (m)
return m[2].replace("#","");
else
return '';
}
//////////////////////////////
// //
// 通用隐藏 //
// //
// //
/////////////////////////
function showit(showid){
if (document.getElementById){
target=document.getElementById(showid);
if (target.style.display=="block"){
target.style.display="none";
} else {
target.style.display="block";
}
}
}
//////////////////////////////
// //
// 一个控制多个元素的方法 //
// //
// //
/////////////////////////
function menu(manageid)
{
var divId=document.getElementById("menu").getElementsByTagName("a");
for(i=0;i
divId.className="color3";
}
document.getElementById(manageid).className="menu_on";
}
///////////////////////////
// //
// 一个好用的全选 //
// //
// //
//////////////////////
function checkall(isCked)
{
var ck=document.getElementsByTagName("input");//意思是找到页面上所有 节点
for(var i=0 ;i
{
if(ck[i].type=="checkbox")
{
ck[i].checked=(isCked=="selectAll")? true :(!ck[i].checked);
//? : 的语法解释如果 (isCked=="selectAll") 是真就返回 : 之前的 "true" ，是假就返回 :之后的(!ck[i].checked)； ？ 与 ： 的用法其实是、if else 的简写（j#写法）this.Txt_Name.Text = (this.Txt_NO.Text=="SB")? "星星" : "月亮";(C#写法)
}
}
}
//全选checkall('selectAll')，取消全选checkall()
///////////////////////////
// //
// 控制框架的js //
// //
// //
//////////////////////
function closeleft(){
var menu=window.parent.document.getElementsByTagName("frameset")[1];
if(menu.cols=="20,*"){
menu.cols="200,*" ;
}
else{menu.cols="20,*" ;}
}
///////////////////////////
// //
// 写入预定的容器方法 //
// //
// //
//////////////////////
var sms1 = "内容";
document.getElementById(容器).innerHTML=sms1;
///////////////////////////
// //
// 取得div的高 //
// //
// //
//////////////////////
var hh = document.getElementById(id).offsetHeight;
document.getElementById(id).clientHeight
///////////////////////////
// //
// 一般连接方法 //
// //
// //
//////////////////////
返回指定页
response.write "" & chr(13)
response.write "alert('些类型还没有产品！');" & Chr(13)
response.write "window.document.location.href='News_Manage.asp';"&Chr(13)
response.write "" & Chr(13)
Response.End
返回上一页
Response.Write("alert(""错误：您没输入网站名称，请返回检查！！"");history.go(-1);")
<%do while not myrs.eof and not myrs.bof
tmp_str =tmp_str&myrs("Email")&","
myrs.movenext
loop %>
">
连接返回上一页
限定时间跳转
setTimeout("location.href='login.asp'",3000)
页面定时刷新
返回上一页并刷新
response.redirect Request.ServerVariables("HTTP_REFERER")
///////////////////////////
// //
// 检查用户名是否注册 //
// //
// //
//////////////////////
var xmlobj; //定义XMLHttpRequest对象
function CreateXMLHttpRequest()
{
if(window.XMLHttpRequest)
{//Mozilla浏览器
xmlobj=new XMLHttpRequest();
if(xmlobj.overrideMimeType)
{//设置MIME类别
xmlobj.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject)
{ //IE浏览器
try
{
xmlobj=new ActiveXObject("Msxml2.XMLHttp");
}
catch(e)
{
try
{
xmlobj=new ActiveXobject("Microsoft.XMLHttp");
}
catch(e)
{
}
}
}
}
function Validate() //主程序函数
{
CreateXMLHttpRequest(); //创建对象
var showurl = "register_check.php?username=" + document.getElementById ("myname").value; //构造URL
xmlobj.open("GET", showurl, true); //调用validate.php
xmlobj.onreadystatechange = StatHandler; //判断URL调用的状态值并处理
xmlobj.send(null); //设置为不发送给服务器任何数据
}
function StatHandler() { //用于处理状态的函数
if(xmlobj.readyState == 4 && xmlobj.status == 200) //如果URL成功访问，则输出网页
{
//document.getElementById("mynameSms").innerHTML=xmlobj.responseText ;//替换，即输出结果。
var txt = document.getElementById("myname").value;
if (txt.length > 20) {
document.getElementById("mynameSms").style.display = "inline-block";
document.getElementById("mynameSms").innerHTML=sms1;
}
else {
document.getElementById("mynameSms").style.display = "inline-block";
document.getElementById("mynameSms").innerHTML=sms1;
}
}
}
//检查用户名是否注册 end/////////////////////////////////////
///////////////////////////
// //
// 定时触动事件 //
// //
// //
//////////////////////
function dochg(){
document.getElementById("testId").value = "test"
}
setTimeout("dochg()",1000)
///////////////////////////
// //
// 判断IE或者是其它 //
// //
// //
//////////////////////
if($.browser.msie) // IE浏览器
onpropertychange文本值改变时触动
网友评论