JavaScript(下)

11次阅读
没有评论

一、阻止标签默认行为

1、超链接默认提交

​​<a href="javascript:void(0)">超级链接</a>​​

2、表单默认提交

​​<form onsubmit="return false"></form>       ​​     

注意:return 后的布尔值 可以使用函数的返回值

二、事件对象 event

获取事件源:event.target【重点】

获取事件属性:event.type

获取事件发生的横向坐标:event.clientX

获取事件发生的纵向坐标:event.clientY

function test1(){ alert("单击事件!");

//事件对象 内置对象 event alert("event.target"); //获取当前事件发生的源头 事件源 标签 alert("event.type"); //获取当前事件的事件属性 }

三、事件冒泡

现象:父子标签具备相同的事件属性,子标签功能触发时会连带父标签功能同时运行

解决事件冒泡:在子标签中添加阻止事件冒泡的语法

IE:​​event.cancelBubble="true";        //IE6.0以前​​

webkit:​​event.stopPropagation();​​

四、DOM  文档对象模型

JavaScript(下)

将HTML文档看作是Document对象,页面中的每个标签都是一个一个的标签对象,同时以树状结构存储——文档对象模型

作用:简化页面结构的操作

本质:文档对象模型树+API方法【定义好的】

针对文档对象模型树的操作方法:

1、获取标签对象

​​document.getElementById("xx");   //通过标签id属性值获取标签对象​​

2、操作标签的属性

获取标签属性值:  ​​标签对象.属性名​​

修改标签属性值:  ​​标签对象.属性名 = "值"​​

JavaScript(下)

3、操作标签体中的文本

获取标签内部文本:​​标签对象.innerText​​​           ====>​​标签对象.innerHTML​​

innerText:只获取内部文本 不算子标签

innerHTML:获取内部所有内容 包括子标签和文本

修改标签内部文本:​​标签对象.innerText = "值"​​​ ====>​​标签对象.innerHTML = "值"​​

都会覆盖标签内部所有的内容

4、和标签对象相关的属性  更加灵活的获取标签对象

​​标签对象.parentNode​​  获取当前标签的父标签对象【重点 常用】

​​标签对象.childNodes​​     获取当前标签的所有子标签对象

注意:子标签之间的换行页算作子元素

​​标签对象.firstChild​​  获取当前标签的第一个子节点

​​标签对象.lastChild​​  获取当前标签的最后一个子节点

​​标签对象.nextSibling​​  获取当前标签的下一个兄弟节点

​​标签对象.previousSibling​​  获取当前标签的上一个兄弟节点

5、页面元素的添加

创建文本节点:​​document.createTextNode("文本");​​

创建标签节点:​​document.createElement("标签名");​​

向父节点上追加节点:​​父标签对象.appendChild(子标签对象);​​

6、页面元素的删除

​​父标签对象.removeChild(子标签对象);​​

动态添加

function add(){

//获取标签对应的属性值 var name = document.getElementById("name").value var tel = document.getElementById("tel").value var address = document.getElementById("address").value

//将输入的属性封装成文本节点 var nameNode = document.createTextNode(name); var telNode = document.createTextNode(tel); var addressNode = document.createTextNode(address);

//创建td标签对象 var nameTd = document.createElement("td"); var telTd = document.createElement("td"); var addressTd = document.createElement("td"); var delTd = document.createElement("td");

//创建删除按钮 var delbtn = document.createElement("input");

delbtn.type="button"; delbtn.value="删除";

delbtn.onclick=function() { remove(this); }

//将对应的文本节点放对应的td里 nameTd.appendChild(nameNode); telTd.appendChild(telNode); addressTd.appendChild(addressNode); delTd.appendChild(delbtn);

//创建tr标签对象 var tr = document.createElement("tr");

//将td放入tr里 tr.appendChild(nameTd); tr.appendChild(telTd); tr.appendChild(addressTd); tr.appendChild(delTd);

//将tr放入表格中 var table = document.getElementById("tb"); table.appendChild(tr);

}

动态删除

//动态删除 删除当前行数据 function removeUser1() { //删除语法 父节点.removeChild(子节点) //通过事件对象源获取事件发生的源头 var delbt = event.target;

//通过事件源获取父节点的父节点 就是tr标签对象 var tr = delbt.parentNode.parentNode; var parNode = tr.parentNode; parNode.removeChild(tr); }

function removeUser2(delbtn){ //删除语法 父节点.removeChild(子节点) var tr = delbtn.parentNode.parentNode; var patNode = tr.parentNode; patNode.removeChild(tr); }

其他代码

<body> <div align="center"> 姓名:<input id="name" type="text"> 电话:<input id="tel" type="text"> 地址:<input id="address" type="text"> <input type="button" value="提交" onclick="add()"> </div>

<table align="center" id="tb" border="1px" cellpadding="10px,200px"> <tr> <td>姓名</td> <td>电话</td> <td>地址</td> <td>操作</td> </tr> <tr> <td>小六子</td> <td>18585260439</td> <td>天津市北辰区</td> <td><input type="button" value="删除" onclick="removeUser1()"></td> </tr> <tr> <td>夕夕夕汐</td> <td>18765121574</td> <td>天津市武清区</td> <td><input type="button" value="删除" onclick="removeUser2(this)"></td> </tr> </table>

</body>

html页面

JavaScript(下)

添加数据后

JavaScript(下)

下拉列表的属性

JavaScript(下)

二级联动菜单(城市县区二级联动)

JavaScript(下)

相关代码:

<!DOCTYPE html> <html lang="en"> <head>

<meta charset="UTF-8"> <title>city</title>

<script type="text/javascript"> var city = { "bj" : ["海淀区","朝阳区","东城区"] , "tj" : ["武清区","南开区","河北区"] , "zz" : ["二七区","金水区","中原区"] }

function test1(){ //,每次选择前城市县区下拉列表中的内容 var xqSelect = document.getElementById("xq"); xqSelect.innerText = "请选择";

//获取用户选中的城市信息 tj 使用城市的value值作为标识 var selectedValue = document.getElementById("city").value;

//从city对象中获取指定城市对应的县区信息 var xqs = city[selectedValue];

//var xqs = city.tj || var ops = city[tj] 二选一 //遍历县区信息 for (var i = 0; i < xqs.length; i++) { //获取当前元素封装成文本节点 xqs[i] var xqNode = document.createTextNode(xqs[i]); //创建option标签对象 var xqOpt = document.createElement("option"); //将文本节点追加到option标签对象中 xqOpt.appendChild(xqNode); //获取县区下拉列表对象 var xqSelect = document.getElementById("xq"); //将option追加到下拉列表中 xqSelect.appendChild(xqOpt); } }

//初始化方法 刷新页面是自动选择第一个选择的县区信息 function init(){ test1(); } </script> </head>

<body onload="init()">

城市: <select id="city" onchange="test1()"> <option value="bj">北京</option> <option value="tj">天津</option> <option value="zz">郑州</option> </select> 县/区: <select id="xq"></select>

</body>

</html>

五、BOM  浏览器对象模型

将浏览器组件封装成了一个对象,浏览器中的各个组件都是一个对象

浏览器——window对象  js中的顶级对象

作用:通过Js程序操作浏览器各个组件

JavaScript(下)

window  对象中的方法在调用时可以省略window.

获取标签对象  ​​document.getElementById("xx")​​

window弹框及定时任务

相关代码:

<html > <head>

<script type="text/javascript"> //浏览器弹框提示 window.alert("alert");

//确认提示框 参数:提示信息 返回值:布尔值 true:确定 false:取消 var result = window.confirm("你确定?"); alert(result);

//可输入提示框 参数:提示信息 返回值:输入的内容 var result = window.prompt("请输入银行卡卡号密码,中间以#分隔!"); alert(result);

//定时任务 在指定时间后执行某项功能 只执行一次 //参数1:功能 参数2:时间 单位:毫秒 var id = window.setTimeout(function (){ alert("爆炸!!!"); },3000);

//清除单次定时任务 参数要的是定时任务的id 就是定时任务的返回值 //window.clearTimeout(id);

//定时任务 没过一定时间后执行一次某项功能 执行多次 //参数1:功能 参数2:时间 单位:毫秒 var id = window.setInterval(function (){ alert("爆炸!!!"); },3000);

//清除循环定时任务 参数要的是定时任务的id 就是定时任务的返回值 window.clearInterval(id); </script> </head> <body > xxxx </body>

</html>

Location 对象表示地址栏   可以使用location对象向服务端发送请求

​location.href="url"

Client向服务端发送请求的方式4种

1、地址栏

2、超级链接

3、form表单

4、Js location.href="url"

神龙|纯净稳定代理IP免费测试>>>>>>>>天启|企业级代理IP免费测试>>>>>>>>IPIPGO|全球住宅代理IP免费测试

相关文章:

版权声明:代理IP2022-11-25发表,共计5162字。
新手QQ群:570568346,欢迎进群讨论 Python51学习