JS旧笔记

页面自动执行（加载）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文本值改变时触动

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,236评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,867评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,715评论 0赞 340
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,899评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,895评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,733评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,085评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,722评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,025评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,447评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,057评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2赞 343

推荐阅读更多精彩内容

  • JS笔记
    什么是JavaScript？ 1. JavaScript 是一种客户端脚本语言（脚本语言是一种轻量级的编程语言）。...
    ximoos阅读 425评论 0赞 6
  • js 原生基础（笔记汇总）
    事件：用户的操作，行为(js) 结构(html) 样式(css) 三者分离！ 一、获取元素： 1. documen...
    Carol_笑一笑阅读 621评论 0赞 1
  • js浏览器兼容手册
    js 部分 document.form.item 问题代码中存在 document.formName.item("...
    Volcaner阅读 564评论 1赞 1
  • js笔记
    用法 JS内部引用 引用JS外部文件 注意: javascript作为一种脚本语言可以放在html页面中任何位置，...
    jovelin阅读 668评论 0赞 1
  • js基础总结一
    w一：rem布局公式 document.documentElement.style.fontSize=20*doc...
    stars甜阅读 773评论 0赞 1