对jQuery说放手
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了对jQuery说放手相关的知识，希望对你有一定的参考价值。
所有人都用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 id
document.querySelector(‘#myElement‘);
//by class name
document.querySelectorAll(‘.myElement‘);
//by tag name
document.querySelectorAll(‘div‘);
//children
$(‘#myParent‘).children();
//complex selecting
document.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 class
document.getElementByID(‘foo‘).className += ‘bold‘;
//remove a class
document.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);
Hide and Show elements
隐藏或展示元素应用很普遍，jQuery提供了hide()和show()方法来实现元素的隐藏或显示：
// Hiding element
$(el).hide();
// Showing element
$(el).show();
当然，JS 的实现一点也不复杂：
// Hiding element
el.style.display = ‘none‘;
// Showing element
el.style.display = ‘block‘;
DOM 操纵
使用jQuery操纵DOM非常简单。让我们看看向容器里添加元素;
$("#container").append("<p>more content</p>");
JS的实现同样轻松：
document.getElementById("#container").innerHTML += "<p>more content</p>";
扩展阅读：
下面的链接有更多的原生JS例子。
注：本文为译文
原文链接：https://dzone.com/articles/javascript-without-jquery-tips-and-practical-examp
以上是关于对jQuery说放手的主要内容，如果未能解决你的问题，请参考以下文章