如何将属性添加到 HTML 标记

Question

我一直在尝试找到一种使用 JQuery 向 HTML 标记添加属性的方法，所以假设我有以下 HTML 代码：

<input type="text" name="j_username" id="j_username" autocorrect="off" autocapitalize="off" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: 0px 0px; background-repeat: no-repeat;">

和：

<input type="password" name="j_password">

我希望能够将这两个替换为以下内容：

<input type="text" name="j_username" id="j_username" value="" autofocus required style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: -298px 0px; background-repeat: no-repeat;" placeholder="LDAP Username">

和：

<input type="password" name="j_password" autofocus required style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: -298px 0px; background-repeat: no-repeat;" placeholder="LDAP Password">

我在网上找到的都是这样的：

http://api.jquery.com/append/

或：

Use jQuery to change an HTML tag?

但这两个与我想要做的不一样，因为第一个是在<tag></tag> 之间添加新的东西，而第二个实际上是从<tag></tag> 替换为<anotherTag></anotherTag>。

我对 JQuery 完全陌生，所以请多多包涵。:D

编辑：这是我试图修改以添加上述内容的 JS 文件（供参考）

function checkToggle(e) {
    e.prop("checked",!0)
}

function writeCookie(e,t,n) {
    var o,r;n?(o=new Date,o.setTime(o.getTime()+1e3*60*60*24*n),r="; expires="+o.toGMTString()):r="",
    document.cookie=e+"="+t+r+"; path=/"
}

function readCookie(e) {
    var t,n,o,r=e+"=";
    for(o=document.cookie.split(";"),t=0; o.length>t; t++) {
        for(n=o[t]; " "==n.charAt(0);)
            n=n.substring(1,n.length);
        if(0==n.indexOf(r))
            return n.substring(r.length,n.length)
    }
    return""
}
jQuery (
    function(e) {
        function t(t) {
            return e("<div />",{"class":t})
        }
        if ("/login"==window.location.pathname) {
            var n="Welcome to Jenkins";
            // var user='autofocus required="" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: -298px 0px; background-repeat: no-repeat;" placeholder="LDAP Username"';
            // var pass='autofocus required="" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: -298px 0px; background-repeat: no-repeat;" placeholder="LDAP Password"';
            e("#main-panel"),e("#side-panel");
            var o=e('input[name="j_username"]').closest("td").prev("td").addClass("input-label"),r=e('input[name="j_password"]').closest("td").prev("td").addClass("input-label");
        //  e('input').replaceTag($('<input autofocus="" required="" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: -298px 0px; background-repeat: no-repeat;">').addClass('wasDiv'), true);
            e("a[href=signup]").closest("div").addClass("signup-container"),e("#yui-gen1-button").addClass("login-button");
            var i=e(".submit-button"),a=e("#main-panel div:first").addClass("login-container"),c=e('form[name="login"]').length;
            c&&(o.text(""),r.text(""),a.removeAttr("style"),a.wrap(t("login-outer")),a.wrap(t("login-wrapper").prepend(" <h2> "+n+" </h2> ")),i.wrap(t("button-wrapper")),e(".login-container div:last").removeAttr("style"))
        }
    }
),

jQuery (
    function(e) {
        var t='<div class="toggle"></div><input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"><label for="cmn-toggle-7" data-on="Hide" data-off="Show"></label>';
        e("#description-link").text("edit description"),e("#description").before(t),"checked"!=readCookie("toggle")?e("#description").hide():(checkToggle(e(".cmn-toggle")),e("#description").show()),e(".cmn-toggle").change(function() {
            e("#description").slideToggle("fast"),e(".cmn-toggle").is(":checked")?writeCookie("toggle","checked",30):writeCookie("toggle","unchecked",30)
        })
    }
),

jQuery (
    function() {
        function e(e) {
            var t=jQuery(e.target),n=t.attr("name"),r=t.attr("value"),i=t.is(":checked");
            "on"===r&&(i=!1),document.cookie=n+"="+o(r+i)
        }

        function t(e) {
            var t=jQuery(e.target),r=t.attr("name"),i=t.attr("value"),a=t.is(":checked");
            return n(r)===o(i+a)?!0:!1
        }

        function n(e) {
            var t,n,o,r=e+"=";
            for (o=document.cookie.split(";"),t=0; o.length>t; t++) {
                for (n=o[t]; " "==n.charAt(0);)
                    n=n.substring(1,n.length);
                if(0==n.indexOf(r))
                    return n.substring(r.length,n.length)
            }
            return""
        }

        function o(e) {
            for(var t=e.length,n=[],o=0; t>o; o++) {
                var r=e[o].charCodeAt().toString(2);
                n.push(Array(8-r.length+1).join("0")+r)
            }
            return n.join(" ")
        }

        var r="#dfd",i="#fff";
        jQuery ('.setting-input, input[type="checkbox"]').one("click",function(t) {
            e(t)
        }),
        jQuery(".setting-input").on("input propertychange paste",function(e) {
            t(e)?jQuery(e.target).css("background-color",i):jQuery(e.target).css("background-color",r)
        }),
        jQuery('input[type="checkbox"]').change(function(e) {
            t(e)?jQuery(e.target.parentNode).css("background-color",i):jQuery(e.target.parentNode).css("background-color",r)
        })
    }
);

如您所见，我尝试了几件事，但最终都失败了..

EDIT2：感谢Milney's answer，我最终实现了我所需要的！这就是现在的样子：

jQuery (
        function(e) {
                function t(t) {
                        return e("<div />",{"class":t})
                }
                if ("/login"==window.location.pathname) {
                        var n="Welcome to Jenkins";
                        e("#main-panel"),e("#side-panel");
                        var o=e('input[name="j_username"]').attr({placeholder:"LDAP Username",autofocus:"",required:""}).closest("td").prev("td").addClass("input-label"),r=e('input[name="j_password"]').attr({id:"j_password",placeholder:"Password",autofocus:"",required:""}).closest("td").prev("td").addClass("input-label");
                        e("a[href=signup]").closest("div").addClass("signup-container"),e("#yui-gen1-button").addClass("login-button");
                        var i=e(".submit-button"),a=e("#main-panel div:first").addClass("login-container"),c=e('form[name="login"]').length;                        c&&(o.text(""),r.text(""),a.removeAttr("style"),a.wrap(t("login-outer")),a.wrap(t("login-wrapper").prepend(" <h2> "+n+" </h2> ")),i.wrap(t("button-wrapper")),e(".login-container div:last").removeAttr("style"));
                }
        }
),

Answer 1

.attr 方法可用于读取和操作属性。这应该相当简单。尝试阅读该方法的手册页：http://api.jquery.com/attr/

如 cmets 中所述，请考虑为此使用 CSS 类，因为向许多单独的元素添加样式属性会很快变得混乱。

Answer 2

您可以运行一个循环并交叉检查第一个元素的所有属性，如果它不存在，您可以将其添加到第二个元素中

//your first element
$('#j_username').each(function() {
  $.each(this.attributes, function() {
    if(this.specified) {
      var name = this.name;
      var value = this.value;
      var flag = 0;

      //your second element
      $('#j_password').each(function() {
        $.each(this.attributes, function() {
          if(this.specified) {
            if(this.name == name) {
                flag = 1;
            }
          }
        });
        if (flag == 0) {
            $('#j_password').attr(name, value);
        }
      });
    }
  });
});

这是您的 HTML 元素

<input type="text" name="j_username" id="j_username" autocorrect="off" autocapitalize="off" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: 0px 0px; background-repeat: no-repeat;">
<input type="password" name="j_password" id='j_password'>

但你需要一个类或密码才能访问第二个元素

这是demo

Answer 3

您可以使用 .attr() 函数添加属性

$("#j_username").attr("placeholder","LDAP Username");