你可能不需要 jQuery！使用原生 JavaScript 进行开发

转载 于 2016-10-21 20:22:00 发布 · 75 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/rik28/p/5985951.html
文章标签：

#javascript #前端 #json #ViewUI

本文探讨了在现代浏览器环境下，如何使用原生JavaScript替代jQuery完成常见任务，如Ajax请求、DOM操作等，并提供了详细的代码示例。

http://youmightnotneedjquery.com/

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

很多的 JavaScript 开发人员，包括我在内，都很喜欢 jQuery。因为它的简单，因为它有很多丰富的插件可供使用，和其它优秀的工具一样，jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用。

　　然而，另一方面，作为前端开发的基础框架，jQuery 包含大量的兼容性代码和扩展功能，其中有很多在你的整个项目中可能都不会用到。其实如果你只是针对现代浏览器，很多功能使用原生的 JavaScript 就可以实现，即使是拖后腿的低版本 IE 浏览器，兼容性也是很容易处理的。

您可能感兴趣的相关文章

 

 

　　下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能。如果你打算自己开发一个小的基础框架，可以好好参考一下这些代码的实现。 

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

获取子节点

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

循环节点

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

清空节点

jQuery：

1
$(el).empty();

IE8+：

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

过滤节点

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

前一个节点

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

后一个节点

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

判断是否数组

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

数组转换

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代码

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

转载于:https://www.cnblogs.com/rik28/p/5985951.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值