zoukankan      html  css  js  c++  java
  • 《JavaScript DOM 编程艺术 》 笔记

    一:这本书由几个案列带入知识点,通俗易懂。最大的收获莫过于作者多次提到的逐渐增强和平稳退化。

    "渐进增强"指的是给所用用户同等的基本使用体验,再根据用户终端的级别给予更高级的用户更为高效轻松的用户体验。"平稳退化"同样是给所有用户同等的一个基准,但其方向却是与渐进增强相反,此方法是剥夺低级用户的一些体验。

    二:解决部分浏览器不兼容html5、css3 的问题

    使用modernizr解决

    https://modernizr.com/download?setclasses

    三:方法

    加载函数,复杂的代码用此方法更加方便

    //加载函数的方法,如addLoadEvent(functionName),等同于window.onload
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          oldonload();
          func();
        }
      }
    }
    function loadEvents() {
      // home
      prepareSlideshow();
      // about
      prepareInternalnav();
      // photos
      preparePlaceholder();
      prepareGallery();
      // live
      stripeTables();
      highlightRows();
      displayAbbreviations();
      // contact
      focusLabels();
      prepareForms();
    }
    
    // Load events
    addLoadEvent(highlightPage);
    addLoadEvent(loadEvents);

    h5中不存在insertAfter()方法

    //在某个元素节点前插入
    function insertAfter(newElement,targetElement) {
      var parent = targetElement.parentNode;
      if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
      } else {
        parent.insertBefore(newElement,targetElement.nextSibling);
      }
    }

    追加class

    //追加class 的方法
    function addClass(element,value) {
      if (!element.className) {
        element.className = value;
      } else {
        newClassName = element.className;
        newClassName+= " ";
        newClassName+= value;
        element.className = newClassName;
      }
    }

    通过className获取元素

    function getElementByClassName(node, classname) {
        if (node.getElementByClassName) {
            // 使用现有方法
            return node.getElementByClassName(classname);
        } else {
            var results = new Array();
            var elems = node.getElementsByTagName("*");
            for (var i = 0; i < elems.length; i++) {
                if (elems[i].className.indexOf(className) != -1) {
                    results[results.length] = elems[i];
                }
            }
        }
    }
  • 相关阅读:
    hdu 5119 Happy Matt Friends
    hdu 5128 The E-pang Palace
    hdu 5131 Song Jiang's rank list
    hdu 5135 Little Zu Chongzhi's Triangles
    hdu 5137 How Many Maos Does the Guanxi Worth
    hdu 5122 K.Bro Sorting
    Human Gene Functions
    Palindrome(最长公共子序列)
    A Simple problem
    Alignment ( 最长上升(下降)子序列 )
  • 原文地址:https://www.cnblogs.com/yinzf/p/5450979.html
Copyright © 2011-2022 走看看