JQuery内置属性attr()

JQuery内置属性attr()

在这里给大家分享的是JQuery内置属性attr()
功能效果：设置或返回被选元素的属性值，在这里我用于设置input密码框的type，改变密码为可见或者不可见

效果图：


图一、input标签的type值为password，图二、input标签的type值为text

使用方法：
attr(name|properties|key,value|fn)
一、Name
返回文档中所有图像的src属性值。

$("img").attr("src");

二、properties
为所有图像设置src和alt属性。

$("img").attr({ src: "test.jpg", alt: "Test Image" });

三、key,value
为所有图像设置src属性。

$("img").attr("src","test.jpg");

四、Key，回调函数
把src属性的值设置为title属性的值。

$("img").attr("title", function() { return this.src });

JQuery代码：

$(".eye").click(function () {
    if ($("#password").attr("type") == "text") {
        $(this).css("background-image", "url(../../Contents/images/eye-close.png)");
        $("#password").attr("type", "password");
    } else {
        $(this).css("background-image", "url(../../Contents/images/eye-open.png)");
        $("#password").attr("type", "text");
    }
});

Html代码：

<div class="relative">
   <span><i class="layui-icon layui-icon-password"></i></span>
    <input name="Password" lay-verify="required" placeholder="密码" type="password"
     maxlength="16" class="layui-input" id="password" value="@ViewBag.Password">
    <span class="eye"></span>
</div>

切换时效果图：

图一、从type的text改变为password
图二、从type的password改变为text