JavaWeb-04(BOM&DOM)
JavaWeb-04
JavaWeb-BOM&DOM
BOM
一、知识回想
* BOM 概述
* BOM 的各个对象
* window对象
innerHeight，innerWidth
document.body.clientWidth,document.body.clientHeight,
self
opener:超链和window.open()
parent : iframe和frame
frames[]:
三种对话框： alert(),prompt(),confirm()
定时器： setTimeout(),setInterval()
模态窗体： showModalDialog() ,showModelessDialog()
* History对象
forward() ,back(),go()
* Location对象.
二、内容
事件（掌握，明确每一个事件发生的时机）
1、鼠标移动事件
* onmousemove(event) : 鼠标移动事件event是事件对象。
名字固定
* onmouseover : 鼠标悬停事件,当鼠标移动到某个控件上面的时候发生
this: 把this写在那个标签里面就代表那个标签对象
this.style.backgroundColor : 当调用样式表中的属性的时候，假设属性中间有横杠，则应去掉.
演示样例： 当鼠标移动到p标签上的时候，p标签改变样式
* onmouseout : 鼠标移出事件,当鼠标从控件上移开的时候
2、鼠标点击事件
onclick : 当鼠标单击某个控件时发生
演示样例： 当单击button时。在<p>中显示字符串 "冠希哥来了" 。
3、载入与卸载事件 ####
*载入事件(onload) : 在整个页面的元素载入完成之后发生
*卸载事件(onunload) : 是在页面关闭时发生
注意： onload和onunload事件必须写在body或者图片标签里面
4、聚焦与离焦事件
*聚焦事件onfocus：是在控件获得焦点的时候发生
*离焦事件onblur：是在控件失去焦点的时候发生
演示样例： 文本框获得焦点的时候改变样式，失去焦点时变回原样
5、键盘事件
onkeypress,onkeyup,onkeydown
*onkeypress: 按下键盘按键并松开
*onkeydown : 按下按键发生
*onkeyup: 松开按键
6、提交与重置事件
onsubmit,onreset
*提交事件： 是在点击提交button后发生。(必须写在form表单中)
*重置事件： 是在点重置交button后发生。
演示样例： 提交表单中的数据(检查):假设是陈冠希：通过，否则不能提交数据。
Demo
<!doctype html>
<html lang="en">
<head>
<title>重置与提交事件</title>
</head>
<script type="text/javascript">
<!--
/*
提交事件：点击提交button时发生，函数在去目的地之前调用，依据结果决定是否去目标页面。
注意：必须写在form标签中
*/
function fun(from){
//推断姓名
var username = form.username.value;
if(username==""){
alert("姓名不能为空");
return false;
}
//推断年龄
var age = document.forms[0].age.value;
if(age=="")
{
alert("年龄不能为空");
return false;
}
if(isNaN(age)){
alert("age必须是整数");
return false;
}
if(age<0 || age>100){
alert("年龄必须在0~100");
return false;
}
return true;
}
function fun1(form){
return false;
}
//-->
</script>
<body>
<form method="post" action="#a.html" onsubmit="return fun(this)" onreset="return fun1(this)">
姓名：<input type="text" name="username"><br>
年龄：<input type="text" name="age"><br>
<input type="submit" value="提交"><input type="reset" value="重置">
</form>
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmFpdGhfeWVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
7、选择与改变事件
onselect: 仅仅能用于输入框. 当选择输入框中的文本时发生
onchange: 用于select和文本框.对于下拉框是在选项发生变化的时候发生。对于文本框是在文本框的内容发生变化而且失去焦点时发生。
演示样例： 当选择文本框的内容时，弹出文本框的内容
下拉框的selectedIndex属性：代表选中某项的索引
DOM技术
一、Dom概述？
1、什么是DOM？
document object model 文档对象模型
2、它的作用？
重构整个HTML 文档。
能够加入、移除、改变或重排页面上的项目。
3、分类？
Core DOM : 定义了一套标准的针对不论什么结构化文档的对象
XML DOM : 定义了一套标准的针对 XML 文档的对象
HTML DOM : 定义了一套标准的针对 HTML 文档的对象。
4、xml介绍？
expensible markup language : 可扩展标记语言.
<penson>
<name>张无忌</name>
<age>23</age>
</person>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmFpdGhfeWVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmFpdGhfeWVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
二、DOM树
1、结点 :
文档中的每一个成分都是一个节点.(包含文本也是节点)
2、结点的属性
a. nodeName（节点名称）
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
b. nodeValue（节点值）
对于文本节点，nodeValue 属性包括文本。
对于属性节点，nodeValue 属性包括属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
c. nodeType（节点类型） : nodeType 属性可返回节点的类型。
标签节点的类型值是 1
属性节点的类型值是 2
文本节点的类型值是 3
Dom节点的属性.html
<!doctype html>
<html lang="en">
<head>
<title>Dom节点的属性</title>
</head>
<body>
<p id="p">p节点的属性</p>
<script type="text/javascript">
<!--
var p = document.getElementById("p");
alert(p.nodeType);//标签节点的类型值是 1
var txt = p.firstChild;
alert(txt.nodeType);//文本节点的类型值是 3
//-->
</script>
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmFpdGhfeWVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmFpdGhfeWVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
dom导航节点属性.html
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border = 1>
<tr>
<td>凌志玲</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>大s</td>
<td>女</td>
<td>28</td>
</tr>
<tr>
<td>小s</td>
<td>女</td>
<td>20</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
<!--
/*
问题： 拿到大s的年龄
*/
//拿到根节点
var html = document.documentElement ;
//alert(html.nodeName) ;
//拿到body节点
var body = html.lastChild ;
//alert(body.nodeName) ;
//拿到table节点
var table = body.firstChild ;
//alert(table.nodeName) ;
var value = table.firstChild.firstChild.nextSibling.lastChild.firstChild.nodeValue ;
alert(value) ;
//怎样准确拿出？须要结合浏览器中的DOM模型来查看每个节点的细节，以至于不会拿错你想获取的目标节点
//-->
</script>
<!--因为该演示样例涉及详细的IE浏览器，所以不截图-->
通过方法获得标签节点对象.html
<!doctype html>
<html lang="en">
<head>
<title>通过方法获得标签节点对象</title>
</head>
<script type="text/javascript">
<!--
/*
通过方法获得标签节点对象:
1.getElementById():
2.getElementsByTagName() ;
3.getElementsByName(): 仅仅能用于表单控件
*/
//-->
</script>
<body>
<div name = "d">刘德华</div>
<div name = "d" id = "div">成龙</div>
<div name = "d">陈冠希</div>
<input type="text" name="name" value="弹出我吧"><br>
<input type="text" name="name"><br>
<input type="text" name="name"><br>
<input type="text" name="name"><br>
</body>
</html>
<script type="text/javascript">
<!--
var div = document.getElementById("div");
alert(div.innerText);
var divs = document.getElementsByName("d");
alert(divs[0].innerText);
var names = document.getElementsByTagName("input");
alert(names[0].value);
//-->
</script>
获取节点内容的方法.html
<!doctype html>
<html lang="en">
<head>
<title>获取节点内容的方法</title>
</head>
<body>
<h1 id = "h">明天歇息</h1>
<script type="text/javascript">
<!--
var h = document.getElementById("h");
//第一种方法
alert(h.firstChild.nodeValue);
//另外一种方法
alert(h.lastChild.nodeValue);
//第三种方法
var nodes = h.childNodes
alert(nodes[0].nodeValue);
//第四种方法
alert(h.innerText);
//-->
</script>
</body>
</html>
打印ul中的值（教你怎样解决不同IE给你附加的节点而取出你想要的节点内容）.html
<!doctype html>
<html lang="en">
<head>
<title>5打印ul中的值（教你怎样解决不同IE给你附加的节点而取出你想要的节点内容）</title>
</head>
<body>
<ul>
<li id="bj" value="beijing">
北京
<h1>海淀</h1>
奥运
</li>
<li id="sh" value="shanghai">
上海
</li>
<br/>
<input type="button" value="li取值" onclick="getLi()"/>
</ul>
<script type="text/javascript">
<!--
function getLi(){
var bjNode = document.getElementById("bj") ;
//alert(bjNode.nodeName + ":" + bjNode.nodeValue +":" + bjNode.nodeType) ;
var txts = bjNode.childNodes ;
for(var i = 0 ;i <txts.length;i++){
if(txts[i].nodeType == 3)
alert(txts[i].nodeValue) ;
else if(txts[i].nodeType == 1)
alert(txts[i].firstChild.nodeValue) ;
}
}
//-->
</script>
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmFpdGhfeWVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmFpdGhfeWVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
打印select的值.html
<!doctype html>
<html lang="en">
<head>
<title>打印select的值</title>
</head>
<body>
<select name="edu" id="edu">
<option value="本科">本科</option>
<option value="专科">专科</option>
<option value="高中">高中</option>
<option value="小学">小学</option>
<option value="幼儿园">幼儿园</option>
</select>
</body>
</html>
<script type="text/javascript">
<!--
//取出方式1
var edu = document.getElementById("edu");
var opt = edu.childNodes ;
for(var i = 0;i<opt.length;i++){
//注意：浏览器加入了非常多空行，所以要推断
if(opt[i].nodeType==1){
alert(opt[i].firstChild.nodeValue);}
}
//取出方式2(推荐)
var ops = edu.options;
for(var i = 0;i<ops.length;i++){
alert(ops[i].innerText);
}
//-->
</script>
3、结点的分类
整个文档是一个文档节点
每个 XML 标签是一个元素节点
包括在 XML 元素中的文本是文本节点
每个 XML 属性是一个属性节点
凝视属于凝视节点
4、结点的关系
仅仅有父子和兄弟关系
parentNode : 父节点
childNodes ：全部的子标签
firstChild ：第一个儿子
lastChild ：最后一个儿子
nextSibling ：下一个兄弟节点
previousSibling ： 上一个兄弟节点
5、对结点进行CRUD操作（重点）
5.1、查找结点？
两种方式：
a. 採用节点之间的关系去拿根节点：
document.documentElement ;
b. 採用方法去拿
getElementById() : 依据标签的ID拿到此标签节点
getElementsByTagName() : 依据标签的名字拿到此标签节点数组
getElementsByName(): 适用于表单控件。
依据标签的name属性值拿到控件的数组。
5.2、删除结点？
removeChild() : 採用父节点删除子节点
5.3、创建节点：
document.createElement() : 创建一个标签节点
docuemnt.createTextNode("内容") ：创建一个文本节点
节点的setAttribute() :加入属性节点
5.4、加入结点？
appendChild() : 加入子节点
5.5、改动或替换结点？
replaceNode(): 替换节点(适用于IE)
replaceChild() : 替换子节点
替换节点和克隆节点.html
<!doctype html>
<html lang="en">
<head>
<title>替换节点和克隆节点</title>
</head>
<script type="text/javascript">
<!--
function changeNode(){
//拿到bj节点
var bjNode = document.getElementById("bj") ;
//拿到game节点
var gameNode = document.getElementById("game") ;
//替换
//第一种方式(不推荐)
//bjNode.replaceNode(gameNode) ;
//另外一种
//克隆节点
var kNode = gameNode.cloneNode(true) ; //有一个參数是boolean类型的,假设是true，表示连子节点一起复制，假设是false，则再复制本节点。不复制内容
//bjNode.replaceNode(kNode) ;
//第三种方式(推荐)
bjNode.parentNode.replaceChild(kNode,bjNode) ;
}
//-->
</script>
<body>
<ul >
<li id="bj" onclick="changeNode()">北京</li>
<li>湖南</li>
<li>山东</li>
</ul>
<ul>
<li id="game">打<p>灰机</p></li>
<li>抓泥鳅</li>
<li>斗地主</li>
</ul>
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmFpdGhfeWVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
创建节点.html
<!doctype html>
<html lang="en">
<head>
<title>创建节点</title>
</head>
<script type="text/javascript">
<!--
function addOptions(){
//拿到下拉框对象
var sel = document.getElementsByTagName("select")[0] ;
//创建一个节点
// 创建option第一种方法
//var option = document.createElement("option") ;
//option.text = "小学" ;
// 创建option另外一种方法
//var option = new Option("小学","小学") ;
// 创建option第三种方法
/*var option = new Option() ;
option.value = "小学" ;
option.text = "小学" ;
sel.options.add(option) ;*/
//另外一种加入方式
var option = new Option("小学","小学") ;
//sel.appendChild(option) ; //IE有问题
//第三种方式
sel.innerHTML = sel.innerHTML + "<option value = '小学'>小学</option>"
}
//-->
</script>
<body>
<input type="button" value="加入选项" onclick="addOptions()"/>
<select>
<option>本科</option>
<option>专科</option>
<option>高中</option>
<option>初中</option>
</select>
</body>
</html>
操作节点的属性.html
<!doctype html>
<html lang="en">
<head>
<title>操作节点属性</title>
</head>
<script type="text/javascript">
<!--
/*
功能： 按钮仅仅能点击一次
操作节点属性：
１. setAttribute() :设置某个属性的值
2. getAttribute(): 获得属性的值
3. removeAttribute() : 删除属性
*/
function fun(){
//拿到btn对象
var btn = document.getElementById("btn") ;
//删除disabled属性
//btn.removeAttribute("disabled") ;
btn.onclick = function(){
fun1(this) ;
} ;
}
function fun1(btn){
//第一种方式
//btn.setAttribute("disabled","disabled") ;
//另外一种方式
//btn.disabled = "disabled" ;
alert("我仅仅会弹出一次哦") ;
btn.removeAttribute("onclick") ;
}
//-->
</script>
<body>
<input type="button" value="仅仅能点击一次" id = "btn" onclick = "fun1(this)" >
<input type="button" value="恢复" onclick = "fun()">
</body>
</html>
加入表格行（练习），导购经常使用.html
<!doctype html>
<html lang="en">
<head>
<title>加入表格行</title>
</head>
<script type="text/javascript">
<!--
function addtr(){
//拿到单元格的内容
var name = document.getElementById("name").value ;
var email = document.getElementById("email").value ;
var age = document.getElementById("age").value ;
//创建tr,td,并赋值
var nametd = document.createElement("td") ;
nametd.innerHTML = name ;
var emailtd = document.createElement("td") ;
emailtd.innerHTML = email ;
var agetd = document.createElement("td") ;
agetd.innerHTML = age ;
var btntd = document.createElement("td") ;
btntd.innerHTML = "<input type = 'button' value = '删除' onclick = 'delTr(this)'> " ;
//创建tr并组合
var tr = document.createElement("tr") ;
tr.appendChild(nametd) ;
tr.appendChild(emailtd) ;
tr.appendChild(agetd) ;
tr.appendChild(btntd) ;
//将tr加入到table中
var table = document.getElementById("table") ;
table.firstChild.appendChild(tr) ;
}
function delTr(btn){
//爷爷干掉儿子
btn.parentNode.parentNode.parentNode.removeChild(btn.parentNode.parentNode) ;
}
//-->
</script>
<body>
<table width = 600 height = 100 align = center>
<tr>
<td>姓名:</td>
<td><input type="text" name="" id = "name"></td>
<td>邮箱:</td>
<td><input type="text" name="" id = "email"></td>
<td>年龄</td>
<td><input type="text" name="" id = "age"></td>
</tr>
<tr>
<td align = "center" colspan = "6"> <input type="button" value="加入" onclick="addtr()"></td>
</tr>
</table>
<br>
<br>
<br>
<br>
<hr>
<table width = "500" border =1 align = center id = "table">
<tr>
<td>姓名</td>
<td>邮箱</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
</body>
</html>
全选全不选：选择你的爱好.html
<!doctype html>
<html lang="en">
<head>
<title>选择你的爱好</title>
</head>
<script type="text/javascript">
<!--
function checkAll(flag){
//拿到全部的选项
var hobbys = document.getElementsByName("hobby") ;
for(var i = 0;i < hobbys.length ;i ++){
hobbys[i].checked = flag ;
}
}
function reverseCheck(){
//拿到全部的选项
var hobbys = document.getElementsByName("hobby") ;
for(var i = 0;i < hobbys.length ;i ++){
hobbys[i].checked = !hobbys[i].checked ;
}
}
//-->
</script>
<body>
<h1>请选择你的爱好：</h1>
全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)" /><br/>
<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="swim" />游泳
<input type="checkbox" name="hobby" value="singing" />唱歌<br/>
<input type="button" value="全选" onclick="checkAll(true)"/>
<input type="button" value="全不选" onclick="checkAll(false)"/>
<input type="button" value="反选" onclick="reverseCheck()"/> </body>
</body>
</html>
下拉框选项的移动(多项).html
<!doctype html>
<html lang="en">
<head>
<title>下拉框选项的移动(多项)</title>
</head>
<script type="text/javascript">
<!--
function removeLeft(){
//获取下拉框的全部的选项数组
var ops = document.getElementById("left").options ;
//获得右边下拉框
var rightsel = document.getElementById("right") ;
//循环推断每个选项是否选中
for(var i =0 ;i<ops.length ;i++){
if(ops[i].selected){
rightsel.appendChild(ops[i]) ;
i-- ;
}
}
}
function removeLeftAll(){
//获取左边下拉框的全部的选项数组
var ops = document.getElementById("left").options ;
//获得右边下拉框
var rightsel = document.getElementById("right") ;
//循环加入
var length = ops.length ;
for(var i = 0 ;i <length;i++){
rightsel.appendChild(ops[0]) ;
}
}
//-->
</script>
<body>
<table align="center">
<tr>
<td>
<select size="10" id="left" multiple>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
</select>
</td>
<td>
<input type="button" value="--->" onclick="removeLeft()"/><br/>
<input type="button" value="===>" onclick="removeLeftAll()"/><br/>
<input type="button" value="<---" onclick=""/><br/>
<input type="button" value="<===" onclick=""/><br/>
</td>
<td>
<select size="10" id="right">
<option>选项9</option>
</select>
</td>
</tr>
</table>
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmFpdGhfeWVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
超链.html
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<script type="text/javascript">
<!--
function fun(){
alert("哈哈。我来了") ;
return false ;
}
//-->
</script>
<body>
<a href="http://blog.163.com/faith_yee/blog/demo03-dom节点的属性.html" onclick = "return false ;">demo03-dom节点的属性.html</a><br>
<a href = "javascript: void(0)">demo03-dom节点的属性.html</a>
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmFpdGhfeWVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
表单数据的推断.html
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
.one{
border:2px solid red ;
}
.two{
background-image:url("images/error.jpg");
background-position:right;
background-repeat:no-repeat;
}
</style>
</head>
<script type="text/javascript">
<!--
function checkInfo(form){
//推断通行证名称
var username = form.username.value ;
if(username == ""){
form.username.className = "two" ;
var span = document.getElementById("susername") ;
span.className = "one" ;
span.innerHTML = "<img src='http://blog.163.com/faith_yee/blog/images/error.jpg'>通行证用户姓名不能为空" ;
return false ;
}
return true ;
}
//-->
</script>
<body>
<form method = "post" action = "" onsubmit = "return checkInfo(this)">
<fieldset>
<table>
<tr>
<td align = "right">通行证名称：</td>
<td><input type="text" name="username">@163.com</td>
<td><span id = "susername"></span></td>
</tr>
<tr>
<td align = "right">密码:</td>
<td><input type="password" name="pass"></td>
<td><span id = "spass"></span></td>
</tr>
<tr>
<td align = "right">确认密码:</td>
<td><input type="password" name="repass"></td>
<td><span id = "srepass"></span></td>
</tr>
<tr>
<td colspan = "3"><input type="submit" value = "提交"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
javascript模拟类的实现.html
<!doctype html>
<html lang="en">
<head>
<title>javascript模拟类的实现</title>
</head>
<script type="text/javascript">
<!--
/*
1.定义类并创建类的实例对象
2.定义公有属性和私有属性
3.定义公有方法和私有方法
4.静态属性和静态方法
5.构造函数（无參，有參）
6.原型方式声明属性与方法
7.直接用Object或函数对象加属性与方法
*/
//----------------------------------------------------------
//1.定义类并创建类的实例对象
/*function Person(){
}
var p = new Person() ;*/
//------------------------------------------------------------
//2.定义公有属性和私有属性
/*
定义私有属性：
1.在函数里： var name = '张三' ;
2.在函数外: 採用对象.属性名
定义公有属性：
1.在函数里：this.name = '张三' ;
2.在函数外 类名.prototype.属性名
*/
/*function Person(){
var name = "张三" ;
this.age = 20 ;
}
var p = new Person() ;
//alert(p.name) ; //name是私有属性。仅仅能在函数中訪问
//alert(p.age);
//p.weight = 100 ; //定义一个私有属性
//alert(p.weight) ;
Person.prototype.height = 180 ;
alert(p.height) ;
var p1 = new Person() ;
//alert(p1.age) ;
//alert(p1.weight) ; //訪问不了weight,由于weight是专属于p对象的私有属性
alert(p1.height) ;*/
//-----------------------------------------------------------------
//3.定义公有方法和私有方法
/*
定义私有方法：
1.在函数里： var say = function() ;
2.在函数外: 採用对象.方法名
定义公有方法：
1.在函数里：this.name = function() ;
2.在函数外:类名.prototype.方法名
*/
/*function Person(){
var say = function(){
alert("我是私有方法") ;
}
this.show = function(){
say() ;
}
}
var p = new Person() ;
//p.show() ;
p.sing = function(){ //採用匿名函数的方式定义私有方法
alert("我想唱忘情水") ;
}
//p.sing() ;
Person.prototype.eat = function(a){
alert("我想吃" + a) ;
}
p.eat("鸡肉") ;
var p1 = new Person() ;
//p1.sing() ; //不能调用，由于sing方法是p对象的专属方法，私有的
p1.eat("鸭肉") ;*/
//--------------------------------------------------------------
//4.静态属性和静态方法 : 注意： 不能通过对象来调用
/*function Person(){}
Person.name = "张无忌" ; //定义一个静态属性
Person.show = function(){ //定义一个静态方法
alert("我是静态方法") ;
} ;
alert(Person.name) ;
Person.show() ;*/
//---------------------------------------------
//5.构造函数（无參。有參）
//注意： 不要起同名的函数
/*function Person(name){
this.name = name ;
}
function Person(name,age){
alert("我被调用了") ;
this.name = name ;
this.age = age ;
}
var p = new Person("张无忌",20) ;
alert(p.name + ":" + p.age) ;
var p1 = new Person("张三丰") ;
alert(p1.name) ;*/
//------------------------------------------------
//5.创建对象的方式
/*
创建对象的三种方式：
1. 採用new 函数名()
2. new Object() ;
3. json
*/
// var a = new Object() ;
// alert(typeof(a)) ;
//json格式
var json = {"a":"中国","b":"美国","c":"日本"} ;
//alert(typeof(json));
//alert(json["b"]) ;
//alert(json.b) ;
var json1 = {1:"中国",2:"美国",3:"日本"} ;
//alert(json1[2]) ; //此种情况下仅仅能採用中括号去拿值
//假设想都拿到
/*for(var x in json){
alert(x + ":" + json[x]) ;
}*/
//扩展：foreach循环是拿到对象的全部的属性
/*function fun(p){
for(var a in p){
alert(a) ;
}
}*/
//---------------------------------------------------
//给数组加入方法
//功能：获取数组中的最大值
/*Array.prototype.getMax= function(arr){
var max = arr[0] ;
for(var i = 1 ;i<arr.length ;i++){
if(arr[i] > max)
max = arr[i] ;
}
return max ;
}
var arr = [2,6,12,67,58] ;
var max = arr.getMax(arr) ;
alert(max) ;*/
//改造document.getElementById();
/*function $(id){
if(arguments.length > 1){
alert("传递的參数个数不正确") ;
return ;
}
var obj = document.getElementById(id) ;
if(obj == null){
alert("传递的參数必须是id的值") ;
return ;
}
return obj ;
}
function func(){
//var p = $("a,","b") ;
var p = $("p") ;
p.innerHTML = "刘德华" ;
p.onclick = function(){
alert(this.innerHTML);
}
}*/
//--------------------------------------------
//继承
/*function Person(){
this.name = "张无忌" ;
this.show = function(a){
alert(a) ;
}
}
function Student(){
this.name = "张三丰" ;
this.show =function(){
alert("我是子类的方法");
}
}
Student.prototype = new Person() ; //student继承了Person
var s = new Student() ;
//alert(s.name) ;
s.show("aaaa") ;*/
//------------------------------------------
//with(对象的名字)
//设定p标签的样式
function func(){
var p = document.getElementById("p") ;
//p.style.color = "red" ;
//p.style.border="1px solid green" ;
//p.style.fontSize = "50px" ;
with(p){
style.color = "red" ;
style.border = "1px solid green" ;
style.fontSize="50px" ;
}
}
//-->
</script>
<body>
<p id = "p" onclick = "fun(this)" name = "p1">李德华</p><input type="button" value="拿取p标签的内容" onclick="func()">
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmFpdGhfeWVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
JavaWeb-04(BOM&DOM)的更多相关文章
- 04 前端之BOM与DOM
目录 前端之BOM与DOM BOM与DOM操作 BOM操作 前端之BOM与DOM BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>& ...
- JavaScript（核心、BOM、DOM）
http://www.flyne.org/article/407 JavaScript(核心.BOM.DOM) JavaScript是基于对象和事件驱动的客户端脚本语言.有如下特点: 交互性 安全性( ...
- BOM，DOM，ECMAScripts三者的关系
一:DOM 文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API) DOM是HTML与JavaScript之间沟通的桥梁. DOM下,HTM ...
- BOM和DOM的区别和关联
BOM 1. BOM是Browser Object Model的缩写,即浏览器对象模型. 2. BOM没有相关标准. 3. BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切. ...
- 实现JavaScript的组成----BOM和DOM
我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了 ...
- BOM和DOM详解
DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形 ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- 前端之BOM和DOM
BOM和DOM简介 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”. DOM(Document Object Model)是指 ...
- BOM和DOM的区别
一.BOM和DOM之间的关系图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象由于window是顶层对象,因此调用它的子对象时可以不显示的指明 ...
随机推荐
- 5. MongoDB基本操作语句
转自:http://blog.51cto.com/shanqiangwu/1653577 #MongoDB中有三元素:数据库,集合,文档,其中“集合”就是对应关系数据库中的“表”,“文档”对应“行”. ...
- 手机验证 发送验证码倒计时js
html: <input name="Tel" class="weui-input" type="tel" placeholder=& ...
- Linux基础04
** Linux基本操作常用命令(四) ** Linux系统管理命令 1.top:查看系统资源,每隔三秒刷新一次,按q:退出浏览状态 2.free:查看内存信息,-m,以MB单位显示 3.netsta ...
- 使用Java操作Redis（二）
上篇文章中我们可以看到,通过自己动手编码来操作Redis是相当繁琐的,实际上我们在重复制造轮子.Redis网站上列举出了一些方便操作Redis的常用工具. 可供Java选择的比较多,这里介绍一下Jed ...
- ES6中includes、startsWith、endsWith
es6新增includes:返回布尔值,表示是否找到字符串.startsWith:返回布尔值,表示字符串是否在源字符串的头部位置.endsWith:返回布尔值,表示参数字符串是否在源字符串尾部. va ...
- 888E - Maximum Subsequence 中途相遇法
Code: #include<cstdio> #include<algorithm> #include<cstring> #include<string> ...
- LNMP安装部署开源IP管理工具phpipam
1.数据库 mariadb 安装 //依赖安装 yum install -y apr* autoconf automake bison bzip2 bzip2* compat* \ cpp curl ...
- 题解 P3521 【[POI2011]ROT-Tree Rotations】
这道题采用权值线段树合并的解法. 首先讲一下解法中出现的两个概念:权值线段树与线段树合并. 所谓权值线段树,可以理解为维护的信息反过来的普通线段树,我个人认为值域线段树这个名字其实要准确一些. 举个例 ...
- Map和Collection详解
Collection -----List -----LinkedList 非同步 ----ArrayList 非同 ...
- java关闭资源，自制关闭资源工具类
在网上看到一篇关于关闭资源的正确方式:http://blog.csdn.net/bornforit/article/details/6896775 该博文中的总结: (1)使用finally块来关闭物 ...