forbob@naver.com

Sumter,SC 29150

simple-coding

+ 00 00 0000

Have any Questions?

29_Simple Coding – jquery – Chapter11 – 기본 요약

forbobpro

29_Simple Coding – jquery – Chapter11 – 기본 요약

📃 요약

함수들의 묶음인 라이브러리이며 과거에 브라우저간 호환성을 유지하며 코딩하기 위해 전세계 개발자들에게 엄청난 인기를 끌었고 DOM 선택함수(바닐라 자바스크립트)보다 훨씬 간소하고 사용성이 좋음, 단점은 큰 라이브러리 사이즈와 성능이 바닐라 자바스크립트보다 떨어짐

요소 기술 :

– Basic : Jquery

📃 기술 구현

스펙 :

- vscode
- js (es6)

📃 Jquery

- DOM 을 조작하는 유용한 js 함수들을 제공
- 함수(메소드) 체이닝을 사용해서 편리하게 조작함

일반 코딩 용어

- 라이브러리 : 유용한 함수들의 묶음으로 사용하면 코딩이 간소해짐
- 프레임워크 : 라이브러리보다 큰 묶음으로 일정 방식(규칙)으로 코딩을 강제하면서 일정 수준 코딩 품질을 높임, 코딩 자율성을 억제해서 개성 있는 사이트 구축에는 어려움이 있음
- 에러 : 코딩 시 비정상적으로 실행안됨
- 버그 : 코딩을 1차 완료해서 서비스했으나 서비스 중 일정 조건에서 에러 및 실행이 기대한대로 동작하지 않는 현상
- CDN : 라이브러리를 인터넷에서 실행시에 다운로드 받아 사용할 수 있게 만들어 놓은 사이트, 주로 http: 로 시작되는 주소로 되어 있음
예) 다운로드 주소만 link 함
- function(){} : 함수 정의 시 이름을 생략해서 정의할 수 있음 (익명함수), 주로 1회용으로 사용할 때 익명함수를 사용함

- React / Vue 에서는 jquery 사용을 추천하지 않음, 오히려 바닐라 자바스크립트를 사용할 것을 추천

JQuery 사용법

- 라이브러리를 설치 또는 cdn 링크를 추가해야 사용가능
- $(css선택자) : jquery 로 대상을 선택하면 동일한 태그를 가진 대상이 여러개가 있으면 여러개를 선택하고, 1개면 1개만 선택함
    1) querySelector(), querySelectorAll() 2가지 기능을 모두 가지고 있음
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="title">제목</h1>

    <!-- TODO: jquery cdn : 인터넷 주소로 자동 다운로드 -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="./js/01_jq_selecter.js"></script>
  </body>
</html>

     $(function() {
      $(css선택자).jquery함수(속성, 값);
   })
  // 또는
     $(function() {
        let 변수 = $(css선택자)
    .   변수.jquery함수(속성, 값);  // 변수 이용 가능
     })

JQuery 는 바닐라 자바스크립트의 각 속성 및 함수에 해당하는 함수가 모두 존재하며 굉장히 많은 함수들로 이루어져 있음, 외우지 말고 코드를 찾아보며(구글링) 코딩할 것

📃 Jquery 주요 함수

Jquery 주요 함수

1) css()

- css 디자인을 변경하는 함수
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="title">제목</h1>

    <!-- jquery cdn : 인터넷 주소로 자동 다운로드 -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="./js/01_jq_selecter.js"></script>
  </body>
</html>

사용법 :
$(function() {
  // TODO: jquery 특징 : $(css선택자) 
  //     : 기본적으로 모든 태그가 선택됨
  // vs querySelector() , querySelectorAll()
   $(css선택자).함수("속성명", "값");
});

예)
$(function() {
    $("#title").css("color", "skyblue");
});

2) css().css() : jQuery 함수(메소드) 체이닝

- jQuery 라이브러리는 함수를 연결해서 선택자에게 모두 효과를 적용할 수 있음
- 코딩이 짧아져서 코딩 효율성이 증가함
  • 예제 : 배경색:#ff0, border:2px solid black 적용하기

    사용법 : $(css선택자).함수().함수()...

예)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id=”tit”>선택자</h2>
<h3>직접선택자</h3>

<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>

<script>
    $(function(){
        // TODO: 메소드(함수) 체이닝
        // 사용법 : $(css선택자).함수().함수()...
        $("#tit").css("background-color", "#ff0")
                .css("border", "2px solid black");
    })
</script>

</body>
</html>

### 3) .children() :
    - 선택한 태그의 자식 태그들을 선택하는 함수

```html
사용법 : $("css선택자")
          .children()
          .함수()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="wrap">
      <h1>인접 관계 선택자</h1>
      <p>내용1</p>
      <section>
        <h1>하위 요소 선택자</h1>
        <p>내용2</p>
      </section>
    </div>
    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
      $(function () {
        // #wrap > section 아래 자식 태그들 선택하기
        $("#wrap > section")
          .children()
          .css("background-color", "yellow")
          .css("border", "2px solid #f00");
      });
    </script>
  </body>
</html>

4) html()

  • innerHTML 과 동일한 효과를 나타내며 html 태그 효과를 적용해서 문자열을 가져오거나 변경하는 함수

  • html 예제 :
    <html>
    <body>
    <h1>안녕하세요</h1>
    </body>
    </html>

사용법 : $(“태그”).html();
- 태그의 사이에 문자열을 가져오기

사용법 : $(“태그”).html(“문자열”);
- 태그의 사이에 문자열을 지정하기, 만약 기존에 문자열이 있으면 새로운 문자열로 수정됨 

예)
  //  h1 태그의 값을 가져오기
  $(function() {
     let value = $(“h1”);  //변수 사용
     alert(value.html()); // 안녕하세요 출력
  });
  // 또는 
  $(function() {
     alert($(“h1”).html());  //변수 사용 않함, 안녕하세요 출력
  });

  // h1 태그의 값을 변경하기
  $(function() {
     $(“h1”).html(“변경했어요”);  //변수 사용 않함, 변경했어요 로 문자열 변경됨
  });

5) val()

  • input 태그의 value 값을 가져오거나 변경하는 함수

  • html 예제 :
    <html>
    <body>
    <input type=”text” id=”name” value=”안녕하세요” />
    </body>
    </html>

사용법 :  $(“css선택자”).val()
- css 선택자의 value 속성을 가져옴
- 주로 입력양식에 사용

사용법 :  $(“css선택자”).val("문자열")
- css 선택자의 value 속성에 문자열을 변경함
- 주로 입력양식에 사용

예)
  //  input 태그의 value 의 값을 가져옴
  $(function() {
     let value = $(“#name”);  //변수 사용
     alert(value.val());  //안녕하세요 출력
  });
  // 또는 
  $(function() {
     alert($(“#name”).val());  //변수 사용 않함, 안녕하세요 출력
  });

//  input 태그의 value 의 값을 변경함
  $(function() {
     $(“#name”).val(“변경했어요”);  //변수 사용 않함, 변경했어요 로 문자열 변경됨
  });

6) attr() : 속성값 가져오기

- html 의 속성을 가져오는 함수
사용법 : let 변수 = $("태그").attr("속성");
- 태그에 해당하는 속성을 가져와서 변수에 저장함

예)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>속성의 값을 가져오기</title>
  </head>
  <body>
    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            let src = $("script").attr("src");
            alert(src);
        })
    </script>
  </body>
</html>

(7) attr() : 속성값 저장하기

- html 의 속성을 저장하는 함수
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>속성에 값 저장하기</title>
  </head>
  <body>
    <img />
    <img />
    <img />

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            // 속성에 값 저장
            $("img").attr("alt", "jquery 속성 지정");
            $("img").attr("src", "http://placehold.it/100x100");
            $("img").attr("width", "100");
        })
    </script>
  </body>
</html>

(8) addClass() / removeClass()

사용법 : $("css선택자").addClass("클래스명");
- css선택자에 클래스명을 추가

사용법 : $("css선택자").removeClass("클래스명");
- css선택자에 클래스명을 삭제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class 추가/삭제</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .newClass {
            background-color: blue;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            $(".box").hover(function(){
                // 마우스 위로
                $(".box").addClass("newClass");
            }, function(){
                // 마우스가 나갔을때
                $(".box").removeClass("newClass");
            });
        })
    </script>
</body>
</html>

(9) fadeToggle

사용법 : $(css선택자).fadeToggle(상태);
- 상태 : slow, fast 등
- css선택자가 있다면 천천히 사라지고, 없으면 천천히 나타남

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>Toggle Show</button>
    <div class="page">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // jquery 기본형 형태
        // $(document).ready(function(){
        // });

        // jquery 축약형 형태
        $(function(){
            // 클릭 
            $("button").click(function(){
                // 간단한 효과를 적용합니다.
                $(".page").fadeToggle("slow");
            })
        })
    </script>
</body>
</html>

(10) show() / hide()

사용법: $(css선택자).show(); // 선택 태그가 나타남

사용법: $(css선택자).hide(); // 선택 태그가 사라짐

예)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>요소의 표시와 숨김</h1>
    <button id="showBtn">요소 표시</button>
    <button id="hideBtn">요소 숨김</button>
    <p id="text">이 단락을 숨기거나 나타나게 할 거에요!</p>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 클릭 : 1) $().click(함수());
        // 2) .addEventListener("click", 함수()) 와 비슷
        $(function(){
            $("#showBtn").on("click", function(){
                // 사용법: $(css선택자).show(); // 선택 태그가 나타남
                $("#text").show();
            })
            $("#hideBtn").on("click", function(){
                // 사용법: $(css선택자).hide(); // 선택 태그가 사라짐
                $("#text").hide();
            })
        })
    </script>
</body>
</html>

(11) toggle()

사용법 : $("css선택자").toggle();
- css선택자가 있으면 사라지고(hide), 없으면 나타남(show)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn">Click to toggle</button>
    <p class="target">Lorem ipsum dolor sit amet</p>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>

    <script>
        $(function(){
            $(".btn").click(function(){
                // 클릭
                // toggle === show/hide 기능
                $(".target").toggle();
            })
        })
    </script>
</body>
</html>

(12) find()

사용법 : $("부모선택자").find("자식선택자").함수()
- 부모선택자 안에 자식 태그들중에 자식선택자를 찾아서 함수를 적용함  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>16_jq_find.html</title>
</head>
<body>
    <p class="target">
        <span class="lo">Lorem</span>
        <span class="ip">Ipsum</span>
        <span class="do">Dolor</span>
    </p>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // ip 를 찾아서 배경색: skyblue
        $(".target").find(".ip")
                    .css("background-color", "skyblue");
    </script>
</body>
</html>

📃 Jquery 이벤트

- 바닐라 js 처럼 클릭, 마우스, 키보드 키다운 등의 이벤트를 사용할 수 있음

클릭

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>안녕하세요</p>
    <p>반갑습니다.</p>
    <button>글자 색상 변경하기</button>
    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                // 클릭시 실행될 부분
                // p 태그 글자색: red
                $("p").css("color", "red");
            })
        })
    </script>
  </body>
</html>

마우스

사용법: $(css선택자).hover(function(){실행1}, function(){실행2})
- 마우스가 올라가면 실행1 이 실행되고,
- 마우스가 나가면 실행2가 실행됨

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hover : 마우스 위로/나가기</title>
  </head>
  <body>
    <h1>Click</h1>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){

            $("h1").hover(function(){
                // 마우스 위로
                // this : 현재 선택한 태그 (h1)
                $(this).css({ background: "red"})
            }, function(){
                // 마우스 나갔을때
                $(this).css({ background: ""})
            })
        })
    </script>
  </body>
</html>
, , ,

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Recent Categories

Recent Posts

Post Archive

Catogery Tags

algorism backend cm coding-test css deploy docker figma html java js multi-provider social login nginx si simple-coding social login spring boot springboot sql stomp toast ui tomcat vue websocket 간편 로그인 구글 로그인 소셜 로그인

Connect With Us