2018_10_29_02

塘下七武海-涛 / 2024-10-09 / 原文

代码收集

区分桌面环境与移动平台

参考文章:

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

状态码	说明
0	未初始化.尚未调用 open()方法
1	启动。已经调用 open()方法，但尚未调用 send()方法。
2	发送。已经调用 send()方法，但尚未接收到响应。
3	接收。已经接收到部分响应数据。
4	完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

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()方法可以设置自定义的请求头部信息

参数	说明
Accept	浏览器能够处理的内容类型。
Accept-Charset	浏览器能够显示的字符集。
Accept-Encoding	浏览器能够处理的压缩编码。
Accept-Language	浏览器当前设置的语言。
Connection	浏览器与服务器之间连接的类型。
Cookie	当前页面设置的任何 Cookie。
Host	发出请求的页面所在的域。
Referer	发出请求的页面的 URI。注意，HTTP 规范将这个头部字段拼写错了，而为保证与规范一致，也只能将错就错了。（这个英文单词的正确拼法应该是 referrer。）
User-Agent	浏览器的用户代理字符串。

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;
    })
  }
}