如何将此 JavaScript 代码翻译成 jQuery？

Question

我在 JavaScript 中有一些代码，我想将其翻译成 jQuery。我已经浏览了几个小时的网络，并试图自己弄清楚但没有成功。所以我就来了。

    window.addEventListener('mouseup', function(event){
    var dp1 = document.getElementById('dp1');
    if(event.target != dp1 && event.target.parentNode != dp1){
        dp1.style.height = "0px";
        dp1.style.width = "0px";
    }
});

Answer 1

将代码翻译成jQuery没有任何意义，这段代码更长、更慢并且依赖性强：

$(window).on("mouseup", function(event) {
    var dp1 = $('#dp1');
    if(this != dp1.get(0) && $(this).parent().get(0) != dp1.get(0)){
        dp1.css("height", "0px");
        dp1.css("width", "0px");
    }
});

Answer 2

尝试使用以下代码。

$(document).mouseup(function(event){
    var dp1 = $('#dp1');
  if(event.target != dp1 && event.target.parentNode != dp1){
    dp1.css({height:'0px', width:'0px'});
  }
});

Answer 3

$(document).ready(function() {
  $(window).on("mouseup", function(event) {
    var dp1 = $("#dp1");
    var target = $(event.target); 

    if( !$(target).is(dp1) && !target.parents('#dp1').length) {
      dp1.css("height", "0").css("width", "0");
    }
  });
});

Answer 4

首先，jQuery 是 JavaScript。

大多数人尽量不在他们的项目中加载它，以降低它带来的开销，所以通常情况下，请求与您的要求相反。减少这种开销的一种方法是以精简形式加载 jQuery。

但这并不是说 jQuery 就很糟糕。

除了更短的语法之外，jQuery 的特别之处在于，它的最佳和最差功能（取决于您从哪里看）是它为 JavaScript 带来了很大的灵活性，这会阻碍程序员从了解 js 限制。这是帮助，但也是约束。例如，在编写干净的 JavaScript 代码之前，我从不需要学习闭包，因为 jQuery 会在需要时悄悄地将它们添加到我的构造中。

关于 jQuery 的一个明显积极的事情是它为一些浏览器的不一致提供了怪癖和变通方法，这些浏览器不需要也不应该知道，就像 autoprefixer 带走了前缀 CSS.

的大部分痛苦

话虽这么说，但我认为这是 jQuery 中您的代码的简化版本。恕我直言，只有在您的项目中已经加载 jQuery 时才应使用它。

$(window).on('mouseup', function(e){
  if (! $(e.target).closest('#dp1').is('#dp1')) {
    $('#dp1').css({
      height: 0,
      width: 0
    })
  }
})

如何将此 JavaScript 代码翻译成 jQuery？

How to translate this JavaScript Code into jQuery?

javascript

jquery

translate