HTML5属性操作:纯JS vs. jQuery

HTML5 Attribute Manipulation: Vanilla JS vs. jQuery

本文关键字：JS vs jQuery 属性 操作 HTML5      更新时间：2023-09-26

为什么改变元素的属性值在香草JS和jQuery有时不工作相似?一个场景是我创建的实验，每当点击"显示密码"按钮时，密码字段的type属性值应该在password时变为text，反之亦然。它在普通JS中工作成功，但在jQuery中却不行。在jQuery中，属性值更改为text，但是当我想将其更改回password时，它将不起作用。为什么会出现这样的问题?

香草JS 

document.querySelector('.show-password').onclick = function() {
    if(document.querySelector('#password').type == 'password') {
        document.querySelector('#password').type = 'text';
    } else {
        document.querySelector('#password').type = 'password';
    }
}
jQuery 

$('.show-password').click(function() {
    if($('#password').attr('type', 'password')) {
        $('#password').attr('type', 'text');
    } else {
        $('#password').attr('type', 'password');
    }
});

因为if($('#password').attr('type', 'password'))没有询问type属性是否为'password'。它设置type=password，并向if语句返回一个jQuery对象。

当.attr()仅与一个参数一起使用时，它从所选元素获取该属性，因此可以使用$("#password").attr("type") == "password"。

相关文章：