![JavaScript+jQuery网页特效设计任务驱动教程(第2版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/233/53256233/b_53256233.jpg)
上QQ阅读APP看书,第一时间看更新
任务1-2 jQuery实现网页收藏
网页中包含如下所示的HTML代码。
![](https://epubservercos.yuewen.com/14AED9/31727344604040706/epubprivate/OEBPS/Images/58138_18_01.jpg?sign=1739615378-4EP8SuSaWhOjAPxhYTjwTxINhEt2j1tE-0-42947457c78e7bb844b790f5c066a12a)
用IE11浏览器浏览该网页时,单击网页中的“添加收藏”超链接,会弹出图1-2所示的【添加收藏】对话框,在该对话框中单击【添加】按钮,则会将对应网页添加到收藏夹。
用非IE浏览器浏览该网页时,单击网页中的“添加收藏”超链接,会弹出图1-3所示的【添加失败】对话框。
![](https://epubservercos.yuewen.com/14AED9/31727344604040706/epubprivate/OEBPS/Images/58138_18_02.jpg?sign=1739615378-OU5M0XBCXgxcaqKxQCRrQ731ENYPLeHc-0-171cb61d859de4fba1c9cd527c8fe37a)
图1-2 【添加收藏】对话框
![](https://epubservercos.yuewen.com/14AED9/31727344604040706/epubprivate/OEBPS/Images/58138_18_03.jpg?sign=1739615378-jYU53GfXdEdlP941c5jccqKULXzg4UCF-0-ad860fa0ccb2b744752447556b8ad774)
图1-3 【添加失败】对话框
这里的“添加收藏”功能采用jQuery方式实现,代码如表1-3所示。
表1-3 实现网页收藏功能的JavaScript代码
![](https://epubservercos.yuewen.com/14AED9/31727344604040706/epubprivate/OEBPS/Images/58138_19_01.jpg?sign=1739615378-Yn3z9RxhNz5rXesTcuyXBj0ndLHg1njj-0-ae0eb1e23b01037825dda5e5b93840ca)
表1-3中的代码解释如下。
(1)01行引用了一个外部的JS(JavaScript)文件jquery.js。
(2)为了防止文档在完全加载(就绪)之前运行jQuery代码,jQuery函数应位于ready方法中,如下所示。
![](https://epubservercos.yuewen.com/14AED9/31727344604040706/epubprivate/OEBPS/Images/58138_19_02.jpg?sign=1739615378-MJyTxci5AND7SFQX8m0wOp1UsuIlf2Oy-0-86d0e544c1392033a5309d0506d45c90)
(3)06行表示单击id="favorite"的按钮时,触发该按钮的单击事件,调用一个函数,执行该函数中的程序代码。
(4)if...else...语句为选择结构,针对IE浏览器和非IE浏览器执行不同的语句。
(5)07行中的表达式“window.ActiveXObject||"ActiveXObject"in window”用于判断当前浏览器的类型为IE浏览器。
(6)08行使用window.external.addFavorite方法实现IE浏览器的添加收藏功能。
(7)10行的alert()方法用于打开一个信息对话框,该方法是window对象的常用方法之一,可以写作window.alert()。其作用是弹出一个对话框,显示所指定的内容。括号中的字符串参数为对话框将要显示的内容,该对话框只有一个【确定】按钮。