代码收集

区分 桌面环境 与 移动平台

参考文章:

https://segmentfault.com/a/1190000016760627

<<< docs/.vuepress/components/js/2018_10_29_01/2018_10_29_01.js

element 元素 Y 轴的 scroll 事件触发

移动平台

<<< docs/.vuepress/components/js/2018_10_29_02/html_scroll_mobil.vue

桌面环境

<<< docs/.vuepress/components/js/2018_10_29_02/html_scroll_pc.vue

节点的操作

(转载)S 获取子节点、父节点和兄弟节点的若干种方式

一、js 获取子节点的方式

1.通过获取 dom 方式直接获取子节点

其中 test 的父标签 id 的值，div 为标签的名字。getElementsByTagName 是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。

var a = document.getElementById('test').getElementsByTagName('div');

2.通过 childNodes 获取子节点

使用 childNodes 获取子节点的时候，childNodes 返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。

var b = document.getElementById('test').childNodes;

为了不显示不必须的换行的空格，我们如果要使用 childNodes 就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。下面是过滤掉

//去掉换行的空格
for (var i = 0; i < b.length; i++) {
  if (b[i].nodeName == '#text' && !/\s/.test(b.nodeValue)) {
    document.getElementById('test').removeChild(b[i]);
  }
}
//打印测试
for (var i = 0; i < b.length; i++) {
  console.log(i + '---------');
  console.log(b[i]);
}
//补充 document.getElementById("test").childElementCount;  可以直接获取长度 同length

4.通过 children 来获取子节点

利用 children 来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

var getFirstChild = document.getElementById('test').children[0];

5.获取第一个子节点

firstChild 来获取第一个子元素，但是在有些情况下我们打印的时候会显示 undefined，这是什么情况呢？？其实 firstChild 和 childNodes 是一样的，在浏览器解析的时候会把他当换行和空格一起解析，其实你获取的是第一个子节点，只是这个子节点是一个换行或者是一个空格而已。那么不要忘记和 childNodes 一样处理呀。

var getFirstChild = document.getElementById('test').firstChild;

6.firstElementChild 获取第一个子节点

使用 firstElementChild 来获取第一个子元素的时候，这就没有 firstChild 的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。

var getFirstChild = document.getElementById('test').firstElementChild;

7.获取最后一个子节点

lastChild 获取最后一个子节点的方式其实和 firstChild 是类似的。同样的 lastElementChild 和 firstElementChild 也是一样的。不再赘余。

var getLastChildA = document.getElementById('test').lastChild;
var getLastChildB = document.getElementById('test').lastElementChild;

二、js 获取父节点的方式

1.parentNode 获取父节点

获取的是当前元素的直接父元素。parentNode 是 w3c 的标准。

var p = document.getElementById('test').parentNode;

2.parentElement 获取父节点

parentElement 和 parentNode 一样，只是 parentElement 是 ie 的标准。

var p1 = document.getElementById('test').parentElement;

3.offsetParent 获取所有父节点

一看 offset 我们就知道是偏移量 其实这个是于位置有关的上下级 ，直接能够获取到所有父亲节点， 这个对应的值是 body 下的所有节点信息。

var p2 = document.getElementById('test').offsetParent;

三、js 获取兄弟节点的方式

1.通过获取父亲节点再获取子节点来获取兄弟节点

var brother1 = document.getElementById('test').parentNode.children[1];

2.获取上一个兄弟节点

在获取前一个兄弟节点的时候可以使用 previousSibling 和 previousElementSibling。他们的区别是 previousSibling 会匹配字符，包括换行和空格，而不是节点。previousElementSibling 则直接匹配节点。

var brother2 = document.getElementById('test').previousElementSibling;
var brother3 = document.getElementById('test').previousSibling;

3.获取下一个兄弟节点

同 previousSibling 和 previousElementSibling，nextSibling 和 nextElementSibling 也是类似的。

var brother4 = document.getElementById('test').nextElementSibling;
var brother5 = document.getElementById('test').nextSibling;

作者：-老 K-

来源：CSDN

原文：https://blog.csdn.net/laok_/article/details/75760572

版权声明：本文为博主原创文章，转载请附上博文链接！

原生 Ajax 学习

• https://zacklive.com/javascript-dom-ajax/
• 你真的会使用 XMLHttpRequest 吗？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

检测并兼容所有浏览器包括 IE7 之流的远古浏览器中是否存在 XHR 对象

function createXHR() {
  if (typeof XMLHttpRequset != 'undefined') {
    return new XMLHttpRequest();
  } else if (typeof ActiveXobject != 'undefined') {
    if (typeof arguments.callee.activeXString != 'string') {
      var versions = [
          'MSXML2.XMLHttp.6.0',
          'MSXML2.XMLHttp.3.0',
          'MSXML2.XMLHttp',
        ],
        i,
        len;
      for (i = 0, len = versions.length; i < len; i++) {
        try {
          new ActiveXObject(versions[i]);
          arguments.callee.activeXString = versions[i];
          break;
        } catch (ex) {
          // 跳过
        }
      }
    }
    return new ActiveXObject(arguments.callee.activeXString);
  } else {
    throw new Error('No XHR object available');
  }
}

创建 XHR 对象

var xhr = createXHR();

使用

/**
 * xhr对象中的open参数设定
 * @param {string} method   要使用的HTTP方法，比如「GET」、「POST」、
 *                          「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。
 * @param {string} url      一个DOMString表示要向其发送请求的URL。
 * @param {Boolean} async   可选;一个可选的布尔参数，默认为true，表示要不要异步执行操作。
 *                          如果值为false，send()方法直到收到答复前不会返回。如果true，
 *                          已完成事务的通知可供事件监听器使用。
 *                          如果multipart属性为true则这个必须为true，否则将引发异常。
 * @param {String} user     可选.可选的用户名用于认证用途；默认为null。
 * @param {String} password 可选的密码用于认证用途，默认为null。
 */
// 语法
xhr.open(method, url);
xhr.open(method, url, async);
xhr.open(method, url, async, user);
xhr.open(method, url, async, user, password);

xhr.open('get', 'example.txt', false);
xhr.send(null);

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
  alert(xhr.responseText);
} else {
  alert('Request was unsuccessful: ' + xhr.status);
}

readyState

var xhr = createXHR();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      alert(xhr.responseText);
    } else {
      alert('Request was unsuccessful: ' + xhr.status);
    }
  }
};
xhr.open('get', 'example.txt', true);
xhr.send(null);

HTTP 头部信息

• 可使用setRequestHeader()方法可以设置自定义的请求头部信息

var xhr = createXHR();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      alert(xhr.responseText);
    } else {
      alert('Request was unsuccessful: ' + xhr.status);
    }
  }
};
xhr.open('get', 'example.php', true);
xhr.setRequestHeader('MyHeader', 'MyValue');
xhr.send(null);

GET 请求

// 语法
xhr.open('get', 'example.php?name1=value1&name2=value2', true);
// 向现有URL的末尾添加查询字符串参数
function addURLParam(url, name, value) {
  url += url.indexOf('?') == -1 ? '?' : '&';
  url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
  return url;
}
// 使用
var url = 'example.php';
//添加参数
url = addURLParam(url, 'name', 'Nicholas');
url = addURLParam(url, 'book', 'Professional	JavaScript');
//初始化请求
xhr.open('get', url, false);

POST 请求

// 语法
xhr.open('post', 'example.php', true);
// 数据序列化,并提交
function submitData() {
  var xhr = createXHR();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        alert(xhr.responseText);
      } else {
        alert('Request	was	unsuccessful:	' + xhr.status);
      }
    }
  };
  xhr.open('post', 'postexample.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  var form = document.getElementById('user-info');
  xhr.send(serialize(form));
}

FormData

// 创建`FormData`并添加数据
var data = new FormData();
data.append('name', 'Nicholas');
// 使用
var xhr = createXHR();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      alert(xhr.responseText);
    } else {
      alert('Request	was	unsuccessful:	' + xhr.status);
    }
  }
};
xhr.open('post', 'postexample.php', true);
var form = document.getElementById('user-info');
xhr.send(new FormData(form));

超时设定

xhr.timeout = 1000; //将超时设置为1秒钟(仅适用于IE8+)

es5 示例代码

跨域

异常处理

es6 示例代码

跨域

promise 调用

正则截取指定字符串

参考文章

正则截取指定字符串

let str='{"asd":\\1234\\1234\\1234\\1234,"true"},
         {"sada":\\1111\\1234\\1234\\4444,"true"}';
let substr = str.match(/"sada":(\S*),"true"/);
console.log(substr[1]); // \\1111\\1234\\1234\\4444

浏览器基本信息判断

/*
  * 智能机浏览器版本信息:
  *
  */
var browser = {
  versions: (function() {
    var u = navigator.userAgent,
      app = navigator.appVersion;
    console.log(u);
    return {
      //移动终端浏览器版本信息
      trident: u.indexOf('Trident') > -1, //IE内核
      presto: u.indexOf('Presto') > -1, //opera内核
      webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
      mobile: !!u.match(/Mobile/g), //去掉浏览器内核判断
      //        mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
      iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
      iPad: u.indexOf('iPad') > -1, //是否iPad
      webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
    };
  })(),
  language: (navigator.browserLanguage || navigator.language).toLowerCase(),
};
document.writeln('语言版本: ' + browser.language);
document.writeln(' 是否为移动终端: ' + browser.versions.mobile);
document.writeln(' 是否为webKit: ' + browser.versions.webKit);
document.writeln(' ios终端: ' + browser.versions.ios);
document.writeln(' android终端: ' + browser.versions.android);
document.writeln(' 是否为iPhone: ' + browser.versions.iPhone);
document.writeln(' 是否iPad: ' + browser.versions.iPad);
document.writeln(navigator.userAgent);

JavaScript|jQuery 判断元素即将出现在文档可视区域或文档可视区域的顶部

/* JavaScript判断元素即将出现在文档可视区域或离开文档可视区域.
一、判断元素是否处于可视文档区域顶部
判断条件:DOMTop.offsetTop + clientHeight - 10 < clientHeight + scrollTop
解析:
  获取元素距离文档顶端的长度,然后与窗口的高度相加;
  接着,再通过获取窗口滚动条顶端与文档顶端的距离;
  并通过判断得到元素是否处于,距离可视文档区域的顶部10个单位的位置.
二、判断元素是否即将出现在可视窗口的底部
判断条件:DOMTop.offsetTop -10 < clientHeight + scrollTop
解析:基本思路同上一致.
 */
function init() {
  var DOMTop = document.getElementById('box');
  document.addEventListener('scroll', function() {
    var clientHeight = document.documentElement.clientHeight;
    var scrollTop = document.documentElement.scrollTop;
    if (DOMTop.offsetTop + clientHeight - 10 < clientHeight + scrollTop) {
      console.log('发现元素');
    }
  });
}

window.onload = init;
// delete init();

/*jQuery判断元素即将出现在文档可视区域或离开文档可视区域.
思路同上一致,表达方式不同
 当元素距离可视区域还有10的长度时,执行相关程序*/
/*$(document).ready(function () {
  $(window).scroll(function () {
    // console.log($(window).scrollTop() +  $(window).height())
    // 文档距离屏幕可视区域的距离
    var DOMTop = $('.box').offset().top + 10;
    // 文档已经滑动的距离 + 窗口的高度
    var DOMScrollHeight = $(window).scrollTop() +  $(window).height();
    // 元素距离可视区域顶部距离为10的时候触发
    if (DOMTop < DOMScrollHeight) {
      console.log('DOMTop' + DOMTop);
      console.log('DOMScrollHeight' + DOMScrollHeight);
    }
  });
});*/

导航条动画，设定

function navAnimation() {
  let DOMTop = document.getElementById('nav'), // 获取导航对象
    clientHeight = document.documentElement.clientHeight, // 获取窗口可视区域高度
    tru = true, // 是否替换类名的依据
    clientHeightScrollTop =
      clientHeight + DOMTop.offsetTop + DOMTop.clientHeight; // 是否替换类名的依据
  // 监听文档滚动条事件，绑定动画
  document.addEventListener(
    'scroll',
    function() {
      let scrollTop = null;
      if (document.body.scrollTop !== 0) {
        scrollTop = document.body.scrollTop;
      } else {
        scrollTop = document.documentElement.scrollTop;
      }
      if (tru && clientHeightScrollTop < clientHeight + scrollTop) {
        DOMTop.setAttribute('class', 'page-nav top');
        tru = false;
      }
      if (clientHeightScrollTop > clientHeight + scrollTop) {
        DOMTop.setAttribute('class', 'page-nav');
        tru = true;
      }
    },
    false,
  );
}

锚链接跳转过渡

/*
# 锚链接跳转过度
条件：
  1.目标位置 & 滚动条位置 距离过近
  2.目标位置 > 滚动条位置
  3.目标位置 < 滚动条位置
策略：
  1.获取需要绑定事件的对象；
  2.使用for循环语句，给获取到的对象集合绑定事件；
  3.window.scrollTo(X,Y); 备注：X=window水平方向的滚动条移动位置；Y=window水平方向的滚动条移动位置;
  4.根据条件，执行不同事件。
  5.获取`目标位置 & 滚动条位置`的间距，除以25。然后用该数值与`滚动条位置`相加或相减。而累加或累减的过程通过setInterval()定时器方法来控制。
  6.程序执行完毕之后，用clearInterval()方法清除定时器。
 */
anchorLinkJumpTransition();

function anchorLinkJumpTransition() {
  let aTag = document.querySelectorAll('.animation-top a');
  for (let i = 0; i < aTag.length; i++) {
    aTag[i].addEventListener(
      'click',
      function() {
        var $target = document.getElementById(this.hash.slice(1));
        scrollToTop($target.offsetTop);

        function scrollToTop(scrollDuration) {
          let scrollTop = null, // 滚动条当前位置
            scrollStep = null, // 滚动条累加前的位置
            s = 0; // 关闭计时器的条件 s = 25时
          if (document.body.scrollTop !== 0) {
            scrollTop = document.body.scrollTop;
          } else {
            scrollTop = document.documentElement.scrollTop;
          }
          scrollStep = scrollTop = Number.parseInt(scrollTop);
          console.log('滚动前，滚动条位置:' + scrollTop);
          console.log('目标位置：' + scrollDuration);
          // 目标位置 & 滚动条位置 距离过近
          console.log(Math.abs(scrollTop - scrollDuration));
          if (Math.abs(scrollTop - scrollDuration) > 21) {
            let scrollInterval = setInterval(function() {
              if (s < 26) {
                // s 是累加的，所以用来跟`目标位置 & 滚动条位置`的间距，相乘，获得过渡效果。
                window.scrollTo(
                  0,
                  scrollStep + ((scrollDuration - scrollTop) / 25) * s,
                );
                s++;
              } else {
                clearInterval(scrollInterval);
                scrollStep = null;
              }
            }, 10);
          }
        }
      },
      false,
    );
  }
}

文章标题的动画

function animateIn() {
  let animateIn = document.querySelectorAll('.container .title strong');
  // console.log(animateIn.getAttribute('class'))
  // console.log(animateIn)
  let that = null;
  for (let i = 0; i < animateIn.length; i++) {
    animateIn[i].addEventListener('click', function () {
      if (that !== null) {
        that.removeAttribute('class');
        if (that === this) {
          this.removeAttribute('class');
          that = null;
          return;
        }
      }
      this.setAttribute('class', 'animate-in');
      that = this;
    })
  }
}