关闭

js小结

322人阅读 评论(0) 收藏 举报
javascript是一种脚本语言!用于动态页面(html用于制作静态页面)


1.javascript基本结构:
<script language="javascript">  javascript语句 </script>


2.声明变量(var)
var 变量名=值;    或     var 变量名1,变量名2…… = 值;
如:var count=10;        var x,y,z=10;
注意:变量名命名规范:不能用关键字;不能以数字开头;除_  $以外不能用其他特殊符号


3.页面输出:document.write("内容");


4.注释:单行//   多行/* */
5.类型转换:
           parseInt();转换为int型
  parseFloat();转换为浮点型
  无法转换返回NaN(Not a Number)--非数字
6.函数
定义函数
function 函数名(参数列表){
  javascript语句
}
参数列表包括有参和无参,多个参数用逗号隔开!注意形参和实参!


调用函数 
onclick="函数名(参数列表)"           鼠标单击时调用函数(按钮)
onchange="函数名(参数列表)"          发生改变时调用函数(下拉列表),文本框内容被改变时
onMouseover="函数名(参数列表)"       鼠标移上时调用函数
onMouseout="函数名(参数列表)"        鼠标移下时调用函数
onLoad="函数名(参数列表)"            页面自动加载事件
<a href="javascript:函数名(参数列表)"> 超链接内容 </a>
onscroll="函数名"                    当用户拖动滚动条位置时触发函数
onsubmit="return 函数名()"           根据返回的真假来决定是否提交表单数据 
onfocus="函数名()"                   光标进入某个文本框
onblur="函数名()"                    光标离开文本框是触发
onMousemove="函数名()"               鼠标移动时触发        
onkeydown="函数名()"                 按下键盘任意键时触发函数


    
获取数据
document.表单名.表单元素名.value;         通过表单
document.getElementById("id").value;      通过id
提交表单
提交按钮:<input type="submit">
图片代替按钮:<img src="" onclick="函数名()">
             document.form表单name.submit();

层的显示和隐藏
<div id="id">内容</div>
document.getElementById("id").style.display="none";隐藏
document.getElementById("id").style.display="block";显示
document.getElementById("id").style.display="inline";同一行显示

回车切换输入
event.keyCode==13  回车键      event.keyCode==9  tab键
document.onKeyDown=函数名;

表单验证
var aa=new String("abc");
字符串对象.属性()            ---aa.length
字符串对象.方法名()          ---aa.charAt()/substring()/indexOf()/toLowerCase()/toUpperCase()  

文本框对象
document.form.email.focus();  获得焦点 鼠标光标回到文本框
document.form.email.select(); 选择文本框中文本内容并高亮显示

for in----循环
数组名.sort()排序
for(var i in 数组名){}

省市级联
<script language="javascript">   
function changCity(){
 var arr=new Array();
 arr["北京"]=["北京市","张家口市"];
 arr["上海"]=["上海市","唐山市"];
 arr["天津"]=["天津市","无锡市"];  
 var index=document.getElementById("pro").value;  
 document.getElementById("city").options.length=0;
 
 for(var i in arr[index]){ 
 var option1=new Option(arr[index][i],arr[index][i]);
 document.getElementById("city").options.add(option1);
}
 }  
 
 function changCityi(){
 var arr=new Array();
 arr["北京市"]=["东城区","西城区"];
 arr["上海市"]=["黄浦区","卢湾区"];
 arr["天津市"]=["渝中区","江北区"];
 arr["张家口市"]=["宣化区","下花园区"];
 arr["唐山市"]=["丰润区","丰南区"];
 arr["无锡市"]=["宝山区","松江区"];
 
 var index=document.getElementById("city").value;  
 document.getElementById("x").options.length=1;
 
 for(var i in arr[index]){ 
 var option1=new Option(arr[index][i],arr[index][i]);
 document.getElementById("x").options.add(option1);
  }
}
</script>

<select id="pro" name="pro" onChange="changCity()">
 <option value="">请选择省</option>
 <option value="北京">北京</option>
 <option value="上海">上海</option>
 <option value="天津">天津</option>
</select>

 
 <select name="city" id="city" onChange="changCityi()">
  <option value="">请选择市</option>
</select>
区 
<select name="city" id="x">
  <option value="">请选择区</option>

</select>


                对联广告

<script type="text/javascript">
var imgTop;
var closeTop;
var imgTop2;
var closeTop2;
function info(){
var img=document.getElementById("img");
var closeImg=document.getElementById("closeImg");
var img2=document.getElementById("img2");
var closeImg2=document.getElementById("closeImg2");


if(img.currentStyle){
imgTop=parseInt(img.currentStyle.top);
closeTop=parseInt(closeImg.currentStyle.top);
imgTop2=parseInt(img2.currentStyle.top);
closeTop2=parseInt(closeImg2.currentStyle.top); 
}else{
 imgTop=parseInt(document.defaultView.getComputedStyle(img,null).top);
 closeTop=parseInt(document.defaultView.getComputedStyle(closeImg,null).top);
 imgTop2=parseInt(document.defaultView.getComputedStyle(img2,null).top);
 closeTop2=parseInt(document.defaultView.getComputedStyle(closeImg2,null).top)
}
}
  function move(){
      document.getElementById("img").style.top=imgTop+parseInt(document.documentElement.scrollTop)+"px";
 document.getElementById("closeImg").style.top=closeTop+parseInt(document.documentElement.scrollTop)+"px";
 document.getElementById("img2").style.top=imgTop2+parseInt(document.documentElement.scrollTop)+"px";
 document.getElementById("closeImg2").style.top=closeTop2+parseInt(document.documentElement.scrollTop)+"px";
  }
  function closeImgg(){
  document.getElementById("img").style.display="none";
  document.getElementById("closeImg").style.display="none";


   }
   function closeImgg2(){
  document.getElementById("img2").style.display="none";
  document.getElementById("closeImg2").style.display="none";
   }
  window.onscroll=move;
</script>
</head>


<body onload="info()">
<div id="img"><img src="images/lady_0007.jpg" width="400" height="258"/></div>
<div id="closeImg"><img src="images/close.gif" width="124" height="20" onclick="closeImgg()" /></div>
<div id="img2"><img src="images/lady_0007.jpg" width="400" height="258"/></div>
<div id="closeImg2"><img src="images/close.gif" width="124" height="20" onclick="closeImgg2()" /></div>
<img src="images/top.jpg" width="985" height="492" />
<img src="images/content1.jpg" width="1001" height="524" />
<img src="images/content2.jpg" width="998" height="535" />
<img src="images/foot.jpg" width="1000" height="523" />
</body>
</html>




7.Dom--为html文档对象提供一套属性 方法和事件
document.getElementById("id").innerHTMl="新内容"  通过id改变html内容
document.getElementById("id").href="网址"  通过id改变html内容网址
document.getElementById("id").style.color="网址"  通过id改变html内容样式如颜色
document.getElementById("id").src="图片路径"  通过id改变html内容的图片


8.window常用属性和方法
window窗口对象是所有页面内容的根对象,所以常常省略!
属性:status改变浏览器状态栏信息     screen屏幕和显示性能信息  
      history历史记录                location当前url信息
 document浏览器窗口的文档
方法:alert("提示信息")    显示一个带有确定按钮和提示信息的对话框
      confirm("提示信息")  显示一个带有确定和取消按钮和提示信息的对话框
 open("打开窗口的url","窗口名","窗口特征")  或  open("打开窗口的url")
 showModalDialog("打开窗口的url","窗口名","窗口特征") 或 
 showModalDialog("打开窗口的url")--showModalDialog()打开的是模式窗口
 close()  或 close("html页面")---- 关闭窗口 
 注意open 和 showModalDialog()的窗口特征共8个(……………………………………)


9.Date对象
语法:var 日期对象=new Date();
var dd=new Date();                          当前系统日期和时间
var dd=new Date("july 20,2008,10:30:00");   括号写死的日期和时间

获取年月日时分秒:
日期对象.getFullYear()------四位数的年
日期对象.getMonth()------月(0-11)
日期对象.getDate()------日(1-31)
日期对象.getHours()------时(0-23)
日期对象.getMinutes()------分(0-59)
日期对象.getSeconds()------秒(0-59)
日期对象.getDay()------星期几(0-6)星期日返回0


10.setTimeout()方法表示每隔多长时间调用某个函数
  语法:setTimeout("函数名()",毫秒数)  1000毫秒=1秒
11.history对象
方法:相当于浏览器的前进与后退,在有历史记录的情况下才能使用这些方法
      history.back()后退  
      history.forward()前进
 history.go(url或数字)   +数字表示前进     -数字表示后退 
12.location对象
属性:
location.href 返回完整的url 
方法:
location.reload();刷新页面
location.assign("url");跳转新页面
location.replace("url");跳转页面替换当前页面
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:22605次
    • 积分:547
    • 等级:
    • 排名:千里之外
    • 原创:32篇
    • 转载:4篇
    • 译文:0篇
    • 评论:1条
    最新评论