JavaScript
JavaScript通过BOM和DOM对象与页面元素进行交互
BOM对象(Browser Object Model):指浏览器对象模型，它可以与浏览器进行交互
DOM对象(Document Object Model):指文档对象模型，它可以访问HTML文档的所有元素。
BOM对象
BOM里常用对象window、document、location、screen、history、navigator
window对象
是BOM中所有对象的核心
所有浏览器都支持 window 对象。它表示浏览器窗口
window对象是客户端JavaScript最高层对象之一
方法:
window.open();打开一个新窗口
window.close();关闭浏览器窗口
window.parent 获取当前窗口对象的父窗口对象,是一个window对象
window.parent.document:通过window对象获取document对象
在调用window对象的方法和属性时，可以省略window对象的引用
弹出框
alert("这是一个弹出框!") 用户必须点击确定才能继续操作
确认框
confirm("确认删除吗?") 点击确定返回true,点击取消返回false
提示框
prompt("请输入名字","例如张三") 输入一个值,再点击确定获取取消才能继续操作
弹出框都会阻塞当前页面的加载
计时相关函数
var t = setTimeout("js语句",毫秒值); 延时多少毫秒值执行js代码,仅执行一次
参数1——字符串类型的js代码
参数2——毫秒值
clearTimeout(t) 清除计时设置
var t = setInterval("js语句",毫秒值); 间隔多少毫秒值循环执行js代码
clearInterval(t); 清除计时设置
<head>
<title>用window对象开启新窗口</title>
<script type="text/javascript">
function openBaidu(){
//window.open("http://www.baidu.com","_blank");
//"_blank"可以省略，默认开启新窗口
window.open("http://www.baidu.com",);
}
</script>
</head>
<body>
<input type="button" value="百度" onclick="openBaidu();"/>
</body>
window的子对象
navigator对象:浏览器对象，包含了浏览器相关信息
navigator.userAgent 获取浏览器客户端信息
history对象:浏览器的历史对象
history.forward() //下一个历史页面
history.back() // 上一个历史页面
history.go(1) //下一个历史页面
history.go(0) //刷新当前页面
history.go(-1) // 上一个历史页面
location对象:包含当前的URL信息
location.href 获取当前URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
screen对象:
screen.availWidth 可用的屏幕宽度
screen.availHeight 可用的屏幕高度
JavaScript可以通过DOM动态创建HTML元素,改变标签属性,设置CSS样式,绑定事件等等
<!--首页点击登录后——登录页面(省略)——登录成功——返回首页,改变登录为退出
点击退出后,退出改为登录
首页.html-->
<body>
<span>首页</span>
<a href="login.html" onclick="func()" id="login">登录</a>
<script type="text/javascript">
window.onload=function(){ //页面加载完成后执行的事件
var url = location.href;//获取当前跳转的地址
if(url.lastIndexOf("?") != -1){//获取跳转参数
var param = url.substring(url.lastIndexOf("?") + 1, url.length);
//解析跳转参数
var i = param.split("=")[1]; //分离参数
if (i == 1){
document.getElementById("login").innerText = "退出";
//修改文本值
document.getElementById("login").href = "首页.html";
//修改跳转地址
}
}
}
</script>
</body>
<!--登录成功后,延时5秒跳转首页,并携带跳转参数-->
<body>
<div style="color: red;">登录成功!</div>
<div><font id="f1" style="color: red">5</font>秒后跳转首页</div>
<script type="text/javascript">
var f = document.getElementById("f1");//获取数字显示的对象
var times = 5;//定时5秒
var t = undefined;//定时器对象
function func(){//定时执行的方式
times -= 1;//减少时间秒数
if (times < 0){
clearInterval(t);//时间到了就取消定时操作
location.href ="首页.html?flag=1";//跳转首页
}else{
f.innerText = times ;//将减少的时间赋值给对象
}
}
t = setInterval("func()",1000);
//每隔1000毫秒执行一次func(),返回一个定时器id
</script>
</body>
DOM对象
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素
document对象:文档节点对象,代表整个HTML文档
element 对象:代表一个元素（标签）
text对象:代表元素（标签）中的文本
attribute对象:代表元素（标签）对象的一个属性，元素（标签）才有属性
Document对象
文档节点对象,代表整个HTML文档
一般都是通过document的方法来获取elementx对象
常用的查找标签的方法(获取element元素节点对象):
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
间接查找element元素节点对象
document.parentElement 父节点标签元素
document.children 所有子标签
document.firstElementChild 第一个子标签元素
document.lastElementChild 最后一个子标签元素
document.nextElementSibling 下一个兄弟标签元素
document.previousElementSibling 上一个兄弟标签元素
全选与取消全选按钮
<title>全选按钮</title>
<script type="text/javascript">
function checkAll(){
//获取全选按钮的元素节点对象
var table = document.getElementById("head");
if(table.checked){//获取全选按钮的状态(选中)
//获取所有子按钮对象
var c = document.getElementsByName("checks");
for(var i=0; i<c.length ; i++){
c[i].checked = true;//将子按钮对象的状态设为与全选按钮一致
}
}else{//全选按钮的状态(非选中)
var c = document.getElementsByName("checks");
for(var i=0; i<c.length ; i++){
c[i].checked = false;
}
}
}
</script>
</head>
<body>
<table border="1px" id="table" width="500px" height="50px" align="center">
<thead>
<tr>
<th><input id="head" type="checkbox" onclick="checkAll()"/></th>
<!-- 为全选按钮绑定一个单击事件 -->
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr id="tr1" >
<td><input type="checkbox" name="checks"/></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr id="tr2" >
<td><input type="checkbox" name="checks"/></td>
<td>2</td>
<td>李四</td>
<td>23</td>
</tr>
<tr id="tr3" >
<td><input type="checkbox" name="checks"/></td>
<td>3</td>
<td>王五</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
Element对象
代表一个HTML文档的元素对象
创建element元素节点对象:
var newNode = document.createElement("标签名");
添加element元素节点对象:
节点对象.appendChild(新节点对象)；作为子节点添加到最后
指定添加新节点的位置
节点对象.insertBefore(新节点对象,某个子节点);添加在某个子节点的前面
删除element子节点
节点对象.removeChild(要删除的节点对象)
通过element对象获取文本text对象
element对象.innerText
通过element对象修改文本text对象
element对象.innerText = "哈哈哈"
获取element节点对象的属性
element对象.getAttribute("属性名")
设置element节点对象的属性
element对象.setAttribute("属性名","属性值")
删除element节点对象的属性
element对象.removeAttribute("属性名")
获取element节点对象的代码(包括标签+文本值)
element对象.innerHTML
设置element节点对象的代码(包括标签+文本值)
element对象.innerHTML= "<a href='...'>百度 </a>"
设置的HTML值会当做HTML代码解释并执行
select标签的二级联动——标签的添加与修改
<title>js二级联动</title>
<script type="text/javascript">
//二维数组存储省份与城市
var c = new Array(4);
c[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
c[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
c[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
c[3] = new Array("郑州市","洛阳市","开封市","安阳市");
function change(i){//方法参数是当前一级标签的value值
//获取二级下拉列表对应的element对象
var sel = document.getElementById("s");
//清空二级列表 , s.options获取下拉列表子标签option组成的集合
sel.options.length=1;
//遍历二维数组
for(var x=0; x<c.length ;x++){
if(i == x){//当前一级标签的value值等于下标时,取出当前下标对应的二维数组的值
for(var y=0; y<c[x].length;y++){
//创建文本节点
var text = document.createTextNode(c[x][y]);
//alert(c[x][y]);
//创建option元素节点
var newOption = document.createElement("option");
//将文本节点添加到新的option元素节点中
newOption.appendChild(text);
//将新的option元素节点添加到ul节点上
sel.appendChild(newOption);
}
}
}
}
</script>
</head>
<body>
籍贯
<select onchange="change(this.value)">
<!-- change(this.value)是一个内容改变时就会被调用的事件
this.value是当前下拉框的value值(0/1/2/3) -->
<option selected="selected">--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="s">
<option >--请选择--</option>
</select>
</body>
element元素对象对于class属性的操作
className 获取类属性的名称(字符串)
classList.remove(cls) 删除指定类属性值
classList.add(cls) 添加类属性值
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
标签文本与属性的设置
<!--通过绑定一个单击事件来完成div标签颜色与文本的切换-->
<head>
<meta charset="UTF-8">
<title>class相关操作</title>
<style>
.c1 {
height: 200px;
width: 200px;
border-radius: 50%;/* 样式为圆形 */
background-color: red;/* 背景色为红色 */
}
.c2 {
background-color: gray;/* 背景色为灰色 */
}
</style>
</head>
<body>
<div class="c1 c2 " onclick="change(this);">变红球</div>
<!-- 绑定一个单击事件,传入this表示当前标签对象作为参数,那就不需要document.getElementById()来获取标签对象了 -->
<script>
function change(ths) {
ths.classList.toggle("c2");
//存在c2属性值就删除，否则添加c2属性值
if(ths.classList.contains("c2")){//查看是否存在c2属性值
ths.innerText = "变红球";//修改文本值
}else{
ths.innerText = "变灰球 "; //修改文本值
}
}
</script>
</body>
设置css样式
element节点对象.style.样式值
<body>
<div onclick="change(this);">这是一个会变色div标签</div>
<script>
function change(ths) {
ths.classList.toggle("c");
if(ths.classList.contains("c")){
ths.style.color = "red";
}else{
ths.style.color = "blue";
}
}
</script>
</body>
绑定事件
js能够提供各种丰富的事件使得代码更加简洁
常用的事件句柄
onblur 元素失去鼠标焦点时触发的事件,适合文本框的校验
onfocus 元素获得鼠标焦点时触发的事件,适合文本框的设置
onchange 元素内容改变时触发的事件,适合下拉列表的联动
onclick 鼠标点击某个元素对象时触发的事件,适合按钮的点击
ondblclick 鼠标双击某个对象时触发的事件
onkeydown 某个键盘的键被按下时触发的事件
onkeyup 某个键盘的键被松开时触发的事件
onload 某个页面或图像被完成加载时触发的事件
onsubmit 提交按钮被点击时触发的事件
onmousemove 鼠标经过事件
onmouseout 鼠标移开事件
更多的事件可以查看https://www.w3school.com.cn/jsref/jsref_events.asp
事件的绑定方式一:直接在标签中使用事件句柄作为属性,值为函数
<input type="button" onclick="func()"> 为按钮绑定单击事件,具体代码在script标签中编写
事件的绑定方式二:直接在script标签中使用对象来绑定事件
<input type="button" id="d1">
<script type="text/javascript">
document.getElementById("d1").onclick=function(){
alert("单击显示");
}
</script>
用户名验证——焦点失去与焦点获取事件
<head>
<title>完整的验证</title>
<meta content="text/html;charset=utf-8"/>
<script type="text/javascript">
/* 1.用户名不能为空
2.用户名长度
*/
//去除前后空白的方法
String.prototype.trim = function(){//为字符串类型绑定一个方法trim()
return this.replace(/^\s+/,"").replace(/\s+$/,"");
//^表示匹配开头 \s表示空白字符 +表示量词1次或者n次
//^\s+ 将开头任意长度的空白字符替换为空
//\s+$ 将结尾任意长度的空白字符替换为空
}
function checkName(user){//失去焦点事件
var value = user.value;//获取文本框的值
var username = value.trim();//去除前后空格
var errorname = document.getElementById("Error");//获取错误信息提示的标签
if(username == ""){
errorname.innerText = "用户名不能为空"
user.setAttribute("placeholder","请输入用户名");//失去焦点后添加提示信息
}else if(username.length < 6||username.length > 14){
errorname.innerText = "用户名长度必须在6-14之间"
}else{
errorname.innerHTML ="";
}
}
function kong(user){//获取焦点事件
var errorname = document.getElementById("Error");
user.removeAttribute("placeholder");//获取焦点后提示信息置为空
errorname.innerHTML ="";//获取焦点后错误信息置为空
}
</script>
</head>
<body>
用户名<input type="text" name="username" placeholder="请输入用户名" onblur="checkName(this);" onfocus="kong(this);"/>
<!-- onblur是失去焦点事件,失去鼠标焦点时将当前标签对象作为参数传递,判断用户名是否正确
onfocus是获取焦点事件,获取焦点将错误信息置为空
placeholder属性是文本框的提示信息
-->
<font color='red'><span id="Error"><span></font><br/>
<input type="submit" value="注册"/>
</body>
网页时钟——资源加载事件
<!--网页时钟——资源加载完成后触发的事件onload-->
<head>
<title>网页时钟</title>
<meta content="text/html;charset=utf-8"/>
<script type="text/javascript">
function dispalyTime(){
//获取div标签对象
var d = document.getElementById("time");
//获取系统当前时间
var nowtTime = new Date();
//将系统时间装换为本地语言时间
var time = nowtTime.toLocaleString();
d.innerText = time;//将事件显示到div上
}
function start(){
//设置间隔1000毫秒后循环调用函数
window.setInterval("dispalyTime()",1000);
}
</script>
</head>
<body onload="start();">
<!--onload在body标签中表示当前页面加载完成后执行这个事件-->
<div id="time" style="color: red;"><div>
</body>
鼠标经过与移开事件
<head>
<title>鼠标经过和离开事件</title>
<script type="text/javascript">
function changeColor(colors){//鼠标经过时字体为红色，离开为蓝色
//获取对象
var c = document.getElementById("baidu");
//修改样式
c.style.color = colors;
}
</script>
</head>
<body>
<a id="baidu" style="cursor:pointer;text-decoration:none;color:blue;"οnmοuseοver="changeColor('red')" οnmοuseοut="changeColor('blue')">百度</a>
<!--
mouseover:鼠标经过事件，onmouseover事件句柄
mouseout：鼠标离开事件，onmouseout事件句柄
cursor:pointer;鼠标移上去后改变形状为小手
text-decoration:none;去除超链接的下划线
color:blue;颜色默认为蓝色
-->
</body>
列表数据的显示与隐藏——点击事件
<head>
<title>菜单收齐与展开</title>
<style>
ul{
/*标签选择器，
此列表无样式
*/
list-style-type:none;
}
.c_city{
/*id选择器
设置开始时隐藏城市列表
*/
display:none;
}
</style>
<script type="text/javascript">
//显示或隐藏的函数
function displays(the){//传入当前元素对象
//获取元素对象的下一个兄弟对象——列表对象
var citys = the.nextElementSibling;
var hide = citys.style.display;//获取列表对象的显示状态
if(hide == "block"){
//显示
citys.style.display="none";
}else{
citys.style.display="block";
}
}
</script>
</head>
<body>
<ul>
<li><a style="color:blue;cursor:pointer;" onclick="displays(this);">北京</a>
<ul class="c_city">
<li>通州区</li>
<li>朝阳区</li>
<li>大兴区</li>
</ul>
</li>
<li><a style="color:blue;cursor:pointer;" onclick="displays(this);">上海</a>
<ul class="c_city">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li><a style="color:blue;cursor:pointer;" onclick="displays(this);">深圳</a>
<ul class="c_city">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
</ul>
</body>
动态增删表格数据
<!--
//1.在文本框输入对应的值,编号,姓名,年龄
//2.将数据添加到表格新的一行上
//3.文本框不能有空数据-->
<head>
<title>表格的动态添加和删除</title>
<script type="text/javascript">
function addNewLine(){
//1.获取文本框中的学生姓名
var snodo = document.getElementById("sno");
var snamedo = document.getElementById("sname");
var sagedo = document.getElementById("sage");
var sno = snodo.value;
var sname = snamedo.value;
var sage = sagedo.value;
if(sno.length > 0 && sname.length > 0 && sage.length > 0 ){
//2.获取表格对象
var stuname = document.getElementById("table");
//3.调用表格对象的方法完成添加新行
//获取当前表格行数，rows：返回包含所有行数组成的一个数组
var index = stuname.rows.length;
//insertRow(index)若index等于当前行数则添加到表格末尾,返回表格对象
var tableRow = stuname.insertRow(index);//即tr标签
//获取当前毫秒数
var time = new Date().getTime();//毫秒
//给tableRow（tr）添加一个id属性值，方便删除
tableRow.id = time;
//4.给新行添加两个单元格insertCell(),给新行添加一个td单元格
var tableCell0 = tableRow.insertCell(0);
var tableCell1 = tableRow.insertCell(1);
var tableCell2 = tableRow.insertCell(2);
var tableCell3 = tableRow.insertCell(3);
//5.给单元格设置HTML
tableCell0.innerHTML=sno;
tableCell1.innerHTML=sname;
tableCell2.innerHTML=sage;
tableCell3.innerHTML='<input type="button" value="删除" οnclick="del('+time+');"/>';
snodo.value="";//将文本框置为空
snamedo.value="";//将文本框置为空
sagedo.value="";//将文本框置为空
document.getElementById("sp").innerText="";//将提示信息置为空
}else{
document.getElementById("sp").innerText="输入框不能为空 ";
}
}
function del(tableRowId){
//首先获取表格对象
var stuname = document.getElementById("table");
//根据当前行号的ID获取表格行对象
var tableRow = document.getElementById(tableRowId);
//获取表格行对象的行号,行对象的属性rowIndex返回该行在表中的位置
var tableIndex = tableRow.rowIndex;
//通过表格对象删除对应的行对象
stuname.deleteRow(tableIndex);
}
</script>
</head>
<body>
<input type="text" id="sno" />
<input type="text" id="sname" />
<input type="text" id="sage" />
<input type="button" value="添加" onclick="addNewLine();"/>
<span id="sp" style="color: red;"></span>
<table border="1" width="30%" id="table">
<tr align="center">
<th>学生编号</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>操作</th>
</tr>
</table>
</body>
最后页面显示如下
扫一扫
1845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
