软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> JSDOM编程艺术学习笔记(一) -> 正文阅读

[Web前端]JSDOM编程艺术学习笔记(一)


JS DOM编程艺术学习笔记
什么是DOM,简单的来说就是一套对文档的内容进行抽象和概念化的方法。
第二章 JavaScript 语法
把JavaScript代码存为一个扩展名为.js的独立文件,并在文档的`<head>`部分,或HTML文档的最后`</body>`之前,放一个`<script>`标签,
并把它的src属性指向改文件:
            <script src="file.js"></script>

  1. 注释:
    单行注释:// (HTML里是<!--……-->)
    多行注释:/*……*/

  2. 变量:
    声明变量:var a,b,c;
    变量名允许包含字母,数字,美元符号,下划线(但第一个字符不准是数字),不允许包含空格或标点符号。通常,变量命名是用下划线分隔各个单词

  3. 数据类型
    a)字符串:var mood=”happy”;(单引号也行;如果字符串包含单引号,就把整个字符串放在双引号里;如果单词中含单引号,如don’t,单引号需要被看成一个普通字符,这种情况要对字符串进行转义,即用到反斜杠don\’t,双引号类似)
    b)数值:var age=18;(支持负数,浮点数)
    c)布尔值:var sleeping=true;(false,千万不要用引号括起来!菜鸟第一次面试实习,而且是非常想进的网易的时候,居然加了引号,悔啊T—T……估计小哥主管一下就把我拍死了)
    d)对象:每个值都是对象的一个属性(见后)
    e)数组:var X=Array();
    可以用关键词Array声明,括号里也可以给出数组长度;
    向数组中添加元素的操作称为填充:X[index]=element;(注意!数组里下标是从0开始!)我们只需要用一对方括号把各个元素的初始值括起来就可以了:var beatles=[“Jonh”,”Paul”,”Sun”];
    数组还可以包含其他数组,现在beatles数组的第一个元素就是lenno数组,想要获得那个数组里的某个元素就要使用更多的方括号:如beatles[0][0];
var lenno=["Jonh",1940,false];
var beatles=[];
beatles[0]=lenno;

4.函数
如果多次使用同一段代码,就把它封装成函数。
语法:function name(arguments){    statements;     }
javascript的内建函数有:alert、confirm、join、length、reverse、getDate、sqrt、round等(有单独一篇文章介绍)
函数的真正价值在:可以把一个函数的调用结果赋给一个变量
驼峰格式是函数名,方法名和对象属性名的首选格式,如myName。
注意!如果某个函数中使用var,则变量视为局部变量。如果没有使用var那么变量将被视为全 局变量。如果脚本里已经存在与之同名的全局变量,
这个函数就会改变那个全局变量的值。为了避免二义性隐患,定义一个函数时,我们要把它的内部全都用var明确的声明为局部变量

5.对象
JS里对象可以分为三种类型:用户自定义对象,内建对象和宿主对象(浏览器提供,如window对象)
对象里的数据可以通过属性和方法访问,用“.”的语法。
给对象创造新的实例:var Jeny=new Person;
内建对象:
数组Array——属性length,join()数组中所有字符相连的字符串,reverse()逆转,sort数组元素排序)
字符串String——属性length
数学对象Math,不能用new
布尔量Boolean,
日期时间Date——getDay(),getHours(),getMonth()
宿主对象:Form,Image,Element等

第三章 DOM
D:document     O:object     M:model(map)
5个常用的DOM方法,getElementById,getElementsByTagName, getElementsByClassName, getAttribute 和 setAttribute     
DOM把一份文档表示为一棵节点树

1.节点
元素节点:DOM的原子,标签的名字就是元素的名字
文本节点:<p>包含在元素节点内部,可在一些<li>内部
属性节点:用来对元素做出更具体的描述,几乎所有的元素都有title属性

2.获取元素
 都可以先赋给一个变量,再进行操作
 getElementById(id):返回一个对象,该对象对应此id属性值的元素节点。
 getElemrntsByTagname(tag):返回一个对象数组,分别对应着文档里的一组特定元素节点。通配符“*”如果想知道
 一个文档里有多少个元素节点可以写成getElementsByTagName("*").length
 构造function genElementsByClassName(node,classname)搜索起点

3.获取和设置属性
上述是获取特定元素的方法,得到需要的元素后就可以获取他的各个属性,即getAttribute()。相应的setAttribute()可以更改属性节点的值。

getAttribute是一个函数,只有一个参数——你打算查询的属性名字,object.getAttribute(attribute)
    //一段可读性比较好的小代码
    var paras=document.getElementsByTagName("p");
        for(var i=0;i<paras.length;i++){
            var title_text=paras[i].getAttribut("title");
            if(title_text) alert(title_text);
        }
    }
   //if(title_text!=null)可简写,if里面如果something存在,则if条件为真
setAttribute用来设置元素的属性object.setAttribute(attribute,value)
在动态刷新,动态刷新不影响文档里的静态内容。这正是DOM的真正威力:对页面内容进行刷新却不需要再浏览器里面刷新页面。

第四章 案例探究:JavaScript图片库
用JavaScript和DOM建立一个图片库
为每张图片分别创建一个网页的解决方案值得考虑,这样你的图片库将不再是一个体积庞大,难以下载的网页,而变成许多尺寸合理、便于下载
和浏览的页面。利用JavaScript来创建图片库是最佳选择,把整个图片库的浏览链接集中安排在图片库主页里,只在用户点击这个主页的某个链接
时才把相应的图片传送给他。

第一步:为这些图片创建一个链接清单,<ul>或<ol>,并把图像集中保存在目录images里。清单里的每个链接分别指向不同的图片,
点击可以转到相应的图片,但从图片返回到链接清单需要借助Back.
<body>
        <h1>Happy</h1>
        <ul>
            <li><a href="images/image_0001.jpg" title="Happy1">Happy1</a></li>
            <li><a href="images/image_0002.jpg" title="Happy1">Happy2</a></li>
            <li><a href="images/image_0003.jpg" title="Happy1">Happy3</a></li>
            <li><a href="images/image_0004.jpg" title="Happy1">Happy4</a></li>
            <li><a href="images/image_0005.jpg" title="Happy1">Happy5</a></li>
            <li><a href="images/image_0006.jpg" title="Happy1">Happy6</a></li>
        </ul>
</body>
第二步:改进——当点击链接时,留在这个网页,并同时看到图片和原有图片清单。方案:“占位符”图片在这个网页上为图片预留一个浏览区域,
用id属性进行设置,这使我们可以通过外部样式表对图片显示位置和显示效果进行控制。
<img id="holder" src="images/holder.jpg" alt="My image gallery"/>
第三步:Javascript。为了把“占位符”图片替换为想要查看的图片,需要改变他的src属性。setAttribute函数,这个函数的唯一参数就是图片链接。
它通过改变占位符图片的src属性将其替换为参数图片。
<script>
        function showPic(whichpic){
            var placeholder=document.getElementById("holder");
            var source=whichpic.getAttribute("href");
            placeholder.setAttribute("src",source);
        }
</script>
第四步:应用JavaScript函数与文档结合。把函数保存扩展名为.js文件中(最好将.js文件合并到一个文件中,减少对站点的请求次数)。
然后在文档</body>之前插入链接来引用这个js文件。
再需要给图片列表的链接添加行为,也就是事件处理函数。用到this关键字,表明这个对象。注意!还要阻止默认弹出新网页行为,
可以设置一个返回值false,让onclick函数认为"这个链接没有被点击"也就是链接不会真的被打开。
<li><a href="images/image_0001.jpg" title="Happy1" onclick="showPic(this); return false;">Happy1</a></li>

扩展:在同一网页上切换显示不同文本
图片库里的每个图片链接都有一个title属性,可以把这个属性取出来并让他和相应的图片显示在同一
网页上:var text=witchpic.getAttribute('title');还需要用到几个新DOM属性:
创建一个文本节点,先为文本安排一个位置,<p id="description">Choose a image.</p> 当图片链接被点击时,不仅要把“占位符”图片
替换为链接href属性指向的图片,还要把文本同事换位那个图片链接的title值。(这里没有按原书写,我觉得这样更简单,书上用到属性childNodes,
nodeType,nodeValue,并使用firstChild,nodeValue属性)
function showPic(whichpic){
    var placeholder=document.getElementById("holder");
    var description=document.getElementById("description");
    var source=whichpic.getAttribute("href");
    var text=whichpic.getAttribute("title");
    placeholder.setAttribute("src",source);
    description.innerHTML=text;
}
 简单说一下书中介绍的方法:nodeValue属性——改变一个文本节点的值,childNode属性——是一个包含在这个元素的全部子元素的数组,
 child[0]又称为firstChild,表示第一个元素。上面代码最后一行也可写成:description.firstChild.nodeValue=text;

 样式学习:在<head>里用一个<link>标签引入外部样式
 <link rel="stylesheet" href="styles/layout.css" media="screen"/>
  background-color:transparent;(透明的意思)
  text-docoration:none;(none: 定义正常显示的文本 underline: 定义有下划线的文本 overline: 定义有上划线的文本 
  line-through: 定义直线穿过文本 blink: 定义闪烁的文本)
  display:inline 列表项从纵向显示变为横向显示

第五章 最佳实践
您的网站访问者可能未启动JavaScript功能,浏览器对JavaScript的支持程度也不一样。

  1. 平稳退化经典例子:href属性设置为真实存在的URL地址,即使Javascript被禁用,或遇到搜索机,这个链接也是可用的。

  2. 分离JS代码和HTML文件。尤其是内嵌的时间处理函数如onclick,在HTML里使用如onclick之类的属性是没有效率和容易引发问题的做法。
    我们可以在外部Javascript文件里把一个事件添加到HTML文档中某个元素上。语法:element.event=action,
    如getElementById(”).onclick=function(){}
    如果事件涉及多个元素,我们可以使用getElementsByTagName,和getAttribute,即把文档里的所有连接放入一个数组,
    然后遍历数组。
var links=document.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
        links[i].onclick=function(){
            ……
            return false;
        }
}
 如果<script>标签位于</body>之前,需要用到window.onload=来保证js文件在文本加载完成时才触发

3.如何检测浏览器对JavaScript的支持程度?在使用某个特定方法或属性之前,先测试它是否真 实存在是确保向后兼容性最安全
可信的方法。只要把某个方法打包在if语句里就能实现,而且测试条件用“逻辑非”运算符可以简化代码。
    if(!getElementById) return false;  
如果测试多个方法或者属性是否存在,可以用“逻辑或”操作符将其合并,如:
    if(!getElementById||!getElementsByTagName) return false;

4.性能考虑:
尽量少访问DOM,如重复使用getElementById,应把第一次搜索的结果保存在一个变量中。尽量减少不必要的标记。
合并脚本js文件,并且把所有<script>脚本放到文档的末尾,</body>标记之前,可以让页面更快。传统上我们都把脚本放在<head>区域
压缩脚本,把脚本中不必要的空格和注释删除。多数情况下,你应该有两个版本,一个是工作副本,可以修改代码并添加注释;
另一个是精简版本,用于放在站点上。文件名中加上min字样。推荐几个代码压缩工具:
雅虎的YUI Compressor(http://developer.yahoo.com/yui/compressor)
谷歌的Closure Compile(http://closure-compile.appspot.com/home)

第六章 图片库改进版
改进一:onclick事件分离
       可以在ul标签中设置id=**,再在js中编写一个简短函数把有关操作关联到onclick事件上。
改进二:确保向后兼容性,检查当前浏览器是否支持getElementById,getElementsByTagName,是否存在id=**元素;尽量少访问DOM,
遍历id=**元素中的所有连接,设置onclick事件。
function prepareGallery() {
      if (!document.getElementsByTagName) return false;
      if (!document.getElementById) return false;
      if (!document.getElementById("imagegallery")) return false;
      var gallery = document.getElementById("imagegallery");
      var links = gallery.getElementsByTagName("a");
      for ( var i=0; i < links.length; i++) {
      links[i].onclick = function() {
          return showPic(this);
        }
      links[i].onkeypress = links[i].onclick;
  }
 改进三:保证HTML加载完成,共享onload事件:  推荐方案——addLoadEvent,把现有的window.onload事件处理函数的值存入变量oldonload。
 如果想把更多函数加到里面,只需要在指令末尾加上:addLoadEvent(function1);addLoadEvent(function2);addLoadEvent(function3);
 ……就可以了,方便以后工作扩展。
    function addLoadEvent(func) {
          var oldonload = window.onload;
          if (typeof window.onload != 'function') {
            window.onload = func;
          } 
          else {
            window.onload = function() {
             oldonload();
              func();
            }
      }

     addLoadEvent(prepareGallery);
改进四:showpic()函数 对出现元素的存在性进行检查,如图片placeholder;描述description元素,和它的第一个子元素是不是文本节点;
链接里的title属性如果不存在,设为空字符串,
function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return false;
  if (!document.getElementById("description")) return false;
  if (whichpic.getAttribute("title")) {
    var text = whichpic.getAttribute("title");
  } else {
    var text = "";
  }
  var source = whichpic.getAttribute("href");
  var description = document.getElementById("description");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);

  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;
  }
  return false;
改进五:关于onclick的优化,避免用户使用键盘无法操作,让处理键盘事件的onkeypress事件与onclick触发同样的行为
(一般不用考虑,因为这也会带来一些问题)
for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
    }
    links[i].onkeypress = links[i].onclick;
  }

第七章 动态创建标记
本章介绍一些DOM方法,通过创建新元素和修改现有元素来改变网页结构。
1.传统方法

  document.write:HTML专有属性,不能用于其他标记语言文档。快捷的把字符串插入到文档里,缺点是违背了“行为与表现分离”,
  必须在HTML里增加<script>标签,应避免使用
    <script>
            document.write("<p>This is a paragraph</p>")
    </script>
 innerHTML:HTML专有属性,不能用于其他标记语言文档,浏览器几乎都支持,已经包含到HTML5规范中。可以用来读、写某给定元素里的HTML内容。
 但是毫无细节可言,就像一把大锤那样粗放,要想获得细节就必须使用DOM方法和属性(终于知道上面为什么写的复杂了),比如:
    <div id="testdiv">            //HTML中
       <p>This is<em>my</em>content.</p>
    </div>
    window.onload=function(){          //js中
            var testDiv=document.getElementById("testdiv");
            alert(testDiv.innnerHTML);
}
  结果为:<p>This is<em>my</em>content.</p>
  大锤有大锤的用武之地,在需要把一大段HTML内容插入网页时,innerHTML属性更合适,既支持读取也支持写入。 但是innerHTML不会返回对任何
  刚插入内容的引用,如果想对刚插入内容进行处理,则需要使用DOM提供的精确的方法和属性。

2.DOM方法

  如果想在节点树上添加内容,就必须插入新的节点。这个任务分成两个步骤,第一步创建新的元素,第二步把新的元素插入节点树。

  createElement:创建新的元素,语法:document.creatElement(nodename)如:document.creatElement("p");并养成好习惯,将它赋给一个变量。
  var para=document.creatElement("p");但此时它还不是一棵DOM节点树的组成部分。但已经有了nodeName(大写P),和nodeType(1:元素节点)值。
  appendChild:把新创建的节点插入文档结构,成为id="testdiv"的子节点:语法:parent.appendChild(child)如:testdiv.appendChild(para);
  其中,var testdiv=getElementById("testdiv");
  creatTextNode:创建元素节点并插入文档节点树后,想把一些文本放入这个p元素。语法:document.creatTextNode(text)如:
  document.creatTextNode("Hello");并养成好习惯,将它赋给一个变量:var txt=document.creatTextNode("Hello");
  但此时它还不是一棵DOM节点树的组成部分。再用appendChild把创建的文本节点插入到上面创建的p元素:para.appendChild(txt);
window.onload=function(){
      var testdiv=getElementById("testdiv"); 
      var para=document.creatElement("p");
      testdiv.appendChild(para);
      var txt=document.creatTextNode("Hello");
      para.appendChild(txt);
}
 3.重回图片库

......显示全文...
    点击查看全文


上一篇文章           查看所有文章
2016-04-02 20:54:21  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2018年7日历
2018-7-22 11:17:04
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --