时隔许久,又一次拿出《JavaScript DOM编程艺术》,这些且按下不表

2017.06.05

  1. 第1章:JavaScript简史
    { 了解了JavaScript的发展历程 }
  2. 第2章:JavaScript语法
    { 学习了JavaScript语法,如:变量,数据类型(字符串、数值、布尔值),数组,操作符,条件语句(if、>=、!=、&&逻辑与、||逻辑或、!逻辑非),循环语句(for、while、do…while),函数,对象(內建对象–Date、Array、Math;宿主对象–Form、Image、document) }

2017.06.06

  1. 第3章:DOM
    { 节点:元素节点、属性节点、文本节点;DOM提供的5个获取元素方法:getElementById,getElementsByClassName(不兼容ie8),getElementsByTagName(返回一个对象数组),getAttribute(获取元素的值),setAttribute(给元素赋值) }
  2. 第4章:案例研究:JavaScript图片库
    { DOM新属性:childNodes(获取所有的子元素,返回的是数组),nodeType(获取节点类型–1是元素节点、2是属性节点、3是文本节点),nodeValue(检索或修改节点的值),firstChild(第一个元素),lastChild(最后一个元素) }
    demo

2017.06.07

  1. 第5章:最佳实践
    { JavaScript需平稳退化,html需与JavaScript分离,JavaScript需向后兼容(1. 对象检测–检测浏览器对JavaScript的支持程度)2. 浏览器嗅探技术–提取浏览器信息来解决兼容问题,性能优化(减少不必要的DOM标记、合并且压缩脚本) }

2017.06.08

  1. 第6章:案例研究:图片库改进版
    { addLoadEvent脚本函数(只有一个参数:打算在页面加载完毕时执行的函数名字) }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != "function"){
    window.onload=func;
    }else{
    window.onload = function(){
    oldonload();
    func();
    }
    }
    }

    {nodeName:返回指定节点的节点名称(如果是元素节点,则返回标签名;如果是属性节点,则返回属性名称;对于其他节点类型,返回不同节点类型的不同名称。。注:总是返回一个大写字母的值,即使元素在HTML文档里是小写字母}

2017.06.09,2017.06.12

  1. 第7章:动态创建标记
    { document.write() –方便快捷的把字符串插入到文档里(行为和表现没有分离,尽量避免使用) eg: }

    1
    document.write("<p>This is a p.</p>");

    {innerHTML:既可以读,也可以写入,是html专有属性}
    {DOM方法: 1. createElement:只创建元素节点 eg:}

    1
    var p = document.createElement("p");

    {2. createTextNode: 创建一个文本节点}
    {3. appendChild: 把新创建的节点插入某个文档节点树种 eg:}

    1
    divtest.appendChild(p);

    {在已有元素前面插入一个新元素: parentElement.insertBefore(newElement,targetElement)
    说明(新元素:你想插入的元素[newElement];
    目标元素:你想把新元素插入到哪个元素[targetElement]之前;
    父元素:目标元素的父元素[parentElement])}

    {在现有元素后面插入一个新元素,eg:}

    1
    2
    3
    4
    5
    6
    7
    8
    function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
    parent.appendChild(newElement);
    }else{
    parent.insertBefore(newElement,targetElement.nextSibling);
    }
    }

{ Ajax–理解不了书上写的,看的我一脸懵逼(๑°ㅁ°๑) }

2017.06.14

  1. 第8章: 充实文档的内容{ 创建了“缩略语列表”、“文献来源链接”、“快捷键清单”的函数; 学习了for/in循环 }
    for(key in defs)
    demo

2017.06.15

  1. 第9章: CSS-DOM { 学习了用js动态修改css样式。 网页分为结构层(html),表现层(css),行为层(js) 。className属性: 设置或返回元素的class属性 。 如果想改变某个元素的呈现效果,就用css,如果想改变其行为,用DOM 。 把一个非常具体的东西改进为一个较为通用的东西的过程叫抽象 }
    demo

2017.06.16

  1. 第10章: 用JavaScript实现动画效果 { setTimeout 能让某个函数在经过一段预定时间之后开始执行,第一个参数为要执行的函数名字,第二个参数为时间数值(毫秒为单位) ;;Math.ceil(number) :返回不小于number的一个整数;; Math.floor(number) :返回不大于number的整数;; Math.ceil(number): 返回与之最接近的整数}
    setTimeout(“function”,interval);
    demo

2017.06.27

  1. 第11章: HTML5 { 介绍modernizr.js(检测浏览器特性的js库) ;;canvas;; video和audio ;;表单(兼容placeholder) }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    if(!Modernizr.input.placeholder){
    var input = document.getElementById("input");
    input.onfoces = function(){
    var text = this.placeholder || this.getAttribute("placeholder");
    if(this.value == text){
    this.value = "";
    }
    }
    input.onblur = function(){
    if(this.value == ""){
    this.value = this.placeholder || this.getAttribute("placeholder");
    }
    }
    input.onblur;
    }

2017.06.28,29,30

  1. 第12章: 综合示例
    demo