我是否使用了正确的jQuery语法

Am I using the correct jQuery syntax?

本文关键字：jQuery 语法 是否      更新时间：2023-09-26

我有以下代码 -

$(window).resize(function () {
    if ($(window).width() >= 1023) {
        for (var i = 0; i < seatInfo.length; i++) {
            if (seatInfo[i].data == 'true') {
                document.getElementById('Btn1').style.visibility = "visible";
                break;
            } else {
                document.getElementById('Btn1').style.visibility = "hidden";
            } 
        }
        if (nameInfo[0].data == "true") {
            document.getElementById('Btn2').style.visibility = "visible";
        }
    }
    if ($(window).width() <= 1022) {
        document.getElementById('Btn2').style.visibility = "hidden";
    }
});

这是正确的写法吗？我注意到它包含一个JavaScript和jQuery混合。

如果你专门询问jQuery语法，那么答案是否定的。您使用的是原生 JavaScript 方法，而不是更短的 jQuery 方法。

看看一些jQuery选择器。例如：

id 属性为

foo 的元素可以使用 jQuery 的 id 属性选择器#找到：

var element = $( "#foo" ); // match the element
更改

元素可见性属性与更改任何其他 css 属性相同：

element.css( "visibility", "visible" ); // change css properties

jQuery的一个很大功能是它有许多快捷方式方法。有几种快捷方法可以显示和隐藏元素（并切换它们）：

  • element.show()
  • element.hide()
  • element.toggle()

为什么中途停止使用 jQuery？

  • 对于document.getElementById('Btn1')使用$('#Btn1')。
  • 对于.style.visibility = "visible"请使用.show()（或者，如果您想非常精确，.css('visibility', 'visible') ）

在官方jQuery网站上有很多很好的文档。

您可以使用

$('#some-id').hide()和$('#some-id').show()。而不是用style.visibility = "visible"或style.visibility = "hidden" document.getElementById('some-id').

您可以使用jquery中的.css并将其设置为json结构来定义一个或多个CSS属性，这对我来说更容易记住。

$('#Btn1').css({
    'property': 'value', 
    'property': 'value'
});

或者只是像这样将其用于单个属性

var btn1 = $('#Btn1'),
   btn2 = $('#Btn2'),
   window = $(window); 
window.resize(function () {
    if (window.width() >= 1023) {
        for (var i = 0; i < seatInfo.length; i++) {
            if (seatInfo[i].data == 'true') {
                btn1.css('visibility','visible');
                break;
            } else {
                btn1.css('visibility','hidden');
            } 
        }
        if (nameInfo[0].data == "true") {
            btn2.css('visibility','visible');
        }
    }
    if (window.width() <= 1022) {
        btn2.css('visibility','hidden');
    }
});
相关文章：