PHP基础教程-零基础学习PHP-JavaScript高级

JavaScript高级,网址：电话：4007001307,JavaScript高级,BOM事件处理DOM概念DOM技术Form表单,浏览器对象BOM简介,Window窗口对象,location地址对象,document文档对象,FORM表单对象,浏览器对象的分层结构,window.document.myform.text1,window对象,window对象代表浏览器的整个窗口，编程人员可以利用window对象控制浏览器窗口的各个方面，如改变状态栏上的显示文字、弹出对话框、移动窗口的位置等。对window对象的属性和方法的引用，可以省略“window.”这个前缀例如：window.alert(你好)可以直接写成alert(你好)。,Window对象,方法,Window对象,functionopenwindow()window.open(google.htm);functionclosewindow()window.close();,使用Open方法打开新窗口,使用Close方法关闭窗口,添加单击事件,因为window是最顶层的根，所以可以省略window.open(google.htm);可简写为：open(google.htm);close（）方法也是如此。,open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：height：窗口高度；width：窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar，scrollbars表示菜单栏和滚动栏。resizable：是否允许改变窗口大小，yes或1为允许location：是否显示地址栏，yes或1为允许status：是否显示状态栏内的信息，yes或1为允许；,Window对象,我们需要预先制作好广告页面，假设为adv.htm，打开广告窗口的语句如下：open(“adv.htm”,“”,“toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150”);,functionopenwindow()open(adv.htm,toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150);看看和我一起打开的广告窗口,Window对象,使用Open方法打开广告新窗口,添加页面加载事件,对窗口可以设置的可选参数,window对象方法,navigate()方法setInterval()方法clearInterval()方法moveTo()方法resizeTo()方法showModalDialog()方法showModelessDialog()方法,网页文件：window.open(information.html,_blank,top=0,left=0,width=200,height=200,toolbar=no);information.html网页文件：window.setTimeout(window.close(),5000);通知5秒钟以后，这个窗口会自动关闭！test.html网页文件：（全屏）window.open(information.html,_blank,top=0,left=0,toolbar=no，fullscreen=yes,titlebar=no);,information.html网页文件：(增大)window.setTimeout(window.close(),5000);window.setInterval(grow(),100);functiongrow()window.resizeBy(5,5);通知5秒钟以后，这个窗口会自动关闭！,Window对象,对象属性,JavaScript事件处理程序,JavaScript事件处理程序就是一组语句，在事件（如点击鼠标或移动鼠标等）发生时执行,事件,处理事件,事件处理程序的基本语法是：事件名=JavaScript代码或调用函数例如：表示鼠标按下时，将调用执行函数check()。,JavaScript事件,如何编写事件处理程序,一、在事件源对象所对应的HTML标签上增加一个要处理事件属性，让事件属性值等于处理事件的函数名或程序代码。格式：|”,例1：例2：functionshow()varstr=建议浏览器的分辨率：800 x600;alert(str);,禁用浏览器右键,二、直接在JavaScript代码中，设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码。格式：对象名.on事件=|例1：document.onload=alert(建议浏览器的分辨率：800 x600);例2：document.onload=function()varstr=建议浏览器的分辨率：800 x600;alert(str);,三、在一个专门的标签对中编写某个元素对象的某种事件处理程序代码，并用for属性指定事件源和用event属性指定事件名，这种标签中的脚本程序只在指定事件源的指定事件发生时才被调用执行，这种方式常用于网页文档中的各种插件对象的事件处理程序：window.event.returnValue=false;,event对象,属性,eventobject.html按下键盘事件functionwindow_onkeypress()alert(window.event.keyCode);按ESC关闭窗口functionwindow_onkeypress()/alert(window.event.keyCode);if(window.event.keyCode=27)window.close();,其它属性functioncheckCancel()if(window.event.shiftKey)window.event.cancelBubble=true;functionshowSrc()if(window.event.srcElement.tagName.toLowerCase()=img)/IMG要大写alert(window.event.srcElement.src);,window对象事件,专用事件：onload事件onunload事件onbeforeunload事件通用事件onclick事件onmousemove事件onmouseover事件onmouseout事件onmousedown事件onmouseup事件onkeydown事件onkeyup事件onkeypress事件,window_event.htmlalert(ok2);helloalert(ok3);alert(ok1);,window对象属性,-closed属性-opener属性-defaultstatus属性-status属性-screenTop属性-screenLeft属性,window.html关闭子窗口varchild=window.open(information.html,_blank,top=0,left=0,toolbar=no，fullscreen=yes,titlebar=no);functioncloseChild()if(!child.closed)child.close();,文本在状态栏上显示/setInterval(scroll(),100);varspace_num=0;vardir=1;functionscroll()varstr_space=;space_num=space_num+1*dir;if(space_num40|space_num,information.htmlwindow.setTimeout(window.close(),5000);window.setInterval(grow(),100);functiongrow()window.resizeBy(5,5);functioncloseit()window.close();opener.start();/or/window.setTimeout(window.closeit(),5000);/通知5秒钟以后，这个窗口会自动关闭！,window对象BOM对象属性,location对象frames数组对象screen对象history对象navigator对象document对象,document对象,属性,functionchangeDoc()document.bgColor=blue;document.fgColor=red;document.alinkColor=yellow;document.vlinkColor=0 x00ff00;document.linkColor=gray;这是普通的文本这是一个超链接,document对象,无标题文档functionchange(color)document.bgColor=color;移过来我变色给你看看！变红色|变蓝色|变黄色,利用document对象的bgColor属性改变背景色,添加鼠标悬停事件,document对象的方法,方法,这是最初的内容document.write(这是write方法动态写入的内容);functionupdatedoc()document.writeln(abc);document.writeln(def);document.close();varowin=window.open(,_blank);owin.document.writeln(xyz);owin.document.close();owin.document.write(abc);owin.document.write(def);owin.document.close();,这是最初的内容document.write(这是write方法动态写入的内容);functionupdatedoc()document.writeln(abc);document.writeln(def);document.writeln();document.writeln(functionupdatedoc();document.writeln();document.writeln(document.writeln(abc););document.writeln(document.writeln(def););document.writeln();document.writeln();document.writeln();/document.close();/*document.writeln(abc);document.writeln(def);document.close();varowin=window.open(,_blank);owin.document.writeln(xyz);owin.document.close();owin.document.write(abc);owin.document.write(def);owin.document.close();*/,document对象的集合,属性,访问方式,用document.links0访问链接用document.images0或document.images“imgName”访问图像用document.forms0或document.forms“frm”访问表单用document.images0.src访问图像src属性,访问第一个图像元素的方式;document.images“sample”,0document.images.item(“sample或0”)作为document属性document.sample0.srcdocument.img1.src作为window属性window.sample0.srcsample0.srcwindow.img1.srcimg1.src,location对象,属性,location对象,方法,screen对象,属性,history对象,方法,navigator对象,属性,DOM面对面,文档：DOM中的“D”没有文档，DOM就无从谈起。当创建一个网页并把它加载到浏览器中，DOM就根据你编写的网页创建了一个文档对象。对象：DOM中的“O”我们把注意力放在浏览器对象上模型：DOM中的“M”当网页加载后，浏览器向我们提供了当前网页的模型，我们可以去提取这个模型。DOM把文档表示成一颗树。,DOM艺术的精髓,节点：文档是由节点构成的集合元素节点文本节点属性节点,DOM的属性与方法,nodeNamenodeValuenodeTypefirstChildlastChildchildNodespreviousSiblingnextSiblingattributes,hasChildNodes()createElement()createTextNode()appendChild()removeChild()replaceChild()insertBefore(),开始DOM之旅,getElementById()返回一个与那个给定id属性相对应的对象getElementsByTagName()返回一个跟标签名相对应的对象数组getElementsByName()返回指定name的对象数组getAttribute()查询对象的属性值setAttribute()设置对象的属性值,练习,检索一份文档，把所有的“title”属性的值全部提取出来给一个设置一个“title”属性，并检索出来改变的“title”属性，并检索出来设置完成后，查看源代码，发现是否修改文档内容我的美术馆,完善美术馆,childNodes属性从给定文档的节点树里把任何一个元素的所有子元素检索出来，返回一个数组。nodeType属性返回一个节点是什么类型的属性值元素节点的nodeType属性值是1。属性节点的nodeType属性值是2。文本节点的nodeType属性值是3。nodeValue属性用于检索和设置节点的值firstChild和lastChild属性返回第一个节点和最后一个节点，类似node.childNodes0和node.childNodesnode.childNodes.length-1,动态创建HTML内容,createElement()创建一个元素节点appendChild()把新创建的节点插入某个文档中createTextNode()创建一个文本节点,练习,创建一个HTML内容Thisismycontent.把上面这个内容添加到一个中显示出来修改美术馆，把图片描述改成动态添加,重回美术馆,insertBefore()把一个新元素插入到一个现有元素的前面parentElem.insertBefore(new,target)parentNode属性返回目标节点的父节点nextSibling属性返回目标节点的下一个兄弟节点,练习,给每张图片添加一个描述描述内容提取自每个链接的“title”属性,HTML的动画效果,elem.style.position=“absolute”;elem.style.left=“100px”;elem.styple.top=“100px”;setTimeout()clearTimeout(),练习,移动的文字移动的图片通过链接浏览图片,1.插入一个层Layer1，z-index=1；2.层中插入一幅图片。,3.定时器函数setTimeout（）的用法：setTimeout（“调用的函数名”，间隔的毫秒数）表示每隔多少毫秒，就循环调用某个函数来执行清除某个定时器：clearTimeout（）方法。例如：varmyclocksetTimeout（”move()”,500）;if()clearTimeout（myclock）;；,随机移动图片,functionmove()document.getElementById(Layer1).style.left=Math.random()*500;document.getElementById(Layer1).style.top=Math.random()*500;setTimeout(move(),1000);随机漂浮的广告,随机移动图片,定义层图片移动的函数move(),每隔1秒调用move()函数随机改变层的位置，从而实现随机漂浮的效果,getElementById(“ID名称”)方法：根据ID名称获取HTML元素，这里表示获取层对象Layer1。left和top表示层Layer1的左边距和上边距，设定为随机的值。,form对象,form对象最主要的功能就是能够直接访问HTML文档中的form表单。一个web页面可以有一个或多个from表单，使用document.froms数组对象可以访问到各from表单。可以将对象的属性，来引用该表单字段元素所对应的对象。,表单基础,method：浏览器发送方式GET/POSTaction：表单所要提交到的URLenctype：向服务器发送数据时，数据使用的编码方式accept：当上传文件时，列出服务器能正确处理的mime类型accept-charset：当提交数据时，列出服务器接受的字符编码,“text”：单行文本“radio”：单选按钮“checkbox”：复选按钮“file”：文件上传文本框“password”：密码输入框“button”：产生自定义动作的按钮“submit”：提交按钮，用于提交表单“reset”：重置按钮，恢复表单默认值“hidden”：隐藏表单域，不会显示在窗口中“image”：图像，与提交按钮功能一样,其他,：下拉列表：下拉列表选项：文本域rows和cols,事件处理程序和表单元素简介,当事件发生时，将执行与之相关的JavaScript代码,当发生特定事件时，事件处理程序指定要执行哪些JavaScript代码,事件处理程序和表单元素简介,当用户单击“注册”按钮时，将弹出一条消息。,functionbutton_click()alert(“请向本网站注册);,文本框对象,文本框元素用于在表单中输入字、词或一系列数字可以通过将HTML的INPUT标签中的type设置为“text”，以创建文本框元素,文本框对象事件处理程序,文本框对象,card,price,number,tot,myform,练习,要求：当光标进入帐号文本框，清空里面所有内容当光标离开帐号文本框，检查输入内容是否为“10”开头，并且是数字，如果有误，弹出提示框单价文本框预设价钱25.00，设为只读当修改数量文本框时，计算总价，并显示在总价文本框中,命令按钮对象,命令按钮对象是网页中最常用的元素之一,“按钮-事件处理程序,onSubmit事件处理代码：如果函数返回true，则向远程服务器提交表单；如果函数返回false，则取消提交。,命令按钮事件处理程序,userName,pass1,pass2,type=reset,type=submit,myform,练习,要求当点击注册按钮提交表单时，判断密码文本框内容和确认密码文本框内容是否相同。如果两个密码输入不同，则弹出提示框，停止表单提交相同再进行提交,复选框对象,当用户需要在选项列表中选择多项时，可以使用复选框对象要创建复选框对象，请使用标签,请选择您的爱好电影电影,复选框-事件处理程序,复选框-事件处理程序,checkbox1,checkbox2,checkbox3,设置复选框的值,checkbox4,myform,练习,要求当点击成交按钮时，检查每个复选框的选中情况，累计用户选中的商品弹出确认提示框，显示客户选中商品，询问客户是否确认购买如果客户点击确认，则在页面上显示详细购买信息,单选按钮对象,当用户只需要从选项列表中选择一个选项时，可以使用单选按钮对象要创建单选按钮对象，请使用标签,男女,单选按钮-事件和属性,单选按钮-事件处理程序,为了保证单选，两个单选按钮的名称都为myradio，组成了myradio数组,练习,要求根据用户身份的不同显示不同信息买家时，显示是否购买XXX商品卖家时，显示是否出售XXX商品,下拉列表框,-请选择开户帐号的城市-北京市上海市重庆市天津市四川省山东省湖北省,下拉列表框-事件和属性,options0,options1,selectedIndex属性：表示被选中的索引号：3,value属性：被选中选项的值,下拉列表框-事件处理程序,下拉列表框-事件处理程序,userName,myselect,mycity,myform,练习,要求判断下拉列表框改变时，是否选择的是直辖市，如果是，则在城市文本框中填入该直辖市的名字，如果不是，则什