logo标签列表

使用原生JavaScript代替jQuery（以下是示例）

javascriptjquery
7

这是我在这里的第一个问题。我有以下jQuery代码：

$(document).ready(function(){  
    $("a").click(function(){
        $(this).parent("li").css({textDecoration: "line-through"});
        return false;
    });
 });

这个代码可以正常工作。它会在任何点击的锚点处（HTML中有许多锚点和列表，不仅仅是一个）划掉其父级li元素。但我只需要这个功能，不需要其他的。整个jQuery库是否过于庞大了？

不幸的是，我不太懂原生JavaScript，能有人为我转换一下吗？谢谢。

编辑：哇，我对答案的速度和质量感到惊讶！首先要感谢所有人！我要么采用Jonathon的（编辑2：Roland的）解决方案，要么重新引入jQuery。再次感谢！

3
“If it ain't broke...”的意思是“如果没坏，就不要修理”。虽然你可以将其转换为纯JavaScript，但会有破坏跨浏览器兼容性的风险。 - Robert Harvey
我会逐步查看JS代码，看看哪些jQuery函数用于该脚本，并删除其他所有内容。 - Dor
@Robert Harvey：总的来说，是的，这是一个好建议。但是，OP试图实现的目标可以通过一种相当简单的独立于浏览器的方式解决。（假设基本的DOM实现）@Dor：如果OP确实不精通JavaScript，那么逐步了解jQuery并不会让他感到高兴。你做了吗？我的意思是，我没有任何不尊重jQuery的意图——它是地球上最伟大的js库之一，但我不建议将其作为初学者分析该代码的练习。 - Roland Bouman
你确定你的网页将来永远不会改变吗？如果你想在未来添加新功能，JQuery会非常有用。 - Gordon Gustafson
6个回答
9

使用整个jQuery库是否有些过度了？

你说呢？你可以使用由Google托管的库，这可能已经被客户端缓存。

在我看来，保持一致性是关键。如果你习惯于使用jQuery，那么为什么不继续使用它呢？这样你的代码将更易于维护。

你可能会发现我的早期问题中有趣的一个问题：何时使用jQuery是可以接受的？

5
以下方法可以在浏览器中实现它，而不受特定浏览器的影响。
<html>

  <body onload="loaded()">
      ...content goes here....
      <script>
          function linkClickHandler(){
              var parentNode = this.parentNode;
              if(parentNode.tagName.toLowerCase()==="li"){
                  parentNode.style.textDecoration = "line-through";
              }
              return false;
          }

          function loaded(){
              for (var i=0, links = document.links, numLinks = links.length; i<numLinks; i++){
                  links[i].onclick = linkClickHandler;
              }
          }
      </script>
  </body>
</html>
jQuery的$(document).ready()方法和window.onload()不是不同的吗？ - Dor
Dor：也许吧。我认为对于OP想要实现的目标，这个老派的解决方案完全可以胜任。 - Roland Bouman
1
jQuery的ready事件非常复杂：它使用DOMContentLoaded事件（可靠）（如果可用），在IE上使用可怕的属性读取轮询器hack（不可靠），并且在其他所有地方都回退到onload（可靠，但稍后触发）。如果您想在内容加载时运行，则唯一100％可靠的方法（无论是jQuery还是原始JavaScript）是将触发器<script>元素放在文档末尾。 - bobince
非常感谢您的努力。不幸的是，它似乎并没有起作用，尽管控制台中也没有出现任何错误。也许是我做错了什么？ - fractalbit
Nits: 应该是 onclick= ... 而不是 click; 标签名比较应该进行大小写折叠（例如 parentNode.tagName.toLowerCase()==='li'）。 - bobince
显示剩余3条评论
2

无需使用jQuery的方法：

    [...your html...]

    <script type="text/javascript">
        var anchors    = document.getElementsByTagName("a");
        var numAnchors = anchors.length;
        for(var i = 0; i < numAnchors; i++) {
            var anchor = anchors[i];
            anchor.onclick = function() {           
                var parentEl = this.parentNode;
                if(parentEl.tagName.toLowerCase() == "li"){
                    parentEl.style.textDecoration = "line-through";
                }
                return false;   
            }
        }
    </script>
</body>

当您将它添加到文档底部时，页面加载时甚至不需要onload处理程序。

1

如果你使用原始的JavaScript来实现，你需要为每个锚点添加一个onclick事件和为每个li元素添加一个id。

<ul>   
    <li id='distinctID'><a href="javascript:strikeThrough('distinctId')">Click Me</a></li>
</ul>

那是你的HTML更改

function strikeThrough(id){
    var li = document.getElementById(id)
    li.style. textDecoration = "line-through"
}

这是你的 JavaScript 函数

我建议你只需包含 JQuery，这样就不必在标记中添加大量的 ID。

4
不需要使用内联事件处理程序属性，可以使用JavaScript编写element.onclick=function，这通常是最好的做法。绝对不要使用javascript:伪URL。 - bobince
1

如果你不打算在你的网站上做更多的事情，也许这是杀鸡焉用牛刀。以跨浏览器方式完成短小简洁的任务是一件头疼的事情。这就是使用jQuery的价值所在：只需编写一次代码，通常就能够轻松地实现功能。如果你认为额外的20KB带宽对于访问者来说是一个不必要的负担，那么开始学习事件处理程序、DOM和CSS操作吧。

你说你不太了解JS...你是从别人那里继承了这个jQuery用法，还是从某个示例中复制的呢？

1
将一个看似简单的jQuery代码中的函数转换为原始JavaScript代码有时会遇到跨浏览器错误、臃肿的函数以及您的需求在未来可能增加的可能性。
对于这样的功能使用jQuery并非过度使用，相信我。您永远不知道还有哪些jQuery的好特性在未来可能会用到。jQuery在缩小形式下足够小，对页面加载没有任何影响。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接