javaScript复习与回顾:
一. 创建对象
1,在javascript中所有的函数都可以作为构造器,使用new调用函数后总可以返回一个对象.
<script type="text/javascript" src="Println.js"></script>
<script type="text/javascript" >
function Person(name,age)
{
this.name = name;
this.age = age;
}
var p1 = new Person();
p1.name = "kudy";
p1.age = 18;
//println(p1.name);
var p2 = new Person("meiyi",19);
println(p2.age);
</script>
二. 使用Object直接创建对象.
JavaScript的对象都是Object类的子类,所以我们在创建的时候可以写,javaScript可以动态呢的添加方法,也可以动态的添加属性.
Var p = new Object();
动态的方式一:
<script type="text/javascript" src="Println.js"></script>
<script type="text/javascript" >
var p = new Object();
p.name = "kudy";
p.age = 18;// 动态分配属性的一组方式
p.show = function()
{
return this.name+"@"+this.age;
}
println(p.show());
</script>
注意: 为对象添加方法时,不要定义函数后面添加括号,一旦添加了括号,将表示把函数的返回赋值给对象的属性..
三. 使用json语法创建对象
使用json语法创建javaScript对象时,属性值不仅可以是普通的字符串,也可以是任何的基本数据类型,还可以是函数,数组,甚至是另外一个Json语法创建的对象.
<script type="text/javascript" src="Println.js"></script>
<script type="text/javascript">
var p =
{
name : "kudy",
arr:[1,2,3,4,5]
}
println(p.arr);
</script>
dom:start:
一. Dom把所有的标签都看成是对象,当获取到对象.我们就可以操作对象.把对象里面的内容进行修改.
Dom:Doeument Objecy Model (文档对象的模型)
1,用来将标记型文档封装成对象,并将标记型文档中的所有内容(标签,文本,属性)都封装成对象.
因为对象的出现就可以有属性和行为被调用.
2,文档对象的模型
文档:标记型文档.
对象:封装了属性和行为的实例,可以被直接调用.
模型:所有的标记型号文档都具备了一些共性特征的一个体现
标记下文档(标签,属性,标签中封装的数据)
只要是标记下的文档,Dom这种技术都可以对其进行操作.
3,常见的标记下文档: html,xml,
4,Dom这种技术是如何对标记下文档操作的呢?
要操作标记型文档必须对其进行解析.
5,Dom技术的解析方式:将标记型文档解析成一棵Dom树,并将树中的内容都封装成节点的对象.
注意:
好处:
这种dom解析方式的好处:可以对树中的节点进行任意的操作,比如: 增删改查.
弊端:
这种解析需要对整个标记型文档加载到内存,意味着如果标记型文档的体积非常之大.较为浪费空间.
简介另一部解析方式:
Sax解析的方式:
基于事件驱动的解析,获取数据的速度很快,但是不能对标记进行增删改查.
Dom模型有三种:
Dom level1:将html文档封装成对象.
Dom level2:在level1的基础上加入了新功能,比如解析名称空间
Dom level3:将xml文档封装成对象.
DHtml:动态的Html,不是一门语言,是多种技术综合体的简称.
这四种技术在动态html页面效果定义时,都处于什么样的方式呢?负责什么样的职位呢?
Html: 负责提供标签,对数据进行封装,目的是便于对该标签中的数据进行操作
Css: 负责提供样式属性,对标签中的样式进行样式的定义.(对数据的样式进行定义)
Dom:负责将标签型文档与文档中的所有内容进行解析,并封装成对象.在对象中定义更多的属性和方法,便于对对象进行操作.
JavaScripy:负责提供程序语言的设计,对页面中的对象进行逻辑上的操作,简单的说:负责页面定义的行为,就是页面的动态效果.
所以,
JavaScript是动态效果的主力编程语言.
实例代码:
Dhtml+XmlhttpRequest = Ajax;
<html xmln="http://www.jvami.com">
<div>然来这么简单</div>
</hrml>
二. window对象的操作.
Window.是可以直接省略的.因为当浏览器一加载就会自动创建window对象.
1,Navigator对象的学习:
<body>
<script src="println.js" type="text/javascript"></script>
<script type="text/javascript">
function getWindow()
{
var appName = navigator.appName;//获取浏览器的的名称
var browser = navigator.appVersion;//获取浏览器的运行平台和版本
var platform = navigator.platform;
var userAgent = navigator.userAgent;
println(appName+"-----"+browser+"-------"+platform+"------"+userAgent);
}
</script>
<input type="button" value="点我试试" οnclick="getWindow()"/>
</body>
2,location:包含关于当前的URL的信息.
<body>
<script src="println.js" type="text/javascript"></script>
<script type="text/javascript">
function getWindow()
{
//设置或获取对象指定的文件名或路径。
var pathname = window.location.pathname;
alert(pathname);
alert(window.location.protocol); //文件类型
}
</script>
<input type="button" value="点我试试" οnclick="getWindow()"/>
3,window中的常用方法
a)
<script src="println.js" type="text/javascript"></script>
<script type="text/javascript">
/*
演示window中常见的方法
*/
function getWindow2()
{
var b = window.confirm("来也,点你就点你啊");
println(b);
}
var iTime; //定义成全局变量
function getWindow()
{
iTime = window.setInterval("alert('hello,world')",1000);
//返回的是一个标记符,Integer整型的
}
function getStop()
{
//alert("");显示包含由应用程序自定义消息的对话框。
window.clearTimeout(iTime);
}
</script>
<input type="button" value="点我试试" οnclick="getWindow()"/>
<input type="button" value="stop" οnclick="getStop()"/>
b)
<script src="println.js" type="text/javascript"></script>
<script type="text/javascript">
/*
窗口的抖动的一个演示:
*/
function windowMove()
{
var x = 0;
while(x<100000)
{
window.moveBy(20,0);
window.moveBy(0,20);
window.moveBy(-20,0);
window.moveBy(0,-20);
x++;
}
}
</script>
<input type="button" value="点我试试" οnclick="windowMove()"/>
三. 事件的用法:
<script type="text/javascript">
//由于window卸载前,而触发是由用户关闭浏览器窗口必须要做的..所以不需要我们来操作
onload = function()
{
window.status = "加载完毕了哦,显示在窗口底部状态栏的信息";
}
onload = function()
{
alert("哥们,加载完毕啦");
}
onhelp = function()
{
alert("不会使用浏览器吗?");
}
{
alert("你移动这个窗口干嘛呢?");
}
</script>
四. 恶意弹窗广告的演示:
1,
<script type="text/javascript">
window.onload = function()
{
open("OpenTest.html","_blank","height=500,width=400,status=no,toolbar=no,menubar=no,location=no");
}
</script>
<div>
新浪体育讯 英足总对斯托克城后卫威尔金森的场上不当行为作出了指控，原因是他在比赛中肘击曼城(微博)(微博)前锋巴洛特利《卫报》称，他将可能面临3场的禁赛。
曼城客场挑战斯托克城的比赛进行到76分钟，巴洛特利突然倒地不起，慢动作显示，巴神疑似遭到了肘击的动作。主裁判克拉滕伯格当时和球员有所交流，但并没有出牌。现在，威尔金森已经被足总的起诉，他将很有可能面临停赛的处罚。斯托克后卫将被允许在本周三前进行上诉。
(柏亚舟)
</div>
五. document对象的演示:
a) 该对象将标记型的文档进行封装,该对象的作用,是对可以标记型文档进行操作.
b) 最常见的操作就是,想要实现动态的效果,需要对节点进行操作,首先要获取到节点.
c) 想要获取节点,必须要先获取到节点所属的文档对象document.
d) 所以documet对象是最常见的操作就是获取页面中的所有的节点.
e) 注意:
1. 这个对象里面其实就是封装了所有的标签作为对象.
1,获取节点的方法体现:
1,getElementById():通过标签的id属性值获取该标签的节点,返回该标签的节点.
2,getElementsByName():通过标签的name属性获取节点,因为name有相同的,所以返回的是一个数组.
3,getElementsByTagName():通过标签名获取节点,因为标签名会重复,所以返回的是一个数组.
凡是带s的都是数组
2,节点都有三个必备的条件: 节点名称,节点类型,节点值
nodeName ,nodeType,nodeValue;
3,常见节点类型有三中:
1,标签型的节点 : 1
2,属性节点: 2
3,文本节点: 3
主要内容哦:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript" src="println.js"></script>
<script type="text/javascript">
/*
需求:
思路:
通过documet对象完成,因为div有id属性.所以我们可以通过获得id的方法去完成他
把所有的标签已经封装成对象
*/
/*
当内容加载完毕触发
window.onload = function()
{
var divNode = document.getElementById("divid");
alert(divNode.nodeType);
}
*/
function getNodeDemo()
{
var divNode = document.getElementById("divid");//通过标签的id获取到当前的对象
//获取到对象可以使用对象里面的属性
/*
alert("类型的名称:"+divNode.nodeName); //获取到该节点类型的名称
alert("获取该节点的类型:"+divNode.nodeType); //1代表是标签型的节点
alert("该节点里面的内容:"+divNode.nodeValue); //获取文本的节点
*/
//我现在就是想更改里面的内容
divNode.innerHTML = "hi".fontcolor("red");
}
/*
getElementsByName
: 由于name里面的内容是不固定的.会生成一个数组..
如何证明呢?
步骤:
1,获取到一个节点的集合
println(useNode.length);//长度显示是1
alerty(useNode[0])//获取到这个对象 input
再通过ibnput对象里面的属性value把:
获取控件的默认或选中值显示出来.
*/
function getNodeDemo2()
{
var useNode = document.getElementsByName("textid"); //根据 NAME 标签属性的值获取对象的集合。
//var useNode = document.getElementsByName("textid"[0]);//
alert(useNode[0].value);//把集合里面的第一个name标签的value给我输出来..value是用户输入的哦
//alert(useNode.value);//把这个内容输出去也可以
}
function getNodeDemo3()
{
/*
获取对象..为对象添加属性.并且修改里面的属性.. 获取到对象..就可以修改里面属性的内容..这个是通过标签来获取的
*/
var urlNode = document.getElementsByTagName("a");//返回的是一个集合.获取该标签名字的对象
//println(urlNode.length); 有5个
for(var x=0; x<urlNode.length; x++)
{
//urlNode 获取到a对象
urlNode[x].target="_black";
}
}
/*
* 对于页面中的超链接，新闻链接通过新窗口打开，门户网站链接在当前页面打开。
* 当然是要获取其中被操作的超链接对象啊。
* 可是通过document获取超链接，拿到的是页面中所有的超链接节点。
* 只想获取一部分该如何办呢？
* 只要获取到被操作的超链接所属的节点即可。
*
* 在通过这个节点获取到它里面所有的超链接节点。
*
1.首先: 我们把需要定义的在空白页面打开的内容放在div标签里面去..我们想获取到div标签里面的id属性
*/
function getNodeDemo4()
{
//document把所有的标签都封装成对象
//1,通过document的方法获取到该标签
var newNode = document.getElementById("newsLink");//获取到节点
//2,通过div节点的方法getElementsByTagName;//获取基于指点元素名称的对象集合
/*
记住:所有的容器型标签都具备这个方法,在该标签范围内获取制定名称的标签.都可以通过这个方法获取
*/
var urlNode = newNode.getElementsByTagName("a");//获取到集合里面包含a标签的内容
//println(urlNode.length); 里面有三个
for(var x=0; x<urlNode.length; x++)
{
//获取到a标签的对象啦
urlNode[x].target="_black";//空白页面打开的内容
}
}
</script>
<!--
<div id="divid">读书改变命运!!~~~</div>
-->
<div id="divid">hello</div>
<!-->
<input type="text" name="textid"/>
<input type="button" value="你来试试啊" οnclick="getNodeDemo2()"/>
-->
<input type="button" name="urlName" value="点我,有你好看的~~" οnclick="getNodeDemo4()"/>
<a href="http://www.sina.com.cn">kudy博客</a>
<a href="http://www.javami.com">kudy技术</a>
<div id="newsLink">
<a href="http://www.javami.net">kudy编程</a>
<a href="http://www.163.com">sina.com</a>
<a href="http://www.115.com">115网盘</a>
</div>
</body>
</html>
六. 通过节点的层次关系获取节点对象.
<!--
通过节点的层次关系获取节点对象
关系:
1,父节点:parentNode :对应一个节点的对象
2,字节点:childNodes:对应一个节点的集合.
(儿子可以有多个,但是父亲只有一个)
3,兄弟节点:
上一个兄弟节点:previousSibling
下一个兄弟节点:nextSibling
-->
注意:
尽量少用兄弟节点,因为在解析的时候出现浏览器不同解释一致,会解析出标签间的空白文本节点.
源码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--
通过节点的层次关系获取节点对象。
关系：
1，父节点: parentNode:对应一个节点对象。
2，子节点：childNodes:对应一个节点集合。
3，兄弟节点：
上一个兄弟节点：previousSibling
下一个兄弟节点：nextSibling
-->
<script type="text/javascript">
function getNodeByLevel(){
//获取页面中的表格节点。
var tabNode = document.getElementById("tabid");
//获取父节点。parentNode
// var node = tabNode.parentNode;
// alert(node.nodeName);//body
//获取子节点。childNodes
// var nodes = tabNode.childNodes;
// alert(nodes[0].childNodes[0].nodeName);
//获取兄弟节点。
//上一个。
// var node = tabNode.previousSibling;
// alert(node.nodeName);
// var node = tabNode.nextSibling.nextSibling;
// alert(node.nodeName);
// 尽量少用兄弟节点，因为在解析的时候会出现浏览器不同解析不一致，
// 会解析出标签间的空白文本节点
}
</script>
<input type="button" value="通过节点层次关系获取节点" οnclick="getNodeByLevel()" />
<div>div区域</div>
<span>span区域</span>
<table id="tabid">
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<span>span区域11</span>
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
</dl>
<a href=''>一个超链接</a>
</body>
</html>
七. 节点的增删改查;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--传说中的样式表是定义在title标签里面的哦-->
<style>
div
{
border :#00ccff 1px solid;
}
#div_1
{
background-color:#0000FF;
}
#div_2
{
background-color:#00FF66;
}
#div_3
{
background-color:#FF0099;
}
#div_4
{
background-color:#6633CC;
}
</style>
</head>
<body>
<script type="text/javascript" src="println.js"></script>
<script type="text/javascript">
function crtAndAdd()
{
/*
需求: 在div_1节点中添加一个文本节点
*/
//1,创建节点,使用document中的createTextNode方法 这个是文本标签哦
var oTextNode = document.createTextNode("然来是这样的~~");
//println(oTextNode.nodeName); 文本标签
//2,获取div_1节点..说白了就是获取他的对象
var odiv = document.getElementById("div_1");
//3,将文本节点添加到一个div_1节点中.. 相当于多了一个子 标签了哦(文本标签)
odiv.appendChild(oTextNode);
}
//需求：在div_1中创建并添加一个按钮节点。
function crtAndAdd2(){
//创建一个按钮节点
var buttonNode = document.createElement("input");//根据这个标签创建一个按钮对象
buttonNode.type = "button";
buttonNode.value = "1111";
//获取div_1节点
var odiv = document.getElementById("div_1");
//将按钮中的节点添加到div_1节点中..相当于是他的儿子.可以有多个
odiv.appendChild(buttonNode);
}
//通过另一种方式完成添加节点。
function crtAndAdd3()
{
/*
* 其实是使用了容器型标签中的一个属性。innerHTML.
* 这个属性可以设置html文本。
设置或获取位于对象起始和结束标签内的 HTML。
但是这个没有儿子这个概念.只会设置一次..
这个方法是不会再次生成多个的
*/
var odiv = document.getElementById("div_1");
odiv.innerHTML = "<input type='button' value = '我也可以啊'/>"
}
//需求将div_2节点删除。
function delNode(){
/*
//1,获取div_2的对象
var odiv = document.getElementById("div_2");
//2,使用div节点中的removeNode方法删除..较少使用
odiv.removeNode(true); //true,代表把他们下面的都一起删除
*/
//一般使用removeChild方法,
//先找父类.再把他的儿子干掉
var odiv = document.getElementById("div_2");
//1,获取它的父节点
var odiv2 = odiv.parentNode;//获取它的父节点
odiv2.removeChild(odiv);//获取父节点.删除子节点
}
//需求：用div_3节点替换div_1节点。
/*
* 获取div-3和div-1.
* 使用replaceNode进行替换。
*/
function updateNode(){
var oDivNode_1 = document.getElementById("div_1");
var oDivNode_3 = document.getElementById("div_3");
//oDivNode_1.replaceNode(oDivNode_3);
// 建议使用replaceChild方法。
/*
首先找他的父亲,,,让它儿子交换..
*/
var a = oDivNode_1.parentNode;//找到它父亲
a.replaceChild(oDivNode_1,oDivNode_3); //用新的子元素替换已有的子元素。
}
//需求：希望用div_3替换div-1，并保留div-3节点。
//其实就是对div_3进行克隆
function cloneDemo(){
//获取1节点
var oDivNode_1 = document.getElementById("div_1");
//获取3节点
var oDivNode_3 = document.getElementById("div_3");
//克隆3节点的内容..到一个新的字节对象里面..true 完全一样
var oCopyDiv_3 = oDivNode_3.cloneNode(true);
//println(oCopyDiv_3.nodeName);
//replaceNode 用其它元素替换对象。
// oDivNode_1.replaceNode(oCopyDiv_3); //把克隆到的替换到新的对象上面来 (不建议使用)
var b = oDivNode_1.parentNode;//找它父亲去
b.replaceChild(oCopyDiv_3,oDivNode_1); //把他的儿子的
//用新的子元素替换已有的子元素。
}
</script>
<input type="button" value="创建并添加节点" οnclick="crtAndAdd3()"/>
<input type="button" value="删除节点" οnclick="delNode()"/>
<input type="button" value="修改节点" οnclick="updateNode()"/>
<input type="button" value="克隆节点" οnclick="cloneDemo()"/>
<div id = "div_1">
<!--<text></text> 说白了就是添加了这个东西-->
</div>
<div id = "div_2">
Good Good Study!
</div>
<div id = "div_3">
Day Day up!
</div>
<div id="div_4">
节点的增删改查
</div>
</body>
</html>
明天需要复习,,,kudy..
时间是宝贵的,编程是不难的.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
