成都传智播客 cd.itcast.cn 成都传智播客-助你成为高薪程序员.ppt
《成都传智播客 cd.itcast.cn 成都传智播客-助你成为高薪程序员.ppt》由会员分享,可在线阅读,更多相关《成都传智播客 cd.itcast.cn 成都传智播客-助你成为高薪程序员.ppt(71页珍藏版)》请在三一文库上搜索。
1、成都传智播客 ,成都传智播客-助你成为高薪程序员,1、2010年7月,传智播客在成都设立分中心(传智播客成都分中心),EasyJF开源创始人蔡世友老师任首席讲师,7月8日,成都传智播客JavaEE+3G就业班第一期正式开课。 2、2010年9月,成都传智播客推出先就业后付款,毕业后没有从事软件开发、月薪未达指定数额,则退还全部学费的优惠政策,广受学员好评。 3、2010年11月,第一期学员毕业,在仅一个月的时间里,全部学员顺利就业(工作地为成都),如愿走上软件开发工程师的岗位,月薪平均3000以上,有个别学员甚至拿到4K、K。 4、2011年2月,成都传智携手CSDN推出“黑马训练营”课程,并
2、作如下承诺:“不用花一分钱即可入学、不就业不还学费、就业不做软件开发不还学费”,让学员“就业后靠自己的能力逐步偿还学费”。,成都传智播客 ,Javascript加强,讲师:蔡世友 Email:,成都传智播客 ,浏览器的对象树,1. navigator 2. Window,document (文档对象) frame (框架对象) location (位置对象) history (历史对象),links 链接对象 archors 锚对象 forms 表单对象 images 图片对象,成都传智播客 ,window对象常用方法,alert(信息) : 消息框 prompt(提示信息,默认值): 标准输
3、入框 confirm( ) : 确认框 open( ) : 打开一个新窗口 close( ) : 关闭窗口,成都传智播客 ,Document对象,Document对象:能反映当前页面的各种属性。 Document对象的常用属性 title:显示文章的标题。 bgColor:显示页面的背景色。 fgColor:显示页面的前景色。 Document对象的常用方法: write():在页面中输出文本。 writeln():在页面中输出文本,并自动换行。,成都传智播客 ,Form表单对象,访问表单的方式: document.formsn document.表单名字 ,成都传智播客 ,Form表单属性,
4、成都传智播客 ,javaScript定义函数的三种方式,正常方法 function print(msg) document.write(msg); ,成都传智播客 ,javaScrip定义函数的三种方式,函数直接量定义函数 /使用函数直接量的方式定义函数 var result=function(a,b)return a+b; /调用使用函数直接量定义的函数 var sum=result(7,8); alert(sum); 注:函数直接量是一个表达式,它可以定义匿名函数,成都传智播客 ,javaScrip定义函数的三种方式,构造函数方法 new Function(); /构造函数方式定义java
5、script函数 注意Function中的F大写 var add=new Function(a,b,return a+b;); /调用上面定义的add函数 var sum=add(3,4); alert(sum); 注:接受任意多个字符串参数,最后一个参数是函数体。 如果只传一个字符串,则其就是函数体。,成都传智播客 ,DOM,DOM :DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件 D:文档 html 文档 或 xml 文档 O:对象 document 对象的属性和方法
6、 M:模型 DOM 是针对xml(html)的基于树的API。 DOM树:节点(node)的层次。 DOM 把一个文档表示为一棵家谱树(父,子,兄弟) DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面,成都传智播客 ,DOM的结构,成都传智播客 ,DOM的结构,成都传智播客 ,节点及其类型,节点 * 由结构图中我们可以看到,整个文档就是一个文档节点。 * 而每一个HMTL标签都是一个元素节点。 * 标签中的文字则是文本节点。 * 标签的属性是属性节点。 * 一切都是节点 节点树 节点树的概念从图中一目了然,最上面的就是“树根”了。节点之间有父子关系,祖先与子孙关系,兄妹关
7、系。这些关系从图中也很好看出来,直接连线的就是父子关系了。而有一个父亲的就是兄妹关系,北京传智播客教育 ,NODE接口的特性和方法,成都传智播客 ,查找元素节点,getElementById() 寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素,它返回 null. var oElement = document.getElementById ( sID ) 该方法只能用于 document 对象, function test() var usernameElement=document.getElementById(“tid“); /获取
8、元素的值 alert(“usernameElement.value: “+usernameElement.value) /获取元素的类型 alert(“usernameElement.type: “+usernameElement.type) ,成都传智播客 ,查找元素节点,getElementsByName() 寻找有着给定name属性的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。, function test() var tnameArray=document.getElement
9、sByName(“tname“); alert(tnameArray.length); for(var i=0;itnameArray.length;i+) window.alert(tnameArrayi.value); ,成都传智播客 ,查找元素节点, /该方法返回是数组类型 var usernameElements=document.getElementsByName(“username“); for (var i = 0; i ,成都传智播客 ,查找元素节点,getElementsByTagName() 寻找有着给定标签名的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组
10、来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。 var elements = document.getElementsByTagName(tagName); var elements = element.getElementsByTagName(tagName); 该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。 var container = document.getElementById(“sid”); var elements = container.getElementsByTagName(“p”);
11、 alert(elements .length);,成都传智播客 ,查找元素节点,var inputElements=document.getElementsByTagName(“input“); for(var i=0;iinputElements.length;i+) if (inputElements.type != submit) inputElementsi.onchange = function() alert(this.value) ; var selectElements=document.getElementsByTagName(“select“); for (var i =
12、 0; i selectElements.length; i+) selectElementsi.onchange=function() alert(this.value); ,成都传智播客 ,查找元素节点,var inputElements=document.getElementsByTagName(“input“); for(var i=0;iinputElements.length;i+) if (inputElements.type != submit) inputElementsi.onchange = function() alert(this.value) ; var selec
13、tElements=document.getElementsByTagName(“select“); for (var i = 0; i selectElements.length; i+) selectElementsi.onchange=function() alert(this.value); ,成都传智播客 ,查找元素节点,var textareaElements=document.getElementsByTagName(“textarea“); for (var i = 0; i textareaElements.length; i+) textareaElementsi.onch
14、ange = function() alert(this.value); ; ,成都传智播客 ,DOM 属性 - nodeName,文档里的每个节点都有以下属性。 nodeName:一个字符串,其内容是给定节点的名字。 var name = node.nodeName; * 如果节点是元素节点,nodeName返回这个元素的名称 * 如果是属性节点,nodeName返回这个属性的名称 * 如果是文本节点,nodeName返回一个内容为#text 的字符串 注:nodeName 是一个只读属性。,成都传智播客 ,DOM 属性 - nodeType,nodeType:返回一个整数,这个数值代表着给
15、定节点的类型。 nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种: Node.ELEMENT_NODE -1 - 元素节点 Node.ATTRIBUTE_NODE -2 - 属性节点 Node.TEXT_NODE -3 - 文本节点 nodeType 是个只读属性,成都传智播客 ,DOM 属性 - nodeValue,nodeValue:返回给定节点的当前值(字符串) 如果给定节点是一个属性节点,返回值是这个属性的值。 如果给定节点是一个文本节点,返回值是这个文本节点的内容。 如果给定节点是一个元素节点,返回值是 null nodeValue 是一个 读/写 属性,但不
16、能对元素节点的 nodeValue 属性设置值, 但可以为文本节点的 nodeValue 属性设置一个值。 var li = document.getElementById(“li”); if(li.firstChild.nodeType = 3) li.firstChild.nodeValue = “国庆60年”;,成都传智播客 ,元素节点,/测试元素节点,输出节点名称,节点的类型,节点的值 var liElements=document.getElementsByTagName(“li“); for(var i=0;iliElements.length;i+) alert(liElemen
17、tsi.nodeName); alert(liElementsi.nodeType); aler,成都传智播客 ,文本节点,/测试元素节点,输出节点名称,节点的类型,节点的值 var liElements=document.getElementsByTagName(“li“); for(var i=0;iliElements.length;i+) alert(liElementsi.childNodes0.nodeName); alert(liElementsi.childNodes0.nodeType); alert(liElementsi.childNodes0.nodeValue); l
18、iElementsi.childNodes0.nodeValue=“南京“; alert(liElementsi.childNodes0.nodeValue); /另一种读取方法 alert(liElementsi.firstChild.nodeName); alert(liElementsi.firstChild.nodeType); alert(liElementsi.firstChild.nodeValue); ,成都传智播客 ,查看是否存在子节点,hasChildNodes() 该方法用来检查一个元素是否有子节点,返回值是 true 或 false. var booleanValue
19、= element.hasChildNodes(); 文本节点和属性节点不可能再包含任何子节点,所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false. 如果 hasChildNodes 方法的返回值是 false,则 childNodes,firstChild,lastChild 将是空数组和空字符串。,var selectElements=document.getElementsByTagName(“select“); alert(selectElements0.hasChildNodes() var inputElements=document.getEleme
20、ntsByTagName(“input“); for(var i=0;iinputElements.length;i+) alert(inputElementsi.hasChildNodes(); ,成都传智播客 ,遍历节点树,childNodes:返回一个数组,这个数组由给定元素节点的子节点构成: var nodeList = node.childNodes; 文本节点和属性节点都不可能再包含任何子节点,所以它们的 ChildNodes 属性永远会返回一个空数组。 如果想知道某个元素有没有子节点,可以用 hasChildNodes 方法。 如果想知道某个元素有多少个子节点,可以用 child
21、Nodes 数组的 length 属性。 childNodes 属性是一个只读属性。,成都传智播客 ,获取第一个子节点,firstChild:该属性返回一个给定元素节点的第一个子节点,返回这个节点对象的指针。 var reference = node.firstChild; 文本节点和属性节点都不可能包含任何子节点,所以它们的 firstChild 属性永远会返回 null。 某个元素的 firstChild 属性等价于这个元素的 childNodes 节点集合中的第一个节点,即: var reference = node.ChildNodes0; firstChild 属性是一个只读属性。,
22、成都传智播客 ,获取最后一个子节点,lastChild:对应 firstChild 的一个属性。 nextSibling: 返回一个给定节点的下一个兄弟节点。 parentNode:返回一个给定节点的父节点。 parentNode 属性返回的节点永远是一个元素节点,因为只有元素节点才有可能包含子节点。 document 节点的没有父节点。 previousSibling:返回一个给定节点的上一个兄弟节点,成都传智播客 ,练习,问题: 打印 ”明天休息” (利用两种方法) 提示:使用(firstChild lastChild childNodes),成都传智播客 ,练习,问题: 打印出 id=“
23、bj” 该节点的所有子节点的(nodeName, nodeType, nodeValue) 同时打印文本值 北京 海淀 奥运,成都传智播客 ,练习,问题: 输出所有select元素下的所有option元素中对应的文本内容 例如:中专 输出-中专,成都传智播客 ,查找属性节点,getAttribute() 返回一个给定元素的一个给定属性节点的值 var attributeValue = element.getAttribute(attributeName); 给定属性的名字必须以字符串的形式传递给该方法。 给定属性的值将以字符串的形式返回,如果给定属性不存在,getAttribute() 将返回
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 成都传智播客 cd.itcast.cn 成都传智播客-助你成为高薪程序员 成都 传智播客 cd itcast cn 成为 高薪 程序员
链接地址:https://www.31doc.com/p-3100658.html