생각기록

JQuery 사용 본문

SeSAC 풀스택/JavaScript

JQuery 사용

끼록관 2022. 11. 5. 18:29

오픈소스 기반

제이쿼리는 자바스크립트 언어를 편히 사용 할 수 있도록 단순화 시킨 오픈 기반의 자바스크립트 라이브러리

 

라이브러리 : 자주 사용하는 기능들을 모아두었다가 필요할 때 가져다 쓸 수있다.

 

사용법

다운, 이미지 호출하듯 호출

 

외부 CDN

https://releases.jquery.com/

 

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

releases.jquery.com

제이쿼리 CDN

 

uncompressed 압축되지 않음

 slim 압축이 되어 있는 형태

 minified 우리는 이것을 쓸것이다.

복 붙 스크립트

  <head>
    <!-- 제이쿼리 홈페이지에서  minified 를 복사 붙이기 -->
      <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

 

 

기초

$ ( 선택자 ). 동작함수( );

$는 jQuery()함수의 축약 형태로, 식별자 역할

 

 

변경 예제

데이터값

위아래 값은 같다 아래는 제이쿼리로 해본 것

var value1 = document.getElementById("input1").value;

console.log( value1 );

// 제이쿼리식

var value2 = $("#input1").val();

console.log( value2 );

 

값 변경

document.getElementById("input1").value ="hi";

// 제이쿼리식

$("#input1").val("hello");

// 인풋1아이디를 가진 값에게 hello를 주겟다.

 

 

css 예문

function setStyle1(){

var p = document.querySelector("#p1");

p.style = "background-color: yellow; color: blue;";

}

// p.style s가 대문자면 먹히지 않음 소문자

 

// 제이쿼리식

function setStyle2(){

$("#p1").css("background-color", "red");

}

 

한번에 여러개 바꾸기

function setStyle3(){

$("#p1").attr("style", "background-color: blue; color:white;");

}

attr 속성을 변경해준다 / "스타일"태그의 배경색, 글씨색을 지정하겠다.

 

text(글자변경) / html(태그 자체 인식)

function changeText(){

console.log( $("#p1").text());

$("#p1").text("글자 변경")

}

 

function changeHTML(){

$("#p1").html("<strong>굵은 글자 변경</strong>");

}

 

$('hi').text();
hi태그의 글을 읽어와라

$('hi').text('변경해보자');
hi태그의 글을 '변경해보자'로 변경한다.

요소 추가 

제이쿼리append

function append1 (){

document.querySelector("#p1").append("<h2>h2</h2>");

$("#p1").append("<h3>h3태그입니다.</h3>");

}

document.querySelector("#p1").append("<h2>h2</h2>"); 그냥 문자로 들어감, html태그가 아니라 문자열로 인식
 
$("#p1").append 제이쿼리의 append 함수는 태그로 인식

 

부모요소 선택하고 자식들 중 가장 뒤에 추가

$("#ul").append("<li>append</li>");

 

 

부모요소 선택하고 자식들 중 가장 앞에 추가

$("#ul").prepend("<li>prepend</li>");

 

 

본인기준으로 선택해서 형제요소를 추가하는 것

  • before, after는 특정 자식이 (기준)이다.
  • 존재하지 않으면, 작동자체가 불가능하다.

$("#li1").before("<li>before</li>");

$("#li1").after("<li>after</li>");

 

 

요소삭제

remove 내스스로를 삭제

$("li").remove();

 

 

empty 부모한테 실행하는 함수며, 부모아래 자식+자손 들을 모두 지우겠다. 텅 비우겟다.

$("#ul").empty();

 

 

요소탐색을 하고, 원래 하고자햇던 함수를 이어 붙일 수 있다.

ul을 선택해 어팬드 하겟다.

function parent(){

console.log($("#li1").parent());                  // li1아이디의 부모 선택

console.log($("#li1").parent().parent());   // li1아이디의 부모의, 부모 선택

$("#li1").parent().append("<li>parent</li>"); 

//append는 부모요소.append(자식요소)

//즉 기준태그li1 뒤에 "<li>parent</li>"를 붙이기위해

}

 

parents조상까지 모두 선택

next는 바로 다음 형제

prev선택요소 바로 이전에 위치한 형제 요소 선택

children자식요소 모두

//before,after는 기준이되는 특정 자식이 없으면, 작동하지 않습니다. append와 prepend는 작동하지만요..

 

addClass는 class속성을 추가하는 것

function addClass(){ $("div").addClass("class");}

 

class 속성을 지우는 친구

function removeClass(){$("div").removeClass("class");}

 

hassClass 해당 calss를 가지고 있는지 확인 = true, false로 값이 나옴

function hasClass(){console.log($("div").hasClass("class"));}

 

toggleClass  해당 Class가 없으면 추가하고, 있으면 제거

function toggleClass(){$("div").toggleClass("class");}

 

 switchClass를 동적으로 추가하고 싶을때

*제이쿼리 기본등록이 안되어있어서 제이쿼리 ui를 추가해서 사용한다

JQuery에서 switchClass사용하는 법

제이쿼리 기본등록이 안되어있어서 제이쿼리 ui를 홈페이지에서 다운받고 파일에 추가해서 사용한다.

제이쿼리 ui 다운 받아야함 CDN 이 없음/ 사용하는 파일과 같은 폴더에 넣어줍시다.

같은 폴더가 아니더라도 상대경로로 이어줍니다.

  <head>
    <!-- 제이쿼리 홈페이지에서  minified 를 복사 붙이기 -->
      <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
   
      <script SRC="./jquery-ui-1.13.2.custom/jquery-ui.js"></script>
      <link href="./jquery-ui-1.13.2.custom/jquery-ui.css">
    <!-- 클래스를 동적으로 추가하고 싶을때 switch클레스, 제이쿼리 기본등록이 안되어있어서 제이쿼리 ui를 추가해서 사용한다 -->
  </head>

 

 

$("div").switchClass("first", "second");

> div 태그의 first클래스를 second클래스로 변경한다.

 

 

 

특징

스위치 클래스를 쓰면, 무엇이 남을까요?

*A클래스가 없다고 가정*

1) A  > B   =  B (A클래스가 없으면, B를 생성한다.)

2) A > C    =  C (C가 남는다)

3) B > D   =  D (위의 B클래스가 D클래스로 스위치 된다.)

 

결과적으로 C,D가 남는다.

해당 클래스가 존재하지 않으면, 다음 클래스를 그냥 생성한다.

순차적으로 하고싶다면, 순서를 잘 지켜야 한다.

 

      <script SRC="./jquery-ui-1.13.2.custom/jquery-ui.js"></script>
      <link href="./jquery-ui-1.13.2.custom/jquery-ui.css">
    <!-- 클래스를 동적으로 추가하고 싶을때 switch클레스, 제이쿼리 기본등록이 안되어있어서 제이쿼리 ui를 추가해서 사용한다 -->
   <style>
     div { width: 100px; height: 100px;}
     .first { background-color: red;}
     .second { background-color: yellow;}
     .third { background-color: green;}
     .sizeup { font-size: 30px;}
   </style>
   <script>
    // JQuery에서 switch 사용해보기 동적으로 하는 스위치 클레스 기능들
    // 각각 클레스를 a -> b로 바꿀 것이다.
    // .switchClass 앞 클래스가 뒤 클래스로 서서히 천천히 바뀜
    function second(){
        $("div").switchClass("first", "second");
    }
    function sizeup(){
        $("div").switchClass("second", "sizeup", 1000);
    }
    function third(){
        $("div").switchClass("sizeup", "third");
    }
    function first(){
        $("div").switchClass("third", "first");
    } 
   </script>
 </head>
  <body>
    <div class="first">div</div>
    <button type="button" onclick="second()">first -> second</button>
    <button type="button" onclick="sizeup()">second -> sizeup</button>
    <button type="button" onclick="third()">sizeup -> third</button>
    <button type="button" onclick="first()">third -> first</button>
  </body>

 

 

실습1 이미지 체인지

버튼을 누르면 과일 선택할 수 있도록

   <style>
    #pic1 { border-width: 20px; border-color: rgb(251, 255, 4); border-style: solid; border-radius: 30px;}
    img { width: 300px; height: 300px; text-align: center; }
    #button { margin-left: 50px;}
   </style>
   <script>
    function banana(){
      $("#pic1").attr("src","banana.jpg");
    }

    function grape(){
      $("#pic1").attr("src","grape.jpg");
    }

    function peach(){
      $("#pic1").attr("src","peach.jpg");
    }

    function apple(){
      $("#pic1").attr("src","apple.jpg");
    }

   </script>
 </head>
  <body>

    <img src="fruits_1.png" id="pic1"><br>

    <div id="button">
    <button type="button" id="banana" onclick="banana()">바나나</button>
    
    <button type="button" id="grape" onclick="grape()">포도</button>
    
    <button type="button" id="peach" onclick="peach()">복숭아</button>
    
    <button type="button" id="apple" onclick="apple()">사과</button>
  </div>
  </body>

내가 어려워 했던 부분

사진을 여러개 써야한다고 생각했다.

1) 기본 셋팅 사진 한개 ( id = pic1 )

2) function apple() {  $("#pic1").attr("src", "apple.jpg"); }

    pic1아이디 이미지 src를 apple.jpg로 변경한다.

 

 

실습2 SwitchClass 사용

클릭하면, 컬러가 바뀌도록

<html>
  <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
    <script src="./jquery-ui-1.13.2.custom/jquery-ui.js"></script>
    <link href="./jquery-ui-1.13.2.custom/jquery-ui.css">

    <style>
      div {
        width: 100;
        height: 100;
      }
      div:hover{
        cursor: pointer;
      }
      .red {
        background-color: red;
      }
      .orange {
        background-color: orange;
      }
      .yellow {
        background-color: yellow;
      }
      .green {
        background-color: green;
      }
      .blue {
        background-color: blue;
      }
      .purple {
        background-color: purple;
      }
    </style>
    <script>
      function changeColor(){
        $("#div1").switchClass("red","orange");
        $("#div1").switchClass("orange","yellow");
        $("#div1").switchClass("yellow","green");
        $("#div1").switchClass("green","blue");
        $("#div1").switchClass("blue","purple");
        $("#div1").switchClass("purple","red");
      }
    </script>
  </head>
  <body>
    <div id="div1" class="red" onclick="changeColor();"></div>
  </body>
</html>

순서대로 하면된다!

'SeSAC 풀스택 > JavaScript' 카테고리의 다른 글

전체 실습  (0) 2022.11.08
2022-11-08-제이쿼리 마무리 이벤트 리스너  (0) 2022.11.08
2022-11-05 수업 Bootstrap  (0) 2022.11.05
JavaScript DOM 문서 객체 모델  (0) 2022.11.04
JavaScript 객체 자료형  (0) 2022.11.03
'SeSAC 풀스택/JavaScript' Related Articles more