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>

JavaWeb-04(BOM&amp;amp;DOM)-LMLPHPJavaWeb-04(BOM&amp;amp;DOM)-LMLPHPJavaWeb-04(BOM&amp;amp;DOM)-LMLPHP

获取节点内容的方法.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>

JavaWeb-04(BOM&amp;amp;DOM)-LMLPHP

打印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="">JavaWeb-04(BOM&amp;amp;DOM)-LMLPHP

打印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>

JavaWeb-04(BOM&amp;amp;DOM)-LMLPHP

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="">JavaWeb-04(BOM&amp;amp;DOM)-LMLPHP

创建节点.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>

JavaWeb-04(BOM&amp;amp;DOM)-LMLPHPJavaWeb-04(BOM&amp;amp;DOM)-LMLPHP

操作节点的属性.html

    <!doctype html>
<html lang="en">
<head>
<title>操作节点属性</title>
</head>
<script type="text/javascript">
<!--
/*
功能: 按钮仅仅能点击一次
操作节点属性:
1. 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>

JavaWeb-04(BOM&amp;amp;DOM)-LMLPHP

加入表格行(练习),导购经常使用.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>

JavaWeb-04(BOM&amp;amp;DOM)-LMLPHP

全选全不选:选择你的爱好.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>

JavaWeb-04(BOM&amp;amp;DOM)-LMLPHP

下拉框选项的移动(多项).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>

JavaWeb-04(BOM&amp;amp;DOM)-LMLPHP

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>

JavaWeb-04(BOM&amp;amp;DOM)-LMLPHPJavaWeb-04(BOM&amp;amp;DOM)-LMLPHP

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="">

资料下载

05-18 12:12