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>
, , ,

“29_Simple Coding – jquery – Chapter11 – 기본 요약”에 대한 8개의 응답

  2. Very great post. I simply stumbled upon your weblog and
    wanted to mention that I’ve really enjoyed surfing around your weblog posts.
    In any case I’ll be subscribing on your rss feed and I hope you
    write once more very soon!

    응답

    • Thank you for liking my site.
      After the course is over and I have some free time,
      I will post an additional organized article.
      I am thinking about whether it will be Python or JSP.

      응답

  4. Have you ever considered about including a little bit more than just your articles?
    I mean, what you say is fundamental and everything. But think of if you added some
    great graphics or video clips to give your posts more,
    “pop”! Your content is excellent but with images and video clips, this website could
    certainly be one of the most beneficial in its niche.

    Terrific blog!

    응답

답글 남기기

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

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