javaScript_day2
1.组织默认请求提交行为
超级连接//<a herf=“javascript:void(0)”/ > 发送请求
表单:
注意:οnsubmit=“return test();” 属性值可以写return 函数调用,结果为trun|false
2.event对象(事件对象)
事件源:发生事件的HTML标签 event.target
获取发生事件的横向坐标 event.clientx
获取发生事件的纵向坐标 event.clienty
function test(event){
//获取发生事件的标签
alert(event.target);
//获取发生事件横纵坐标
alert(event.target)
3.事件冒泡
描述:页面元素发生嵌套时,内部和 外部元素定义了相同的事件属性,出发内部事件运行,同时也会出发外部事件运行
解决:浏览器存在差异
阻止事件冒泡
IE:event.cancelBubble=true;
阻止事件冒泡
wbKit:event.stopPropagation();
4.DOM[重点]
DOW概念: document Object Model 文档对象模型
js作用:实现页面动态化效果技术
DOM模型:将整个页面以及页面中标签,看作是一个对应的对象节点,所有对象以一颗树状结构存储
方便后续操作.
//获取节点对象的语法
//通过标签的id属性值,获取标签对象 返回值 就是标签对象 获取一个对象
var div = document.getElementById(“div1”);
获取对象操作属性
div.id (获取标签属性值)
修改标签属性的值
div.id=“值”; 注意标签中的属性 不能修改 id class
//通过标签名获取标签对象 返回值 标签对象的数组 获取的是一组对象
var divs = document.getElementsbyTagName(“div”);
//通过标签的name属性值获取标签对象 返回值 标签对象的数组 获取一组对象
var divn = document.getEementsByName(“name”);s
5.获取标签的文本内容
1.获取内部文本信息,只获取内部的文本信息
标签对象.InnerText
修改内部文本信息
标签对象.InnerText=“值” (替换内部所有内容)
- 获取标签内部文本信息, 包括内部嵌套的标签内容
标签对象.InnerHTML
标签对象.InnerHTML=“值” (替换内部所有内容
6.标签对象的其它属性(目的:灵活获取标签对象)
1.获取标签对象的父节点
标签对象.parentNode
2.获取标签对象的所有子节点
标签对象.childNodes
3.获取标签对象的第一个子节点
标签对象.firstChild
4.获取标签对象的最后一个子节点
标签对象.lastChild
5.获取标签对象的下一个兄弟节点
标签对象.nextSibling
6.获取标签对象的前一个兄弟节点
标签对象.previousSibling
注意; 标签内部的子元素之间 换行也算作一个子元素
7.具体的页面结构操作
i 创建
-
创建文本节点对象: document.createTextNode(“文本信息”)
-
创建标签节点对象: document.createElement(“标签名”)
-
将节点添加到父节点,父节点对象.appendChild( );\
ii 删除
1.获取父节点对象
var body = document.getElementById(“bd”);
-
获取要删除的子节点对像
var rxx = body.firstChild.nextSibling.nextSibling(bd);
-
删除
父节点对象.removeChild(子节点对象);
8.将输入的数据添加到表格中
1.获取用户输入的内容
var nameText = document.getElementbyId(“文本信息”).value;
2.创建文本节点对象
var nt = document.createTextNode(nameText);
3.创建td(列)对象 将文本放入td中
var tdName = document.createElement(“td”)
td.appendChild(nt);
4.创建tr(行)对象 将td放入tr中
var tr = document.createElement(“tr”);
tr.appendChild(tdName)
5.获取table(表)对象 将tr放入table中
var table = document.getElementById(“table”);
table.appendChild(tr);
js删除表操作
1.获取父节点
var trparent = input.parentNode.parentNode.parentNode;
2.获取要删除的子节点对象
tr = input.parentNode.parentNode;
trparent.removeChild(tr);
9.下拉列表
var sel = document.getElementById(“select”) : 获取下拉列表对象
sel.option : 获取下拉列表的所有列表项
sel.selecttedindex : 获取选中的option的下标
sel.value : 获取的只是选中的option的value 属性值
10.bom
概念: Broswer Object Model 浏览器对象模型
方法:
i. 输出 window.alert(“内容”)
ii. window.confirm(“内容”) : 确认提示框 返回值: 布尔类型
iii. window.prompt(“内容”) :提示可输入框
iV. var id = window.setTimeout(function(){},时间) :定时执行器 一定时间后执行内容 时间单位毫秒,返回值定时任务的id
window.clearTimeout(id);停止定时执行器
v. var id = window.setInterval(function(){},时间) :每隔一段时间执行一次 循环执行
window.clearInterval(id); 停止循环执行定时器
11.location[重点] : 等价于地址栏
发送请求:进行额外的数据处理 location.href=“xxx/xxxAction”;重点
发送请求的四种方式
1.地址栏
2.超级链接
3.表单
4.location.href