九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
你可能不需要 jQuery！使用原生 JavaScript 進行開發(fā)

http://youmightnotneedjquery.com/

摘自：http://www.cnblogs.com/lhb25/p/you-might-not-need-jquery.html

很多的 JavaScript 開發(fā)人員，包括我在內(nèi)，都很喜歡 jQuery。因為它的簡單，因為它有很多豐富的插件可供使用，和其它優(yōu)秀的工具一樣，jQuery 讓我們開發(fā)人員能夠更輕松的開發(fā)網(wǎng)站和 Web 應(yīng)用。

　　然而，另一方面，作為前端開發(fā)的基礎(chǔ)框架，jQuery 包含大量的兼容性代碼和擴展功能，其中有很多在你的整個項目中可能都不會用到。其實如果你只是針對現(xiàn)代瀏覽器，很多功能使用原生的 JavaScript 就可以實現(xiàn)，即使是拖后腿的低版本 IE 瀏覽器，兼容性也是很容易處理的。

您可能感興趣的相關(guān)文章

 

 

　　下面就帶大家一起看看在 IE 瀏覽器環(huán)境中如果使用原生 JavaScript 代碼實現(xiàn) jQuery 中的功能。如果你打算自己開發(fā)一個小的基礎(chǔ)框架，可以好好參考一下這些代碼的實現(xiàn)。 

Ajax Post

jQuery：

1
2
3
4
5
$.ajax({
  type: 'POST',
  url: '/my/url',
  data: data
});

IE8+：

1
2
3
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.send(data);

Ajax Get

jQuery：

1
2
3
4
5
6
7
8
9
10
$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {
  },
  error: function() {
  }
});　

IE8+：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onreadystatechange = function() {
  if (this.readyState === 4){
    if (this.status >= 200 && this.status < 400){
      // Success!
      resp = this.responseText;
    } else {
      // Error :(
    }
  }
}
request.send();
request = null;

加載 JSON

jQuery：

1
2
3
$.getJSON('/my/url', function(data) {
});

IE8+：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onreadystatechange = function() {
  if (this.readyState === 4){
    if (this.status >= 200 && this.status < 400){
      // Success!
      data = JSON.parse(this.responseText);
    } else {
      // Error :(
    }
  }
}
request.send();
request = null;

淡入效果

jQuery：

1
$(el).fadeIn();　　

IE8+：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function fadeIn(el) {
  var opacity = 0;
  el.style.opacity = 0;
  el.style.filter = '';
  var last = +new Date();
  var tick = function() {
    opacity += (new Date() - last) / 400;
    el.style.opacity = opacity;
    el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')';
    last = +new Date();
    if (opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}
fadeIn(el);

顯示和隱藏

jQuery：

1
2
$(el).show();
$(el).hide();

IE8+：

1
2
el.style.display = '';
el.style.display = 'none';

添加 Class

jQuery：

1
$(el).addClass(className);

IE8+：

1
2
3
4
if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

插入 HTML

jQuery：

1
2
3
$(el).before(htmlString);
$(parent).append(el);
$(el).after(htmlString);

IE8+：

1
2
3
el.insertAdjacentHTML('beforebegin', htmlString);
parent.appendChild(el);
el.insertAdjacentHTML('afterend', htmlString);

獲取子節(jié)點

jQuery：

1
$(el).children();

IE8+：

1
2
3
4
5
6
var children = [];
for (var i=el.children.length; i--;){
  // Skip comment nodes on IE8
  if (el.children[i].nodeType != 8)
    children.unshift(el.children[i]);
}

循環(huán)節(jié)點

jQuery：

1
2
3
$(selector).each(function(i, el){
});

IE8+：

1
2
3
4
5
6
7
8
9
function forEachElement(selector, fn) {
  var elements = document.querySelectorAll(selector);
  for (var i = 0; i < elements.length; i++)
    fn(elements[i], i);
}
forEachElement(selector, function(el, i){
});

清空節(jié)點

jQuery：

1
$(el).empty();

IE8+：

1
2
while(el.firstChild)
  el.removeChild(el.firstChild)

過濾節(jié)點

jQuery：

1
$(selector).filter(filterFn);

IE8+：

1
2
3
4
5
6
7
8
9
10
11
function filter(selector, filterFn) {
  var elements = document.querySelectorAll(selector);
  var out = [];
  for (var i = elements.length; i--;) {
    if (filterFn(elements[i]))
      out.unshift(elements[i]);
  }
  return out;
}
filter(selector, filterFn);

查找元素

jQuery：

1
2
$(el).find(selector);
$('.my #awesome selector');

IE8+：

1
2
el.querySelectorAll(selector);
document.querySelectorAll('.my #awesome selector');

獲取屬性、HTML或者文本

jQuery：

1
2
3
4
$(el).attr('tabindex');
$(el).html();
$('<div>').append($(el).clone()).html();
$(el).text();

IE8+：

1
2
3
4
el.getAttribute('tabindex');
el.innerHTML
el.outerHTML
el.textContent || el.innerText

判斷是否包含某個 css class

jQuery：

1
$(el).hasClass(className);

IE8+：

1
2
3
4
if (el.classList)
  el.classList.contains(className);
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);　

選擇器匹配

jQuery：

1
$(el).is('.my-class');

IE8+：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var matches = function(el, selector) {
  var _matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector);
  if (_matches) {
    return _matches.call(el, selector);
  } else {
    var nodes = el.parentNode.querySelectorAll(selector);
    for (var i = nodes.length; i--;)
      if (nodes[i] === el) {
        return true;
    }
    return false;
}
matches(el, '.my-class');

前一個節(jié)點

jQuery：

1
$(el).prev();

IE8+：

1
2
3
4
5
6
7
// prevSibling can include text nodes
function previousElementSibling(el) {
  do { el = el.previousSibling; } while ( el && el.nodeType !== 1 );
  return el;
}
el.previousElementSibling || previousElementSibling(el);

后一個節(jié)點

jQuery：

1
$(el).next();

IE8+：

1
2
3
4
5
6
7
// nextSibling can include text nodes
function nextElementSibling(el) {
  do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );
  return el;
}
el.nextElementSibling || nextElementSibling(el);

外部高度

jQuery：

1
$(el).outerHeight()

IE8+：

1
2
3
4
5
6
7
8
9
10
11
function outerHeight(el, includeMargin){
  var height = el.offsetHeight;
  if(includeMargin){
    var style = el.currentStyle || getComputedStyle(el);
    height += parseInt(style.marginTop) + parseInt(style.marginBottom);
  }
  return height;
}
outerHeight(el, true);

外部寬度

jQuery：

1
$(el).outerWidth()

IE8+：

1
2
3
4
5
6
7
8
9
10
11
function outerWidth(el, includeMargin){
  var height = el.offsetWidth;
  if(includeMargin){
    var style = el.currentStyle || getComputedStyle(el);
    height += parseInt(style.marginLeft) + parseInt(style.marginRight);
  }
  return height;
}
outerWidth(el, true);

判斷是否數(shù)組

jQuery：

1
$.isArray(arr);

IE8+：

1
2
3
4
5
isArray = Array.isArray || function(arr) {
  return Object.prototype.toString.call(arr) == '[object Array]';
}
isArray(arr);

數(shù)組轉(zhuǎn)換

jQuery：

1
2
3
$.map(array, function(value, index){
})

IE8+：

1
2
3
4
5
6
7
8
9
10
function map(arr, fn) {
  var results = []
  for (var i = 0; i < arr.length; i++)
    results.push(fn(arr[i], i))
  return results
}
map(array, function(value, index){
})

　　類似的還有很多很多，可以參考這里：http://youmightnotneedjquery.com/。

本文鏈接：你可能不需要 jQuery！編寫原生的JavaScript代碼

編譯來源：夢想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計資源

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
js插件開發(fā)規(guī)范
轉(zhuǎn) jQuery中is和hasClass的用法
jQuery VS JavaScript原生API | 晚晴幽草軒
用js原生api代替JQuery api
CJL.0.1.min.js 的是一個什么JS庫
十條jQuery代碼片段助力Web開發(fā)效率提升
更多類似文章 >>
生活服務(wù)
熱點新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服