8.8jQuery应用举例

8.8　jQuery应用举例

学习目标

通过几个Web页面常用实例理解jQuery在Web开发中的应用方法。

8.8.1　制作动态网页导航条

目前，多数网站的导航条都是一个大通栏，同时跟随鼠标有个背景色（背景图）的变化的效果，这时用jQuery代码，非常方便实现。先来看看导航条页面运行显示效果，如图8-7所示。

当鼠标指针滑动到其他任何一个栏目上时（如在线留言），页面显示效果如图8-8所示。

这个导航条效果主要是先要定义好样式显示的准确性，然后才是使用jQuery控制鼠标滑动显示效果。导航条效果主要代码如下。

<div class="nav">
     <div class="nav_1">
        <div class="current"><a href="#">网站首页</a></div>
        <div class="common"><a href="#">公司简介</a></div>
        <div class="common"><a href="#">新闻中心</a></div>
        <div class="common"><a href="#">公司荣誉</a></div>
        <div class="common"><a href="#">产品中心</a></div>
        <div class="common"><a href="#">在线留言</a></div>
        <div class="common"><a href="#">广告加盟</a></div>
        <div class="common"><a href="#">联系我们</a></div>
        <div class="common"><a href="#">投诉建议</a></div>
    </div>
  </div>

显然控制的是class=common的div中的样式变化，所以在选择元素时就要使用$(".nav . nav_1 div[class='common']")来选择要控制的元素，对于current来说显示的就是当前页面固定效果，当然不用处理鼠标滑动效果了。其实当鼠标指针离开“在线留言”栏目后，白色背景又会去掉，这显然符合mouseover事件、mouseout事件，前面讲过，能够替换mouseover事件、mouseout事件的一个简单的事件是hover事件，故此这里选择使用jQuery的hover事件来控制，hover事件的第一个参数函数就相当于mouseover事件代码，第二个参数函数代码就相当于mouseout事件代码。接下来给出jQuery控制代码（样式代码省略）：

$(document).ready(function () {
  $(".nav .nav_1 div[class=’common’]").hover(function () {
    $(this).removeClass("common").addClass("current");
  },
  function () {
    $(this).removeClass("current").addClass("common");
  });
});

显然hover事件方法的第一个参数函数代码就表示鼠标滑到元素了，那就把当前的样式common移出（removeClass），同时再给其添加样式current(addClass)，当然显示效果就变了，而第二个参数函数代码就表示鼠标滑走了，那操作代码当然和鼠标滑到元素的代码相反了。

完整示例代码参见nav.html。

8.8.2　制作异步网页选项卡效果

网页选项卡显示信息效果是目前多数网站普遍使用的信息显示效果，该功能可以让网页在一小块位置显示更多的信息内容。如果在选项卡中显示的信息是静态内容，一般可以使用js结合样式控制内容的显示或隐藏，如果信息来源于数据库读出，那么就最好采用异步Ajax实现，这样一来可以提高首次显示网页内容的速度。

例如，要制作一个5个项目的选项卡效果，如果使用传统的js+css控制div框显示或隐藏，那首次就让第1个div框显示，后4个div框隐藏。但是这5个div框中的内容在首次打开时，都要从数据库中读出来，因为js+css控制div框显示或隐藏操作完全属于客户端操作行为，为了使得后续选择不同的选项卡能显示出不同的内容，首次就必须把5个div框中的内容全部从数据库中读取出来，显然速度就变慢了。

但是，要使用异步选项卡效果实现，首次就只需要把第1个div框中的内容读取出来并显示而不需要读取其他4个div框中的内容；而当用户选择第2个div框时，再从数据库中读取第2个div框中显示的内容，显然首次访问的速度提高了，总之，异步选项卡信息显示效果，给用户体验会更好一些，这就是异步选项卡带来的好处，接下来举例说明。

先来看看异步选项卡效果，运行显示效果如图8-9所示。

当单击其他任何一个栏目时（如热点文章），页面显示效果如图8-10所示。

异步选项卡显示效果的功能实现前提是，先定义样式标准，页面tab.aspx完整样式定义代码如下。

<style type="text/css">
*{padding: 0px;margin: 0px;}

body{font-size: 14px;font-family: 微软雅黑,宋体;
color: #333333;line-height: 25px;background-color: #f9f4f4;}

div{margin: 0px auto;}

a{color: #333333;text-decoration: none;}

a:hover{color: #ff0000;text-decoration: underline;}

.cont{border: 1px solid #dddddd;background-color: #eeeeee;
color: #333333;width: 460px;height: 30px;margin-top:10px;}

.common{width: 100px;height: 28px;padding-top: 2px;
float: left;border-bottom: 0px solid blue;
text-align: center;cursor: pointer;}

.current{width: 100px;height: 28px;padding-top: 2px;
float: left;border-bottom: 1px solid blue;
text-align: center;color: blue;cursor: pointer;}

.news{border: 1px solid #dddddd;background-color: #eeeeee;
color: #333333;border-top: 0px;background-color: #ffffff;
min-height: 160px;padding: 5px;width: 450px;}

.news .title{float: left;width: 320px;
background-image: url(Images/sign.gif);background-repeat: no-repeat;
background-position: 5px;padding-left: 20px;
border-bottom: 1px dotted #cccccc;letter-spacing: 1px;}

.news .date{float: left;width: 100px;
border-bottom: 1px dotted #cccccc;color: #aaaaaa;}
</style>

然后使用div+css样式代码来定义页面显示结构，页面HTML源码如下：

<div class="cont">
    <div class="current">即时新闻</div>
    <div class="common">行业新闻</div>
    <div class="common">最新动态</div>
    <div class="common">热点文章</div>
</div>
<div class="news">
<%
for (int i = 1; i <= 5; i++)
{
Response.Write("<div class='title'><a href='#' target='_blank'>");
Response.Write("即时新闻1,乐观是一种生活态度");
Response.Write("</a></div>");
Response.Write("<div class='date'>2013.02.25</div>");
Response.Write("<div style='clear: both'></div>");
}
%>
</div>

源码中的c#语法for循环主要是为了能多输出一些信息，当然这里可以直接和数据库交互以便读取数据库中的信息。然后就是使用jQuery+Ajax控制显示效果了，完整jQuery代码如下（为了能一行显示，就把代码锯齿效果删除了，不过后面有简单注释，方便查看代码结构，在实际编写代码时最好按照锯齿效果编写）。

$(document).ready(function () {
  $(".cont div").each(function (index) {
  $(this).click(function () {
  $(this).removeClass("common").addClass("current");
  $(this).siblings().removeClass("current").addClass("common");
  var url = "getnews.aspx?id=" + (index + 1).toString() + "&m=" +
  Math.random();
  $.get(url, function (data) {
  $(".news").html(data);
  });//end get
  });//end click
  });//end each
});//end document

其中$(".cont div")就是选择class=cont的容器中的所有div元素，后面的each(function(index))是一个jQuery函数，完成一种循环操作（类似c# foreach），目的就是为了操作每个div元素，匿名函数中的index是一个自定义变量名称，表示操作的div元素的索引号（从0开始）。

在循环体内，使用$(this)表示当前操作的div元素，.click就是说当每一个div元素被单击后会执行后面的代码段。即：

$(this).removeClass("common").addClass("current");
$(this).siblings().removeClass("current").addClass("common");
var url = "getnews.aspx?id=" + (index + 1).toString() + "&m="
+ Math.random();
$.get(url, function (data) {
$(".news").html(data);
});//end get

其中$(this).removeClass("common").addClass("current");就是删除当前被单击的选项卡中的class=common属性，同时给其添加class=current属性，以便改变被单击的选项卡的显示样式，而代码$(this).siblings()的意思是获取当前被单击的div元素的兄弟元素，其实也就是class=cont中的除当前被单击div元素以外的其他元素。

变量url是定义获取数据信息的程序页面地址，使用id=index+1把用户单击的选项卡索引号+1传递到程序页面getnews.aspx中，后面还传递了一个随机数，目的是为了防止浏览器缓冲，对于页面功能没有任何影响。然后使用$.get()函数异步把url传递到getnews.aspx。

页面获取数据到其data变量中，最后使用$(".news").html(data)把异步从程序页面获取到的数据写入到class=news的div容器中，其中getnews.aspx页面核心代码如下。

<%@ Page Language="C#" %>
<%
  string id = Request.QueryString["id"].ToString();
  string title = string.Empty;

  if (id == "1")
  {
    title = "即时新闻" + id;
  }
  else if (id == "2")
  {
    title = "<b style='color:#ff0000'>行业新闻</b>" + id;
  }
  else if (id == "3")
  {
    title = "<b style='color:#00ff00'>最新动态</b>" + id;
  }
  else if (id == "4")
  {
    title = "<b style='color:#0000ff'>热点文章</b>" + id;
  }
  for (int i = 1; i <= 5; i++)
  {
    Response.Write("<div class='title'><a href='#' target='_blank'>");
    Response.Write(title + ",乐观是一种生活态度");
    Response.Write("</a></div>");
    Response.Write("<div class='date'>2013.02.25</div>");
    Response.Write("<div style='clear: both'></div>");
  }
%>

getnews.aspx页面代码是纯粹的ASP.NET（c#）代码，目的就是为了构造传递不同的id输出不同的数据，当然也可以根据id值从数据库中读取不同的信息。

完整示例代码参见tab.aspx和getnews.aspx。

8.8.3　验证用户名重复自动提示

会员注册是Web开发项目中频繁使用的功能，自动检查用户名在数据库中是否存在是多数网站都在使用的功能。自动检查用户名在数据库中是否存在核心就是使用Ajax异步传递表单中的用户名到程序页面，而程序页面根据传递的用户名称在数据库中查询是否存在进而输出对应的提示信息，然后返回到表单页面的指定位置来提示用户。

接下来给出会员注册页面CheckUsername.aspx部分表单代码如下。

输入用户名：

     <input type="text" id="username" name="username" />
    <span id="info" style =" color:#ff0000;"></span><br />
    <input type="button" id="ok" name="ok" value="检查用户名是否存在" />

然后编写jQuery+Ajax代码如下。

$(document).ready(function () {
       $("#ok").click(function () {
          var username = $("#username").attr("value");
          $("#info").load("checkinfo.aspx?username="+username);
    });
  });

程序页面checkinfo.aspx主要是使用传递的username来检查数据库中是否存在该用户名，这里就以admin、abcd两个用户为例来判断（也可以把其中的代码修改成和用户表关联来判断当前用户输入的用户名称在用户表中是否存在），接下来给出程序页面checkinfo.aspx代码如下。

protected void Page_Load(object sender, EventArgs e)
{
    string username = Request.QueryString["username"];
    if (username == "")
    {
       Response.Write("不能为空!");
    }
    else if (username == "admin" || username == "abcd")
    {
       Response.Write("用户名重复，请重新选择");
    }
    else
    {
       Response.Write("OK!@");
    }
}

页面运行后，在表单文本框中输入用户名admin，然后单击“检查用户名是否存在”按钮，页面显示效果如图8-11所示。