草庐IT

javascript - 将简单的 jquery 代码转换为 javascript

coder 2025-02-10 原文

我有一个用 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édéric 和 John 的评论:为此加载库并不过分，对于 jQuery(以及 Prototype 和 YUI)，您可以 load via the Google CDN并使用您的页面访问者可能已经在他们的缓存中的东西。

更新:在下面的评论中，scunliffe指出一个 IE 错误 I've blogged in the past这可能会影响上述内容，jQuery 神奇地为您解决了这一问题。所以我认为标记这个简单的小脚本所具有的各种复杂性可能会有用，一个好的库会为您解决这些问题:

  • addEventListener 与 attachEvent:IE6 到 IE8 不支持 DOM2 标准 addEventListener，使用 Microsoft 的自己的 attachEvent 代替。实际上，为了简单起见，我在上面对此进行了抨击，并且只使用了 DOM0 onclick = ... 样式，但是有一个很好的理由不这样做:使用 DOM0 样式，每个元素的每个事件只能有一个事件监听器，附加另一个将分离前一个。所以我上面的代码不能很好地与其他人一起玩，因为它会移除任何以前的 DOM0 click 处理程序(并将被附加在上面代码之后的 DOM0 click 处理程序移除运行)。
  • 访问事件对象:DOM standard表示 event 对象作为第一个参数传递给事件处理程序。相反，IE 使用全局 window.event 对象。这就是我上面第一个“IE 差异”的原因。
  • event 对象的属性:...同样，DOM standard says触发事件的实际元素将是 target 属性。 IE6 到 IE8 改用 srcElement。 (也有其他差异。)因此我的“另一个”评论。
  • 错误解决方法:这是 conflation scunliffe 指出的事情。上面依赖于 document.getElementById 才能正常工作，但在 IE6 和 IE7 上，它不会。它合并了多个命名空间，而不是仅使用 id 值。

...所以总而言之，这个简单的小脚本很好地说明了一般的图书馆——尤其是一个好的图书馆——可以节省你的时间，让你的网站广泛兼容, 并且通常只值得他们花很少的钱。我不知道其他人，但例如 jQuery 为您解决了合并错误，但另一个著名且备受尊敬的库 Prototype 却没有。

(旁注:在我们敲微软太多之前，让我们记住 attachEvent 和 srcElement 可能早于 DOM2 规范；微软在IE5.5 和 IE6。[例如，他们发明了 ajax。]IE6 到目前为止是 2001 年最好的浏览器，对 Opera 表示歉意。也就是说，IE6 在标准确实如此，因此在那时或几年后在 IE7 中添加标准内容，可能是一件值得做的事情!但 IE9 修复了很多此类内容。)

关于javascript - 将简单的 jquery 代码转换为 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5778322/

javascriptjquerycodestrong39

有关javascript - 将简单的 jquery 代码转换为 javascript的更多相关文章

  1. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  4. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  5. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  6. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  7. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  8. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

  9. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的

  10. ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2

    几个月前，我读了一篇关于ruby​​gem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：

随机推荐