下载掌阅APP，畅读海量书库
立即打开
1.1 显示或隐藏网页内容
用户使用在线支付平台选择具体付款银行时，会发现银行数量较多而无法全部显示出来，这时网页会通过一个类似“展开全部”或者“显示更多”的功能按钮，让用户浏览到全部银行，如图1.1和图1.2所示。此功能使用jQuery来操作非常简单，仅仅需要2~3个函数就可以完美地实现。
图1.1 jQuery“显示”网页内容操作
图1.2 jQuery“隐藏”网页内容操作
本例主要代码如下：
jQuery代码本质上也是属于JavaScript的脚本范畴。一般来讲，使用JavaScript代码的方法主要有以下两种：
● 第1种方法可以将JavaScript代码段直接嵌入到HTML/JSP/PHP等页面文件中使用。
● 第2种方法可以将JavaScript代码写在单独的后缀名为.js的脚本文件中，然后在HTML/JSP/PHP等页面文件中引用.js文件。
对于第2种方法，用户首先将标准的jQuery框架类库文件在HTML/JSP/PHP等页面文件的<head></head>头部引入，然后就可以在页面内使用jQuery框架的“显示”和“隐藏”功能了。
第10~13行的“显示”功能通过jQuery框架的show()函数来实现，该函数用于显示HTML页面中的元素，其语法如下：
其中speed参数用来设置显示的速度，可取值为slow、fast或毫秒；callback参数用来设置动作完成后所执行的函数。
第14~17行的“隐藏”功能通过jQuery框架的hide()函数来实现，它用于隐藏HTML页面的元素，其语法如下：
其中speed参数与callback参数的用法与show()函数的参数是相同的。
提示： 一般开发复杂页面时（例如目前流行的Web 2.0网站），建议采用第2种方法，这样在页面文件增多时，可以引用同一个JavaScript脚本文件，同时也使得代码可读性和文件规范性更好。