jquery 查询页面模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="container">
        <h1>Welcome to Our Site</h1>
        <p class="intro">This is a brief introduction.</p>
        <ul class="items">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>

    <script>
        $(document).ready(function() {
            // 查询并修改标题
            $('h1').text('New Title');

            // 查询所有列表项并添加类
            $('.items li').addClass('highlight');

            // 查询第一个段落并隐藏
            $('.intro').hide();

            // 绑定点击事件
            $('#container').on('click', function() {
                alert('Container clicked!');
            });
        });
    </script>
</body>
</html>