jQuery中的事件与DOM操作

// 假设我们有一个按钮和一个段落
// HTML 结构如下：
// <button id="myButton">点击我</button>
// <p id="myParagraph">等待点击...</p>
 
$(document).ready(function() {
    // 当按钮被点击时，执行以下操作
    $('#myButton').click(function() {
        // 改变段落的文本
        $('#myParagraph').text('按钮被点击了！');
    });
 
    // 当按钮获得焦点时，执行以下操作
    $('#myButton').focus(function() {
        // 在段落后面添加一个新的列表项
        $('#myParagraph').after('<li>按钮获得焦点</li>');
    });
 
    // 当文档准备就绪时，执行以下操作
    $(document).ready(function() {
        // 隐藏段落
        $('#myParagraph').hide();
    });
});

这个代码实例展示了如何在jQuery中绑定点击（click）、焦点（focus）以及文档就绪（document ready）事件，并执行相应的DOM操作。这些操作包括改变元素文本、在元素后面添加新内容，以及隐藏元素。