目录
JS获取设置元素
获取元素:
var obj=document.getElementById("id值");
获取元素的value属性
var val=document.getElementById("id值").value;
设置元素的value属性
document.getElementById("id值").value="sdfsdf";
获取元素的标签体
var ht=document.getElementById("id值").innerHTML;
设置元素的标签体
document.getElementById("id值").innerHTML="ssss";
JS修改样式
操作元素:
document.getElementById("")
操作css属性
document.getElementById("id").style.属性="值"
属性:就是css中属性 css属性有"-" 例如:backgroud-color
若有"-" 只需要将"-"删除,后面第一个字母变大写即可obj.style.backgroundColor="#ff0";
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> //点击按钮之后,给id为divid0的元素添加 边框 背景色 宽高 function btnCli(){ //1.获取元素 var obj=document.getElementById("divid0"); //alert(obj) //2.操作元素 //添加背景色 obj.style.backgroundColor="#ff0"; //添加边框 obj.style.border="1px solid red"; //添加宽和高 obj.style.width="100px"; obj.style.height="100px"; } </script> <body> <input type="button" value="将div加上样式" onclick="btnCli()"/> <div id="divid0"></div> </body> </html>
Window加载省略
window省略:
只要是window对象的属性和方法,可以把window省略
window.onload 等价于 onload
window.setInterval() 等价于 setInterval()<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> //window.onload == onload //window.setInterval()== setInterval() /*window.onload=function(){ alert(1) }*/ onload=function(){ alert(1) } </script> <body> </body> </html>
案例1-定时弹出广告
需求:
打开页面后4秒,展示广告,2秒之后,该广告隐藏.再停2秒,继续展示.
技术分析:
定时器
定时器(BOM-window对象)
setInterval(code,毫秒数):周期执行
setTimeout(code,毫秒数):延迟多长事件后 只执行一次.
清除定时器
clearInterval(id):
clearTimeout(id):步骤分析:
1.html页面,先把广告隐藏
2.页面加载成功事件 onload
3.编写函数定时器:
操作元素:
document.getElementById("")
操作css属性
document.getElementById("id").style.属性="值"
属性:就是css中属性 css属性有"-" 例如:backgroud-color
若有"-" 只需要将"-"删除,后面第一个字母变大写即可<body> <div id="ad" style="width:100%;display: none;"> <img src="../img/ad_.jpg" width="100%" /> </div> </body> <script> //记录次数 var i=0; //定时器id var timer; onload=function(){ //设置定时器 间隔4秒后展示图片 timer=setInterval(showAd,4000); } //展示广告方法 展示2秒之后隐藏 function showAd(){ //展示的次数加1 i++; //若i=3 清空由setinterval设置的定时器 if(i==3){ clearInterval(timer); } //1.获取广告 var divObj=document.getElementById("ad"); //2.修改广告的样式 将其显示 divObj.style.display="block"; //3.2秒之后隐藏 只执行一次 setTimeout(hideAd,2000); } //隐藏广告 function hideAd(){ //1.获取广告 var divObj=document.getElementById("ad"); //2.修改样式 将其隐藏 divObj.style.display="none"; } </script>
bom(浏览器对象模型)
所有的浏览器都有5个对象，主要使用3个
window:窗口
location:定位信息 (地址栏)
history:历史
window对象详解
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，
并为每个框架创建一个额外的 window 对象。
- 常用的属性:
通过window可以获取其他的四个对象
window.location 等价于 location
window.history 等价于 history
...
- 常用的方法
- 1 消息框
alert("...."):警告框
confirm("你确定要删除吗?"):确定框 返回值:boolean
prompt("请输入您的姓名"):输入框 返回值:你输入的内容<script> //alert("234"); //确认框 //var flag=confirm("你确定要删除吗?"); //alert(flag) //输入框 var res=prompt("请输入您的姓名"); alert(res); </script>
- 2 定时器
设置定时器
setInterval(code,毫秒数):周期执行
setTimeout(code,毫秒数):延迟多长事件后 只执行一次.
例如:
setInterval(showAd,4000);
serInterval("showAd()",4000);
清除定时器
clearInterval(id):
clearTimeout(id):
- 3 打开和关闭
open(url):打开
close():关闭<body> <input type="button" value="open" onclick="openA()"/> </body> <script> function openA(){ //打开a页面 open("a.html"); } </script><body> 我是a页面 <input type="button" value="close" onclick="close1()" /> </body> <script> function close1(){ close(); } </script>
location:定位信息
- 常用属性:
href:获取或者设置当前页面的url(定位信息)
location.href; 获取url
location.href="...";设置url 相当于 a标签<head> <meta charset="UTF-8"> <title></title> <script> //获取url //var u=window.location.href; //alert(u); //设置url function setUrl(){ location.href="../window/a.html"; } </script> </head> <body> <input type="button" value="设置url" onclick="setUrl()"> </body>
history:历史
back();后退
forward():向前
★go(int)
go(-1) 相当于 back()
go(1) 相当于 forward()<body> 我是a页面<br /> <a href="b.html">b.html</a><br> <input type="button" value="前进" onclick="forw()" /> </body> <script> //前进 function forw(){ history.go(1) } </script> <body> 我是b页面<br /> <input type="button" value="后退" onclick="goBack()"> </body> <script> function goBack(){ //history对象的go(-1) window.history.go(-1); } </script>
事件总结
常见的事件
焦点事件:★
onfocus
onblur<body> 用户名:<input name="" value="tom" onfocus="getFocus()" onblur="loseFocus()" id="username"/><br /> <span id="spanid"></span> </body> <script> //得到焦点 function getFocus(){ //获取元素 var user=document.getElementById("username"); //alert(user.value); //给span填写内容 文本框的内容 document.getElementById("spanid").innerHTML=user.value; } //失去焦点的时候将他的内容弹出来 function loseFocus(){ //获取元素 var user=document.getElementById("username"); alert(user.value); } </script>
表单事件:★
onsubmit
onchange 改变
页面加载事件:★
onload
- 鼠标事件(掌握)
onclick
- 鼠标事件(了解)
ondblclick:双击
onmousedown:按下
onmouserup:弹起
onmousemove:移动
onmouserover:悬停
onmouserout:移出
- 键盘事件(理解)
onkeydown:按下
onkeyup:弹起
onkeypress:按住
所有事件案列
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> #e02, #e022 { border: 1px solid #000000; height: 200px; width: 200px; } </style> <script type="text/javascript"> //页面卸载前 window.onbeforeunload = function(){ return "在玩一会吧？"; } // 页面加载事件：当整个html页面加载成功调用 window.onload = function(){ // 文本框事件 var e01 = document.getElementById("e01"); e01.onfocus = function(){ html("textMsg","文本框获得焦点：focus"); } e01.onblur = function(){ html("textMsg","文本框失去焦点：blur"); } e01.onkeydown = function(){ html("textMsg","键盘按下：keydown；"); } e01.onkeypress = function(event){ var event = event || window.event; append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；"); } e01.onkeyup = function(){ append("textMsg","键盘弹起：keyup；"); } // 鼠标事件 var e02 = document.getElementById("e02"); e02.onmouseover = function(){ html("divMsg","鼠标移上：mouseover"); } e02.onmouseout = function(){ html("divMsg","鼠标移出：mouseout"); } e02.onmousedown = function(){ html("divMsg","鼠标按下：mousedown"); } e02.onmouseup = function(){ html("divMsg","鼠标弹起：mouseup"); } var e022 = document.getElementById("e022"); e022.onmousemove = function(){ var event = event || window.event; html("divMsg2","鼠标移动：onmousemove"); }; // 按钮事件 var e03 = document.getElementById("e03"); e03.onclick = function () { html("buttonMsg","单击：click"); }; e03.ondblclick= function () { html("buttonMsg","双击：dblclick"); }; }; /** * 指定位置显示指定信息 * @param objId ，元素的id属性值 * @param text，需要显示文本信息 */ function html(objId,text){ document.getElementById(objId).innerHTML = text; } /** * 指定位置追加指定信息 * @param objId ，元素的id属性值 * @param text，需要显示文本信息 */ function append(objId,text){ document.getElementById(objId).innerHTML += text; } </script> </head> <body> <input id="e01" type="text" /><span id="textMsg"></span> <hr/> <div id="e02" ></div><span id="divMsg"></span> <hr/> <div id="e022" ></div><span id="divMsg2"></span> <hr/> <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> </body> </html>
扩展——this使用
在方法中(function()) this指代的是当前的元素(当前dom对象)
例如:
<input type="text" name="username" id="username" οnblur="loseFocus(this.value)">
方法:
function loseFocus(obj){
alert(obj);
}
案例2-表单校验plus
- 需求:
提示信息不用弹出框,将信息追加在文本框后面
- 技术分析:
确定事件 表单提交的时候 onsubmit
文本框失去焦点的时候 onblur
编写函数
获取元素document.getElementById("id值");
操作元素(获取元素的值,操作标签体,操作标签value属性)
username_msgObj.innerHTML
- 步骤分析:
1.表单
2.表单提交的时候 确定事件 onsubmit()
3.校验用户名和密码
4.获取用户名和密码的对象及值
5.判断内容,当为空的时候,获取响应的span元素
往span元素中显示错误信息<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> function checkForm(){ var flag = true; //1.获取用户名和密码里面输入的内容 var usernameValue=document.getElementById("username").value; var passwordValue=document.getElementById("password").value; //alert(usernameValue+"---"+passwordValue); //2.校验数据 if(usernameValue == null || usernameValue== ""){ //若为空 在span中添加错误信息 //a.获取span var username_msgObj=document.getElementById("username_msg"); //b.设置错误信息 //username_msgObj.innerHTML="用户名不能为空"; username_msgObj.innerHTML="<font color='red'>用户名不能为空</font>"; //将flag置为false; flag=false; }else{ //a.获取span var username_msgObj=document.getElementById("username_msg"); //b.设置错误信息 username_msgObj.innerHTML=""; } //3.校验密码 if(passwordValue == null || passwordValue== ""){ //若为空 在span中添加错误信息 //a.获取span var password_msgObj=document.getElementById("password_msg"); //b.设置错误信息 password_msgObj.innerHTML="密码不能为空"; password_msgObj.style.color="red"; //将flag置为false; flag=false; } return flag; } //方式1: /*function loseFocus(){ //1.获取input标签内容 var usernameValue=document.getElementById("username").value; //2,判断值 若不满足 给相应的span设置内容 if(usernameValue==""){ document.getElementById("username_msg").innerHTML="用户名不能为空"; }else{ document.getElementById("username_msg").innerHTML=""; } }*/ /*function loseFocus(obj){ alert(obj.value); }*/ function loseFocus(obj){ alert(obj); } </script> <body> <form action="#" method="get" onsubmit="return checkForm()"> <table width="60%" height="60%" align="center" bgcolor="#ffffff"> <tr> <td colspan="3">会员注册USER REGISTER</td> </tr> <tr> <td width="20%">用户名:</td> <td width="40%"><input type="text" name="username" id="username" onblur="loseFocus(this.value)"></td> <td width="40%"><span id="username_msg"></span></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="password" id="password"></td> <td><span id="password_msg"></span></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="repassword" id="repassword"></td> <td><span id="repassword_msg"></span></td> </tr> </table> </form> </body> </html>
了解阻止事件
- 有兼容性问题
- 阻止默认事件的发生
var event = event || window.event;
//阻止默认事件的发生
event.preventDefault();<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="https://www.baidu.com/" onclick="one()">1</a><br/> <a href="https://www.baidu.com/" onclick="two()">2</a><br/> <script type="text/javascript"> function one(){ alert("我之后，1网继续访问"); } function two(event){ alert("我之后，2网不再访问"); var event = event || window.event; //阻止默认事件的发生 event.preventDefault(); } </script> </body> </html>
- 阻止事件传播
var event = event || window.event;
//阻止传播
event.stopPropagation();<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="e1" style="width:200px ; height: 200px; background-color: #f00;"> <div id="e2" style="width:100px ; height: 100px; background-color: #0f0;"></div> </div> <hr /> <div id="e3" style="width:200px ; height: 200px; background-color: #f00;"> <div id="e4" style="width:100px ; height: 100px; background-color: #0f0;"></div> </div> <script type="text/javascript"> var e1 = document.getElementById("e1"); var e2 = document.getElementById("e2"); var e3 = document.getElementById("e3"); var e4 = document.getElementById("e4"); e1.onclick = function(){ alert("我是外边的div:儿子,我感受到你被点了."); } e2.onclick = function(){ alert("我是里面的div:我被点了,爹爹,你感觉咋样?"); } e3.onclick = function(){ alert("........."); } e4.onclick = function(event){ alert("我是里面的div:我又被点了,爹爹,你还能感觉到吗?"); var event = event || window.event; //阻止传播 event.stopPropagation(); } </script> </body> </html>
逻辑运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //alert( true || false);//true //alert(true||"abc")//true //alert(false||"abc") //alert(true&&false)//false //alert(true&&"abc") //alert(false&&"abc") alert(null&&"abc"); //将null转化为Boolean，为false，所以由null确定结果，值为null //alert(Boolean(null)) </script> </head> <body> </body> </html>
列表操作
获取元素:
document.getElementById("id"):通过id获取一个元素
document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)返回一个数组Array:
常用属性:
length:数组的长度
案例3-隔行换色
需求:
一个表格,隔一行换一个色
技术分析:
事件:onload
获取元素:dom操作步骤分析:
1.html表格一加载的时候 确定事件 onload
2.编写函数
a.获取元素(所有的tr元素)document.getElementsByTagName("tr");
b.操作(若当前行是偶数的话加一个样式,若是奇数的话,加另一个样式)
arr[i].style.backgroundColor="#FFFFCC";
<script> //页面加载成功 onload=function(){ //1.获取所有的tr var arr=document.getElementsByTagName("tr"); //alert(arr); //alert(arr.length); //2.判断奇偶数 添加不同的样式 遍历数组 for(var i=1;i<arr.length;i++){ if(i%2==0){ arr[i].style.backgroundColor="#FFFFCC"; }else{ arr[i].style.backgroundColor="#BCD68D"; } } } </script>
dom(文档对象模型)——节点操作
当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
- 节点(Node)
文档节点 document
元素节点 element
属性节点 attribute
文本节点 text
- 获取节点:
- 通过document可以获取其他节点:
常用方法:
document.getElementById("id值"):获取一个特定的元素
document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
- 设置获取获取节点的value属性
dom对象.value;获取
dom对象.value="";设置
- 设置或者获取节点的标签体
dom对象.innerHTML;获取
dom对象.innerHTML="";设置
- 获取或者设置style属性
dom对象.style.属性;获取
dom对象.style.属性="";设置
- 获取或者设置属性
dom对象.属性
案例4-全选或者全不选
步骤分析:
1.确定事件 最上面那个复选框的单击事件 onclick
- οnclick="selectAll(this)"
2.编写函数:让所有的复选框和最上面的复选框状态保持一致
a.获取最上面这个复选框选中状态 通过checkbox的checked属性即可
b.获取其他的复选框,设置他们的checked属性即可
可以通过以下两种方案获取元素
document.getElementsByClassName():需要给下面所有的复选框添加class属性
- document.getElementsByClassName("itemSelect")
document.getElementsByName():需要给下面所有的复选框添加name属性
<script> function selectAll(obj){ //获取当前复选框的选中状态 var flag=obj.checked; //获取所有的复选框 var arr=document.getElementsByClassName("itemSelect"); //遍历数组,将所有的复选框和flag相同 for(var i=0;i<arr.length;i++){ arr[i].checked=flag; } } </script> <tr> <th><input type="checkbox" onclick="selectAll(this)" ></th> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr>
html dom的操作
对于htmldom的操作若在js或者htmldom 查找不到 去查找xml dom
关于文档的操作 在 xml dom 的document中
关于元素的操作 在 xml dom 的element中
appendChild(dom对象):在一个元素下添加孩子
案例5-左右选中
- 技术分析:
1.确定事件,按钮的单击事件
2.编写函数:
点击移动单|多个的:
a.获取左边选中的选项 select对象.options--数组
遍历数组 判断是否选中 option对象.selected
b.将其追加到右边的下拉选中
rightSelect对象.appendChild(option);
点击移动所有的
a.获取左边的所有的选项
b.一个个的追加过去<script> onload = function() { //给单移按钮派发事件 document.getElementById("toRight1").onclick = function() { //获取左边所有的option var arr = document.getElementById("left").options; //alert(arr); //alert(arr.length); //遍历数组 判断是否选中 for (var i = 0; i < arr.length; i++) { //判断是否选中 若选中 则追加(移动)到右边的select中 if (arr[i].selected) { document.getElementById("right").appendChild(arr[i]); break; } } } //给多移动按钮派发事件 document.getElementById("toRight2").onclick = function() { //获取左边所有的option var arr = document.getElementById("left").options; //alert(arr); //alert(arr.length); //遍历数组 判断是否选中 for (var i = 0; i < arr.length; i++) { //判断是否选中 若选中 则追加(移动)到右边的select中 if (arr[i].selected) { document.getElementById("right").appendChild(arr[i]); //注意:长度变化 i--; } } } //给全部移动按钮派发事件 document.getElementById("toRight3").onclick = function() { //获取左边所有的option var arr = document.getElementById("left").options; //遍历数组 判断是否选中 for (var i = 0; i < arr.length;) { //相当于永远把第一个选项移动过去 document.getElementById("right").appendChild(arr[i]); //注意:长度变化 } } } </script>
<body> <table> <tr> <td> <select id="left" multiple="true" style="width:100px" size="10"> <option>環</option> <option>芈</option> <option>琅</option> <option>琊</option> <option>爨</option> <option>甄</option> <option>槑</option> <option>夔</option> </select> </td> <td> <input type="button" value=">" id="toRight1"><br> <input type="button" value=">>" id="toRight2"><br> <input type="button" value=">>>" id="toRight3"><br><br> <input type="button" value="<" id="toLeft1"><br> <input type="button" value="<<" id="toLeft2"><br> <input type="button" value="<<<" id="toLeft3"> </td> <td> <select id="right" multiple="true" style="width:100px" size="10"> </select> </td> </tr> </table> </body>
数组
- 语法:
new Array();//长度为0
new Array(size);//指定长度的
new Array(e1,e2..);//指定元素
非官方
var arr4=["aa","bb"];
- 常用属性:
length
- 注意:
数组是可变的
数组可以存放任意值
- 常用方法:(了解)
存放值:对内容的操作
pop():弹 最后一个
push():插入 到最后
shift():删除第一个
unshift():插入到首位
- 打印数组:
join(分隔符):将数组里的元素按照指定的分隔符打印
- 拼接数组:
concat():连接两个或更多的数组，并返回结果。
- 对结构的操作:
sort();排序
reverse();反转
案例6-省市联动
- 需求:
选中省的时候,动态的查询当前省下的所有市,然后展示在市的下拉选中
- 步骤分析:
1.省的下拉选 的选项中添加value属性 当成数组的索引
2.初始化市
3.选择省的时候,onchange事件
4.编写函数,
通过获取的索引获取对象的市的数组 this.value
遍历数组,将数组里面的每个值组装option 添加到select中即可籍贯: <select name="pro" onchange="selCity(this.value)"> <option >-请选择-</option> <option value="0">黑龙江</option> <option value="1">吉林</option> <option value="2">辽宁</option> <option value="3">河南</option> </select> <select name="city"> <option >-请选择-</option> </select> <br> <script> function selCity(index){ //alert(index); var cities=arr[index]; //获取市的下拉选 var citySelObj=document.getElementsByName("city")[0]; //先初始化 citySelObj.innerHTML="<option >-请选择-</option>"; //遍历数组 组装成option 追加到select for(var i=0;i<cities.length;i++){ citySelObj.innerHTML+=("<option>"+cities[i]+"</option>"); } } </script>
引用类型总结
原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
- Array:数组
- String:
语法:
new String(值|变量);//返回一个对象
String(值|变量);//返回原始类型<script> var s="aa"; var s1=new String(true); //alert(typeof s1); var s2 =String(false); //alert(typeof s2); //alert(s2.length); alert(s.length); </script>常用方法:
substring(start,end):[start,end) 包括 start 处的字符，但不包括 end 处的字符
substr(start,size):从索引为指定的值开始向后截取几个
charAt(index):返回在指定位置的字符。
indexOf(""):返回字符串所在索引
replace():替换
split():切割
常用属性:length
- Boolean:
语法:
new Boolean(值|变量);
Boolean(值|变量);
非0数字 非空字符串 非空对象 转成true<script> var f=new Boolean("");//非0数字 非空字符串 非空对象 转成true alert(f); </script>
- Number
语法:
new Number(值|变量);
Number(值|变量);注意:
null====>0
fale====>0 true====>1
字符串的数字=====>对应的数字
其他的NaN<script> var i=Number("2"); i=Number(null);//0 i=Number(false);//0 i=Number(true);//1 i=Number("false");//NaN not a number alert(i) </script>
- Date:
new Date();
常用方法:
toLocalString()
- RegExp:正则表达式
语法:
直接量语法 /正则表达式/参数
直接量语法 /正则表达式/
new RegExp("正则表达式")
new RegExp("正则表达式","参数")参数:
i:忽略大小写
g:全局常用方法:
test() :返回值为boolean
<script> var r1=/^[0-9]$/; var i=1; //alert(r1.test(i)); var r2=/^[a-z0-9_-]{3,16}$/ var s="12"; //alert(r2.test(s));//false s="123" alert(r2.test(s));//true </script>
- Math:
Math.常量|方法
Math.PI
Math.random() [0,1)
- 全局:
★
decodeURI() 解码某个编码的 URI。
encodeURI() 把字符串编码为 URI。Number():强制转换成数字
String():转成字符串
parseInt():尝试转换成整数
parseFloat():尝试转换成小数
eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
<script> var s="http://www.itheima.com/你好/ 1.html"; document.write(encodeURI(s)+"<hr/>") var s_="http://www.itheima.com/%E4%BD%A0%E5%A5%BD/%201.html"; document.write(decodeURI(s_)) var i="9.9"; //alert(parseInt(i));//9 //alert(parseFloat(i));//9.9 i="9.9超市" //alert(parseInt(i));//9 //alert(parseFloat(i));//9.9 i="你好9"; //alert(parseInt(i));//NaN //alert(parseFloat(i));//NaN s="alert('hello')"; eval(s); </script>
总结
- BOM(浏览器对象模型)
- window对象:窗口
注意:
若是window对象的属性和方法,调用的时候可以省略window
常用属性:
通过window可以获取其他的四个对象
window.location 等价于 location
常用方法:
消息框
alert() 警告框
confirm() 确认框 返回值:boolean
prompt() 输入框 返回值:输入的内容
定时器
设置
setInterval(code,毫秒数):循环
setTimeout(code,毫秒数):延迟 只执行一次
清除
clearInterval(id):
clearTimeout(id):
打开和关闭
open(url)
close()
- location对象:定位信息 地址栏
常用属性:
href:获取或者设置当前页面的url
location.href:获取
location.href="url":设置 相当于超链接
- history对象:操作历史
常用方法:
go()
- 事件:
焦点:★
onfocus:获取焦点
onblur:失去焦点
表单事件:★
onsubmit: form表单里的
onchange:改变(下拉选)
页面或者对象加载:★
onload:
鼠标:★
onclick:单击
键盘:
onkeyup:
- dom(★)
获取元素的方法(4个) document
操作元素的属性 dom对象.属性;
- 引用类型:
array
string
substring
全局:
编码2个
强制转化 Number String
尝试 parseXxx
eval() 解析字符串形式的js代码
Math random()
995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
