继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript进阶篇之二

BluyeaSun
关注TA
已关注
手记 24
粉丝 77
获赞 3400
JavaScript之事件驱动 DOM操作 BOM模型

拙见:JavaScript之所以与用户实现互动,
一方面是因为事件驱动能够捕捉用户的行为。
一方面便是通过DOM模型将捕捉的用户行为通过js代码处理后显示在网页中。

事件响应:捕捉用户行为

事件: 
      是可以被JavaScript侦测到的行为(如点击鼠标)。
      这些事件都是被JavaScript语言内置的。
      网页中的每个元素都可以绑定触发JavaScript函数或程序的事件。
类型:
    onlick:鼠标单击
    onmouseover:鼠标经过
    onmouseout:鼠标经过
    onchange:文本框等内容改变时
    onselect:文本框等内容被选中时
    onfocus:光标聚集,如输入框中的闪烁的竖直的直线光标
    onblur:光标离开
    onload:网页载入完毕
    onunload:当用户退出网页时(页面关闭或页面刷新),触发onunload事件
             同时执行被调用函数。
注意:绑定时,绑定的不仅仅是函数名带有小括号,并对整体用括号括起来。
DOM模型:操作网页元素
拙见:DOM模型可分为节点的特殊属性和节点的增删查改,两个方面理解和使用。

节点的特殊属性

    nodeName: 节点名称

        元素节点的nodeNmae与标签名一致。
        属性节点的nodeName是属性的名称
        文本节点的nodeName永远是#text

    nodeValue: 节点的值

        元素节点的nodeValue是undefined或null
        属性节点的nodeValue是属性值
        文本节点的nodeValue是文本内容

    nodeType:节点类型(数字表示)

        元素节点     1
        属性节点     2
        文本节点     3

    注意:该节点是DOM模型的节点,而HTML文档标签中的属性。

节点的增删改查

首先:通过document方法增加新的元素对象
其次:通过调用元素对象的方法,为其添加节点即可

生成新的元素:
    document.createElement("tagName"):创建一个新的元素对象并将其返回

    document.createTextNode("文本内容"):创建一个新的文本节点,并将其返回

添加节点:
    appendChild(newnode):为该节点在最后子节点列表最后添加一个新的节点
    insertBefore(newnode):将一个给定节点插入到一个给定元素节点的前面

语法:NODE.removeChild(node):将删除NODE的node子节点。
返回值
     如果删除成功将返回被删除的节点。否则返回null。

更改元素的属性
    获取
        elementNode.getAttribute(name)
    更改
        elementNode.setAttribute(name,value)
        注意:如果不存在指定名称的属性,该方法将创建一个新的属性。

    注意:也可直接修改elementNode.attributeName=newValue来更改

替换元素节点
    node.replaceChild(newnode,oldnode):
          将node的子节点oldnode更换成nownode.

通过DOM元素对象的属性即可实现

    childNodes: 返回一个由该节点的子节点构成数组
    firstChild: 元素第一个子节点
    lastChild: 元素最后一个子节点
    parentNode: 元素的父节点
    nextSibling: 元素的下一个节点
    previousSibling: 元素的上一个节点

    注意:若没有对应的节点将返回null

    补充:
        获得节点对象
        getElementsByName():返回带有指定名称的节点对象集合
            语法:document.getElementsByName("name")
            注意:
                因为文档中的name属性可能不唯一
                所以该方法返回的是一个数组.对应的元素对象依次排列在数组中。

                同时注意Element的单复数。
        getElementsByTagName():
        getElementById():

     巧记:
         ID就像一个人的身份证号是唯一的,所以就用Element,返回单个元素对象。

         Name就像一个名字可以重复,所以用Elements返回一个元素数组。

         Tagname就像一个类名,类中有很多相同的人,所以用Elements返回一个元素数组。

浏览器对象BOM:控制浏览器

window对象

    window对象即当前的浏览器窗口,
          通过它的属性和方法可以控制和获取浏览器的各种信息。

    window对象方法:
        alert():
        prompt():
        confirm():
        open():
        close():
        print():
        setInterval():每隔指定时间执行代码
        clearInterval():取消setInterval()的设置
        setTimeout():在指定的时间延迟后执行代码
        clearTimeout():取消setTimeout()的设置

    JavaScript计时器:
        间隔触发计时器

            setInterval(代码,时间间隔)
                代码:要调用的函数或要执行的代码
                时间间隔:周期性执行或调用表达式的时间,以毫秒计。                
                返回值:一个可以传递给clearInterval(),从而取消计时器的作用的特殊值

            clearInterval("setInterval()的返回值")

        一次性计时器

            setTimeout(代码,延迟时间)
            代码:要调用的函数或要执行的代码
            返回值:一个可以传递给clearTimeout(),从而取消计时器的作用的特殊值 

History对象

history对象记录了用户曾经浏览过的url,并可以实现浏览器的前进与后退。

语法:window.history.[属性或方法]
     window可以省略.
属性:
    length:返回历史列表中的URL数量
方法:
    back():加载列表中相对于当前URL的前一个URL
    back():加载列表中相对于当前URL的后一个URL
    go(number):加载URL列表中的第number个URL

location对象

    location用于获取或设置窗体的URL,并且可以解析URL

    语法:window.location.[属性|方法]
         window可以省略
    属性:
        host:设置并返回主机名和端口号
        hostname:当前URL的主机名
        href:设置并返回完整的URL
        pathname:当前URL的路径部分
        port:当前URL的端口号
    方法:
        assign("URL"):加载新的文档
        reload("URL"):重新加载新的文档
        replace("URL"):用新的文档代替当前文档

Screen对象

    获取用户的屏幕信息

    语法:window.screen.属性
         window可以省略
    属性:
        availHeight:窗口可以使用的屏幕高度,单位像素
        availWidth:
        colorDepth:颜色的位数,精确度通常为32
        pixelDepth:颜色的位数
        height:屏幕的高度
        width:屏幕的宽度

navigator对象

    该对象包含了有关浏览器的信息,通常用于检测浏览器与操作系统的版本。

    语法: navigator.属性
    属性:
        appCodeName:浏览器代码名的字符串
        appName:浏览器的名称
        appVersion:浏览器的平台和版本信息
        platform:运行该浏览器的操作系统的信息
        userAgent:返回有客户机发送给服务器的user-agent头部信息。
打开App,阅读手记
21人推荐
发表评论
随时随地看视频慕课网APP

热门评论

666

棒棒哒,飞吻一个

查看全部评论