沉寂了两三个月看英语过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://images.cnblogs.com/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?