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?

原文地址:https://www.cnblogs.com/jicheng1014/p/1363737.html