前端-jq创建标签/添加属性/css属性

阅读目录

• jq创建标签
• jq添加属性如href，id，class，name等
• jq添加style属性即css，如width，height，text_aling
• jq向标签里添加标签
• 在父标签里添加子标签
• jq获取checkbox的值
• 前端接收后端json数据，循环遍历添加标签

jq创建标签

var ptag = $('<p>'); 

回到顶部

jq添加属性如href，id，class，name等

讯享网
$('#content').attr('class/id/name/href', 'active')

$('#id').html('标签的文本')

$('#input).val('xxxxxxx')

回到顶部

jq添加style属性即css，如width，height，text_aling

$("div").css({"background-color":"yellow","font-size":"200%"}); 

讯享网var css = { background-color: '#EEE', height: '500px', margin: '10px', padding: '2px 5px' }; $("div").css(css);

jq向标签里添加标签

var ptag = $('p') 

回到顶部

讯享网

在父标签里添加子标签

讯享网$('#id').append(ptag) 

回到顶部

jq获取checkbox的值

<ul > <li><input type="checkbox" name="friend_name" value="zhangshan">张三</li> <li><input type="checkbox" name="friend_name" value="lisi">李四</li> <li><input type="checkbox" name="friend_name" value="python">派神</li> <li><input type="checkbox" name="friend_name" value="java">加瓦</li> </ul> <script> var friend_name = new Array() $('input[name="friend_name"]:checked').each(function (i) { friend_name[i] = $(this).val() }); </script>

前端接收后端json数据，循环遍历添加标签

讯享网// 后端数据格式为：{key:value,key:value}
function userEdit(t) {
            // 1. 点击按钮时，获取该条信息的用户id，去获取该用户信息
            // 2. 将信息赋值给模态框，然后显示模态框
            // 3. 用户修改完信息后，点击保存，将数据发给后端保存，保存成功弹出对话框，告知保存成功，失败让用户重新提交
            let user_id = $(t).closest("tr").find("td").eq(1).text();
            $.ajax({
                type: "get",
                url: "/user/edit?user_id=" + user_id,
                success: function (d) {
                    console.log(d);
                    if (d.code != 0) {
                        alert(d.desc)
                    } else {
                        let user_data = d.data;
                        let html = "";
                        console.log(user_data)  // 如果获取的是json字典
                        $.each(user_data, function (key, value) {
                            {#html += '<div class="form-group">\n' +#}
                            {#    '                            <label for="name" class="col-sm-2 control-label">姓名:</label>\n' +#}
                            {#    '                            <div class="col-sm-10">\n' +#}
                            {#    '                                <input type="text" class=" form-control" id="name" placeholder="姓名">\n' +#}
                            {#    '                            </div>\n' +#}
                            {#    '                        </div>'#}

                            html += '<div class="form-group">' + '<label for="' + key + '" class="col-sm-2 control-label">' + key + ':</label>\n'
                                + '<div class="col-sm-10"> \n' +
                                '<input type="text" class=" form-control" id="' + key + '" placeholder="' + value + '">' + '</div>' + '</div>'

                        });
                        $("#user-form").append(html)
                    }
                }
            });