[jQuery] .click 함수 사용 (JavaScript onclick()와 차이점)

2021. 6. 10. 20:32·프로그래밍 언어/jQuery
목차
  1. 예제 코드
  2. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="./jquery/jquery.min.js"></script> </head> <body> <p id='demo'>button 구현 차이점</p> <button type="button" onclick="func()">Java Script 버튼</button> <button type="button" id="btn">JQuery 버튼</button> <script type="text/javascript"> //JavaScript function func() { alert('JavaScript button click'); } //JQuery $(document).ready(function () { //버튼의 경우 ready 안해줘도 가능하다. /* $("button").click(function name() { //button 태그 다 실행 alert("jQuery 버튼 클릭") }); */ //방법1 /*$("#btn").click(function () { alert('id=btn click'); });*/ //방법2 $("#btn").on("click", function () { alert("jQuery button click"); }); //방법2의 문법과 동일한 문법.. 풀어서 작성 /* $("#btn").click(btnProc); function btnProc() { alert('btnProc 버튼 클릭'); } */ }); </script> </body> </html>
  3. 결과
  4. button 구현 차이점 Java Script 버튼 JQuery 버튼 //JavaScript function func() { alert('JavaScript button click'); } //JQuery $(document).ready(function () { //버튼의 경우 ready 안해줘도 가능하다. /* $("button").click(function name() { //button 태그 다 실행 alert("jQuery 버튼 클릭") }); */ //방법1 /*$("#btn").click(function () { alert('id=btn click'); });*/ //방법2 $("#btn").on("click", function () { alert("jQuery button click"); }); //방법2의 문법과 동일한 문법.. 풀어서 작성 /* $("#btn").click(btnProc); function btnProc() { alert('btnProc 버튼 클릭'); } */ });
반응형

예제 코드

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="./jquery/jquery.min.js"></script> </head> <body> <p id='demo'>button 구현 차이점</p> <button type="button" onclick="func()">Java Script 버튼</button> <button type="button" id="btn">JQuery 버튼</button> <script type="text/javascript"> //JavaScript function func() { alert('JavaScript button click'); } //JQuery $(document).ready(function () { //버튼의 경우 ready 안해줘도 가능하다. /* $("button").click(function name() { //button 태그 다 실행 alert("jQuery 버튼 클릭") }); */ //방법1 /*$("#btn").click(function () { alert('id=btn click'); });*/ //방법2 $("#btn").on("click", function () { alert("jQuery button click"); }); //방법2의 문법과 동일한 문법.. 풀어서 작성 /* $("#btn").click(btnProc); function btnProc() { alert('btnProc 버튼 클릭'); } */ }); </script> </body> </html>

결과

button 구현 차이점 Java Script 버튼 JQuery 버튼 //JavaScript function func() { alert('JavaScript button click'); } //JQuery $(document).ready(function () { //버튼의 경우 ready 안해줘도 가능하다. /* $("button").click(function name() { //button 태그 다 실행 alert("jQuery 버튼 클릭") }); */ //방법1 /*$("#btn").click(function () { alert('id=btn click'); });*/ //방법2 $("#btn").on("click", function () { alert("jQuery button click"); }); //방법2의 문법과 동일한 문법.. 풀어서 작성 /* $("#btn").click(btnProc); function btnProc() { alert('btnProc 버튼 클릭'); } */ });

반응형
저작자표시 (새창열림)

'프로그래밍 언어 > jQuery' 카테고리의 다른 글

[jQuery] 문서 객체 메소드 정의 및 예제코드  (0) 2021.06.10
[jQuery] 간단한 예제를 통해 getter, setter 이해하기  (0) 2021.06.10
[jQuery] jQuery란 무엇일까? ( jQuery사용방법, JavaScript 와 jQuery 차이점 )  (0) 2021.06.10
  1. 예제 코드
  2. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="./jquery/jquery.min.js"></script> </head> <body> <p id='demo'>button 구현 차이점</p> <button type="button" onclick="func()">Java Script 버튼</button> <button type="button" id="btn">JQuery 버튼</button> <script type="text/javascript"> //JavaScript function func() { alert('JavaScript button click'); } //JQuery $(document).ready(function () { //버튼의 경우 ready 안해줘도 가능하다. /* $("button").click(function name() { //button 태그 다 실행 alert("jQuery 버튼 클릭") }); */ //방법1 /*$("#btn").click(function () { alert('id=btn click'); });*/ //방법2 $("#btn").on("click", function () { alert("jQuery button click"); }); //방법2의 문법과 동일한 문법.. 풀어서 작성 /* $("#btn").click(btnProc); function btnProc() { alert('btnProc 버튼 클릭'); } */ }); </script> </body> </html>
  3. 결과
  4. button 구현 차이점 Java Script 버튼 JQuery 버튼 //JavaScript function func() { alert('JavaScript button click'); } //JQuery $(document).ready(function () { //버튼의 경우 ready 안해줘도 가능하다. /* $("button").click(function name() { //button 태그 다 실행 alert("jQuery 버튼 클릭") }); */ //방법1 /*$("#btn").click(function () { alert('id=btn click'); });*/ //방법2 $("#btn").on("click", function () { alert("jQuery button click"); }); //방법2의 문법과 동일한 문법.. 풀어서 작성 /* $("#btn").click(btnProc); function btnProc() { alert('btnProc 버튼 클릭'); } */ });
'프로그래밍 언어/jQuery' 카테고리의 다른 글
  • [jQuery] 문서 객체 메소드 정의 및 예제코드
  • [jQuery] 간단한 예제를 통해 getter, setter 이해하기
  • [jQuery] jQuery란 무엇일까? ( jQuery사용방법, JavaScript 와 jQuery 차이점 )
:j
:j
ddongjunn@gmail.com
dev.jddongjunn@gmail.com
  • :j
    dev.j
    :j
  • 전체
    오늘
    어제
    • :j
      • 프로그래밍 언어
        • Java
        • html
        • JavaScript
        • XML
        • JSON
        • CSS
        • jQuery
        • Web
        • k8s
        • JPA
      • 프레임워크
        • Spring
      • 코딩 테스트
        • Java
      • 네트워크
        • CCNA
      • 데이터베이스
        • Mssql
        • Oracle
      • 회고
      • :j story
      • CS
  • 블로그 메뉴

    • 홈
    • 태그
    • github
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    <br>
    항해플러스백앤드
    class
    id
    MSSQL
    오버로딩
    오버라이딩
    group by
    항해솔직후기
    지역변수
    멤버변수
    Queue
    다형성
    appendChild
    항해플러스백엔드
    HAVING
    항해99
    항해백앤드
    Name
    항해플러스
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
:j
[jQuery] .click 함수 사용 (JavaScript onclick()와 차이점)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.