zoukankan      html  css  js  c++  java
  • JQuery基础之(二)第一个JQuery程序

    一、    下载JQuery类库

    下载地址:http://code.google.com/p/jqueryjs/downloads/list

    上面的地址是总下载列表, 里面有很多版本和类型的jQuery库, 主要分为如下几类:

    1)       min: 压缩后的jQuery类库,  在正式环境上使用.如:jquery-1.3.2.min.js

    2)       vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如:jquery-1.3.2-vsdoc2.js

    3)       release包: 里面有没有压缩的jquery代码, 以及文档和示例程序. 如:jquery-1.3.2-release.zip

    现在的最新版本是1.3.2,那就先把1.2.3版本的文件都下下来吧!

    二、    第一个JQuery程序

    1)       新建一个页面

    2)       并在该页面中引用下载到的jquery-1.3.2-vsdoc2.js文件

    3)       代码如下:

    <head runat="server">

        <title>第一个JQuery程序</title>

        <script type="text/javascript" src="../Js/jquery-1.3.2-vsdoc2.js"></script>

    </head>

    <body>

        <form id="form1" runat="server">

        <div>

            <div id="divMsg">hello world!</div>

            <asp:Button ID="btnShow" runat="server" Text="显示" />

            <asp:Button ID="btnHide" runat="server" Text="隐藏" />

            <asp:Button ID="btnChange" runat="server" Text="改变divMsg中的内容" />

            <script type="text/javascript">

                $("#btnShow").bind("click", function(event){$("#divMsg").show(); event.preventDefault();});

                $("#btnHide").bind("click", function(event){$("#divMsg").hide(); event.preventDefault();});

                $("#btnChange").bind("click", function(event){$("#divMsg").html("我改变了divMsg的内容"); event.preventDefault();});

            </script>

        </div>

        </form>

    </body>

    4)       页面上有三个按钮, 分别用来控制Hello World的显示,隐藏和修改其内容,此示例使用了:

    (1) jQuery的Id选择器: $("#btnShow")

    (2) 事件绑定函数 bind()

    (3) 显示和隐藏函数. show()和hide()

    (4) 修改元素内部html的函数html()

    (5) .preventDefault()事件,阻止默认的程序执行

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/soldierluo/archive/2009/12/13/4954856.aspx

  • 相关阅读:
    【Java】String和Date、Timestamp之间的转换
    pl/sql改为汉语窗口的办法
    MySql生成随机数
    ETL概念
    oracle数据库中序列使用讲解
    oracle中的merge into用法解析
    mysql实现自动更新时间戳
    3.6:Linux touch命令:修改文件的时间戳
    3.5:Linux rmdir命令:删除空目录
    3.4:Linux mkdir命令:创建目录(文件夹)
  • 原文地址:https://www.cnblogs.com/muer/p/1714597.html
Copyright © 2011-2022 走看看