zoukankan      html  css  js  c++  java
  • 《JavaScript高级程序设计》读书笔记 56章

    第五章 浏览器中的javascript

         1.<script>标签

              该标签通常放在<head>中。如果声明了src属性,则<script>标签中的代码可能无效(由浏览器决定),若没声明,则可以写任何代码

         2.内嵌代码和外部文件

              一般认为,大量的js代码不应内嵌入html中

              理由是:安全性,代码维护,缓存

         3.建议在<body>中,只使用事件注册函数

         4.在开始载入页面时,js就开始运行了。<head>和<body>均属于window下作用域,但细分不同。<head>标签中无法访问<body>标签中的函数,同名函数两个作用域也互不影响。

         5.js代码隐藏。若支持js,则忽略//-->  执行<script>标签; 而不支持js,则

         <script type="text/javascript"><!--

              function(){
                   alert("a");

              }

    //-->

         </script>

         6.BOM

    Image(4)

              window对象是整个BOM的核心,所有对象和集合都以某种方式回接到window对象。

              7.window对象

                   window对象表示整个浏览器窗口,但不必表示其中包含的内容。此外,window还可用于移动或调整它表示的浏览器的大小,对着对它产生其他影响

                    window对象有两个实例,top和parent,top始终指向浏览器的顶层窗口,及浏览器自身。而parent对象与

                   1.窗口操作

                        moveBy(dx,dy)   moveTo(dx,dy)  resizeBy(dw,dh)  resizeTo(w,h)  直接传number就可以,浏览器窗口碰边就不在移动

                   2.浏览器窗口位置

                        IE中   window.screenLeft和window.screenTop来判断窗口的位置。document.body.offsetWidth和document.body.offsetHeight属性可以获取视口的大小(显示HTML页的区域),但他们不是标准属性

                        Mozilla和Opera中  window.screenX和window.screenY来判断窗口的位置。window.innerWidth和window.innerHeight来判断视口大小

                   3.系统对话框 (模态)

                        alert()  

                        confirm()   返回boolean,判断用户点击确定还是取消

                        prompt()    使用 Image(5)

                   4.状态栏   貌似IE 火狐都不支持这个属性

                        defaultStatus和status两个属性

                        defaultStatus   永久改变

                        status   改变一下

                   5.时间间隔和暂停

                        js支持暂停和时间间隔,这可有效的告诉浏览器应该何时执行某行代码

                        window对象的setTimeout()方法设置暂停。该方法接受两个参数,要执行的代码和在执行它之前要等待的毫秒数

                        要取消还未执行的暂停,可调用clearTimeout()方法,并将暂停ID传递给它

                        window对象的setInternal()方法设置间隔

                        clearInternal()清除

                   6.历史 history属性

                        可以访问浏览器窗口的历史个数,但是不能访问URL,处于安全考虑

                       go()方法只有一个参数,前进或后退的页面数。window.history.go(1)   window.history.go(-1)

                        back()  forward()方法

                   7.document对象   唯一一个既属于BOM又属于DOM的对象。在BOM角度看,document对象由一系列集合构成,这些集合可以提供页面自身的信息。由于BOM没有可以知道实现的标准,所以各个浏览器的document对象都稍有不同

                        document对象实际上是window对象的属性。

                        document.lastModified  最后修改页面的日期,是字符串

                        document.referrer  浏览器历史中后悔一个位置的URL

                        document.title      浏览器历史中后退一个位置的URL

                        document.URL      当前载入的页面的URL

                        document.anchors     页面所有锚的集合

                        document.applets      页面中所有applet的集合

                        document.forms         页面中所有表单的集合

                        document.images       页面中所有图像的集合

                        document.links          页面中所有链接的集合  

                        document对象最常用的方法

                        write()   writeln()  这两个方法都接受一个参数,将字符串插入到调用它们的位置。这样浏览器就会像处理页面中的常规HTML代码一样处理这个文档字符串

    注意:要插入内容属性,必须在完全载入页面前调用write()和writeln()方法。如果任何一个方法是在页面载入后调用的,他将抹去页面的内容,显示指定的内容。

                        当你想显示无需返回服务器的页面时,document.open和document.close非常有效

                   8.location对象  号称BOM中最有用的对象之一

    Image(6)

    Image(7)

                        3个方法

                             assign()   相当于location.href   会在浏览器中留下历史

                             replace()   也是跳转页面,但不会再浏览器中留下历史

                             reload()    重新加载页面,可以指定从缓存加载还是服务器加载。必要时一定放在代码的最后一行

    注意:document.location 和 window.location 指的是一个东西

                   8.navigator

                        navigator对象时最早实现的BOM对象之一,包含大量有关web浏览器的信息,它也是window的属性之一

    Image(8)

    Image(9)

                      9.screen对象

    Image(10)

    第六章 DOM基础

             1.xml

                   xml的主要目的是使用文本以结构化的方式来表示数据

                   DOM是针对XML的基于树的API,虽然慢,但使用简单

    注意:DOM是语言无关API,意味着它的实现并不与java,javascript或者其他语言绑定

    2.对DOM的支持上,火狐最好,oper和safari其次,IE最差

               3.节点属性与方法Image(11)

               4.节点类型Image(12)

               5.处理特性

                   只有Element节点才有attributes

                   <p id="id" sytyle="color:red">asd</p>

                   假设op是指向这一标签的引用,则可以这样获取id的值

                   op.attributes.getNamedItem("id").nodeValue。

                   太累赘, 于是又了setAttribute()和getAttribute()以及removeAttribute()方法

              6.访问指定节点

                   1.getElementById()   IE6中,如果给定的id匹配某个元素的name值,也会返回该值。

                   2.getElementsByTagName  返回一个包含所有的tagName特性等于指定值得元素的NodeList

                      getElementByTagName("*") 返回指定NodeList的所有元素 (在IE6中,要使用document.all)

                   3.getElementsByName()

               7.创建和操作节点

                   1.创建新节点

    Image(13)

    Image(14)

    注意:在页面完全下载到客户端机器之前,是无法完全构建dom树。因为这个原因,必须使用window.onload事件句柄来执行所有的代码

                  2.常用方法

                        createElement()   createNodeText()  appendchild()

                        replaceChild()  removeChild()  insertBefore()

                        createDocumentFragment()  一次性添加大量文档改动

               8.HTML DOM特征功能

                        核心DOM的特性和方法是通用的,是为了在各种情况下操作有所XML文档而设计的

                        而HTML DOM的特性和方法是在专门针对HTML的同时也让一些DOM操作更加简便

                    1.让特性像属性一样

                        例如<img src="1.jpg" alt="hehe"/>

                        若想改变img,可以用setAttribute()  也可以用img.src 或 img.alt

                        IE对setAttribute支持并不尽如人意,推荐使用属性

                   ============以下是DOM  L2的东西,了解即可============================

                    2.NodeIterator,可以对DOM树进行深度优先遍历

                    3.TreeWalker     有NodeIterator所有的功能,并且添加了一些遍历方法

                9.测试与DOM标准的一致性

                   implementation对象是DOM文档的一个特性,唯一的方法是hasFeature()

                   例如,像检查对XML DOM  Level1的支持,可以这样调用

                   var bXmlLevel1=document.implementation.hasFeature("xml","1.0") 支持则返回true

  • 相关阅读:
    POJ
    巧得int(4字节)最大最小值
    POJ
    POJ
    2018牛客暑期多校训练第三场——C Shuffle Cards(rope大法)
    共享一些知识点的学习地址
    webstorm的各种快捷键配置
    Remote Debugging Chrome 结合Genymotion模拟器的移动端web真机调试
    支持新版chrome,用webstorm编译形成css和sourcemap,调试sass和less源文件
    最新版phonegap3.5.1环境搭建
  • 原文地址:https://www.cnblogs.com/qiuyeyaozhuai/p/2720642.html
Copyright © 2011-2022 走看看