21.12.23

binary·2021년 12월 23일

jquery 일팔공캠프

일팔공

목록 보기

9/20

jquery 라이브러리

jquery 라이브러리 설정

나는 아래 링크에서 3.x snippet을 복사하여 사용했다.

https://developers.google.com/speed/libraries#jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jquery 라이브러리 형태

$(선택자).메소드(매개변수, 매개변수)

<!-- jquery include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    alert("test");
  });
</script>

문서 객체 선택

<!-- jquery include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
  $("#title").css("background-color", "pink");
  $("h4").css("color", "gray");
  $("h4").css("background-color", "powderblue");
  $(".header").css("background-color", "blue");
  });
</script>

<h3 id="title">jquery 사용으로 문서 객체를 선택</h3>  <!-- ""background-color", "pink" -->
<hr />
<h4 class="header">Header</h4> <!-- "background-color", "blue", "color", "gray" -->
<h4>Header</h4> <!-- "background-color", "powderblue", "color", "gray" -->
<h4>Header</h4> <!-- "background-color", "powderblue", "color", "gray" -->

| 실행화면

속성 조작

attr() 메소드

매개 변수를 넣는 방법에 따라 속성을 지정하거나 추출할 수 있다.

속성 추출

<!-- jquery include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    const src = $('script').attr('src'); // 속성 추출
    
    alert(src); // https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js 이 출력된다.
  });
</script>

속성 지정

메소드의 매개 변수에 객체를 넣어 속성을 조작하는 방법

<!-- jquery include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  // img 태그의 속성 지정
    $('img').attr('src', "img/apple.png");
  });
</script>

<img src="img/banana.png">

메소드의 매개 변수에 객체를 넣어 속성을 조작하는 방법

<!-- jquery include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  // img 태그의 속성 지정
    $('img').attr({
    src: "img/apple.png",
    alt: "사과 사진",
    width: 300,
    });
  });
</script>

<img src="img/banana.png" alt="바나나 사진">

스타일 조작

css() 메소드
스타일을 조작할 수 있다.

속성 값을 입력해 속성 지정

<!-- jquery include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $(".box").css("float", "left");
    $(".box").css("margin", 10);
    $(".box").css("width", 200);
    $(".box").css("height", 200);
    $(".box").css("backgroundColor", "orange");
  });
</script>
<div class="box"><div>
<div class="box"><div>
<div class="box"><div>
<div class="box"><div>

객체를 입력해 속성 지정

<!-- jquery include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $(".box").css({
      float: "letf",
      margin: 10,
      width: 200,
      height: 200,
      backgroundColor: "orange",
    })
  });
</script>
<div class="box"><div>
<div class="box"><div>
<div class="box"><div>
<div class="box"><div>

함수를 입력해 속성 지정

<!-- jquery include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    // 문서(document)의 body 속성(attribute)을 지우면, 문서의 전체 내용을 지울 수 있습니다.
    let output = "<div class='box'></div>";
      for (let i = 0; i < 256; i++) {
        output += "<div class='box'></div>";
      }

    document.body.innerHTML = output;

   $("body").css({
     margin: 0,
   });

    $(".box").css({
      height: 2,
      backgroundColor: function (i) {
        return "rgb(" + i + ", " + i + ", " + i + ")";
      },
    });
  });
</script>
<div class="box"><div>

| 실행화면

글자 조작

html()
문서 객체 내부의 HTML 태그 조작

text()
문서 객체 내부의 글자 조작

<!-- jquery include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    // 문서 객체 내부의 글자 조작
    $("h1:nth-child(1)").text("<a href='#'>text()</a>");

    // 문서 객체 내부의 html 태그 조작
    $("h1:nth-child(2)").html("<a href='#'>html()</a>");
  });
</script>
<h1>Header1</h1>
<h1>Header2</h1>

| 실행화면

text() 메소드로 header라는 글자를 <a href='#'>text()</a> 로 변경했고,
html() 메소드로 <h1> 태그를 <a> 태그로 변경했다.

클래스 조작

한 태그가 여러 개의 클래스 이름을 가질 수 있는 특징을 이용하여 클래스 조작을 할 수 있다.

addClass()
클래스 추가

removeClass()
클래스 제거

toggleClass()
클래스 전환

<!-- jquery include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $("#box").hover(
      function () {
        $("#box").addClass("hover");
      },
      function () {
        $("#box").removeClass("hover");
      }
    );
  });
</script>

<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: peachpuff;
  }

  #box.hover {
    background-color: purple;
    border-radius: 50px;
  }
</style>
<h3>문서 객체 조작 클래스</h3>
<hr />
<div id="box"></div>