• 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

  • 相关阅读:
    jconsole远程连接监控tomcat
    Nginx监控配置
    Nginx安装+2tomcat配置
    Flexbox布局模式的理解
    Web性能优化:图片优化
    大公司里怎样开发和部署前端代码?
    原生js下拉刷新
    全国三级城市联动 js版
    js获取智能机浏览器版本信息
    JS年月日三级联动下拉框日期选择代码
  • 原文地址:https://www.cnblogs.com/muer/p/1714597.html
Copyright © 2020-2023  润新知