从jQuery转换为javascript

我无法理解如何在不使用API​​ jQuery的情况下让代码处理“本机”javascript，我需要帮助的人。 我刚开始学习编程。 我会很感激！

http://jsfiddle.net/P6YeA/

注意 ：当您单击屏幕的任何区域时， p对象将消失

Answer 1

这使用了jQuery函数.click（）,. closest（）和.fadeOut（），在简单的函数中都没有重复实现。 click（）需要为不同的浏览器事件引擎做一些工作。 fadeOut（）在使用动画时会很繁琐。 .closest（）会很复杂。 你最好继续使用jQuery。

如果你真的想要精益求精，你可以去掉你正在使用的jQuery部分。 这虽然不是很简单……

无论哪种方式，你都可以在相当复杂的Javascript代码中完成你的眼球，并且最后，你将拥有jQuery的一部分，但不完全，并且在你未来的项目中不能真正重复使用。

您可以考虑重写以使用比jQuery更精简的Javascript库，例如Neon.js （注意：我写了Neon – 希望可以链接到它）。 使用更纤薄的库至少可以确保您不必重新发明轮子。

但实际上，我认为最好的方法是继续使用jQuery – 它有一个开销，但它不是那么大，以至于它会削弱你的网站。 没那么糟糕。 它已经实施了。

Answer 2

我必须自己尝试作为挑战（个人而言，我会使用经过试验和测试的方法，从一个受欢迎的库）。 试图让它支持旧的IE：

http://jsfiddle.net/Kai/6LmTf/

function fadeOut (e, speed) { var ie = (typeof e.style.opacity === undefined ? true : false), attr = (ie ? 'filter' : 'opacity'), n = e.style[attr] = 1, step = { slow: 300, normal: 100, fast: 50 }, speed = step[speed] || 100, timer; timer = setInterval(function () { if (n <= 0.0) { clearInterval(timer); e.style.display = 'none'; return; } if (!ie) { e.style[attr] = n = (n - 1/speed).toFixed(3); } else { n = (n - 1/speed).toFixed(3); e.style[attr] = 'alpha(opacity=' + n + ')'; } }, 1); } 

例：

 var box = document.getElementById('box'); box.onclick = function () { fadeOut(this); }