Jquery 정리

Tomas.Lee·2022년 1월 16일

web study

목록 보기

5/14

JavaScript를 쉽고 빠르게 사용할 수 있도록 도와주는 라이브러리, Jquery

Jquery는 웹사이트에서 흔히 볼 수 있는 다양한 기능을 제공하는 라이브러리이다.

예를 들어, 버튼에 마우스를 올렸을 경우 버튼의 색상을 바꾼다던가

글자를 클릭하면 해당 글자가 사라지거나

특정 작업을 수행한 경우, html의 내용이 달리지는 경우 모두 jquery 실행한 결과이다.

위의 작업 모두 JS로 실현할 수 있다.

그럼에도 불구하고 Jquery를 사용하는 이유는, 더 빠르고 간편하게 구현할 수 있기 때문이다.

하지만 최근 Bootstrap이 Jquery에 대한 의존도를 낮춘다고 발표한 것을 보아,

Front-end 영역에서 Jquery의 입지가 상당히 좁아지고 있음을 알 수 있다.

그러나 아직까지 Jquery를 대체할만큼 빠르고 간편한 라이브러리가 존재하지 않기 때문에

Jquery의 위상은 쉽게 떨어지지 않으리라 생각된다.

Jquery 사용 방법

일반적으로 Jquery를 사용하는 방법은 cdn, 직접 다운로드 후 설치 등 2가지 방법이 있다.

보통 cdn으로 문서 내에 삽입하여 사용하기 때문에 오늘은 cdn을 이용하는 방법에 대해 설명하겠다.

Jquery CDN의 경우 Jquery, MS , GOOGLE에서 제공하는데 나는 보통 Jquery 홈페이지에서 긁는다.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

위 코드를 html 파일 내 '< head >' 태그에 삽입하면 바로 적용이 된다.

또한 위 코드는 가장 최신버전의 Jquery를 사용할 수 있게 해주니 따로 버전 걱정할 필요x

Jquery 기초

Jquery는 우선 script 태그 안에 들어간다.

JS와 똑같은 방식이다.

<script>
  $( document ).ready( function() {
    // code ...
  } );
</script>

제일 처음 시작은 $( document ).ready( function()로 시작된다.

말 그대로 문서 로딩이 끝난 이후, 모든 동작이 진행된다는 말이다.

준비가 끝났으면 code 부분에 원하는 Jquery를 넣으면 된다.

Jquery의 기본을 이루는 문법은 $이다.

$는 선택자로 어떤 element를 선택할지 정의하는 것이다.

선택자에 실행하고자 하는 함수를 적용시키는 방법은 $("선택자").함수()

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>

위 예시를 보면 선택자는 p이고 실행하는 함수는 click이다.

p를 click 하면 'this = p'가 hide되는 함수이다.

즉, 문단 하나를 클릭하면 그 문단은 사라지게 된다.

보기엔 복잡해보이지만 막상 해보면 꽤 재밌다 ㅎ..

Jquery의 여러가지 효과.

1.Hide/Show

<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>

말 그대로 가리고 보여주는 함수이다.

hide와 show는 button class로 구성되어져 있는데 각 버튼을 누르면 모든 문단은 사라지고 보여지게 된다.

Fade

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>

주로 영상편집때 많이 쓰는 용어로 흐려지는 효과이다.

위 예시는 버튼을 누르면 숨겨져있던 div들이 서서히 나타나는 효과이다.

나타나는 시간, 효과 등을 지정할 수 있다.

Slide

<script>
$(document).ready(function(){
$("#flip").click(function(){
  $("#panel").slideDown();
  });
});
</script>

말 그대로 slide, 미끄러지는 효과이다.

이외에도 많은 효과가 존재하는데 해당 링크를 참조하면 좋다.

Jquery HTML

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>
<body>

<p id="test">This is some <b>bold</b> text in a paragraph.</p>

<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>

html 요소들을 받아오는 함수.

예시는 문서의 내용을 alert(경고창)을 통해 나타내는 동작을 한다.

근데 선택자 뒤에 .text(), .html()이 붙어있는데 이것은 어떤 내용을 받아올지 선택하는 함수이다.

.text는 문자 그대로를 받아오며 .html을 받아온다.

이건 .text()의 실행 결과이다.

문자 그대로를 받아왔다는 것을 알 수 있다.

이건 .html()의 실행결과이며 html 요소를 받아왔음을 알 수 있다.

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>

</body>

위 코드는 기존 html 요소에 새로운 요소를 추가하는 코드이다.

자세히 살펴보면 btn1을 클릭했을 때, p 요소에 Appended text가 추가된다.

btn2를 누르면 Ol의 list에 새로운 li 항목이 추가된다.

결과화면이다.

Jquery Traversing

1.부모 선택자

$("선택자").parent(): // 가장 가까운 상위 노드
$("선택자").parents(parameter): // 상위 노드중 paramter를 가진 모든 노드
$("선택자").parentsuntil(parameter): // paramter를 가진 최상위 노드 직전까지 paramter를 가진 모든 상위 노드

2.자식 선택자

$("선택자").children(): // 가장 가까운 하위 노드
$("선택자").find(parameter): // parameter를 가진 하위 요소

3.형제 선택자

$("선택자").siblings(): // 선택자와 같은 트리에 위치한 노드
$("선택자").next(): // 선택자 바로 다음에 위치한 형제 노드
$("선택자").nextAll(): //선택자 다음에 위치한 모든 형제 노드
$("선택자").nextUntil(): // 선택자와 같은 트리에 위치한 마지막 노드 바로 직전 형제 노드
$("선택자").prev(): // 선택자 바로 이전 형제 노드
$("선택자").prevAll(): //선택자 이전에 위치한 모든 형제 노드
$("선택자").prevUntil(): // 선택자와 같은 트리에 위치한 첫번째 노드 바로 직전 형제 노드