김갱환
맨땅에 코딩
김갱환
전체 방문자
오늘
어제
  • 분류 전체보기 (239)
    • ⁂ 맨땅에 코딩 (11)
      • : Story (3)
      • : MiniProject 'MyWeb' (1)
      • : Final Project (5)
      • : Josa-Moa 한국어 조사 처리 프로젝트 (1)
    • —————Frontend——————————————.. (0)
    • ⁂ HTML (10)
      • : 기본 익히기 (10)
    • ⁂ CSS (15)
      • : 기본 익히기 (15)
    • ⁂ Java Script (32)
      • : 기본 익히기 (28)
      • : 자바스크립트 라이브러리 (1)
      • : 연습 문제 (3)
    • ⁂ jQuery (11)
      • : 기본 익히기 (11)
    • ⁂ Bootstrap (3)
      • : 기본 익히기 (3)
    • ⁂ TailWind CSS (1)
    • ⁂ AJAX (5)
      • : 기본 익히기 (5)
    • ⁂ Vue.js (3)
      • : 기본 익히기 (3)
    • —————DB : Data Base————————.. (0)
    • ⁂ Oracle DB (27)
      • : 기본 익히기 (24)
      • : 연습 문제 (3)
    • ⁂ MyBatis Framework (15)
      • : 기본 익히기 (15)
    • —————Backend———————————————.. (0)
    • ⁂ Java (62)
      • : 기본 익히기 (42)
      • : JDBC - Java DataBase Conn.. (4)
      • : Crawling (2)
      • : 독학으로 공부하기(과거) (11)
      • : 연습문제 (3)
    • ——————Web————————————————— (0)
    • ⁂ JSP (28)
      • : 기본 익히기 (28)
    • ⁂ Spring FrameWork (15)
      • : Legacy Project (1)
      • : 기본 익히기(Boot 기반) (14)
    • ——————————————————————— (0)
    • ⁂ Error Note (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 코딩 #코딩공부 #프론트앤드 #백앤드 #풀스택개발자
  • 연산자 #기본연산자 #코딩 #자바 #독학 #자바공부 #자바연산자
  • web.xml수정
  • 코딩공부
  • 비트연산자 #코딩공부 #자바공부 #코딩 #자바 #프로그래밍 #개발자
  • HTML공부
  • httperror
  • 프론트앤드
  • 자바
  • ErrorPage
  • 풀스택
  • 자바공부
  • 백앤드
  • 코딩공부 #자바공부
  • 코딩공부 #코딩 #자바 #자바독학 #자바공부 #개발자 #프론트앤드 #백앤드 #풀스택
  • http에러메세지
  • 코딩 #코딩공부 #상수 #리터럴 #형변환 #개발자 #자바 #자바공부 #자바독학
  • 개발자
  • 객체지향프로그래밍
  • 코딩

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
김갱환

맨땅에 코딩

⁂ jQuery/: 기본 익히기

[jQuery] #5 each 반복문

2022. 9. 26. 15:58

1. 제이쿼리의 each 반복문

 

 이번 게시글에서는 제이쿼리에서 자주 쓰이는 each 반복문을 알아보려한다.

 참조 : https://www.w3schools.com/jquery/misc_each.asp

 

jQuery Misc each() Method

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 each 반복문을 연습해보기 위해 버튼과 공간을 만든 뒤 버튼을 누르면 구구단 7단이 출력되도록 하는 버튼을 만들려한다.

 우선 우리가 알고 있는 for문을 사용해서 만들어보려 한다.

 

1) for문으로 만들기

<!DOCTYPE html>  
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>06_each반복문.html</title>
        <!-- jQuery import -->
        <script src="jquery-3.6.1.min.js"></script>
        <style>
            #displayList {
                margin:20px;
                width:400px;
                height:300px;
                background-color: #81d4fa;
                padding: 20px;
                list-style: none;
            }
        </style>
    </head>
    <body>        

        <h3>each반복문</h3>
        <button id="startBtn">7단!</button>
        <ul id="displayList"></ul>

        <script>

            $("#startBtn").click(function(){
                let dan = 7;
                for(i=1; i<9; i++){
                    // $("li")      <body>에 있는 요소들 중에서 <li> 요소에 접근
                    // $("<li>")    <body>에 새로운 <li> 요소를 생성해라

                    $("<li>").text(dan + "*" + i + "=" + (dan*i)).appendTo("#displayList");
                } // for end
            });// click end
            
        </script>

    </body>
</html>

 

 

2) each문으로 만들기

 이번엔 each 반복문을 사용하여 만들어보자.

 each 반복문의 형식은 두 가지가 있는 데 둘 중 어느 것을 사용해도 무방하다.

형식) $.each(배열, function(){})

형식) $(배열).each(function(){})
$("li").each(function(){
    let result=$(this).text();
    alert(result);
}); // each() end

 

 이렇게 코드를 작성하면 each문이 이 버튼이 동작하는 각각의 동작마다의 문자열을 호출하게 된다.

each문은 팝업창을 뜨게 하고 for문은 7단을 출력시킨다.

저작자표시 비영리 동일조건 (새창열림)

'⁂ jQuery > : 기본 익히기' 카테고리의 다른 글

[jQuery] #7 요소 생성(append, prepend)  (0) 2022.09.26
[jQuery] #6 This로 index 확인하기  (0) 2022.09.26
[jQuery] #4 속성 관련 메소드  (0) 2022.09.26
[jQuery] #3 jQuery에서 자주 사용하는 함수 - text(), html(), css() + chaining  (0) 2022.09.26
[jQuery] #2 이벤트(Event) - click으로 연습해보기  (0) 2022.09.26
    '⁂ jQuery/: 기본 익히기' 카테고리의 다른 글
    • [jQuery] #7 요소 생성(append, prepend)
    • [jQuery] #6 This로 index 확인하기
    • [jQuery] #4 속성 관련 메소드
    • [jQuery] #3 jQuery에서 자주 사용하는 함수 - text(), html(), css() + chaining
    김갱환
    김갱환
    코딩의 코자도 모르는 이의 공부 기록장

    티스토리툴바