本节要点：
创建返回顶部链接
提供“更多...”链接
更少...即动态显示要看的内容
以滑动效果来替换文本
使图像滚动
确定用户按下键
12.创建返回顶部链接
假设网页包含大量文本。请在每个文本块之后，显示一个链接，链接上的文字是Return Top(返回顶部)，为用户导航到网页头部。即利用jQuery为HTML页面动态插入锚点。
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("<a href='#topofpage'>Return to top</a>").insertAfter("p"); //在段落元素之后插入一个包含文本Return to top的链接以便文字定位到头部 $("<a id='topofpage' name='topofpage'></a>").prependTo("body"); //在整个页面首部（即body前）设置锚点 }); </script> </head> <body> <p> <!-- 假设这里有很多文本 --> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> </p> </body> </html> |
13.提供“更多...”链接
假设有大块的文本需要显示，为了是屏幕保持整洁，初始时只显示其中的几行文字，连同一个“更多....”链接；当用户选择此链接时，才显示文本的其余部分（默认隐藏）。
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ // $(".message").hide() //在这里添加方法使文本隐藏，只有当文本全部加载完毕后才隐藏影响页面美观 $("span.readmore").click(function(){ $(".message").show(); $(this).hide(); //隐藏这个span元素 }); }); </script> </head> <body> <div>我是文本的标题</div>
<span class="readmore">Read More...</span> <!-- 直接设置id为message的div隐藏 --> <div class="message" hidden="">我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br /> </div> </body> </html> |
.show(speed,callback);指定元素的隐藏可见；
speed：定义动画效果的持续时间，即决定元素是否要立即显示或缓慢地显示。速度可被定义为多少毫秒，或预定义字符串：slow、fast、normal。也就是说定义动画要执行多久。如省略，则问normal。
callback：完成动画时调用的函数。
.hide(speed,callback);使指定元素隐藏。参数意义同show()方法。
更少...即动态显示要看的内容
保持HTML页面代码不变，修改jQuery代码如下：
|
$(document).ready(function(){ $("span.readmore").click(function(){ if($(this).text()=="Read More..."){ $(".message").show(); $(this).text("Read Less"); }else{ $(".message").hide(); $(this).text("Read More..."); } |
将click事件绑定在span元素上，并在click事件调用函数里做一个简单的判断。根据span的文本调用函数使message显示或者隐藏。
14.以滑动效果来替换文本
请以一段文本替换另一行文本，使被取代的文本慢慢变得不可见，与此同时，另一行文本渐渐显示出来。
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p#message1").css({ 'border':'2px solid', 'text-align':'center', 'font-weight':'bold', }).hide(); $("p#message2").css({ 'backgroundColor':'#faf', 'color':'#fff', 'text-align':'center', 'font-weight':'bold' }).click(function(){ $(this).slideUp('slow'); //使message2元素消失不见 $('p#message1').slideDown('slow'); //使message1元素渐渐显示 }); }); </script> </head> <body> <p id="message1">jquery is an open source project</p> <p id="message2">Manipulating DOM using jQuery</p> </div> </body> </html> |
以上代码给id为message1的段落分配了宽为2像素的实线边框，把段落文本对齐于浏览器窗口的中心位置，并以粗体显示。把id为message2的段落的背景色设置为紫色，把文本的前景色设置为白色，也使文本对齐于浏览器窗口的中心位置。利用slideUp()方法使第一段文本逐渐消失，利用slideDown()方法使另一段文本逐渐显示，替换消失的那段文本。
.sildeUp(speed,callback);以滑动效果来逐渐使选定的元素消失；
.sildeDown(speed,callback);以滑动的效果来逐渐显示选定的元素；
speed,callback和show()方法具有同样的意义。
15.使图像滚动
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('img').click(function(){ $(this).animate({left:600},'slow'); }); }); </script> </head> <body> <img src="img.jpeg"> </div> </body> </html> |
补充方法：animate(properties,speed,easing,callback);此方法用于把自定义动画应用到选定的元素。根据指定的CSS属性和使用的缓和参数来控制定义动画。
properties：是指CSS属性（终止），即该元素在动画完成后达到的值。
speed：定义动画执行多长时间，以毫秒为单位（同show()方法）。
easing：（缓和）是一个函数（可选），控制动画随着时间如何进行。它需要一个插件。有两个缓和函数：linear（线性）和swing（摆动）。默认值为swing。
callback：是动画执行完毕后的回调函数。
|
$(this).animate({left:600},'slow'); |
使图像从当前位置缓慢地移动到距离浏览器窗口左侧600像素的位置。
16.确定用户按下键
注意：event.keyCode属性在火狐中无效，到chrome或IE中调试本方法，火狐中应使用event.which属性
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".infobox").keypress(function(event){ $("p").text("按下" + String.fromCharCode(event.keyCode)); }); }); </script> </head> <body> <input type="text" class="infobox" /> <p></p> </body> </html> |
Keypress()把事件处理函数绑定到指定元素，当用户在键盘上按键时就触发事件。Keydown()和keypress()的区别是：如果用户反复按任意键，按下然后保持按下状态，keydown()只执行一次，而keypress()事件则是每个插入一个字符就执行一次(keydown的持续时间会更长一些)。此外Shift、Ctrl键为keydown所识别，而keypress是不是识别这些修改键的。