您的位置：首页 > Web前端 > JavaScript

JavaScript DOM075编程艺术第2版：内容概要

2016-05-30 09:25 555 查看

第1章  JavaScript的简史

   略

第2章 JavaScript的基本语法

   博客(一)

第3章 DOM

    1.解释HTML的基本结构

    2.节点：元素（<body><p>等），文本（夹在元素中间的文本），属性（元素里的title，id等等）

    3.CSS : 和JS类似，写在文档的<head>中<style>节点中，或者作为单独文件用<link>来链接。

         P { color: yellow;

               font-size:1.2em; }

       和JS中的对象类似，对象名就是元素名。

       Class属性：在元素里面制定一个class，就可以使用特殊的式样了，class定义的时候要加.

          .special{

                font-sytle: italic; }

       id属性：用元素的id来制定特殊式样，定义时加上#。

          #purchase{

                font-sytle: italic; }

      4.document.getElementById() 和 document.getElementByTagName()

         前者是根据元素的id获得元素对象，后者是根据元素名,因为一般都有多个，所以都以数组的方式返回，即使只有一个也是返回数组。

       5.document.getElementByClassName()

           Html5 的DOM中新增的方法，有的浏览器器里还没有这个方法，所以需要判断，没有的话自己写。

      6.getAttribute() 和 setAttribute()

          取得某个元素的对象以后，可以这两个方法来对这个元素对象的属性进行修改。

第4章 JavaScript 图片库就是有一堆链接，点击其中某个链接就会显示不同的图片

      1. 把所有图片放到images文件夹中

      2. 在<ul>下的<li>中放链接<a>,链接地址就是图片的相对路径。

      3. 在Html中加上<img>标签，作为占位，显示图片用的。

      4. JS写一个方法showPic(whichPic)，参数是element对象，然后用getAttribute()方法获取这个对象的“href“属性。

          然后再用document.getElementById取得<img>元素对象,把对象里的src赋值为前面的href属性值。

      5. <a>里面写调用方法：onclick="showPic(this) ; return false;" 这里必须要写返回false，不然就新窗口点开那个图片的链接了。

      扩展：

       element.childNodes. 方便的获得这个元素的所有子元素，返回数组。

       node.nodeType. 返回这个结点的类型返回数字

                 元素element   1

                 属性attr     2

                 文本text    3

                 注释comments 8

                 文档documen    9

        node.nodeValue 返回或者设置这个节点的文本。这里要注意的是，用getElementById取得的元素本身的nodeValue是null的，

                 要去获得/赋值它的子元素node.childNodes[0].nodeValue,才可以，因为这个元素显示的文本是作为这个元素的子元素的。

                 <P>texttext</P>

        node.firstChild / node.lastChild 更方便的读取子节点

第5章最佳实践

       1.打开窗口：

<html>
<head>
<script type="text/javascript">
function popUp(winURL){
window.open(winURL,"popup","width=320,height=480");
}
</script>
</head>
<body>
<a href="javascript:popUp('https://www.baidu.com');"> test1 </a> <br/>
<a href="#" onclick="popUp('https://www.baidu.com');"> test2</a> <br/>
<a href="https://www.baidu.com/" onclick="popUp(this.href); return false;"> test3</a>
</body>
</html>

      在浏览器的JS禁用的情况下，只有第三种方式还可以打开链接，但是是原窗口打开，不是弹窗的形式。
      JavaScript: ******JS语句****** 这个叫JS伪协议。
      当然，如果连接比较多的话，可以不用每个<a>里面都写onclick.只要这些将要打开链接的<a>中写好href，然后统一加上class=“popup”
      然后在window.onload时，调用一个方法，获得所有class==“popup”的元素，然后统一让他们onclick=function{popUp(this.href);return false;}就可以了。
     JS性能考虑：
     1.尽量少去访问DOM，尽量减少node元素。
     2.多个JS文件推荐合并后放到HTML上，不然会多次发送请求。
     3.用工具压缩JS。

第6章图片库改进版

     就是更加完善了第四章的内容，可以实际动手写一下。

     HTML-DOM比如：document.forms / element.src，比DOM-Core要简化一些。

第7章动态创建标记

     document.write(); 插入HTML代码段。

     node.innerHTML 也是插入HTML代码段。

     document.createElement 创建一个元素

     parent.appendChild() 把创建的元素作为子元素插入到某元素中

     document.createTextNode 创建一个文本元素，也可以用上面的appendChild方法插入到某元素下

     AJAX：异步加载页面技术

     XMLHttpRequest : AJAX的核心对象，在IE7以后，也同样支持了这个对象，但在IE5，IE6，只能用AcitiveXObject

     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
第章

第章

第章

第章

第章

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航