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/archive/2008/12/27/1363737.html