然后可以这样使用：
// Check if an element has class "foo" if (hasClass(element, "foo")) { // Show an alert message if it does alert("Element has the class!"); }HTML5 的 classList API 简介如果你只需要支持像IE10+,Chrome,FireFox,Opera和Safari这样较现代的浏览器，那么你可以开始使用HTML5的classList功能，它让增加和删除类变得更简单。
这是我在我们最新的开发者文档中最终做的事，随着功能的开发，这更像是UI的加强，且如果这不是现在的，其实际上并不是能打破经验的一些东西。
通过下面简单的”if”语句，你可以检测出浏览器是否支持这个功能：
if ("classList" in document.documentElement) { // classList is supported, now do something with it }用classList来添加、删除、转换类：
// Adding a class element.classList.add("bar");// Removing a class element.classList.remove("foo");// Checking if has a class element.classList.contains("foo");// Toggle a class element.classList.toggle("active");
使用classList的另一个好处是它比使用原始的类名属性表现得更好。如果你有像这样的元素：
<div></div>你想操作哪一个：
var element = document.querySelector("#test"); addClass(element, "two"); removeClass(element, "four");这些被类名属性读和写的方法将触发浏览器重绘。但这并不是我们是否应该用相应的classList方法的情况：
var element = document.querySelector("#test"); element.classList.add("two"); element.classList.remove("four");用classList之后，最基本的类名属性仅在必要的时候进行更改。添加一个已经存在的类和移除一个不存在的类时，根本没有牵涉到类名属性，这意味着我们刚刚避免了两次重绘。
事件监听器添加和移除一个元素的事件监听器在纯JavaScript和jQuery中都一样比较简单。当你必须要添加多个事件监听器时，事情就变得有点复杂了，但我会详细解释给你的。最简单的一个例子，当你单击一个元素时弹出一个警告信息，如下代码所述：element.addEventListener("click", function() { alert("You clicked"); }, false);为了让页面的所有元素都实现这个功能，我们必须依次重复每个元素且给他们添加事件监听器：
// Select all links var links = document.querySelectorAll("a"); // For each link element [].forEach.call(links, function(el) { // Add event listener el.addEventListener("click", function(event) { event.preventDefault(); alert("You clicked"); }, false); });JavaScript有关事件监听器一个最伟大的功能就是“addEventListener” 能携带一个作为第二个参数的对象，这将会让它自动的寻找一个叫做“handleEvent”的方法然后调用它。Ryan Seddon在它的中已经彻底地介绍了这个方法，所以我只打算给一个最简单的例子，你可以通过在它的博客中学到更多的东西：
var object = { init: function() { button.addEventListener("click", this, false); button.addEventListener("touchstart", this, false); }, handleEvent: function(e) { switch(e.type) { case "click": this.action(); break; case "touchstart": this.action(); break; } }, action: function() { alert("Clicked or touched!"); } }; // Init object.init();操作DOM用纯JavaScript来操作DOM刚开始听起来就像一个可怕的想法，但比使用jQuery其实它并没有复杂多少。下面，我们会有一个例子，选择DOM的元素，克隆它，用JavaScript来操作克隆的样式，然后用被操纵的东西来替代原始的元素。
// Select an element var element = document.querySelector(".class"); // Clone it var clone = element.cloneNode(true); // Do some manipulation off the DOM clone.style.background = "#000"; // Replaces the original element with the new cloned one element.parentNode.replaceChild(clone, element);在DOM中，如果除了附加在<body>中新创建div，你不想替代任何东西，那么你可以这样做：
document.body.appendChild(clone);如果你觉得你想了解更多不同的DOM方法，我建议你可以拜读一下 Peter-Paul Koch的DOM Core tables。
进一步深入在这儿我想再多分享两个我最近发现的先进技术。这些都是我们在创建Adtile的时候需要的功能，因此你也会觉得它们很有用。
在JS中决定响应图片的最大宽度这是我最爱的之一，且如果你需要用JavaScript操作流体图片时这非常有用。由于浏览器默认返回当前被调整过大小的图片，我们必须要想一些其它的办法。幸运的是，现代浏览器目前已有解决的方案了：
var maxWidth = img.naturalWidth;这将会给我们提供最大宽度100%像素的图片，且IE9,Chrome,Firefox,Safari和Opera都支持这个方法。我们也可以保留这个特性然后通过加载图片到内存中添加老浏览器的支持：
// Get image's max-width:100%; in pixels function getMaxWidth(img) { var maxWidth; // Check if naturalWidth is supported if (img.naturalWidth !== undefined) { maxWidth = img.naturalWidth; // Not supported, use in-memory solution as fallback } else { var image = new Image(); image.src = img.src; maxWidth = image.width; } // Return the max-width return maxWidth; }你应该注意到在检查宽度前，图片必须完全被加载。这是我们一直使用的用于确定它们有尺寸的方法：
function hasDimensions(img) { return !!((img.complete && typeof img.naturalWidth !== "undefined") || img.width); }判断一个元素是否在视图窗口中通过使用getBoundingClientRect方法，你可以获取页面中任何元素的位置。以下是一个简单的函数来表明它有多简单和多强大。这个函数有一个参数，那就是你想要检查的元素。当元素为可见时，函数将返回true：// Determine if an element is in the visible viewport function isInViewport(element) { var rect = element.getBoundingClientRect(); var html = document.documentElement; return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || html.clientHeight) && rect.right <= (window.innerWidth || html.clientWidth) ); }上面的函数可以在给窗体添加一个”滚动”事件监听器，然后调用isInViewport()方法时使用。
结论
相关文章
精彩导读
热门资讯
关注我们
