• JQuery制作网页—— 第二章 JavaScript操作BOM对象


    1、window对象:

    浏览器对象模型(BOM)是javascript的组成之一,

    它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HTML的交互。

    它的作用是将相关的元素组织包装起来,提供给程序设计人员使用,从而降低开发人员的劳动量,提高设计Web页面的能力。

    BOM:浏览器对象模型(Browser Object Model):BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构;

    BOM是一个分层结构:

                结构:

     

    Window对象是整个BOM的核心,在浏览器中打开网页后,首先看到是浏览器窗口,即顶层的window对象;其次是网页内容,即document(文档)。

     BOM可实现的功能:

        1).弹出的浏览器窗口。

        2).移动、关闭浏览器窗口及调整窗口的大小。

        3).在浏览器窗口中实现页面的前进、后退功能。

    Window对象也称为浏览器对象。当浏览器打开HTML文档时,通常会创建一个window对象,

    如果文档定义了一个或多个框架,浏览器将为原始文档创建一个window对象,同时为每个框架另外创建一个window对象。

    2、window常用的属性:

    语法:

           window.属性名=”属性值”

            eg:window.location=”http//www.baidu.com”,    //表示跳转到百度的官方主页。

                         screen.height返回显示浏览器的屏幕的高度,单位为像素。

    属性名称

    说      明

    history

    有关客户访问过的URL的信息

    location

    有关当前 URL 的信息

    Screen

    只读属性,包含有关客户端显示屏幕的信息

    3、window常用的方法:

    语法:

       Window.方法名();

        注:window对象是全局对象,所以在使用window对象的属性和方法时,window可以省略,

              Eg:alert();也可以写成:window.alert();

    方法名称

    说      明

    prompt( )

    显示一个可提示并且用户可以输入的对话框,取消返回null,确定返回用户输入的值

    alert( )

    显示带有一个提示信息和一个确定按钮的警示框 ,无返回值

    confirm( )

    显示一个带有提示信息、“确定”和“取消”按钮的对话框,返回true或false

    close( )

    关闭浏览器窗口

    open( )

    打开一个新的浏览器窗口,加载给定 URL 所指定的文档

    setTimeout( )

    在指定的毫秒数后调用函数或计算表达式

    setInterval( )

    按照指定的周期(以毫秒计)来调用函数或表达式

    ●confirm()方法:将弹出一个确认对话框;

    语法:

       confirm("对话框中显示的纯文本")

           eg

                  <script type="text/javascript">

                   var flag=confirm("确认要删除此条信息吗?");

                    if(flag==true)

                          alert("删除成功!");

                   else

                         alert("你取消了删除");

                   </script>

    confirm()与alert ()、 prompt()区别:

       1、alert( ):只有一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变

       2、prompt( ):两个参数,是输入对话框,用来提示用户输入一些信息,单击“取消”按钮则返回null,单击“确定”按钮则返回用户输入的值,

    常用于收集用户关于特定问题而反馈的信息

       3、confirm( ):只有一个参数,确认对话框,显示提示对话框的消息、“确定”按钮和“取消”按钮,单击“确定”按钮返回true,单击“取消”按钮返回false,因此与if-else语句搭配使用

    ●close():用于关闭浏览器窗口;

            语法:window.close();

    ●open():再页面上弹出一个新的浏览器窗口;

            语法:window.open("弹出窗口的url","窗口名称","窗口特征”);

    ★窗口的特征属性:

    属性名称

    说      明

    height、width

    窗口文档显示区的高度、宽度。以像素计

    left、top

    窗口的x坐标、y坐标。以像素计

    toolbar=yes | no  |1 | 0

    是否显示浏览器的工具栏。黙认是yes

    scrollbars=yes | no  |1 | 0

    是否显示滚动条。黙认是yes

    location=yes | no  |1 | 0

    是否显示地址地段。黙认是yes

    status=yes | no  |1 | 0

    是否添加状态栏。黙认是yes

    menubar=yes | no  |1 | 0

    是否显示菜单栏。黙认是yes

    resizable=yes | no  |1 | 0

    窗口是否可调节尺寸。黙认是yes

    titlebar=yes | no  |1 | 0

    是否显示标题栏。黙认是yes

    fullscreen=yes | no  |1 | 0

    是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

    4、history对象:history对象提供用户最近浏览过的URL列表,即浏览历史。出于隐私方面的考虑,history对象不再允许脚本访问已经访问过的实际URL;

    名称

    说      明

    back()

    加载 history 对象列表中的前一个URL

    forward()

    加载 history 对象列表中的下一个URL

    go()

    加载 history 对象列表中的某个具体URL

    ★history.back()等价于history.go(-1):浏览器中的“后退”;

    ★history.forward()等价于history.go(1):浏览器中的“前进”;

    ★go(n)方法中的n是一个具体的数字,当n>0时,进入历史列表中前进的第n个页面。

    当n<0时,进入历史列表中后退的第n个页面。

               Eg  A) history.go(1)代表前进一页,等价于forward()方法,想当于浏览器中的“前进”按钮;

                        B)history.go(-1)代表后退一页,等价于back()方法,想当于浏览器中的“后退”按钮;

    5、location对象:location对象提供当前页面的URL信息,并且可以重新装载当前页面(刷新)或装入新页面。

    常用的属性

    名称

    说      明

    host

    设置或返回主机名和当前URL的端口号

    hostname

    设置或返回当前URL的主机名

    href

    设置或返回完整的URL

    常用的方法

    名称

    说      明

    reload()

    重新加载当前文档

    replace()

    用新的文档替换当前文档

    6、document对象:document对象即是window对象的一部分,又代表了整个HTML文档,可以用来访问页面中的所有元素。所以在使用document对象时,除了要适用于各个浏览器外,也要符合W3C的标准。

    referrer的语法格式如下:

             document.referrer;

                  注:当前文档如果不是通过超连接访问的,则document.referrer的值为null

    URL的语法:

           document.URL;

    常用属性

    名称

    说      明

    referrer

    返回载入当前文档的URL

    URL

    返回当前文档的URL

    常用方法

    名称

    说      明

    getElementById()

    返回对拥有指定id的第一个对象的引用

    getElementsByName()

    返回带有指定名称的对象的集合

    getElementsByTagName()

    返回带有指定标签名的对象的集合

    write()

    向文档写文本、HTML表达式或JavaScript代码

    getElementById():方法一般用于访问div、图片、表单元素、网页标签、等,但要求访问对象的id是唯一的;

    getElementsByName()方法与getElementById()方法相似,单它访问的是具有name属性的元素,由于一个文档中的name属性可能不唯一,因此,getElementsByName()方法一般用于访问一组相同name属性的元素,eg:具有相同name属性的单选按钮、复选框等;

    getElementsByTagName()方法是按标签来访问页面元素的,一般用于访问一组相同的元素;eg:一组<input>、一组图片;

    7、JavaScript内置对象:

    在javaScript中,系统的内置对象有Date对象、Array对象、String对象和Math对象等。

    A) Date对象:用于操作日期和事件。

    B) Array对象:用于在单独的变量名中存储一系列的值。

    C) String对象:用于支持对字符串的处理。

    D) Math对象:执行常用的数学任务,它包含了若干个数字常量和函数。

    ●Date对象:

           var 日期对象=new Date(参数);//参数格式:MM  DD,YYYY,hh:mm:ss

                  eg:var  today=new  Date(); //将当前的时间存储在变量today中

                         var  tdate=new  Date(“July  15,2013,16:10:12”);//以字符串格式传入值

    方法

    说 明

    getDate()

    返回 Date 对象的一个月中的每一天,其值介于1~31之间

    getDay()

    返回 Date 对象的星期中的每一天,其值介于0~6之间

    getHours()

    返回 Date 对象的小时数,其值介于0~23之间

    getMinutes()

    返回 Date 对象的分钟数,其值介于0~59之间

    getSeconds()

    返回 Date 对象的秒数,其值介于0~59之间

    getMonth()

    返回 Date 对象的月份,其值介于0~11之间

    getFullYear()

    返回 Date 对象的年份,其值为4位数

    getTime()

    返回自某一时刻(1970年1月1日)以来的毫秒数

    getFullYear():返回四位数的年份;getYear():返回二位或四位的年份;常用于获取年份的是:getFullYear();

    getDay():获取星期几;0表示周日,1表示周一,6表示周六;

    ★各部分时间表示的范围:除号数(一个月中的每一天)外,其他均从0开始计数,

           Eg:月份0~11,0代表1月份,11代表12月份;

    ●Math对象:

       Math对象提供了许多与数学相关的功能,它是javaScript的一个全局对象,不需要创建,直接作为对象使用就可以调用其属性和方法。

    Math对象的常用方法:

    方法

    说 明

    示例

    ceil()

    对数进行上舍入

    Math.ceil(25.5);返回26

    Math.ceil(-25.5);返回-25

    floor()

    对数进行下舍入

    Math.floor(25.5);返回25

    Math.floor(-25.5);返回-26

    round()

    把数四舍五入为最接近的数

    Math.round(25.5);返回26

    Math.round(-25.5);返回-26

    random()

    返回0~1之间的随机数

    Math.random();例如:0.6273608814137365

    random()返回的随机数包括0,不包括1,都是小数,

      eg:选择一个1~100中的整数(包括1和100):var iNum=Math.floot(Math.random()*100+1);

          返回2~99,只有98个数字,第一个值为2:var iNum=Math.floor(Math.random()*98+2);

    8、定时函数:

    JavaScript中提供了两个定时函数setTimeout()和setInterval(),此外,还提供了用于清除定时器的两个函数clearTimeout()和clearInterval()。如果要多次调用,使用setInterval()或者让disptime()自身再次调用setTimeout();

            1.  setTimeout():setTimeout()用于在指定的毫秒后调用函数或计算表达式,

                    语法:

                         setTimeout(“调用的函数名称”,等待的毫秒数);

                      eg:var  myTime=setTimeout("disptime() ", 1000 );// 1秒(1000毫秒)之后执行函数disptime()一次

           2.  setInterval():setInterval()按照指定的周期(单位毫秒)来调用函数或表达式。

                                           setInterval()会不停的调用函数,直到窗口关闭或被其他方法强制停止;

                  语法:

                          setInterval(“调用的函数名称”,周期性调用函数之间间隔的毫秒数);

                        eg:var  myTime=setInterval("disptime() ", 1000 );// 每隔1秒(1000毫秒)执行函数disptime()一次

           3.  clearTimeout()

                 语法:

                        clearTimeout(setTimeOut()返回的ID值);

                       eg:var  myTime=setTimeout("disptime() ", 1000 );

                              clearTimeout(myTime)

           4.clearInterval ()

                 语法:

                       clearInterval(setInterval()返回的ID值);

                      eg:var  myTime=setInterval("disptime() ", 1000 );

                             clearInterval(myTime)

  • 相关阅读:
    柔性数组成员 (flexible array member)-C99-ZZ
    如何阅读 Redis 源码?ZZ
    linux下网络编程学习——入门实例ZZ
    leetcode Ch2-Dynamic Programming [2014]
    leetcode Ch1-search 2014
    Skip List & Bloom Filter
    指针的引用-ZZ
    leetcode-sudoku solver
    rest framework之过滤组件
    rest framework之渲染器
  • 原文地址:https://www.cnblogs.com/HQING/p/9395323.html
Copyright © 2020-2023  润新知