9.2.2 使用jQuery替代标题文本

  在9.1.3小节中,我们学习了如何使用内建的DOM方法来替换文本。在本节中,我们将修改代码,使用jQuery来替换标题文本。打开dom.html,进行如下所示的修改。

《javascript-少儿编程》第九章使用jQuery替代标题文本

  在❶处,在页面中添加了一个新的<script>标签以加载jQuery。加载jQuery之后,使用jQuery的$函数来选取一个HTML元素。

  $元素接受一个叫作选择器字符串(selector string)的参数,该参数告诉jQuery要从DOM树中选择哪一个或哪些元素。在这个示例中,输入”#main-heading”作为参数。在选择器字符串中,#字符表示“ID”,所以选择器字符串”#main-heading”的含义是“id为main-heading的元素”。

  $函数返回表示选中的元素的一个jQuery对象。例如,$(“#main-heading”)返回表示(id为”main-heading”)h1元素的jQuery对象。

  现在,有了表示h1元素的jQuery对象,在❷处,可以调用jQuery对象的text方法来修改它的文本,传入用于该元素的新的文本,用保存在变量newHeadingText中的用户输入的内容来替换标题的文本。和前面一样,当加载这个页面时,弹出一个prompt对话框,请我们输入内容,以用来替换h1元素中的旧文本。