• 1. JavaScript高级BOM 事件处理 DOM概念 DOM技术 Form表单
  • 2. 浏览器对象BOM简介 http://www.google.comWindow 窗口对象location 地址对象document 文档对象FORM 表单对象浏览器对象的分层结构window.document.myform.text1
  • 3. (本页无文本内容)
  • 4. window对象window对象代表浏览器的整个窗口,编程人员可以利用window对象控制浏览器窗口的各个方面,如改变状态栏上的显示文字、弹出对话框、移动窗口的位置等。 对window对象的属性和方法的引用,可以省略“window.”这个前缀 例如:window.alert("你好")可以直接写成alert("你好")。
  • 5. Window 对象 方法 名称 说明 alert (“m提示信息")显示包含消息的对话框。 confirm(“提示信息”)显示一个确认对话框,包含一个确定取消按钮prompt(”提示信息“)弹出提示信息框open ("url","name")打开具有指定名称的新窗口,并加载给定 URL 所指定的文档;如果没有提供 URL,则打开一个空白文档close ( )关闭当前窗口setTimeout(”函数”,毫秒数) 设置定时器:经过指定毫秒值后执行某个函数 clearTimeout(定时器对象)
  • 6. Window 对象
    使用 Open 方法 打开新窗口 使用 Close 方法 关闭窗口添加单击事件因为window是最顶层的根,所以可以省略 window.open("google.htm"); 可简写为: open("google.htm"); close()方法也是如此。
  • 7. 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”);
  • 8.

    看看和我一起打开的广告窗口

    Window 对象 使用 Open 方法 打开广告新窗口 添加页面加载事件
  • 9. 对窗口可以设置的可选参数名称 说明 width窗口的宽度height窗口的高度scrollbars是否显示滚动条resizable设定窗口大小是否固定 menubar菜单条location地址栏toolbar 浏览器工具条,包括后退及前进按钮等 fullscreen是否全屏显示titlebar标题栏
  • 10. window对象-方法navigate()方法 setInterval()方法 clearInterval()方法 moveTo()方法 resizeTo()方法 showModalDialog()方法 showModelessDialog()方法
  • 11. 网页文件:
  • 18. ------------------------------------ 禁用浏览器右键
  • 19. 二、直接在JavaScript代码中, 设置元素对象的事件属性, 让事件属性值等于处理该事件的函数名或程序代码。 格式: 对象名.on事件=<语句>|<函数名> 例1: document.onload=alert("建议浏览器的分辨率:800x600"); 例2:
  • 20. 三、在一个专门的
  • 21. event对象属性名称 说明altKey是否按下alt键,true为按下ctrlKey是否按下ctrl键shiftKey是否按下shift键clientX,clientY事件发生时,鼠标在客户端的x、y坐标screenX,screenY相对于整个计算机屏幕的x、y坐标offsetX,offsetY相对于事件发生对象的x、y坐标x,y相对于引起事件元素的父元素的x、y坐标returnValue是否取消事件的默认动作,false为取消cancelBubble是否停止事件冒泡,true为停止srcElement引起事件的元素对象keyCode表示按下按键的数字代号Button表示事件是否正在冒泡阶段
  • 22. eventobject.html 按下键盘事件 按ESC关闭窗口
  • 23. 其它属性
  • 24. window对象-事件专用事件: --onload事件 --onunload事件 --onbeforeunload事件 通用事件 --onclick事件 --onmousemove事件 --onmouseover事件 --onmouseout事件 --onmousedown事件 --onmouseup事件 --onkeydown事件 --onkeyup事件 --onkeypress事件
  • 25. window_event.html hello
  • 26. window对象-属性--closed属性 --opener属性 --defaultstatus属性 --status属性 --screenTop属性 --screenLeft属性
  • 27. window.html 关闭子窗口
  • 28. 文本在状态栏上显示
  • 29. information.html 这是普通的文本
    这是一个超链接
  • 33. document 对象 无标题文档

    移过来我变色给你看看!

    变红色| 变蓝色| 变黄色 利用document对象的bgColor属性改变背景色添加鼠标悬停事件
  • 34. document 对象的方法方法 名称 说明 clear ( )清除当前文档 close ( )关闭open打开的文档,关闭输出流并强制显示发送的数据open ( )打开已经载入的文档以便进行编写write ("text")将文本写入文档writeln ("text")将文本写入文档,末尾加入”\n”
  • 35. 这是最初的内容
  • 36. 这是最初的内容
  • 37. document 对象的集合属性名称 说明anchors页面中所有锚的集合() forms页面中所有表单的集合 applets页面中所有applet的集合embeds页面中所有嵌入式对象的集合()images页面中所有图像的集合links页面中所有链接的集合(
  • 38. 访问方式用document.links[0]访问链接 用document.images[0]或document.images[“imgName”]访问图像 用document.forms[0]或document.forms[“frm”]访问表单 用document.images[0].src访问图像src属性
  • 39. 访问第一个图像元素的方式; document.images[“sample”, 0] document.images.item(“sample或0”) 作为document属性 document.sample[0].src document.img1.src 作为window属性 window.sample[0].src sample[0].src window.img1.src img1.src
  • 40. location对象属性名称 说明host服务器的名字href当前载入的页面的完整URLhash如果URL包含“#”,将返回该符号之后的内容pathnameURL中主机名后面的部分port请求端口protocolURL中使用的协议(http:// ftp:// file://等)search执行GET请求的URL中问号?后的部分
  • 41. location 对象 方法 名称 说明 reload()用于重新载入(刷新)当前网页assign("url")加载URL指定的新的 HTML 文档。 replace ("url")加载URL指定的文档替换当前文档,不保留历史记录
  • 42. screen对象属性名称 说明availHeight窗口可以使用的屏幕的高度(象素)availWidth窗口可以使用的屏幕的宽度height屏幕的高度width屏幕的宽度
  • 43. history对象方法名称 说明back ( )相当于后退按钮forward ( )相当于前进按钮go (int i)go (1)代表前进1页,等价于forward( )方法go(-1) 代表后退1页,等价于back( )方法;
  • 44. navigator对象属性名称 说明language浏览器语言appCodeName浏览器名的代码表示”Mozilla”systemLanguage操作系统的语言platform运行浏览器的操作系统平台vendor品牌浏览器名的字符串表示user-agent获取浏览器信息
  • 45. DOM面对面文档:DOM中的“D” 没有文档,DOM就无从谈起。当创建一个网页并把它加载到浏览器中,DOM就根据你编写的网页创建了一个文档对象。 对象:DOM中的“O” 我们把注意力放在浏览器对象上 模型:DOM中的“M” 当网页加载后,浏览器向我们提供了当前网页的模型,我们可以去提取这个模型。DOM把文档表示成一颗树。
  • 46. DOM艺术的精髓节点:文档是由节点构成的集合 元素节点 文本节点 属性节点
  • 47. DOM的属性与方法nodeName nodeValue nodeType firstChild lastChild childNodes previousSibling nextSibling attributes hasChildNodes() createElement() createTextNode() appendChild() removeChild() replaceChild() insertBefore()
  • 48. 开始DOM之旅getElementById() 返回一个与那个给定id属性相对应的对象 getElementsByTagName() 返回一个跟标签名相对应的对象数组 getElementsByName() 返回指定name的对象数组 getAttribute() 查询对象的属性值 setAttribute() 设置对象的属性值
  • 49. 练习检索一份文档,把所有的“title”属性的值全部提取出来 给一个
      设置一个“title”属性,并检索出来 改变

      的“title”属性,并检索出来 设置完成后,查看源代码,发现是否修改文档内容 我的美术馆

    • 50. 完善美术馆childNodes属性 从给定文档的节点树里把任何一个元素的所有子元素检索出来,返回一个数组。 nodeType属性 返回一个节点是什么类型的属性值 元素节点的nodeType属性值是1。 属性节点的nodeType属性值是2。 文本节点的nodeType属性值是3。 nodeValue属性 用于检索和设置节点的值 firstChild和lastChild属性 返回第一个节点和最后一个节点,类似node.childNodes[0]和node.childNodes[node.childNodes.length-1]
    • 51. 动态创建HTML内容createElement() 创建一个元素节点 appendChild() 把新创建的节点插入某个文档中 createTextNode() 创建一个文本节点
    • 52. 练习创建一个HTML内容

      This is my content.

      把上面这个内容添加到一个
      中显示出来
      修改美术馆,把图片描述改成动态添加
    • 53. 重回美术馆insertBefore() 把一个新元素插入到一个现有元素的前面 parentElem.insertBefore(new,target) parentNode属性 返回目标节点的父节点 nextSibling属性 返回目标节点的下一个兄弟节点
    • 54. 练习给每张图片添加一个描述

      描述内容提取自每个链接的“title”属性

    • 55. HTML的动画效果elem.style.position=“absolute”; elem.style.left=“100px”; elem.styple.top=“100px”; setTimeout() clearTimeout()
    • 56. 练习移动的文字 移动的图片 通过链接浏览图片
    • 57. 1.插入一个层Layer1, z-index=1; 2.层中插入一幅图片。3.定时器函数setTimeout ()的用法: setTimeout(“调用的函数名”,间隔的毫秒数) 表示每隔多少毫秒,就循环调用某个函数来执行 清除某个定时器:clearTimeout()方法。 例如: var myclock=setTimeout(”move( )”,500); if (…) clearTimeout(myclock);;随机移动图片
    • 58.

      随机漂浮的广告

      随机移动图片定义层图片移动 的函数move( ) 每隔1秒调用move( )函数随机改变层的位置,从而实现随机漂浮的效果getElementById(“ID名称”) 方法:根据ID名称获取HTML元素, 这里表示获取层对象Layer1。 left和top表示层Layer1的左边距和上边距,设定为随机的值。
    • 59. form对象form对象最主要的功能就是能够 直接访问HTML文档中的form表单。一个web页面可以有一个或多个from表单,使用document.froms数组对象可以访问到各from表单。可以将
      对象的属性,来引用该表单字段元素所对应的对象。
    • 60. 表单基础method:浏览器发送方式GET/POST action:表单所要提交到的URL enctype:向服务器发送数据时,数据使用的编码方式 accept:当上传文件时,列出服务器能正确处理的mime类型 accept-charset:当提交数据时,列出服务器接受的字符编码
    • 61. “text”:单行文本 “radio”:单选按钮 “checkbox”:复选按钮 “file”:文件上传文本框 “password”:密码输入框 “button”:产生自定义动作的按钮 “submit”:提交按钮,用于提交表单 “reset”:重置按钮,恢复表单默认值 “hidden”:隐藏表单域,不会显示在窗口中 “image”:图像,与提交按钮功能一样
    • 62. 其他