jQuery 对象

CHNMSCS

已于 2024-05-25 09:42:50 修改

阅读量204

点赞数 3

分类专栏：前端文章标签： jquery 前端 javascript

于 2024-05-23 23:12:28 首次发布

本文链接：https://blog.csdn.net/bschn123/article/details/139159587

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

DOM对象

var tag = document.createElement("div");
tag.innerText

jQuery对象

$("#xxx")
$("#xxx").text()

DOM对象 -> jQuery对象

var tag = document.createElement("div");

$(tag)

jQuery对象 -> DOM对象

$("#xxx")[0]

清空输入框例子

<!DOCTYPE html>
<html>
    <head>
       
    </head>
    <body>
        
        <form id="f">
            <input type="text" name="user" placeholder="用户名" />
            <input type="text" name="pwd" placeholder="密码" />
        </form>
        
        <input type="button" value="重置" onclick="domReset();" />
        <input type="button" value="重置" onclick="jQReset();" />
        
        <script src="js/jquery-3.7.1.min.js"></script>
        <script>
            function domReset() {
                var tag = document.getElementById("f");
                tag.reset();
            }

            function jQReset() {
                $("#f")[0].reset()
            }
            
        </script>

    </body>
</html>

在table里做全选，取消，反选

<!DOCTYPE html>
<html>
    <head>
       
    </head>
    <body>
        
        <table border="1">
            <thead>
                <tr>
                    <th>选择</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody id="body">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>ere</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>crer</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>343d</td>
                </tr>
            </tbody>
        </table>
        
        <input type="button" value="全选" onclick="checkAll()" />
        <input type="button" value="取消" onclick="cancelAll()" />
        <input type="button" value="反选" onclick="reverse()" />

        <script src="js/jquery-3.7.1.min.js"></script>
        <script>
            function checkAll() {
                $("#body").find("input[type='checkbox']").prop('checked', true);
            }

            function cancelAll() {
                $("#body").find("input[type='checkbox']").prop('checked', false);
            }
            
            function reverse() {
                $("#body").find("input[type='checkbox']").each(function() {
                    var old = $(this).prop('checked')
                    if (old) {
                        $(this).prop('checked', false)
                    } else {
                        $(this).prop('checked', true)
                    }
                })
            }

        </script>

    </body>
</html>