jquery 初探
沉寂了两三个月看英语过cet4(我知道很窝囊。。。)
终于写点略微有点技术性的东西了
ok,我爸常常教育我,人最应该做的,是最喜欢做的事情和最不喜欢做的事情
我是javascript盲,就拿这个开始吧(呵呵,js高手们,忽略这篇文章吧)
最近 jquery 已经被微软盯上了,传说VS2008 SP1 直接就加入了Jquery 的智能感知?
恩,就拿jquery练手了。
额,需要的朋友可以点击/Files/jicheng1014/jquery_ApI.rar进行下载^_^
ok 先拿最简单的说了,
一般我们在填写单据的时候 有些textbox 是不能为空的
用jquery 的话就可以剩下很长的getElementByID//呵呵 我拼不来 我javascript 盲
但是如果用jquery 至少,至少javascript代码至少干净一点,
ok
例如吧
有个简单的页面
<!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?