js小结

最新推荐文章于 2023-01-28 21:59:57 发布

haining711

最新推荐文章于 2023-01-28 21:59:57 发布

阅读量506

点赞数

本文链接：https://blog.youkuaiyun.com/haining711/article/details/17096343

版权

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语句
}
参数列表包括有参和无参，多个参数用逗号隔开！注意形参和实参！

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

获取数据
document.表单名.表单元素名.value; 通过表单
document.getElementById("id").value; 通过id
提交表单
提交按钮：<input type="submit">
图片代替按钮：<img src="" οnclick="函数名()">
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>

对联广告

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");跳转页面替换当前页面