这篇文章主要介绍了jquery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下
) l! u: P5 U' D5 N# d) ~5 w: S( a第一种方式:8 Q" n) n E( y" P7 q7 }
$(document).ready(function(){
2 n& J) A3 J4 b! t \$(#clickme).click(function(){
: V" s L5 o* w$ z1 s: d1 galert(hello world click);2 ~' p% k! r% T( {
});
( x6 v! y+ ~; E8 |8 n( s( f2 ?5 w6 w第二种方式:* [0 `4 B5 J* C$ H1 N
?
( \$ g1 y J$ f, ` |. J1
5 F9 X) H1 Z) x% {25 c4 I) e4 G1 y# |& x5 {, k
3
- K8 W1 n' |! z( p4 h$('#clickmebind').bind(click, function(){* k2 R, X) t+ k# {" p
alert(hello world bind);
; s; [& M- {6 p3 M* y});
; |; j, j' ^3 [! p! [# f& k7 U第三种方式:9 O4 G# e4 Q) ^5 v- D" } c
$('#clickmeon').on('click', function(){
/ i2 n1 z. b5 _: e; q4 \! B% p! qalert(hello world on);
/ s7 r$ W' t2 g4 r9 h$ e! S8 Z});4 v% O4 t) I% M3 ~9 T8 @
});- ~0 l" `! B0 s% T4 ~2 |4 z
注意:第三种方式只适用于jquery 1.7以上的版本
* q$ V/ b7 ]* [0 q5 Q/ t- \源码如下:
8 V+ R1 s7 Q' ?<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >0 o+ Y( y8 }, h* l. p- ]9 d
<html xmlns=>! `4 M# T8 t1 X2 R6 H
<head>
9 s) X9 E. b1 X. t t: L3 J<meta http-equiv=content-type content=text/html; charset=gb2312 />
' q. m2 z! Q& K5 {0 t6 K, F' x/ E<script type=text/javascript src=js/jquery-1.6.1.min.js></script>
1 _% z+ c1 ]7 E! h6 s4 ?<script type=text/javascript src=js/jquery.validate.js></script>
i) p* N7 d, |* p) P<script type=text/javascript src=js/jquery.metadata.js></script>3 n% `/ i: A8 W3 p
<script type=text/javascript src=js/messages_zh.js></script>
M7 G$ D: Z! |( u/ x5 u$ g<style type=text/css> B8 b9 @' t% \; D' l- S7 G
#frm label.error {
- M. v( ~1 @) @: P: t+ f2 e1 `3 m: H Acolor: red;
z) Y( g$ L" |* K}0 P7 t3 r; L5 X) N
</style>
0 N$ |( H- D# E1 e</head>
! n8 ~( B6 U: i' {8 R8 ?% P" O<script type=text/javascript>( l) C9 L' c/ _5 B8 P) J% c
$(document).ready(function(){3 i/ W9 c/ r$ k! z X
$(#clickme).click(function(){
6 ^) X( ]! [) p1 q5 @2 @; w2 l Halert(hello world click);
1 ^7 `$ @8 u7 ]/ L# N' P});
6 o* k$ G" j1 Y0 h) Q7 h$('#clickmebind').bind(click, function(){" u: n! E; @( ~
alert(hello world bind);
4 S0 p2 f f, ], M});
( C( W6 f! K6 w$ ^( }$ V$('#clickmeon').on('click', function(){; ^ F3 ^# Y. i
alert(hello world on);
$ C$ {2 e9 j/ r' e5 V9 |7 `});
6 g, B* d1 x2 e$ X});9 E, m/ V" n9 P0 W8 U% X( Z ?
</script>" R" q; d8 v1 f
<body>3 C5 A3 v& r% h
<label></label>( D: U( |' {# x% l
<form id=frm name=frm method=post action=><label>用 户 名:
# J9 h, s; A t. `<input type=text name=username id=username />
3 W6 G( A2 g1 N/ C6 @! b6 z</label>
& j0 d" g/ A8 N$ N- J6 `5 Z<p>
9 C, ?! X; e$ B6 `7 f( p) E9 G<label>邮 编 :<label></label></label>, M* o" R8 d* {7 {& z
<label>, b+ N& `( R4 ~- U$ o
<input type=text name=postcode id=postcode />
& F5 r0 z5 s, `/ v4 x+ h# |<br />
" D3 V- k2 W) R4 _* e( }</label>6 g9 A) O: {# a5 F
</p>; \& X: b+ R& f: ]( V# ]# v
<p><label>数 字 :
; g3 a3 w$ Y- o) M; m2 x) l<input type=text name=number id=number />; `( y$ s# m, c! L T5 C* \
</label>( t6 ?4 |( }0 x3 f% k8 P
<br /><label>身份证号:
* Z! p( k$ u9 {3 x2 e# l<input type=text name=identifier id=identifier />
8 ?8 G9 J6 z. `3 R</label>
- D- F" X, B6 U8 T# P<label>
, g' s) ? ~2 G( e8 r+ @! w _<input type=button name=clickme id=clickme value=click me />/ U# F+ ? z1 U4 ~) W3 o2 ]8 P9 ]
</label>
3 c2 z; W7 ~; {) n) q$ Y1 w, U<label>+ W/ U4 Q# T, e7 p& _5 Y; D
<input type=button name=clickmebind id=clickmebind value=clickme_bind />' D$ h6 @* w1 s4 N* Y! j1 q
</label>! G5 ^1 T' Y. N- H
<label>
9 [' v% B+ d. [5 C<input type=button name=clickmeon id=clickmeon value=clickme_on />+ h9 \ {8 T& y) x e. ^: Z( M5 @
</label>
, t% d1 M! ?" e* h3 G# L</p>
0 I1 g2 L8 c/ U* i0 c</form>
+ z5 O" ]9 v2 P& l% H. _8 k</body>
( O; Y7 |! G7 m1 i% a$ S" D0 A" K: E) ~
更多网页制作信息请查看: 网页制作 |
|