zoukankan      html  css  js  c++  java
  • jquery 初探

    沉寂了两三个月看英语过cet4(我知道很窝囊。。。)

    终于写点略微有点技术性的东西了

    ok,我爸常常教育我,人最应该做的,是最喜欢做的事情和最不喜欢做的事情

    我是javascript盲,就拿这个开始吧(呵呵,js高手们,忽略这篇文章吧)

     最近 jquery 已经被微软盯上了,传说VS2008 SP1 直接就加入了Jquery 的智能感知?

    恩,就拿jquery练手了。

    额,需要的朋友可以点击/Files/jicheng1014/jquery_ApI.rar进行下载^_^

    ok   先拿最简单的说了,

    一般我们在填写单据的时候   有些textbox 是不能为空的 

    用jquery 的话就可以剩下很长的getElementByID//呵呵  我拼不来  我javascript 盲

    但是如果用jquery 至少,至少javascript代码至少干净一点,

    ok

    例如吧

    有个简单的页面

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Client_Add.aspx.cs" Inherits="ClientAdd"  Theme="webContext"%>

    <!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>
        
    <link type="text/css" rel="stylesheet" href="http://www.cnblogs.com/images/css.css" /> 
        
    <style type="text/css">
        .warning
        
    {
            color
    :Red;    
        
    }
        
    </style>
        
    <script type="text/javascript" src="http://www.cnblogs.com/Lib/jquery-1.2.6.min.js">
        
    </script>
        
        
    <script type="text/javascript">
        
    function check()
        {
            
    var cansumbit = false;
            
    var number = $("#txtImprest").val();
            
    if(isNaN(number))
            {

                $(
    "#checkImrest").show("slow").addClass("warning");
            }
            
    else
            {
                $(
    "#checkImrest").hide();
                cansumbit 
    = true;
            }
            
    return cansumbit;
        }
        
    </script>
        
    </head>
    <body>
        
    <form id="form1" runat="server">
        
    <div id="content_top">
            
    <asp:Button ID="BtnBack" runat="server" Text="返  回" CssClass="button" onclick="BtnBack_Click" /> 
        
    </div>
        
    <div id="content">
        系统管理-》客户管理-》客户添加
    <br />
        
    <table class="table1" width="400" >
        
    <tr>
        
    <td width="80" align="right" class="th2" style="height: 22px">
            客户姓名
        
    </td>
        
    <td align="left" class="td1" style="height: 22px">
            
    <asp:TextBox id="txtClientName" runat="server" Width="280px" CssClass="inputtxt"></asp:TextBox><span class="ShowIn">*</span>
        
    </td></tr>
        
    <tr>
        
    <td align="right" class="th2">
            客户类别
        
    </td>
        
    <td align="left" class="td1">
            
    <asp:DropDownList ID="drop_ClientType" runat="server" CssClass="combox"></asp:DropDownList>
        
    </td></tr>
        
    <tr>
        
    <td align="right" class="th2">
            联系电话
        
    </td>
        
    <td align="left" class="td1">
            
    <asp:TextBox id="txtPhone" runat="server" Width="280px" CssClass="inputtxt"></asp:TextBox>
        
    </td></tr>
        
    <tr>
        
    <td align="right" class="th2">
            传真
        
    </td>
        
    <td align="left" class="td1">
            
    <asp:TextBox id="txtFax" runat="server" Width="280px" CssClass="inputtxt"></asp:TextBox>
        
    </td></tr>
        
    <tr>
        
    <td align="right" class="th2" style="height: 22px">
            电子邮件
        
    </td>
        
    <td align="left" class="td1" style="height: 22px">
            
    <asp:TextBox id="txtEmail" runat="server" Width="280px" CssClass="inputtxt"></asp:TextBox>
        
    </td></tr><%--
        
    <tr>
        
    <td align="right" class="th2" style="height: 22px">
            加盟费
        
    </td>
        
    <td align="left" class="td1" style="height: 22px">
            
    <asp:TextBox id="txtJoinPrice" runat="server" Width="280px" CssClass="inputtxt" Text="0"></asp:TextBox>
        
    </td></tr>--%>
        
    <tr>
        
    <td align="right" class="th2">
            预付款
        
    </td>
        
    <td align="left" class="td1">
            
    <asp:TextBox id="txtImprest" runat="server" Width="280px" CssClass="inputtxt" onkeypress="$('#checkImrest').hide()" Text="0"></asp:TextBox>
            
    <span id="checkImrest" style="display:none">只能添加数字</span>
        
    </td></tr>
        
    <tr>
        
    <td align="right" class="th2" style="height: 22px">
            备注
        
    </td>
        
    <td align="left" class="td1" style="height: 22px">
            
    <asp:TextBox id="txtRemark" runat="server" Width="280px" CssClass="inputtxt"></asp:TextBox>
        
    </td></tr>
        
    <tr>
        
    <td height="25" colspan="2" class="td1"><div align="center">
            
    <asp:Button ID="btnAdd" runat="server" CssClass="button" Text="· 保  存 ·"  OnClientClick ="return check()" OnClick="btnAdd_Click" ></asp:Button>
            
    <asp:Button ID="BtnCancel" CssClass="button" runat="server" Text="· 重  填 ·" OnClick="BtnCancel_Click" ></asp:Button>
        
    </div></td></tr>
    </table>
        
    <div class="ShowIn">注:*所在项为必须输入项。</div>
        
    <br />
        
    </form>
    </body>
    </html>

    ok,可以看到,

     我们在ID为btnAdd的button 上设置了一个OnClientClick,当验证失败之后,我们给OnClientClick返回一个False,

    这样,他就不会向服务器提交Click 事件。

    之后,OnClientClick 事件启动了check() 方法。

    和javascript 一样,当然,更简洁的,我们使用“$('#id名称')”定位一个element ,额,这个语句返回的是个jquery 对象

    如果说各位大侠还是喜欢单纯的操作element ,那可以写成这样:

    var tmp = $('#ID名称').get(0)    

    // get()是返回一个数组,如果里面有0 就是返回数组的第0个 ^_^

    当然为了练手JQuery    直接折腾jquery对象

    通过 API  

    知道获取input (textbox 在服务器中会转化成input 返回给客户端)的value 语句也很简单

    你可以这么写   var tmp = $('#id名称').val();   就这样 

    不管怎样,至少还可以少敲几个字母。。。。。干净。。。。忘记说  jquery.js 本身很小,才50k左右

    接着,是jquery 的自带的effect

    本段代码用的是    $("#checkImrest").show("slow")   这是个不错的效果,在jquery 首页就有推广 ^_^

    之后还有个有意思的是   很多jquery函数返回的就是这个调用函数的jquery,这样,就可以写出这种级联方式的代码

    $("#checkImrest").slideDown("slow").addClass("warning");

    意思是checkImrest 这个element 动态的慢慢的显示出来,同时将其class 赋值为"warning"  或者说   这个功能  类似linux 的pipe?

  • 相关阅读:
    MyBatis总结(一)
    MyBatis简介
    数据持久化与ORM
    主流框架介绍
    JSP数据交互(一)
    tomcat端口被占用
    动态网页开发基础
    jQuery内容
    正则表达式
    初始Mybatis
  • 原文地址:https://www.cnblogs.com/jicheng1014/p/1363737.html
Copyright © 2011-2022 走看看