jquery添加css_jQuery添加CSS，添加html元素-蒲公英云

jquery添加css_jQuery添加CSS，添加html元素

jquery添加css

jQuery add method can be used to add elements, selectors or html to the matched elements.

jQuery add方法可用于将元素，选择器或html添加到匹配的元素。

jQuery add（） (jQuery add())

jQuery add() method is very useful if you want to apply any jQuery function or add CSS to DOM elements in HTML.

如果您想应用任何jQuery函数或将CSS添加到HTML中的DOM元素，则jQuery add（）方法非常有用。

Below example shows how we can use add() to apply css styles to ‘table’, ‘p’ and ‘li’ DOM elements in a single line. Otherwise we had to apply styles on each element one by one. It also shows how can we add HTML to any DOM element.

下面的示例显示了如何使用add()在一行中将CSS样式应用于“ table”，“ p”和“ li” DOM元素。否则，我们必须在每个元素上一一应用样式。它还显示了如何将HTML添加到任何DOM元素。

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
.styled{
    border:1px black solid;
    background-color: read;
    border-collapse: collapse;
}
</style>
<script type="text/javascript">
    function styleToggle(button) {
        if (button.value == 'Add Style') {
            //using add() we can apply css to all the elements at once
            $('table').add('p').addClass('styled').add('li').css('background-color', 'red');
            button.value = 'Remove Style';
        } else {
            //using removeAttr() to remove the styling
            $('table').add('p').add('li').removeClass('styled').removeAttr('style');
            button.value = 'Add Style';
        }
        $().add("<br><strong>appending html</strong>").appendTo("p:last");
    }
</script>
<title>jQuery add() Example</title>
</head>
<body>
    <strong>Employee Table</strong>
    <br><br>
    <table>
        <tbody>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>ROLE</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Pankaj</td>
                <td>Developer</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Mike</td>
                <td>Manager</td>
            </tr>
            <tr>
                <td>3</td>
                <td>David</td>
                <td>CEO</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Lisa</td>
                <td>Support</td>
            </tr>
        </tbody>
    </table>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </ul>
    <p>A Paragraph</p>
    <p>Last Paragraph</p>
    <br>
    <input type="button" value="Add Style" onclick="styleToggle(this)"></input>
</body>
</html>