将一个简单的jquery代码转换为javascript

converting a simple jquery code to javascript

本文关键字：代码 jquery 转换 javascript 简单 一个      更新时间：2023-09-26

我有一个用jquery编写的简单照片库的代码，但我认为为这样一个简单的事情加载整个库是多余的。我想要原始的javascript。

$('#thumbs').delegate('img','click', function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});

我也想知道如何将加载旋转器附加到此代码。谢谢。

jsfiddle

在不使用任何库的情况下，它看起来有点像这样，尽管当然还有其他方法来编写它:

(function() {
    var largeImage = document.getElementById('largeImage'),
        description = document.getElementById('description');
    document.getElementById('thumbs').onclick = handleGalleryClick;
    function handleGalleryClick(event) {
        var target;
        event = event || window.event;                // Handle IE difference
        target = event.target || event.srcElement;    // Another one
        if (target && target.tagName.toUpperCase() === "IMG") {
            largeImage.src = target.src.replace('thumb', 'large');
            description.innerHTML = target.getAttribute('alt');
        }
    }
})();

确保脚本出现在页面的底部(就在关闭body元素之前)或将其包装在window.onload中，尽管您不会满意需要多长时间才能发生，因为window.onload发生在所有图像等加载之后。

但是:我不得不同意fr和约翰的评论:这不是多余的加载一个库，在jQuery(和Prototype和YUI)的情况下，你可以通过谷歌CDN加载和使用一些你的页面访问者可能已经在他们的缓存。

Update:在下面的评论中，scunliffe指出了我过去写过的一个IE bug，它可能会影响上面的内容，而jQuery可以神奇地为您解决这个问题。因此，我认为标记这个简单的小脚本的各种复杂性可能会很有用，一个好的库将为您分类:

  • addEventListener vs. attachEvent : IE6到IE8不支持DOM2标准addEventListener，使用微软自己的attachEvent代替。实际上，为了简单起见，我在上面忽略了这一点，只使用了DOM0 onclick = ...样式，但是不这样做有一个很好的理由:使用DOM0样式，每个事件每个元素只能有一个事件侦听器，并且附加另一个将分离前一个。所以我上面的代码不能很好地与其他代码一起使用，因为它会移除之前的任何DOM0 click处理程序(并且会在上面的代码运行后被附加的DOM0 click处理程序所取代)。
  • 访问event对象: DOM标准规定event对象作为其第一个参数传递给事件处理程序。相反，IE使用全局window.event对象。这就是我上面第一个"IE差异"的原因。
  • event对象的属性:…类似地，DOM标准规定触发事件的实际元素将是target属性。IE6 ~ IE8请使用srcElement。(还有其他不同之处。)因此我的"另一个"评论。
  • Bug解决方案:这是scunliffe指出的合并的事情。以上依赖于document.getElementById正常工作，但在IE6和IE7上，它不能。它合并了几个名称空间，而不是只使用id值。

…总之，这个简单的小脚本很好地说明了一般的库 —尤其是一个好的库 —可以节省您的时间，保持您的网站广泛兼容，并且通常值得他们的小成本。我不知道其他的，但是举个例子，jQuery可以为你解决合并错误，但是另一个著名的、受人尊敬的库Prototype却没有。

(旁注:在我们过多地抨击微软之前，让我们记住attachEvent和srcElement可能早于DOM2规范;微软在IE5.5和IE6上做了很多创新。例如，他们发明了ajax。IE6是 —通过到,本;2001年最好的浏览器，因为Opera而道歉。也就是说，IE6是在标准发布之后才发布的，所以在那个时候添加标准，或者几年后在IE7中添加标准，可能是值得做的事情!但是IE9修复了很多问题)

你说它简单，但它做了一些高级的事情。要模拟delegate，必须在根容器上附加一个单击侦听器，并检查任何<img>标记上的单击。

更不用说你必须在IE中使用attachEvent而不是addEventListener

代码看起来像(未经测试):

function listen(root, callback) {
    var addEvent = 'attachEvent';
    if (typeof window.addEventListener === 'function') {
        addEvent = 'addEventListener';
    }
    root[addEvent](function (e) {
        if (/img/i.test(e.target.tagName)) {
            callback.apply(e.target);
        }
    }, false);
}
listen(document.getElementById('thumbs'), function () {
    document.getElementById('largeImage').src = this.src.replace(/thumb/ig, 'large');
    document.getElementById('description').src = this.alt;
});

事实上，正如TJ的帖子所示，我甚至没有处理所有的IE特性。考虑到它为您解决的所有浏览器难题，jQuery并不是多余的。

相关文章：