JavaScript——6

1.Javascript中的dom对象 1.1按钮点击事件 onclick     具体用法: 1.2页面初始化事件 onload     具体用法: 1.3常

1.Javascript中的dom对象

  1.1按钮点击事件 onclick
    具体用法:


  1.2页面初始化事件 onload
    具体用法:







  1.3常见的javascript事件,事件的具体使用方法
    1.页面初始化事件















    2.按钮点击事件 onclick















    3. onchange 事件,当用户改变输入字段的内容时触发















    4.onfocus当获得焦点时触发
    5.onblur当失去焦点时触发



    6.onmouseover 和 onmouseout 事件








    7.onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。


用户名:
密码:

    8.onkeydown 事件会在用户按下一个键盘按键时发生。








  常用的事件

onabort

图像的加载被中断。

onblur

元素失去焦点。

onchange

域的内容被改变。

onclick

当用户点击某个对象时调用的事件句柄。

ondblclick

当用户双击某个对象时调用的事件句柄。

onerror

在加载文档或图像时发生错误。

onfocus

元素获得焦点。

onkeydown

某个键盘按键被按下。

onkeypress

某个键盘按键被按下并松开。

onkeyup

某个键盘按键被松开。

onload

一张页面或一幅图像完成加载。

onmousedown

鼠标按钮被按下。

onmousemove

鼠标被移动。

onmouseout

鼠标从某元素移开。

onmouseover

鼠标移到某元素之上。

onmouseup

鼠标按键被松开。

onreset

重置按钮被点击。

onresize

窗口或框架被重新调整大小。

onselect

文本被选中。

onsubmit

确认按钮被点击。

onunload

用户退出页面。

  1.4创建新的 HTML 元素  
    document.createElement("元素名称");
    document.createTextNode("文本内容");
    父元素的dom对象.appendChild(node);
    删除元素 父元素的dom对象.removeChild(子元素的dom对象);


测试添加和移除元素



2.JavaScript中的BOM对象

  浏览器对象模型--Browser ObjectModel (BOM)
  2.1Window 对象
  1.属性

    有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
    对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
    window.innerHeight - 浏览器窗口的内部高度
    window.innerWidth - 浏览器窗口的内部宽度
    对于 Internet Explorer 8、7、6、5:
    document.documentElement.clientHeight
    document.documentElement.clientWidth
    或者
    document.body.clientHeight
    document.body.clientWidth
    实用的 JavaScript 方案(涵盖所有浏览器):








  2.方法
    其他方法:open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
    格式:window.open(URL,name,features,replace)

URL

一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。

name

一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记

的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。

features

一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。【宽高】

replace

一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:

true - URL 替换浏览历史中的当前条目。

false - URL 在浏览历史中创建新的条目。



    重要事项:请不要混淆方法 Window.open() 与方法 Document.open(),这两者的功能完全不同。为了使您的代
    码清楚明白,请使用 Window.open(),而不要使用 open()。                

  close() 方法用于关闭浏览器窗口。
    说明:方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用
            close() 来关闭其自身。
    只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。








  JavaScript 弹窗方法
    在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
    警告框:window.alert("sometext");
    确认框:window.confirm("sometext");
        当确认框弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。
        当你点击 "确认", 确认框返回 true, 如果点击 "取消", 确认框返回 false。
    提示框:window.prompt("sometext","defaultvalue");
        当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
        如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
        参数1---提示信息
        参数2---提示框的默认值


测试确认框


  2.2子对象
    1.Window Screen--屏幕
       window.screen 对象包含有关用户屏幕的信息。
       1.总宽度和总高度  --- screen.width   /  screen.height
       2.可用宽度和可用高度----screen.availWidth  / screen.availHeight
       3.色彩深度----screen.colorDepth
       4.色彩分辨率----screen.pixelDepth








  2.Window Location---页面的地址 (URL)
       对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
       location.href 属性返回当前页面的 URL。
           location.pathname 属性返回 URL 的路径名。
           location.assign() 方法加载新的文档。
       location.search 属性是一个可读可写的字符串,可设置或返回当前 URL 的查询部分(问号 ? 之后的部分)。