HRD_훈련/jQuery

[jQuery] 제이쿼리 (34일차)

리드미. 2023. 7. 3. 22:23
728x90
반응형

<오늘의 학습>

1. jQuery 설치

2. jQuery 문법 실습

 

 

 

1. jQuery  설치

▶ jQuery 다운로드

  • Download the compressed, production jQuery 3.7.0 (다른 이름으로 저장하여 사용) : https://jquery.com/download/
  • 파일을 다운받고 
 

Download jQuery | jQuery

link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download

jquery.com

 

 

 

 

2. jQuery 문법 실습

jQuery(function (){}) : 함수

jQuery를 $로 대체하여 사용할 수 있다.

$ is not defined/ jQuery is not defined 오류는 jQuery가 로드되지 않았다는 의미이다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제이쿼리 실습</title>
    <script src="../js/code.jquery.com_jquery-3.7.0.min.js"></script>
    <!-- <script src="https://code.jquery.com_jquery-3.7.0.min.js"></script> -->
</head>
<body>
    <div>
        자바 스크립트의 라이브러리
        <span>제이쿼리</span> 실습입니다.
        <span id="jq">jQuery</span>
    </div>
</body>
</html>
<script>
    $(function (){
        $("div").on("click", function(){
            $("#jq").css("backgroundColor", "#ccc");
            // jQuery("span").css("color", "red");
            // $("span").css("fontSize", "20px");
        })
    })
</script>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제이쿼리 실습2</title>
    <script src="../js/code.jquery.com_jquery-3.7.0.min.js"></script>
</head>
<body>
    <a href="#">링크 없음</a>
    <button>링크 변경</button>
</body>
</html>
<script>
    $ (function(){
        $("button").on("click", function() {
            alert("버튼 클릭");
        })
    })
</script>

 

 

 

$("a[href='#']").attr("href", "https://www.naver.com");

attr() : 속성을 변경한다.

 

 

 

링크 변경됨

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
</head>
<body>
    <ul>
        <li>자바 프로그래밍</li>
        <li>오라클 데이터베이스</li>
        <li>HTML/CSS/JavaScript</li>
        <li>jquery</li>
    </ul>
    <div id="txt"></div>
    <button>클릭</button>
</body>
</html>
<script>
    $(function (){
        var list = $("li");
        $("button").on("click", function(){
            $("li:even").css("color", "red");
        })
    })
</script>

 

인덱스는 0부터 시작됨.

 

 

            $("li:eq(1)").css("color", "red");

인덱스로 접근

 

 

인덱스 1보다 큰 인덱스 색상 변경

            $("li:gt(1)").css("color", "red");

 

인덱스 1보다 작은 인덱스 색상 변경

            $("li:lt(1)").css("color", "red");

 

 

첫 번째와 마지막 인덱스 색상 변경

            $("li:first").css("color", "red");
            $("li:last").css("color", "red");

 

 

 

 

 

            $("li:has(span)").css("color", "red");

 

 

 

자식 요소가 없는 li에 텍스트 넣기

$("li:empty").text("JSP");

 

 

 

            $("li:parent").css("color", "red");

 

 

특정 문자를 찾는다. 대소문자를 구분한다.

            $("li:contains(r)").css("color", "red");

 

 

 

 

제이쿼리는 getter, setter 메소드가 동일한 이름을 가진다.

text() : 태그를 포함하지 않는다.

html() : 태그를 포함한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>체크박스</title>
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
</head>
<body>
    <input type="checkbox" value="java"><span>자바 프로그래밍</span><br>
    <input type="checkbox" value="oracle"><span>오라클 데이터베이스</span><br>
    <input type="checkbox" value="html" checked><span>HTML/CSS/JAVASCRIPT</span><br>
    <input type="checkbox" value="jq" checked><span>JQUERY</span><br>
    <button>클릭</button>
</body>
</html>
<script>
    $(function(){
        $("button").on("click", function(){
            $(":checked").next().css("color", "blue"); // 체크된 항목 순차적으로 접근 가능
        })
    })
</script>

 

 

            console.log($(":checked").next().text());

 

 

 

            $(":checked").next().text("선택했다");

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
</head>
<body>
    <div><span>테스트 텍스트</span></div>
    <button>클릭</button>
</body>
</html>
<script>
    $(function(){
        $("button").on("click", function(){
            $("div").css("color", "red");
            $("div").html("<p>"+$("div").text()+"</p>");
            // $("div").html("<p style='color:red;'>"+$("div").text()+"</p>");
            // alert($("div").text()); //테스트 텍스트
            // alert($("div").html()); //<span>테스트 텍스트</span>
        })
    })
</script>

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
</head>
<body>
    <div id="java1" style="background-color: #eee;">자바 프로그래밍</div>
    <div id="java2" style="background-color: tomato;"></div>
    <button>변경</button>
</body>
</html>
<script>
    $(function(){
        $("button").on("click", function(){
            $("#java2").text($("#java1").text());
            // var txt = $("#java1").text();    //getter
            // $("#java2").text(txt);   //setter
            //getter&setter 메소드 명이 동일하다.
        })
    })
</script>

 

 

            $("#java2").css("fontSize", "50px");

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
  <style>
    table {				
				border:1px solid black;  
        border-collapse: collapse;
			}
			td, th {
				border:1px solid black;  
				padding:10px;  
				text-align:center;  
        
      }
      th {
        color : red;
      }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
        <th>c</t>
        <th>d</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>   
      <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
      </tr>
    </tbody>        
  </table>
  <button>클릭</button>
</body>
</html>
<script>
    //홀수번째 행 백그라운드 #eee
    //짝수번째 행 백그라운드 #ccc
    //버튼 클릭시 실행

    //1
    $(function(){
        $("button").on("click", function(){
            $("tr:odd").css("backgroundColor", "lightpink");
            $("tr:even").css("backgroundColor", "lightblue");
        }) 
    })

    //2
    function change(){
        var list = document.querySelectorAll("tr");
        for (var i=0;i<list.length;i++){
            if(i%2==0){
                list[i].style.backgroundColor = "lightpink";
            }
            else{
                list[i].style.backgroundColor = "lightblue";
            }
        }
    }
</script>

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
    <title>Document</title>
</head>
<body>
    <ul id="item">
        <li>자바 프로그래밍</li>
        <li>오라클 데이터베이스</li>
        <li>HTML/CSS/JAVASCRIPT</li>
        <li>JQUERY</li>
    </ul>
    <button>클릭</button>
</body>
</html>
<script>
    $(function(){
        $("button").on("click", function(){
            $("#item").find("li").eq(1).css("color", "red")
                                        .end()
                                        .last().css("color", "blue")
                                        .end()
                                        .eq(0).css("color", "darkgreen"); //메소드 체인
            // end() : 이전 요소로 돌아간다. (위 예제에서는 eq 자리를 찾는 부분으로 돌아간다.)

            // var item = $("#item").find("li");
            // var obj = item.eq(1);

            //$("li");
        })
    })
</script>

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button id="get">getter</button>
    <button id="set">setter</button>
</body>
</html>
<script>
    $(function(){
        $("#get").on("click", function(){
            console.log("너비:",$(".box").width());
            console.log("높이:",$(".box").height());
        })

        $("#set").on("click", function(){
            alert();
        })
    })
</script>

 

 

 

높이와 넓이 반씩 줄이기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
    <title>Document</title>
    <style>
        .t {
            width: 200px;
            height: 200px;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="t">
        <div class="box"></div>
    </div>
    <button id="get">getter</button>
    <button id="set">setter</button>
    <div id="txt"></div>
</body>
</html>
<script>
    $(function(){
        $("#get").on("click", function(){
            console.log("너비:",$(".box").width());
            console.log("높이:",$(".box").height());
            $("#txt").html("너비 "+$(".box").width()+"px, 높이 "+$(".box").height()+"px");
        })

        $("#set").on("click", function(){
            width = $(".box").width();
            height = $(".box").height();
            $(".box").width(width/2).height(height/2);
            $("#txt").html("너비 "+$(".box").width()+"px, 높이 "+$(".box").height()+"px");
        })
    })
</script>

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
    <title>Document</title>
</head>
<body>
    <img src="../images/cup-1.png" alt="빨간색컵"><br>
    <div>
        <button id="get">getter</button>
        <button id="set">setter</button>
        <span id="txt"></span>
    </div>
</body>
</html>
<script>
    $(function(){
        $("#get").on("click", function(){
            // $("img").attr("src"); // 매개 변수가 있음에도 getter 메소드이다. (매개변수가 없다고 무조건 getter 메소드인 것은 아니다.)
            $("txt").html($("img").attr("src"));
        });

        $("#set").on("click", function(){
            $("img").attr("src", "../images/cup-2.png")
        });
    })
</script>

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
    <title>Document</title>
</head>
<body>
    <ul id="item">
        <li>자바 프로그래밍</li>
        <li>오라클 데이터베이스</li>
        <li>HTML/CSS/JavaScript</li>
        <li>jquery</li>
        <!-- <li>JSP</li> -->
    </ul>
    <button id="btn">클릭</button>
</body>
</html>
<script>
    $(function(){
        $("#btn").on("click", function(){
            $("#item").append("<li>JSP</li>");
        });
    })
</script>

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
    <title>Document</title>
</head>
<body>
    <ul id="item">
        <li>자바 프로그래밍</li>
        <li>오라클 데이터베이스</li>
        <li>HTML/CSS/JavaScript</li>
        <li>jquery</li>
        <!-- <li>JSP</li> -->
    </ul>
    <button id="btn">과목 추가</button>
</body>
</html>
<script>
    $(function(){
        $("#btn").on("click", function(){
            var str = prompt("과목을 입력해주세요.\n(10글자 이하)");
            $("#item").append("<li>"+str+"</li>");
        });
    })
</script>

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
    <title>Document</title>
</head>
<body>
    <ul id="item">
        <li>자바 프로그래밍</li>
        <li>오라클 데이터베이스</li>
        <li>HTML/CSS/JavaScript</li>
        <li>jquery</li>
    </ul>
    <button id="btn">글씨 앞에 추가</button>
</body>
</html>
<script>
    $(function(){
        $("#btn").on("click", function(){
            $("li").prepend("<span style='color:red'>NEW! </span>");
        });
    })
</script>

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
    <title>Document</title>
</head>
<body>
    <ul id="item">
        <li>자바 프로그래밍</li>
        <li id="oracle">오라클 데이터베이스</li>
        <li>HTML/CSS/JavaScript</li>
        <li>jquery</li>
    </ul>
    <button id="btn">과목 추가</button>
</body>
</html>
<script>
    $(function(){
        $("#btn").on("click", function(){
           $("#oracle").appendTo("#item");
        });
    })
</script>

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
    <title>Document</title>
</head>
<body>
    <ul id="item">
        <li>자바 프로그래밍</li>
        <li id="oracle">오라클 데이터베이스</li>
        <li id="html">HTML/CSS/JavaScript</li>
        <li>jquery</li>
    </ul>
    <button id="btn">과목 추가</button>
</body>
</html>
<script>
    $(function(){
        $("#btn").on("click", function(){
            $("<span style='color:red;'>NEW! </span>").prependTo("#oracle");
            $("<span style='color:red;'>NEW! </span>").prependTo("#html");
            
            // $("#item").find("li").eq(1).prepend("<span style='color:red'>NEW! </span>")
            //                         .end()
            //                         .eq(2).prepend("<span style='color:red'>NEW! </span>");
        });
    })
</script>

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="code.jquery.com_jquery-3.7.0.min.js"></script>
  <style>
    table {				
				border:1px solid black;  
        border-collapse: collapse;
			}
			td, th {
				border:1px solid black;  
				padding:10px;  
				text-align:center;  
        
      }
      th {
        color : red;
      }
  </style>
</head>
<body>
  <table id="tab">
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
        <th>c</t>
        <th>d</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>   
      <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
      </tr>
    </tbody>        
  </table>
  <button id="btn1">javascript click</button>
  <button id="btn2">jquery click</button>
  <button id="add">추가</button>
</body>
</html>
<script>
    $(function(){
        $("#add").on("click", function(){
            var num = parseInt($("td:last").text());
            $("#tab").append("<tr><td>"+(++num)+"</td><td>"+(++num)+"</td><td>"+(++num)+"</td><td>"+(++num)+"</td></tr>");

        });
    })

</script>

 

 

 

 

 

 

 

2023년 7월 3일 월요일

<34일차 수업>

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)