JavaWeb-04
JavaWeb-BOM&DOM
BOM
一、知识回顾
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18* 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、鼠标移动事件
复制代码
1
2
3
4
5
6
7* onmousemove(event) : 鼠标移动事件event是事件对象。名字固定 * onmouseover : 鼠标悬停事件,当鼠标移动到某个控件上面的时候发生 this: 把this写在那个标签里面就代表那个标签对象 this.style.backgroundColor : 当调用样式表中的属性的时候,如果属性中间有横杠,则应去掉. 示例: 当鼠标移动到p标签上的时候,p标签改变样式 * onmouseout : 鼠标移出事件,当鼠标从控件上移开的时候
2、鼠标点击事件
复制代码
1
2
3onclick : 当鼠标单击某个控件时发生 示例: 当单击按钮时,在<p>中显示字符串 "冠希哥来了" 。
3、加载与卸载事件 ####
复制代码
1
2
3
4*加载事件(onload) : 在整个页面的元素加载完毕之后发生 *卸载事件(onunload) : 是在页面关闭时发生 注意: onload和onunload事件必须写在body或者图片标签里面
4、聚焦与离焦事件
复制代码
1
2
3
4*聚焦事件onfocus:是在控件获得焦点的时候发生 *离焦事件onblur:是在控件失去焦点的时候发生 示例: 文本框获得焦点的时候改变样式,失去焦点时变回原样
5、键盘事件
复制代码
1
2
3
4
5onkeypress,onkeyup,onkeydown *onkeypress: 按下键盘按键并松开 *onkeydown : 按下按键发生 *onkeyup: 松开按键
6、提交与重置事件
复制代码
1
2
3
4
5onsubmit,onreset *提交事件: 是在点击提交按钮后发生。(必须写在form表单中) *重置事件: 是在点重置交按钮后发生。 示例: 提交表单中的数据(检查):如果是陈冠希:通过,否则不能提交数据。
Demo
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50<!doctype html> <html lang="en"> <head> <title>重置与提交事件</title> </head> <script type="text/javascript"> <!-- /* 提交事件:点击提交按钮时发生,函数在去目的地之前调用,根据结果决定是否去目标页面。 注意:必须写在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>
7、选择与改变事件
复制代码
1
2
3
4
5onselect: 只能用于输入框. 当选择输入框中的文本时发生 onchange: 用于select和文本框.对于下拉框是在选项发生变化的时候发生,对于文本框是在文本框的内容发生变化并且失去焦点时发生。 示例: 当选择文本框的内容时,弹出文本框的内容 下拉框的selectedIndex属性:代表选中某项的索引
DOM技术
一、Dom概述?
1、什么是DOM?
复制代码
1
2document object model 文档对象模型
2、它的作用?
复制代码
1
2重构整个HTML 文档。可以添加、移除、改变或重排页面上的项目。
3、分类?
复制代码
1
2
3
4
5
6
7
8Core DOM : 定义了一套标准的针对任何结构化文档的对象 XML DOM : 定义了一套标准的针对 XML 文档的对象 HTML DOM : 定义了一套标准的针对 HTML 文档的对象。
4、xml介绍?
复制代码
1
2
3
4
5
6expensible markup language : 可扩展标记语言. <penson> <name>张无忌</name> <age>23</age> </person>
二、DOM树
1、结点 :
复制代码
1
2文档中的每个成分都是一个节点.(包括文本也是节点)
2、结点的属性
a. nodeName(节点名称)
复制代码
1
2
3
4
5元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document
b. nodeValue(节点值)
复制代码
1
2
3
4对于文本节点,nodeValue 属性包含文本。 对于属性节点,nodeValue 属性包含属性值。 nodeValue 属性对于文档节点和元素节点是不可用的。
c. nodeType(节点类型) : nodeType 属性可返回节点的类型。
复制代码
1
2
3
4标签节点的类型值是 1 属性节点的类型值是 2 文本节点的类型值是 3
Dom节点的属性.html
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<!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>
dom导航节点属性.html
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48<!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
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<!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
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<!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
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<!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>
打印select的值.html
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34<!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、结点的分类
复制代码
1
2
3
4
5
6
7整个文档是一个文档节点 每个 XML 标签是一个元素节点 包含在 XML 元素中的文本是文本节点 每一个 XML 属性是一个属性节点 注释属于注释节点
4、结点的关系
复制代码
1
2
3
4
5
6
7
8
9
10
11
12只有父子和兄弟关系 parentNode : 父节点 childNodes :所有的子标签 firstChild :第一个儿子 lastChild :最后一个儿子 nextSibling :下一个兄弟节点 previousSibling : 上一个兄弟节点
5、对结点进行CRUD操作(重点)
5.1、查找结点?
复制代码
1
2
3
4
5
6
7
8两种方式: a. 采用节点之间的关系去拿根节点: document.documentElement ; b. 采用方法去拿 getElementById() : 根据标签的ID拿到此标签节点 getElementsByTagName() : 根据标签的名字拿到此标签节点数组 getElementsByName(): 适用于表单控件。根据标签的name属性值拿到控件的数组。
5.2、删除结点?
复制代码
1
2removeChild() : 采用父节点删除子节点
5.3、创建节点:
复制代码
1
2
3
4
5document.createElement() : 创建一个标签节点 docuemnt.createTextNode("内容") :创建一个文本节点 节点的setAttribute() :添加属性节点
5.4、添加结点?
复制代码
1
2appendChild() : 添加子节点
5.5、修改或替换结点?
复制代码
1
2
3replaceNode(): 替换节点(适用于IE) replaceChild() : 替换子节点
替换节点和克隆节点.html
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41<!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>
创建节点.html
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42<!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
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44<!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>
添加表格行(练习),导购常用.html
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69<!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
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<!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
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66<!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>
超链.html
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<!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>
表单数据的判断.html
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60<!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
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214<!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>
资料下载
最后
以上就是高兴萝莉最近收集整理的关于JavaWeb-04(BOM&DOM)JavaWeb-04的全部内容,更多相关JavaWeb-04(BOM&DOM)JavaWeb-04内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复