第11讲客户端基本语言编程3
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<select name="select" onchange="window.location.href=this.options[this.s electedIndex].value">
<option>请选择需要的网址</option> <option value="">搜狐</option> <option value="">新浪</option> <option value="">MSN中国 </option>
DOM编程在HTML页面中的应用
（1）访问指定节点； （2）访问相关节点； （3）访问节点属性； （4）检查节点类型； （5）创建节点； （6）操作节点。
10 / 30
访问节点、节点属性
(1)访问指定节点
getElementById() getElementsByName() getElementsByTagName()
8 / 30
函 数 的return语句
return 函数内后续语句不再执行 return true 函数内后续语句不再执行，返回true 值
可以用于函数外
return false 函数内后续语句不再执行，返回false值
可以用于函数外
oncontextmenu="return false"
9 / 30
(2)根据已知节点，访问关联的父节点、子节点、兄弟节点等。
① 访问html节点和body节点 var home=document.documentElement var headnode=home.firstchild var bodynode=stchild 或 var bodynode=document.body ② 访问子节点 节点名.childNodes：子节点的列表； 节点名. firstChild：第一个子节点； 节点名. lastChild：最后一个子节点。
19 / 30
Tab面板的结构
分析：
导航条：无序列表（含2个列表项） 导航条对应的内容框：2个div容器，没有 上边框，而只有左、右和下边框。 给这2个div容器加个上边界（margintop:12px;）的效果，如右图。 div的上边框是由导航条ul#tab元素的下边 框实现的。当鼠标滑过tab项时，tab的子 元素的下边框变为白色，而且正好遮盖 住ul#tab元素的蓝色下边框。
</select>
5 / 30
例子：this.htm
this的用法
2、this作为普通函数直接调用时，指代window对象 ① this位于普通函数内，直接调用 function changeStatus() { this.status="hello！！ " // 修改窗口状态栏信息 } ② 通过行内式事件调用 function moveME(){ this.align="right";//典型错误写法！window没有align属性 }
20 / 30
首先使两个元素的边框重合，将ul的li的下边框覆盖ul元素的下边框， 默认情况下子元素的盒子是覆盖在父元素盒子之上的。 ul的子元素有li和a。由于当鼠标滑过时需要子元素的下边框变色，而 IE 6只支持a元素的hover伪类，所以选择用a元素的下边框覆盖ul元素 的下边框 。
#tab { margin: 0; /*将列表的边界、填充都设为0*/ padding: 0 0 24px 0; /*由于li元素浮动，ul盒子高度为0，用填充使 高度扩展*/ list-style-type: none; /*去掉列表元素列表项前的小黑点*/ border-bottom:1px solid #11a3ff; /*给ul元素添Num1, iNum2){ return ; //正确用法，表示程序结束
}
7 / 30
函 数 的return语句
一个函数中有时可以包含多个return语句，但每次 只有一个会被执行，例如：
function substr(iNum1, iNum2){ if (iNum1>=iNmu2) return iNum1-iNum2; else return iNum2-iNum1; }
（6）设置结点的属性 var para=document.createElement（"p"） para.classname="red"
13 / 30
DOM应用案例
开始只出现文件上传按钮，在检查上传图片的大 小符合尺寸要求后，动态创建一个提交按钮。
效果：4-48（图片上载）.html
动态生成一个表格 ：4-50.html 显示结点的属性 批量生成多个按钮 替换结点
第11讲Javascript 三
1 / 30
本讲内容
with的用法、this的用法 函数的return语句 JS对DOM的基本操作 JQuery简介 JS中应掌握的常用命令
2 / 30
With的用法
with：直接引用方法及属性，省略对象名
today=new Date(); with today{ y=getYear(); m=getMonth(); d=getDate(); }
12 / 30
（4）用nodeType属性判断结点类型
元素结点、属性结点、文本结点(双标记之间的文字)
例：
alert(getElementById("campus"). nodeType)
（5）创建结点
var para=document.createElement（"p"）//创建一对<P>元素 var t=document.createTextNode("hello")//创建文本结点 para.appendChild(t)
18 / 30
Tab面板的结构代码
<ul id="tab"> <li><a id="tab1" class="cur" href="#">课程特色 </a></li> <li><a id="tab2" href="#">教学方法</a></li> </ul> <div id="info1"> <a href="#">本课程主要特色</a> <br /> <a href="#">课程地位</a><br /> </div> <div id="info2"> <a href="#">教学方法和教学手段</a> <br /> <a href="#">课程的历史</a><br /> </div>
16 / 30
应用：选项卡效果（Tab面板效果）
流行的高级网页元素 一个tab面板分解成两部分：上方 的导航条和下面的内容框。 导航条中每个tab对象：一个DIV 内容框。 当鼠标滑动到某个tab项时候，才 显示与其对应的一个内容框，并 将其他内容框都通过 （dislay:none）隐藏。 不隐藏其他内容框，效果如右图。
例子：tab.htm
21 / 30
每个选项a元素的样式
#tab a { display: block; padding: 0 10px; /*给a元素左右加10像素填充 */ height:23px; /*使a元素高度等于ul元素高度，即它们的下边框重合 */ line-height:23px; /*以上两条使a元素文字垂直居中 */ border: 1px solid #11a3ff; /*设置边框 */ margin:0 4px 0 0; /*设置右边界 */ font-size: 14px; color: #993300; text-decoration: none; /*去下划线 */ background-color: #BBDDFF; }
15 / 30
处理事件 ——事件处理函数
（１）HTML标记事件处理程序 <P onclick="alert(‘hi’)"> 单击试一试</p> （2）以属性形式出现的事件监听程序 window.onload=function ()｛ var op=document.getElementById("") op.onclick=function (){ alert("hi") } ｝
23 / 30
li,a,info1,info2的css
#tab li { float:left; /*使tab项水平排列 */ margin:0 4px 0 0; /*设置右边界，使tab项之间右间距 */ } #info1，#info2 { background-color: #FFeeee; padding: 10px; border-left:1px solid #11a3ff; /* 左边框 */ border-right:1px solid #11a3ff; /* 右边框 */ border-bottom:1px solid #11a3ff; /* 下边框 */} #info2 { display: none; /*使#info2暂时隐藏起来 */} #tab a:hover,#tab a.cur { border-bottom: 1px solid #ffeeee; /*鼠标滑过或为当前选项时的下 划线颜色 */ color: #F74533; background-color: #FFeeee; }
22 / 30
ul的css设置
这样ul#tab元素的高是24+1=25象素，a元素的高是 23+1+1=25象素，而且a元素是浮动的，脱离了标准流，所 以a元素不会占据ul元素的空间，在IE中ul元素的高也不会被 a元素撑开。 注意：
ul元素是浮动盒子a的外围容器，不能设置宽和高，否则在IE中浮动 盒子（a元素）将不会脱离标准流，这样a元素的盒子将被包含在ul 元素的盒子中，两个盒子的下边框将无法重叠。这就是为什么对 ul#tab元素设置下填充为24像素，而不设置高度为24像素 （height:24px;）的原因。 同样，ul元素不能设置宽度。这导致tab面板的宽度将自动延伸。可 以将tab面板放在其他元素（如div）中，通过div元素的宽度设置， 控制面板宽度。
6 / 30
函 数 的return语句
函数在执行过程中只要执行完return语句就会停止继续执行函数 体中的代码，因此return语句后的代码都不会执行。下例中函数 中的alert()语句就永远都不会执行。
function fnSum(iNum1, iNum2){ return iNum1+iNum2; alert (iNum1+iNum2); //永远不会被执行 }
<div id=‚esc‛onmouseover=‚moveME（this）‛> 你捉不到我，我会跑 </div> taoId.onmouseout=function(){ this.align="left"; } 例子：this.htm
4 / 30
this的应用
——根据下列菜单，跳转到相应页面
11 / 30
(3)访问、设置、删除节点的属性
getAttribute(name) setAttribute(name, value) removeAttribute(name)
例：
getElementById("campus").getAttribute("src") setAttribute("src", "gate.jpg") removeAttribute("class");removeAttribute("className")
14 / 30
BOM、DOM访问元素比较
document.images["chzu"].src document.images[0].src document.forms["check"].yourname.value document.forms[0].yourname.value
document.getElementById("chzu").src document.getElementById("yourname").value
3 / 30
this的用法
this总是指代其所有者 1、指代当前元素的几种情况： ① this位于行内时
<div id=‚esc‛ onmouseover=‚this.align=‘right’‛ onmouseout=‚this.align=‘left’‛>你捉不到我，我会跑</div>
类似用法：marquee的滚动暂停效果。 ② 行内，this作为函数的参数
<option>请选择需要的网址</option> <option value="">搜狐</option> <option value="">新浪</option> <option value="">MSN中国 </option>
DOM编程在HTML页面中的应用
（1）访问指定节点； （2）访问相关节点； （3）访问节点属性； （4）检查节点类型； （5）创建节点； （6）操作节点。
10 / 30
访问节点、节点属性
(1)访问指定节点
getElementById() getElementsByName() getElementsByTagName()
8 / 30
函 数 的return语句
return 函数内后续语句不再执行 return true 函数内后续语句不再执行，返回true 值
可以用于函数外
return false 函数内后续语句不再执行，返回false值
可以用于函数外
oncontextmenu="return false"
9 / 30
(2)根据已知节点，访问关联的父节点、子节点、兄弟节点等。
① 访问html节点和body节点 var home=document.documentElement var headnode=home.firstchild var bodynode=stchild 或 var bodynode=document.body ② 访问子节点 节点名.childNodes：子节点的列表； 节点名. firstChild：第一个子节点； 节点名. lastChild：最后一个子节点。
19 / 30
Tab面板的结构
分析：
导航条：无序列表（含2个列表项） 导航条对应的内容框：2个div容器，没有 上边框，而只有左、右和下边框。 给这2个div容器加个上边界（margintop:12px;）的效果，如右图。 div的上边框是由导航条ul#tab元素的下边 框实现的。当鼠标滑过tab项时，tab的子 元素的下边框变为白色，而且正好遮盖 住ul#tab元素的蓝色下边框。
</select>
5 / 30
例子：this.htm
this的用法
2、this作为普通函数直接调用时，指代window对象 ① this位于普通函数内，直接调用 function changeStatus() { this.status="hello！！ " // 修改窗口状态栏信息 } ② 通过行内式事件调用 function moveME(){ this.align="right";//典型错误写法！window没有align属性 }
20 / 30
首先使两个元素的边框重合，将ul的li的下边框覆盖ul元素的下边框， 默认情况下子元素的盒子是覆盖在父元素盒子之上的。 ul的子元素有li和a。由于当鼠标滑过时需要子元素的下边框变色，而 IE 6只支持a元素的hover伪类，所以选择用a元素的下边框覆盖ul元素 的下边框 。
#tab { margin: 0; /*将列表的边界、填充都设为0*/ padding: 0 0 24px 0; /*由于li元素浮动，ul盒子高度为0，用填充使 高度扩展*/ list-style-type: none; /*去掉列表元素列表项前的小黑点*/ border-bottom:1px solid #11a3ff; /*给ul元素添Num1, iNum2){ return ; //正确用法，表示程序结束
}
7 / 30
函 数 的return语句
一个函数中有时可以包含多个return语句，但每次 只有一个会被执行，例如：
function substr(iNum1, iNum2){ if (iNum1>=iNmu2) return iNum1-iNum2; else return iNum2-iNum1; }
（6）设置结点的属性 var para=document.createElement（"p"） para.classname="red"
13 / 30
DOM应用案例
开始只出现文件上传按钮，在检查上传图片的大 小符合尺寸要求后，动态创建一个提交按钮。
效果：4-48（图片上载）.html
动态生成一个表格 ：4-50.html 显示结点的属性 批量生成多个按钮 替换结点
第11讲Javascript 三
1 / 30
本讲内容
with的用法、this的用法 函数的return语句 JS对DOM的基本操作 JQuery简介 JS中应掌握的常用命令
2 / 30
With的用法
with：直接引用方法及属性，省略对象名
today=new Date(); with today{ y=getYear(); m=getMonth(); d=getDate(); }
12 / 30
（4）用nodeType属性判断结点类型
元素结点、属性结点、文本结点(双标记之间的文字)
例：
alert(getElementById("campus"). nodeType)
（5）创建结点
var para=document.createElement（"p"）//创建一对<P>元素 var t=document.createTextNode("hello")//创建文本结点 para.appendChild(t)
18 / 30
Tab面板的结构代码
<ul id="tab"> <li><a id="tab1" class="cur" href="#">课程特色 </a></li> <li><a id="tab2" href="#">教学方法</a></li> </ul> <div id="info1"> <a href="#">本课程主要特色</a> <br /> <a href="#">课程地位</a><br /> </div> <div id="info2"> <a href="#">教学方法和教学手段</a> <br /> <a href="#">课程的历史</a><br /> </div>
16 / 30
应用：选项卡效果（Tab面板效果）
流行的高级网页元素 一个tab面板分解成两部分：上方 的导航条和下面的内容框。 导航条中每个tab对象：一个DIV 内容框。 当鼠标滑动到某个tab项时候，才 显示与其对应的一个内容框，并 将其他内容框都通过 （dislay:none）隐藏。 不隐藏其他内容框，效果如右图。
例子：tab.htm
21 / 30
每个选项a元素的样式
#tab a { display: block; padding: 0 10px; /*给a元素左右加10像素填充 */ height:23px; /*使a元素高度等于ul元素高度，即它们的下边框重合 */ line-height:23px; /*以上两条使a元素文字垂直居中 */ border: 1px solid #11a3ff; /*设置边框 */ margin:0 4px 0 0; /*设置右边界 */ font-size: 14px; color: #993300; text-decoration: none; /*去下划线 */ background-color: #BBDDFF; }
15 / 30
处理事件 ——事件处理函数
（１）HTML标记事件处理程序 <P onclick="alert(‘hi’)"> 单击试一试</p> （2）以属性形式出现的事件监听程序 window.onload=function ()｛ var op=document.getElementById("") op.onclick=function (){ alert("hi") } ｝
23 / 30
li,a,info1,info2的css
#tab li { float:left; /*使tab项水平排列 */ margin:0 4px 0 0; /*设置右边界，使tab项之间右间距 */ } #info1，#info2 { background-color: #FFeeee; padding: 10px; border-left:1px solid #11a3ff; /* 左边框 */ border-right:1px solid #11a3ff; /* 右边框 */ border-bottom:1px solid #11a3ff; /* 下边框 */} #info2 { display: none; /*使#info2暂时隐藏起来 */} #tab a:hover,#tab a.cur { border-bottom: 1px solid #ffeeee; /*鼠标滑过或为当前选项时的下 划线颜色 */ color: #F74533; background-color: #FFeeee; }
22 / 30
ul的css设置
这样ul#tab元素的高是24+1=25象素，a元素的高是 23+1+1=25象素，而且a元素是浮动的，脱离了标准流，所 以a元素不会占据ul元素的空间，在IE中ul元素的高也不会被 a元素撑开。 注意：
ul元素是浮动盒子a的外围容器，不能设置宽和高，否则在IE中浮动 盒子（a元素）将不会脱离标准流，这样a元素的盒子将被包含在ul 元素的盒子中，两个盒子的下边框将无法重叠。这就是为什么对 ul#tab元素设置下填充为24像素，而不设置高度为24像素 （height:24px;）的原因。 同样，ul元素不能设置宽度。这导致tab面板的宽度将自动延伸。可 以将tab面板放在其他元素（如div）中，通过div元素的宽度设置， 控制面板宽度。
6 / 30
函 数 的return语句
函数在执行过程中只要执行完return语句就会停止继续执行函数 体中的代码，因此return语句后的代码都不会执行。下例中函数 中的alert()语句就永远都不会执行。
function fnSum(iNum1, iNum2){ return iNum1+iNum2; alert (iNum1+iNum2); //永远不会被执行 }
<div id=‚esc‛onmouseover=‚moveME（this）‛> 你捉不到我，我会跑 </div> taoId.onmouseout=function(){ this.align="left"; } 例子：this.htm
4 / 30
this的应用
——根据下列菜单，跳转到相应页面
11 / 30
(3)访问、设置、删除节点的属性
getAttribute(name) setAttribute(name, value) removeAttribute(name)
例：
getElementById("campus").getAttribute("src") setAttribute("src", "gate.jpg") removeAttribute("class");removeAttribute("className")
14 / 30
BOM、DOM访问元素比较
document.images["chzu"].src document.images[0].src document.forms["check"].yourname.value document.forms[0].yourname.value
document.getElementById("chzu").src document.getElementById("yourname").value
3 / 30
this的用法
this总是指代其所有者 1、指代当前元素的几种情况： ① this位于行内时
<div id=‚esc‛ onmouseover=‚this.align=‘right’‛ onmouseout=‚this.align=‘left’‛>你捉不到我，我会跑</div>
类似用法：marquee的滚动暂停效果。 ② 行内，this作为函数的参数