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=“值” (替换内部所有内容)

2. 获取标签内部文本信息, 包括内部嵌套的标签内容

标签对象.InnerHTML

标签对象.InnerHTML=“值” (替换内部所有内容

6.标签对象的其它属性(目的:灵活获取标签对象)

1.获取标签对象的父节点

标签对象.parentNode

​ 2.获取标签对象的所有子节点

标签对象.childNodes

​ 3.获取标签对象的第一个子节点

标签对象.firstChild

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

标签对象.lastChild

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

标签对象.nextSibling

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

标签对象.previousSibling

注意; 标签内部的子元素之间 换行也算作一个子元素

7.具体的页面结构操作

​ i 创建

1. 创建文本节点对象: document.createTextNode(“文本信息”)

2. 创建标签节点对象: document.createElement(“标签名”)

3. 将节点添加到父节点,父节点对象.appendChild( );\

​ ii 删除

​ 1.获取父节点对象

​ var body = document.getElementById(“bd”);

2. 获取要删除的子节点对像

   var rxx = body.firstChild.nextSibling.nextSibling(bd);

3. 删除

   父节点对象.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