devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

爬虫必备-JS之Dom操作大全

作者：从前慢现在也慢 | 2024-04-10 05:04:18

赞

踩

jsdom 爬虫

640?wx_fmt=png"Python学习开发"，一个值得加星标640?wx_fmt=png的公众号。

640?wx_fmt=jpeg

文章来源:https://www.haorooms.com/post/js_shixian_jquery

有些公司手机网站开发不用第三方的jquery或者zeptio，直接用原生的javascript。原生javascript功能是蛮强大的，只不过部分属性不支持IE8以下浏览器。下面对jquery相关方法，如何用js来实现，做一些简单总结。同时熟练的操作Dom也是爬虫必备技能之一。

Add Class 

  1. //JQUERY
  2. $(el).addClass(className);
  3.  
  4. //js
  5. //谷歌浏览器，火狐浏览器，IE8+
  6. if (el.classList)
  7.   el.classList.add(className);
  8. else
  9.   el.className += ' ' + className;
  10. //谷歌浏览器，火狐浏览器，IE10+
  11. el.classList.add(className);

After 

  1. //JQUERY
  2. $(el).after(htmlString);
  3.  
  4. //js 谷歌浏览器，火狐浏览器，IE8+
  5. el.insertAdjacentHTML('afterend', htmlString);

Append 

  1. //JQUERY
  2. $(parent).append(el);
  3.  
  4. //js谷歌浏览器，火狐浏览器，IE8+
  5. parent.appendChild(el);

Before 

  1. //JQUERY
  2. $(el).before(htmlString);
  3.  
  4. //js谷歌浏览器，火狐浏览器，IE8+
  5. el.insertAdjacentHTML('beforebegin', htmlString);

Children 

  1. //JQUERY
  2. $(el).children();
  3.  
  4. //js
  5. //谷歌浏览器，火狐浏览器，IE8+
  6. var children = [];
  7. for (var i = el.children.length; i--;) {
  8.   // Skip comment nodes on IE8
  9.   if (el.children[i].nodeType != 8)
  10.     children.unshift(el.children[i]);
  11. }
  12. //谷歌浏览器，火狐浏览器，IE9+
  13. el.children

Clone 

  1. //JQUERY
  2. $(el).clone();
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. el.cloneNode(true);

Contains 

  1. //JQUERY
  2. $.contains(el, child);
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. el !== child && el.contains(child);

Contains Selector 

  1. //JQUERY
  2. $(el).find(selector).length;
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. el.querySelector(selector) !== null

Each 

  1. //JQUERY
  2. $(selector).each(function(i, el){
  3.  
  4. });
  5.  
  6. //js谷歌浏览器，火狐浏览器，IE8+
  7. function forEachElement(selector, fn) {
  8.   var elements = document.querySelectorAll(selector);
  9.   for (var i = 0; i < elements.length; i++)
  10.     fn(elements[i], i);
  11. }
  12.  
  13. forEachElement(selector, function(el, i){
  14.  
  15. });
  16. //js谷歌浏览器，火狐浏览器，IE9+
  17. var elements = document.querySelectorAll(selector);
  18. Array.prototype.forEach.call(elements, function(el, i){
  19.  
  20. });

Empty 

  1.     //JQUERY
  2.     $(el).empty();
  3.  
  4.     //js谷歌浏览器，火狐浏览器，IE8+
  5.     while(el.firstChild)
  6.       el.removeChild(el.firstChild);
  7.    //js谷歌浏览器，火狐浏览器，IE9+
  8.     el.innerHTML = '';

过滤filter 

  1. //JQUERY
  2. $(selector).filter(filterFn);
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. function filter(selector, filterFn) {
  6.   var elements = document.querySelectorAll(selector);
  7.   var out = [];
  8.   for (var i = elements.length; i--;) {
  9.     if (filterFn(elements[i]))
  10.       out.unshift(elements[i]);
  11.   }
  12.   return out;
  13. }
  14.  
  15. filter(selector, filterFn);
  16. //谷歌浏览器，火狐浏览器，IE9+
  17. Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);

查找子元素 

  1. //JQUERY
  2. $(el).find(selector);
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. el.querySelectorAll(selector);

查找、选择器 

  1. //JQUERY
  2. $('.my #awesome selector');
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. document.querySelectorAll('.my #awesome selector');

获取属性值attr 

  1.     //JQUERY
  2.     $(el).attr('tabindex');
  3.  
  4.    //谷歌浏览器，火狐浏览器，IE8+
  5.     el.getAttribute('tabindex');

获取Html内容 

  1. //JQUERY
  2. $(el).html();
  3.  
  4. //js
  5. el.innerHTML

获取CSS样式 

  1. //JQUERY
  2. $(el).css(ruleName);
  3.  
  4. //谷歌浏览器，火狐浏览器，IE9+
  5. getComputedStyle(el)[ruleName];

获取文本内容 

  1. //JQUERY
  2. $(el).text();
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. el.textContent || el.innerText
  6. //谷歌浏览器，火狐浏览器，IE9+
  7. el.textContent

Has Class 

  1. //JQUERY
  2. $(el).hasClass(className);
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. if (el.classList)
  6.   el.classList.contains(className);
  7. else
  8.   new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
  9. //谷歌浏览器，火狐浏览器，IE10+
  10. el.classList.contains(className);

元素比较 

  1. JQUERY
  2. $(el).is($(otherEl));
  3.  
  4. //js
  5. el === otherEl

比较类名 

  1. //JQUERY
  2. $(el).is('.my-class');
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. var matches = function(el, selector) {
  6.   var _matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector);
  7.  
  8.   if (_matches) {
  9.     return _matches.call(el, selector);
  10.   } else {
  11.     var nodes = el.parentNode.querySelectorAll(selector);
  12.     for (var i = nodes.length; i--;) {
  13.       if (nodes[i] === el)
  14.         return true;
  15.     }
  16.     return false;
  17.   }
  18. };
  19.  
  20. matches(el, '.my-class');
  21. //谷歌浏览器，火狐浏览器，IE9+
  22. var matches = function(el, selector) {
  23.   return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
  24. };
  25.  
  26. matches(el, '.my-class');

Next 

  1. //JQUERY
  2. $(el).next();
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. // nextSibling can include text nodes
  6. function nextElementSibling(el) {
  7.   do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );
  8.   return el;
  9. }
  10.  
  11. el.nextElementSibling || nextElementSibling(el);
  12. //谷歌浏览器，火狐浏览器，IE9+
  13. el.nextElementSibling

Offset 

  1. //JQUERY
  2. $(el).offset();
  3. //js谷歌浏览器，火狐浏览器，IE8+
  4. var rect = el.getBoundingClientRect()
  5.  
  6. {
  7.   top: rect.top + document.body.scrollTop,
  8.   left: rect.left + document.body.scrollLeft
  9. }

Outer Width 

  1. //JQUERY
  2. $(el).outerWidth();
  3. //js
  4. el.offsetWidth

Parent 

  1. //JQUERY
  2. $(el).parent();
  3. //js
  4. el.parentNode

Position 

  1. //JQUERY
  2. $(el).position();
  3. //js
  4. {left: el.offsetLeft, top: el.offsetTop}

Prev 

  1. //JQUERY
  2. $(el).prev();
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. // prevSibling can include text nodes
  5. function previousElementSibling(el) {
  6.   do { el = el.previousSibling; } while ( el && el.nodeType !== 1 );
  7.   return el;
  8. }
  9.  
  10. el.previousElementSibling || previousElementSibling(el);
  11. //谷歌浏览器，火狐浏览器，IE9+
  12. el.previousElementSibling

Remove 

  1. //JQUERY
  2. $(el).remove();
  3. //js谷歌浏览器，火狐浏览器，IE8+
  4. el.parentNode.removeChild(el);

Remove Class 

  1. //JQUERY
  2. $(el).removeClass(className);
  3. //js谷歌浏览器，火狐浏览器，IE8+
  4. if (el.classList)
  5.   el.classList.remove(className);
  6. else
  7.   el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  8.  
  9. //谷歌浏览器，火狐浏览器，IE10+
  10. el.classList.remove(className);

Replace From Html 

  1. //JQUERY
  2. $(el).replaceWith(string);
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. el.outerHTML = string;

Set Attributes 

  1. //JQUERY
  2. $(el).attr('tabindex', 3);
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. el.setAttribute('tabindex', 3);

Set Html 

  1. //JQUERY
  2. $(el).html(string);
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. el.innerHTML = string;

Set Style 

  1. //JQUERY
  2. $(el).css('border-width', '20px');
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. // Use a class if possible
  5. el.style.borderWidth = '20px';

Set Text 

  1. //JQUERY
  2. $(el).text(string);
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. if (el.textContent !== undefined)
  5.   el.textContent = string;
  6. else
  7.   el.innerText = string;
  8. //谷歌浏览器，火狐浏览器，IE9+
  9. el.textContent = string;

Siblings 

  1. //JQUERY
  2. $(el).siblings();
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. var siblings = Array.prototype.slice.call(el.parentNode.children);
  5.  
  6. for (var i = siblings.length; i--;) {
  7.   if (siblings[i] === el) {
  8.     siblings.splice(i, 1);
  9.     break;
  10.   }
  11. }
  12. //谷歌浏览器，火狐浏览器，IE9+
  13. Array.prototype.filter.call(el.parentNode.children, function(child){
  14.   return child !== el;
  15. });

Toggle Class 

  1. //JQUERY
  2. $(el).toggleClass(className);
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. if (el.classList) {
  5.   el.classList.toggle(className);
  6. } else {
  7.     var classes = el.className.split(' ');
  8.     var existingIndex = -1;
  9.     for (var i = classes.length; i--;) {
  10.       if (classes[i] === className)
  11.         existingIndex = i;
  12.     }
  13.  
  14.     if (existingIndex >= 0)
  15.       classes.splice(existingIndex, 1);
  16.     else
  17.       classes.push(className);
  18.  
  19.   el.className = classes.join(' ');
  20. }
  21. //谷歌浏览器，火狐浏览器，IE9+
  22. if (el.classList) {
  23.   el.classList.toggle(className);
  24. } else {
  25.   var classes = el.className.split(' ');
  26.   var existingIndex = classes.indexOf(className);
  27.  
  28.   if (existingIndex >= 0)
  29.     classes.splice(existingIndex, 1);
  30.   else
  31.     classes.push(className);
  32.  
  33.   el.className = classes.join(' ');
  34. }
  35. //谷歌浏览器，火狐浏览器，IE10+
  36. el.classList.toggle(className);

事件

Off 

  1. //JQUERY
  2. $(el).off(eventName, eventHandler);
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. function removeEventListener(el, eventName, handler) {
  6.   if (el.removeEventListener)
  7.     el.removeEventListener(eventName, handler);
  8.   else
  9.     el.detachEvent('on' + eventName, handler);
  10. }
  11. removeEventListener(el, eventName, handler);
  12.  
  13. //谷歌浏览器，火狐浏览器，IE9+
  14. el.removeEventListener(eventName, eventHandler);

On 

  1. //JQUERY
  2. $(el).on(eventName, eventHandler);
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. function addEventListener(el, eventName, handler) {
  6.   if (el.addEventListener) {
  7.     el.addEventListener(eventName, handler);
  8.   } else {
  9.     el.attachEvent('on' + eventName, function(){
  10.       handler.call(el);
  11.     });
  12.   }
  13. }
  14.  
  15. addEventListener(el, eventName, handler);
  16.  
  17. 谷歌浏览器，火狐浏览器，IE9+
  18. el.addEventListener(eventName, eventHandler);

Ready 

  1. //JQUERY
  2. $(document).ready(function(){
  3.  
  4. });
  5.  
  6. //谷歌浏览器，火狐浏览器，IE8+
  7.  
  8. function ready(fn) {
  9.   if (document.readyState != 'loading'){
  10.     fn();
  11.   } else if (document.addEventListener) {
  12.     document.addEventListener('DOMContentLoaded', fn);
  13.   } else {
  14.     document.attachEvent('onreadystatechange', function() {
  15.       if (document.readyState != 'loading')
  16.         fn();
  17.     });
  18.   }
  19. }
  20.  
  21. //谷歌浏览器，火狐浏览器，IE9+
  22.  
  23. function ready(fn) {
  24.   if (document.readyState != 'loading'){
  25.     fn();
  26.   } else {
  27.     document.addEventListener('DOMContentLoaded', fn);
  28.   }

指定事件触发 

  1. //JQUERY
  2. $(el).trigger('my-event', {some: 'data'});
  3.  
  4.  
  5. //js谷歌浏览器，火狐浏览器，IE9+
  6. if (window.CustomEvent) {
  7.   var event = new CustomEvent('my-event', {detail: {some: 'data'}});
  8. } else {
  9.   var event = document.createEvent('CustomEvent');
  10.   event.initCustomEvent('my-event', true, true, {some: 'data'});
  11. }
  12.  
  13. el.dispatchEvent(event);

Trigger Native 

  1. //JQUERY
  2. $(el).trigger('change');
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. if (document.createEvent) {
  6.   var event = document.createEvent('HTMLEvents');
  7.   event.initEvent('change', true, false);
  8.   el.dispatchEvent(event);
  9. } else {
  10.   el.fireEvent('onchange');
  11. }
  12. //谷歌浏览器，火狐浏览器，IE9+
  13. // For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
  14. var event = document.createEvent('HTMLEvents');
  15. event.initEvent('change', true, false);
  16. el.dispatchEvent(event);

技巧

Array Each 

  1. //JQUERY
  2. $.each(array, function(i, item){
  3.  
  4. });
  5.  
  6. 谷歌浏览器，火狐浏览器，IE8+
  7. function forEach(array, fn) {
  8.   for (i = 0; i < array.length; i++)
  9.     fn(array[i], i);
  10. }
  11.  
  12. forEach(array, function(item, i){
  13.  
  14. });
  15.  
  16. //谷歌浏览器，火狐浏览器，IE9+
  17. array.forEach(function(item, i){
  18.  
  19. });

深度扩展 

  1. //JQUERY
  2. $.extend(true, {}, objA, objB);
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. var deepExtend = function(out) {
  5.   out = out || {};
  6.  
  7.   for (var i = 1; i < arguments.length; i++) {
  8.     var obj = arguments[i];
  9.  
  10.     if (!obj)
  11.       continue;
  12.  
  13.     for (var key in obj) {
  14.       if (obj.hasOwnProperty(key)) {
  15.         if (typeof obj[key] === 'object')
  16.           deepExtend(out[key], obj[key]);
  17.         else
  18.           out[key] = obj[key];
  19.       }
  20.     }
  21.   }
  22.  
  23.   return out;
  24. };
  25.  
  26. deepExtend({}, objA, objB);

proxy 

  1. //JQUERY
  2. $.proxy(fn, context);
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. fn.apply(context, arguments);
  5. //谷歌浏览器，火狐浏览器，IE9+
  6. fn.bind(context);

bind 

  1. //jQuery
  2. $.extend({}, objA, objB);
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. var extend = function(out) {
  5.   out = out || {};
  6.  
  7.   for (var i = 1; i < arguments.length; i++) {
  8.     if (!arguments[i])
  9.       continue;
  10.  
  11.     for (var key in arguments[i]) {
  12.       if (arguments[i].hasOwnProperty(key))
  13.         out[key] = arguments[i][key];
  14.     }
  15.   }
  16.  
  17.   return out;
  18. };
  19.  
  20. extend({}, objA, objB);

Index Of 

  1. //JQUERY
  2. $.inArray(item, array);
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. function indexOf(array, item) {
  5.   for (var i = 0; i < array.length; i++) {
  6.     if (array[i] === item)
  7.       return i;
  8.   }
  9.   return -1;
  10. }
  11.  
  12. indexOf(array, item);
  13. 谷歌浏览器，火狐浏览器，IE9+
  14. array.indexOf(item);

Is Array 

  1. //JQUERY
  2. $.isArray(arr);
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. isArray = Array.isArray || function(arr) {
  6.   return Object.prototype.toString.call(arr) == '[object Array]';
  7. }
  8.  
  9. isArray(arr);
  10. //谷歌浏览器，火狐浏览器，IE9+
  11. Array.isArray(arr);

Map 

  1. //JQUERY
  2. $.map(array, function(value, index){
  3.  
  4. });
  5.  
  6. //js谷歌浏览器，火狐浏览器，IE8+
  7. function map(arr, fn) {
  8.   var results = [];
  9.   for (var i = 0; i < arr.length; i++)
  10.     results.push(fn(arr[i], i));
  11.   return results;
  12. }
  13.  
  14. map(array, function(value, index){
  15.  
  16. });
  17. //谷歌浏览器，火狐浏览器，IE9+
  18. array.map(function(value, index){
  19.  
  20. });

Now 

  1. //JQUERY
  2. $.now();
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. new Date().getTime();
  6. //谷歌浏览器，火狐浏览器，IE9+
  7. Date.now();

Parse Html 

  1. //JQUERY
  2. $.parseHTML(htmlString);
  3.  
  4. 谷歌浏览器，火狐浏览器，IE8+
  5. var parseHTML = function(str) {
  6.   var el = document.createElement('div');
  7.   el.innerHTML = str;
  8.   return el.children;
  9. };
  10.  
  11. parseHTML(htmlString);
  12. 谷歌浏览器，火狐浏览器，IE9+
  13. var parseHTML = function(str) {
  14.   var tmp = document.implementation.createHTMLDocument();
  15.   tmp.body.innerHTML = str;
  16.   return tmp.body.children;
  17. };
  18.  
  19. parseHTML(htmlString);

解析 Json 

  1. //JQUERY
  2. $.parseJSON(string);
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. JSON.parse(string);

Trim 

  1. //JQUERY
  2. $.trim(string);
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. string.replace(/^\s+|\s+$/g, '');
  5. //谷歌浏览器，火狐浏览器，IE9+
  6. string.trim();

Type 

  1. //JQUERY
  2. $.type(obj);
  3.  
  4. 谷歌浏览器，火狐浏览器，IE8+
  5. Object.prototype.toString.call(obj)
  6.                 .replace(/^\[object (.+)\]$/, "$1")
  7.                 .toLowerCase();

ajax

新AJAX方法fetch()

基本Fetch用法

让我们先用一个例子来比较一下使用 XMLHttpRequest 和使用 fetch 之间的不同。我们要请求一个URL，获取JSON格式的返回结果。

原来的XMLHttpRequest

一个 XMLHttpRequest 请求需要两个监听器来捕捉 success 和 error 两种情形，而且需要调用 open() 和 send() 方法。

  1. function reqListener() {  
  2.   var data = JSON.parse(this.responseText);  
  3.   console.log(data);  
  4. }
  5.  
  6. function reqError(err) {  
  7.   console.log('Fetch Error :-S', err);  
  8. }
  9.  
  10. var oReq = new XMLHttpRequest();  
  11. oReq.onload = reqListener;  
  12. oReq.onerror = reqError;  
  13. oReq.open('get', './api/some.json', true);  
  14. oReq.send();

Fetch方法：

我们的 fetch 请求的代码基本上是这样的：

  1. fetch('./api/some.json')  
  2.   .then(  
  3.     function(response) {  
  4.       if (response.status !== 200) {  
  5.         console.log('Looks like there was a problem. Status Code: ' +  
  6.           response.status);  
  7.         return;  
  8.       }
  9.  
  10.       // Examine the text in the response  
  11.       response.json().then(function(data) {  
  12.         console.log(data);  
  13.       });  
  14.     }  
  15.   )  
  16.   .catch(function(err) {  
  17.     console.log('Fetch Error :-S', err);  
  18.   });

用fetch执行表单数据提交

在WEB应用中，提交表单是非常常见的操作，用fetch来提交表单数据也是非常简洁。

fetch里提供了 method 和 body 参数选项。

  1. fetch(url, {  
  2.     method: 'post',  
  3.     headers: {  
  4.       "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"  
  5.     },  
  6.     body: 'foo=bar&lorem=ipsum'  
  7.   })
  8.   .then(json)  
  9.   .then(function (data) {  
  10.     console.log('Request succeeded with JSON response', data);  
  11.   })  
  12.   .catch(function (error) {  
  13.     console.log('Request failed', error);  
  14.   });

在Fetch请求里发送用户身份凭证信息

如果你想在fetch请求里附带cookies之类的凭证信息，可以将 credentials 参数设置成 “include” 值。

  1. fetch(url, {  
  2.   credentials: 'include'  
  3. })

JSON

  1.     //JQUERY
  2.     $.getJSON('/my/url', function(data) {
  3.  
  4.     });
  5.  
  6. //谷歌浏览器，火狐浏览器，IE8+
  7. var request = new XMLHttpRequest();
  8. request.open('GET', '/my/url', true);
  9.  
  10. request.onreadystatechange = function() {
  11.   if (this.readyState === 4) {
  12.     if (this.status >= 200 && this.status < 400) {
  13.       // Success!
  14.       var data = JSON.parse(this.responseText);
  15.     } else {
  16.       // Error :(
  17.     }
  18.   }
  19. };
  20.  
  21. request.send();
  22. request = null;
  23.  
  24. //谷歌浏览器，火狐浏览器，IE9+
  25. var request = new XMLHttpRequest();
  26. request.open('GET', '/my/url', true);
  27.  
  28. request.onload = function() {
  29.   if (request.status >= 200 && request.status < 400) {
  30.     // Success!
  31.     var data = JSON.parse(request.responseText);
  32.   } else {
  33.     // We reached our target server, but it returned an error
  34.  
  35.   }
  36. };
  37.  
  38. request.onerror = function() {
  39.   // There was a connection error of some sort
  40. };
  41.  
  42. request.send();
  43.  
  44. //谷歌浏览器，火狐浏览器，IE10+
  45. var request = new XMLHttpRequest();
  46. request.open('GET', '/my/url', true);
  47.  
  48. request.onload = function() {
  49.   if (this.status >= 200 && this.status < 400) {
  50.     // Success!
  51.     var data = JSON.parse(this.response);
  52.   } else {
  53.     // We reached our target server, but it returned an error
  54.  
  55.   }
  56. };
  57.  
  58. request.onerror = function() {
  59.   // There was a connection error of some sort
  60. };
  61.  
  62. request.send();

Post

  1. //JQUERY
  2. $.ajax({
  3.   type: 'POST',
  4.   url: '/my/url',
  5.   data: data
  6. });
  7.  
  8. //谷歌浏览器，火狐浏览器，IE8+
  9. var request = new XMLHttpRequest();
  10. request.open('POST', '/my/url', true);
  11. request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  12. request.send(data);

Request 

  1. //JQUERY
  2. $.ajax({
  3.   type: 'GET',
  4.   url: '/my/url',
  5.   success: function(resp) {
  6.  
  7.   },
  8.   error: function() {
  9.  
  10.   }
  11. });
  12.  
  13. //谷歌浏览器，火狐浏览器，IE8+
  14. var request = new XMLHttpRequest();
  15. request.open('GET', '/my/url', true);
  16.  
  17. request.onreadystatechange = function() {
  18.   if (this.readyState === 4) {
  19.     if (this.status >= 200 && this.status < 400) {
  20.       // Success!
  21.       var resp = this.responseText;
  22.     } else {
  23.       // Error :(
  24.     }
  25.   }
  26. };
  27.  
  28. request.send();
  29. request = null;
  30.  
  31. //谷歌浏览器，火狐浏览器，IE9+
  32. var request = new XMLHttpRequest();
  33. request.open('GET', '/my/url', true);
  34.  
  35. request.onload = function() {
  36.   if (request.status >= 200 && request.status < 400) {
  37.     // Success!
  38.     var resp = request.responseText;
  39.   } else {
  40.     // We reached our target server, but it returned an error
  41.  
  42.   }
  43. };
  44.  
  45. request.onerror = function() {
  46.   // There was a connection error of some sort
  47. };
  48.  
  49. request.send();
  50.  
  51. //谷歌浏览器，火狐浏览器，IE10+
  52. var request = new XMLHttpRequest();
  53. request.open('GET', '/my/url', true);
  54.  
  55. request.onload = function() {
  56.   if (this.status >= 200 && this.status < 400) {
  57.     // Success!
  58.     var resp = this.response;
  59.   } else {
  60.     // We reached our target server, but it returned an error
  61.  
  62.   }
  63. };
  64.  
  65. request.onerror = function() {
  66.   // There was a connection error of some sort
  67. };
  68.  
  69. request.send();

特效

淡入淡出 

  1. //JQUERY
  2. $(el).fadeIn();
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. function fadeIn(el) {
  6.   var opacity = 0;
  7.  
  8.   el.style.opacity = 0;
  9.   el.style.filter = '';
  10.  
  11.   var last = +new Date();
  12.   var tick = function() {
  13.     opacity += (new Date() - last) / 400;
  14.     el.style.opacity = opacity;
  15.     el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')';
  16.  
  17.     last = +new Date();
  18.  
  19.     if (opacity < 1) {
  20.       (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
  21.     }
  22.   };
  23.  
  24.   tick();
  25. }
  26.  
  27. fadeIn(el);
  28.  
  29. //谷歌浏览器，火狐浏览器，IE9+
  30. function fadeIn(el) {
  31.   el.style.opacity = 0;
  32.  
  33.   var last = +new Date();
  34.   var tick = function() {
  35.     el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
  36.     last = +new Date();
  37.  
  38.     if (+el.style.opacity < 1) {
  39.       (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
  40.     }
  41.   };
  42.  
  43.   tick();
  44. }
  45.  
  46. fadeIn(el);
  47.  
  48. //谷歌浏览器，火狐浏览器，IE10+
  49. el.classList.add('show');
  50. el.classList.remove('hide');
  51. .show {
  52.   transition: opacity 400ms;
  53. }
  54. .hide {
  55.   opacity: 0;
  56. }

Hide 

  1. //JQUERY
  2. $(el).hide();
  3.  
  4. //谷歌浏览器，火狐浏览器，IE8+
  5. el.style.display = 'none';

Show 

  1. //JQUERY
  2. $(el).show();
  3. //谷歌浏览器，火狐浏览器，IE8+
  4. el.style.display = '';

推荐阅读

Python 爬虫面试题 170 道：2019 版

爬虫基本功之学点JS(一)

爬虫基本功之学点JS-DOM操作(一)

爬虫必备-如何使用Chrome DevTools花式打断点

添加微信[italocxa].回复:加群,加入Python交流群

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/396741
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号