跟我学jQuery(二) 初识jQuery

跟我学jQuery教程目录:

一.必备条件

1.下载jQuery类库

jQuery的最新类库放在google code上,下载地址如下:

http://code.google.com/p/jqueryjs/downloads/list

里面有很多版本,大致有以下几种:

min:压缩版本,在项目发布的时候使用 jquery-1.3.2.min.js

release:未压缩版本包,包括没有压缩的jQuery库,文档和相关事例 jquery-1.3.2-release.zip

vsdoc2:此版本是Visual Studio 2008中专门用于智能感应的版本(强烈推荐) jquery-1.3.2-vsdoc2.js

2.如何使用Visual Studio 2008支持jQuery的智能感应

值得欣慰的是在Visual Studio 2008中已经支持jQuery的智能感应,我们后面的例子将使用Visual Studio 2008进行书写,现在我来讲解一下jQuery中Visual Studio 2008智能感应的配置.当然你如果没有Visual Studio 2008其他的多可以,可以直接省去下面几个步骤.

先决条件:

1.下载Visual Studio 2008安装SP1补丁

下载地址:http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx

[注意]:打了这个补丁后,有很多以前写代码出现的智能感应内容变成英文的了,这里等装好SP1补丁后在从这个地址下载一个还原补丁(一定要要选择下VS90SP1-KB957507-v2-CHS-x86.exe这个文件)http://code.msdn.microsoft.com/KB957507/Release/ProjectReleases.aspx?ReleaseId=1854

2.去google code下载相对应的js文件

3.然后在代码中引入必须带vsdoc的jQuery库(切记)

<script type="text/javascript" src="jquery-1[1].3.2-vsdoc2.js"></script>

现在我们来看看VS08里面的智能感应效果

呵呵!已经出现智能感应效果了.

3.书写第一个jQuery程序

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>表格交替行和光棒效果</title>
    <style type="text/css">
        .odd{ background-color:#fcc;}
        .even{ background-color:#cef;}
        .light{ background-color:#dfc;}
    </style>
    <script language="javascript" type="text/javascript" src="jquery-1[1].3.2-vsdoc2.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $("tr:odd").addClass("odd");
            $("tr:even").addClass("even");
            $("tr:odd").bind("mouseout", function(event) { $(this).addClass("odd"); $(this).removeClass("light"); });
            $("tr:even").bind("mouseout", function(event) { $(this).addClass("even"); $(this).removeClass("light"); });
            $("tr").bind("mouseover", function(event) { $(this).addClass("light"); });
        });  
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table id="tbTest" width="300px" border="1">
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>10</td>
            </tr>
            <tr>
                <td>11</td>
                <td>12</td>
            </tr>
        </table>
    </form>
</body>
</html>

效果如下图:

上面我们就实现了表格交替行和光棒效果5行代码就搞定了,简洁吧

上面运用到了:

(1)元素选择器 $(“tr”)

(2)事件绑定方法 bind()

(3)给元素添加样式 addClass()

在这里我要提醒大家上面我用$取得的结果是一个jQuery对象,当我们想要实际的操纵在页面中找到的原始就可以通过jQuery会非常的简单.这里要注意区别的是jQuery对象与常规的DOM对象是不通的.我们在后面会专门讲到两者的区别,刚入门我觉得没有必要对这2个概念扣的太死.

posted on 2009-05-19 22:39 梦中等待阅读(2307) 评论(26) 收藏举报

刷新页面返回顶部

梦中等待

导航

公告

跟我学jQuery(二) 初识jQuery

1.下载jQuery类库