首页 > 代码库 > 对jQuery说放手

对jQuery说放手

2024-08-12 19:32:10   219人阅读

所有人都用jQuery，可事实上你自己也可以封装类似的函数。下面这些简单的例子也许对你有启发。
 
jQuery在前端开发者中很受欢迎，是程序员们偏爱的JS库。可即使jQuery能简化你的JS开发过程并让你看到更多可能性，你依然有不能用jQuery的时候。这里的一些小例子也许在jQuery不能使用时对你有帮助。
 
Document Ready
一个页面直到文档加载完毕才能被操作，所以我们习惯于将所有的JS代码都放在jQuery的$(document).ready()函数内：
 
$(document).ready(function() {    console.log( "ready!" );});

　　

 
我们用JS也能实现相同效果：
 
document.addEventListener(‘DOMContentLoaded‘, function () {    console.log( "ready!" );});

　　

 
Add Event Listeners
监听事件是JS里重要的一部分。jQuery能起轻松实现事件监听：
 
$(someElement).on(‘click‘,function(){    //TODO event handler logic});

　　

当然，下面是JS的实现方法：
 
someElement.addEventListener(‘click‘,function(){    //TODO event handler logic});

　　

 
Select Elements
jQuery通过ID，class name,tag name来选择元素超级方便，比如：
 
//by id$(‘#myElement‘); //by class name$(‘.myElement‘); //by tag name$(‘div‘); //children$(‘#myParents‘).children(); //complex selecting$(‘article#first p.summary‘);

　　

原生JS有许多选择元素的方法。所有方法均能在IE8+的现代浏览器中使用。
 
//by iddocument.querySelector(‘#myElement‘); //by class namedocument.querySelectorAll(‘.myElement‘); //by tag namedocument.querySelectorAll(‘div‘); //children$(‘#myParent‘).children(); //complex selectingdocument.querySelectorAll(‘article#first p.summary‘);

　　

Ajax
众所周知，Ajax可以创建异步Web应用。
下面用jQuery的get函数来做示范：
 
$.get("ajax/text.html",function(data){    $(".result").html(data);    alert("Load was performed.");});

　　

jQuery的确使ajax更易用，下面是JS的实现：
var request = new XMLHttpRequest();request.open(‘GET‘,‘ajax/test.html‘,true); request.onload = function(e){  if (request.readyState == 4)    //check if the get was successful      if (request.status == 200){        console.log(request.responseText); } else {     console.error(request.statusText); }}

　　

Add and Remove Classes
如果你需要为元素添加或移除class,jQuery有两个专用的方法：
 
//add a class$(‘#foo‘).addClass(‘bold‘); //remove a class$(‘#foo‘).removeClass(‘bold‘);

　　

用JS同样很简单：
 
//add a classdocument.getElementByID(‘foo‘).className += ‘bold‘; //remove a classdocument.getElementById(‘foo‘).className = document.getElementById(‘foo‘).className.replace(/^bold$/,‘‘);

　　

Fade In下面的例子证明了为何jQuery这么受欢迎。实现元素的fade in效果只需要一行代码：
$(el).fadeIn();

　　

下面的JS实现显然有点复杂：
 
function fadeIn(el) {  el.style.opacity = 0;  var last = +new Date();  var tick = function() {    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;    last = +new Date();    if (+el.style.opacity < 1) {      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);    }  };  tick();}fadeIn(el);

　　

source:http://stackoverflow.com/questions/35393807/how-to-animate-a-style-property-in-plain-vanilla-javascript
 
Hide and Show elements
隐藏或展示元素应用很普遍，jQuery提供了hide()和show()方法来实现元素的隐藏或显示：
 
// Hiding element$(el).hide();// Showing element$(el).show();

　　

当然，JS 的实现一点也不复杂：
 
// Hiding elementel.style.display = ‘none‘;// Showing elementel.style.display = ‘block‘;

　　

 
DOM 操纵
使用jQuery操纵DOM非常简单。让我们看看向容器里添加元素;
 
$("#container").append("<p>more content</p>");

　　

JS的实现同样轻松：
 
document.getElementById("#container").innerHTML += "<p>more content</p>";

　　

 
扩展阅读：
下面的链接有更多的原生JS例子。
1.http://blog.garstasio.com/you-dont-need-jquery/why-not/
2.http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/
3.http://blog.wearecolony.com/a-year-without-jquery/
4.https://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/
 
注：本文为译文
原文链接：https://dzone.com/articles/javascript-without-jquery-tips-and-practical-examp

对jQuery说放手


联系
我们