js事件
- onclick单击事件:单击事件–鼠标左键点击一次
可以使用的元素:(按钮/div …)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function show(a){
// alert('点击');
alert(a);
}
</script>
<body>
<!-- onclick
步骤:
1)事件源:button
2)事件源添加事件:添加单机事件:οnclick=函数名()
3)事件处理结果:需要函数去处理
-->
<input type="button" value="按钮1" onclick="show(this.value)" />
<input type="button" value="按钮2" onclick="show(this.value)" />
</body>
</html>
- onchange事件:当内容标签发生变化的时候,产生的事件
可以使用的元素: select text textarea
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function show(a){
console.log(a)
}
</script>
<body>
<select onchange="show(this.value)">
<option value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</body>
</html>
- onfocus事件:当鼠标获取焦点的时候,产生的事件
文本框来说,当点击了文本框,产生了光标,就叫获得焦点 - onblur事件:当鼠标失去焦点时,产生的事件
- 获取标签对象
使用document对象:document.getElementById()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function show(){
var s1=document.getElementById("name").value;
var s2=document.getElementById("pwd").value;
console.log(s1+ " "+s2)
}
</script>
<body>
用户名:<input type="text" id="name" />
密 码:<input type="text" id="pwd" />
<input type="button" value="按钮1" onclick="show()" />
</body>
</html>
密码是否一致
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function show(){
var s1=document.getElementById("pwd1").value;
var s2=document.getElementById("pwd2").value;
// console.log(s1=="");
if(s1==""||s2==""){
document.write("密码不能为空");
}else if(s1==s2){
document.write("成功");
}else if(s1!=s2){
document.write("不一致");
}else{
document.write("其他错误");
}
}
</script>
<body>
密码1:<input type="text" id="pwd1" />
密码2:<input type="text" id="pwd2" />
<input type="button" value="按钮1" onclick="show()" />
</body>
</html>
BOM(broswer object model:浏览器对象模型)
研究的是window对象–他是浏览器窗口的顶级对象
当你一打开浏览器的时候,就自动创建出来了window对象。(内置)
在其下有多个子对象,常用如下图:
Windows对象的子对象:
- history:history对象包含用户(在浏览器窗口中)访问过的Url
- location:获取浏览器的地址栏信息
- document:文档对象
BOM之location对象:(重点)
window.location :获取浏览器的地址栏信息,使用地址栏的URL地址,进行网页面跳转。
属性href:跳转到某个地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function jump(){
location.href="http://www.baidu.com";
}
</script>
</head>
<body>
<input type="button" onclick="jump()" />
</body>
</html>
window.confirm()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="删除" onclick="del()" />
</body>
<script type="text/javascript">
function del(){
confirm("确定要删?");
//返回布尔类型的值
}
</script>
</html>
window.propmpt():让用户输入(参数1,提示内容,参数二,默认输入内容),返回值是输入的内容
window.open():打开一个新窗口
定时器: setlnterval
表示每隔多少毫秒(1=1000),执行一次函数。语法:
setInterva1(函数名,时间);l/setInterva1(show ,1000);
setInterva1(“函数名(”,时间);l /setInterva1(“showC”,1000);
停止定时器: clearlnterval
语法:
clearInterva1(定时器的返回估)
定时器: setTimeout
隔多少亳秒,执行唯一的一次函数。(只执行一次函数)用法跟setinterval是完全一样的
字符串转换为数字
DOM(Document object model)
只要是网页中的元素,都会被浏览器解析成一个个对象,这些对象叫做DOM
DOM的作用是什么?
对HTML元素进行查找、添加、移动、改变或移除。
HTML文档的每个节点都是对象,都具备属性、方法和事件
获取DOM对象(重点)
- 在document中,给我们提供了一系列的方法。
1.document.getElementByld();//根据id获取文档对象~一个单一对象(不是数组)
2.document.getElementsByClasmsName(“class属性名”";//根据class名称获取文档对象(数组形式)
3.document.getElementsByTagName"“标签名”";//根据标签名获取文档对象(数组形式)
4.document.getElementsByName(“Tname属性名”");//根据name属性获取文档对象(数组形式),有name属性的标签才能使用。
document对象的常用属性
- innerHTML:能够获取/设置标签的内容,内容也包含标签。
- innerText :能获取/设置标签的内容,内容不包含标签。
- outerHTML:获取当前标签的所有内容,包含当前标签