# 代码收集 ## 区分 桌面环境 与 移动平台 #### 参考文章: [https://segmentfault.com/a/1190000016760627](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 获取子节点、父节点和兄弟节点的若干种方式](https://blog.csdn.net/laok_/article/details/75760572) ### 一、js 获取子节点的方式 #### 1.通过获取 dom 方式直接获取子节点 其中 test 的父标签 id 的值，div 为标签的名字。getElementsByTagName 是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。 ```js var a = document.getElementById('test').getElementsByTagName('div'); ``` #### 2.通过 childNodes 获取子节点 使用 childNodes 获取子节点的时候，childNodes 返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。 ```js var b = document.getElementById('test').childNodes; ``` 为了不显示不必须的换行的空格，我们如果要使用 childNodes 就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。下面是过滤掉 ```js //去掉换行的空格 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 来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。 ```js var getFirstChild = document.getElementById('test').children[0]; ``` #### 5.获取第一个子节点 firstChild 来获取第一个子元素，但是在有些情况下我们打印的时候会显示 undefined，这是什么情况呢？？其实 firstChild 和 childNodes 是一样的，在浏览器解析的时候会把他当换行和空格一起解析，其实你获取的是第一个子节点，只是这个子节点是一个换行或者是一个空格而已。那么不要忘记和 childNodes 一样处理呀。 ```js var getFirstChild = document.getElementById('test').firstChild; ``` #### 6.firstElementChild 获取第一个子节点 使用 firstElementChild 来获取第一个子元素的时候，这就没有 firstChild 的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。 ```js var getFirstChild = document.getElementById('test').firstElementChild; ``` #### 7.获取最后一个子节点 lastChild 获取最后一个子节点的方式其实和 firstChild 是类似的。同样的 lastElementChild 和 firstElementChild 也是一样的。不再赘余。 ```js var getLastChildA = document.getElementById('test').lastChild; var getLastChildB = document.getElementById('test').lastElementChild; ``` ### 二、js 获取父节点的方式 #### 1.parentNode 获取父节点 获取的是当前元素的直接父元素。parentNode 是 w3c 的标准。 ```js var p = document.getElementById('test').parentNode; ``` #### 2.parentElement 获取父节点 parentElement 和 parentNode 一样，只是 parentElement 是 ie 的标准。 ```js var p1 = document.getElementById('test').parentElement; ``` #### 3.offsetParent 获取所有父节点 一看 offset 我们就知道是偏移量 其实这个是于位置有关的上下级 ，直接能够获取到所有父亲节点， 这个对应的值是 body 下的所有节点信息。 ```js var p2 = document.getElementById('test').offsetParent; ``` ### 三、js 获取兄弟节点的方式 #### 1.通过获取父亲节点再获取子节点来获取兄弟节点 ```js var brother1 = document.getElementById('test').parentNode.children[1]; ``` #### 2.获取上一个兄弟节点 在获取前一个兄弟节点的时候可以使用 previousSibling 和 previousElementSibling。他们的区别是 previousSibling 会匹配字符，包括换行和空格，而不是节点。previousElementSibling 则直接匹配节点。 ```js var brother2 = document.getElementById('test').previousElementSibling; var brother3 = document.getElementById('test').previousSibling; ``` #### 3.获取下一个兄弟节点 同 previousSibling 和 previousElementSibling，nextSibling 和 nextElementSibling 也是类似的。 ```js var brother4 = document.getElementById('test').nextElementSibling; var brother5 = document.getElementById('test').nextSibling; ``` --- 作者：-老 K-
来源：CSDN
原文：[https://blog.csdn.net/laok\_/article/details/75760572](https://blog.csdn.net/laok_/article/details/75760572)
版权声明：本文为博主原创文章，转载请附上博文链接！
--- ## 原生 Ajax 学习 - [https://zacklive.com/javascript-dom-ajax/](https://zacklive.com/javascript-dom-ajax/) - [你真的会使用 XMLHttpRequest 吗？](https://segmentfault.com/a/1190000004322487) AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
#### 检测并兼容所有浏览器包括 IE7 之流的远古浏览器中是否存在 XHR 对象 ```js 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 对象 ```js var xhr = createXHR(); ``` #### 使用 ```js /** * 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); ``` ```js 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 | 完成。已经接收到全部响应数据，而且已经可以在客户端使用了。 | ```js 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 | 浏览器的用户代理字符串。 | ```js 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 请求 ```js // 语法 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 请求 ```js // 语法 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 ```js // 创建`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)); ``` #### 超时设定 ```js xhr.timeout = 1000; //将超时设置为1秒钟(仅适用于IE8+) ``` ### es5 示例代码 #### 跨域 #### 异常处理 ### es6 示例代码 #### 跨域 #### promise 调用 ## 正则截取指定字符串 ### [参考文章](http://www.baidufe.com/item/eb10deb92f2c05ca32cf.html) ### 正则截取指定字符串 ```javascript 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 ``` ## 浏览器基本信息判断 ```javascript /* * 智能机浏览器版本信息: * */ 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 /* 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); } }); });*/ ``` ## 导航条动画，设定 ```javascript 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, ); } ``` ## 锚链接跳转过渡 ```javascript /* # 锚链接跳转过度 条件： 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, ); } } ``` ## 文章标题的动画 ```Javascript 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; }) } } ```