jQuery 정리 1

Updated: January 16, 2021

jQuery**

jQuery는 자바스크립트 프로그래밍을 간단하게 만들어주는 자바스크립트 라이브러리이다(다른 라이브러리들도 있지만 jQuery가 가장 인기가 많다). jQuery는 자바스크립트에 비해 매우 간편하고 함수형이기 때문에 배우기가 쉽다. 프로그래머들은 항상 적게 쓰고 더 많은 일을 하는 것을 추구하기 때문에 jQuery의 목적은 더 쉽게 자바스크립트의 역할을 수행하는 것이다. 그렇기 때문에 jQuery는 자바스크립트에서는 몇줄을 써야 하는 작업을 한줄로 끝내버릴 수도 있다. AJAX나 DOM제어와 같은 많은 자바스크립트 코드가 들어가는 일들 역시 jQuery를 사용하면 간단하게 할 수 있다. jQuery가 할 수 있는 일들은 다음과 같다

HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities

jQuery는 HTML, CSS, Javascript를 활용하기 때문에 jQuery를 배우기에 앞서 HTML, CSS, Javascript는 어느정도 알고 있어야 한다.

Get Started

jQuery를 사용하기 위해선 우선 라이브러리를 다운받아야 한다.

<head>
<script src="jquery-3.5.1.min.js"></script>
</head>

이렇게 라이브러리를 로컬로 다운받고 나서 열 수도 있고

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

CDN(Content Delivery Network)으로 가져와도 된다. 보통 CDN을 많이 쓴다.

Syntax

jQuery의 문법은

HTML 요소를 선택하고
해당 요소에 취할 action을 명시한다

기본적인 문법은 다음과 같다

$(selector).action()

$ 문자는 jQuery임을 정의하고 접근하는 역할을 한다.
(selector)는 HTML요소를 찾으라는 의미이다.
action()은 찾은 HTML 요소에 취할 action을 의미한다.

Document Ready Event

$(document).ready(function(){

  // jQuery methods go here...

});

// or

$(function(){

  // jQuery methods go here...

});  // same code with shorter syntax

보통 jQuery는 이 함수 안에 들어가게 되는데 이 함수의 의미는 도큐멘트(현재 HTML 페이지)가 다 로드된 이후에 jQuery 코드를 실행하라는 의미이다. 만약 jQuery 코드가 현재 페이지가 다 뜨지 않은 상태에서 실행된다면 에러가 날 수 있기 때문에(요소를 찾을 수가 없는 상황이 발생하기 때문에) 위의 코드를 써주는 것이 좋다.

Selectors

jQuery selector는 HTML 요소를 name, id, class, type, attribute, value 값으로 찾아낼 수 있게 해준다. 모든 jQuery selector는 $()의 형식으로 이루어져 있다.

$("p") // tag가 <p>인 요소 선택
$("#test") // id="test"인 요소 선택
$(".test") // class="test"인 요소 선택

/**************** 예시 ****************/
$(this).hide() // hides the current element.
$("p").hide() // hides all <p> elements.
$(".test").hide() // hides all elements with class="test".
$("#test").hide() // hides the element with id="test".

기타 Selector들

Syntax	Description	Example
$(“*”)	Selects all elements	Try it
$(this)	Selects the current HTML element	Try it
$(“p.intro”)	Selects all `<p>` elements with class=”intro”	Try it
$(“p:first”)	Selects the first `<p>` element	Try it
$(“ul li:first”)	Selects the first `<li>` element of the first `<ul>`	Try it
$(“ul li:first-child”)	Selects the first `<li>` element of every `<ul>`	Try it
$(“[href]”)	Selects all elements with an href attribute	Try it
$(“a[target=’_blank’]”)	Selects all `<a>` elements with a target attribute value equal to “_blank”	Try it
$(“a[target!=’_blank’]”)	Selects all `<a>` elements with a target attribute value NOT equal to “_blank”	Try it
$(“:button”)	Selects all `<button>` elements and `<input>` elements of type=”button”	Try it
$(“tr:even”)	Selects all even `<tr>` elements	Try it
$(“tr:odd”)	Selects all odd `<tr>` elements	Try it

jQuery Selector Tester 링크

Events

jQuery에서는 자바스크립트에서의 Event를 다룰 수 있는데 문법이 조금 다르다.

$("p").click(function(){
  $(this).hide();
  // action goes here!!
}); // p tag를 클릭했을때 action

기타 이벤트들

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

jQuery Effects

jQuery로 HTML 요소에 줄 수 있는 시각적 효과들은 다음과 같다.

Hide/Show

$("#hide").click(function(){
  $("p").hide();
}); // 숨기기

$("#show").click(function(){
  $("p").show();
}); // 보이기 

$("button").click(function(){
  $("p").hide(1000);
}); // 1초동안 숨기기

$("button").click(function(){
  $("p").toggle();
}); // 숨기기 + 보이기

Fade

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
}); // fade in

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
}); // fade out

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
}); // toggle(fade in + fade out)

$("button").click(function(){
  $("#div1").fadeTo("slow", 0.15);
  $("#div2").fadeTo("slow", 0.4);
  $("#div3").fadeTo("slow", 0.7);
}); // fade to(속도와 정도 조정)

Slide

$("#flip").click(function(){
  $("#panel").slideDown();
}); // slideDown

$("#flip").click(function(){
  $("#panel").slideUp();
}); // slideUP

$("#flip").click(function(){
  $("#panel").slideToggle();
}); // slideToggle

Animate

$("button").click(function(){
  $("div").animate({left: '250px'});
}); // 이동

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
}); // 이동 + 투명도 + 높이 + 넓이

$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
}); // 이동 + 높이와 넓이 현재기준으로 상대적으로 키우기

$("button").click(function(){
  $("div").animate({
    height: 'toggle'
  });
}); // 한번 누르면 높이가 0이 되었다가 다시 누르면 원래 높이로 돌아옴

$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
}); // 4차례의 걸쳐 높이, 넓이, 투명도를 조정 / 기존의 상태가 유지된 채로 코드 실행됨

$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
}); // 왼쪽 기준으로 얼마만큼 이동 후 폰트싸이즈 키우기

Stop

$("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
$("#stop").click(function(){
    $("#panel").stop();
  }); // 실행 중에 멈출 수 있음

Callback

현재 효과가 완전히 종료되고 나서 함수를 실행한다.

$("button").click(function(){
  $("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });
}); // hide 종료 이후에 alert창 띄워짐

$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
}); // 이렇게 하면 hide 끝나기 전에 alert창 띄워짐

Chaining

여러 함수를 하나의 문장으로 실행할 수 있다. 한 요소에 대해 순차적으로 여러 효과를 주고 싶을 때 유용하다.

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
// css 효과 주고 나서 slideup 하고 나서 slidedown

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);
// 가독성을 위해 효과별로 개행해주면 좋다

jQuery HTML

jQuery의 가장 강력한 기능은 HTML 요소와 그 속성을 제어할 수 있다는 점이다.

Get

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
}); // id="test"인 요소의 text
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
}); // id="test"인 요소의 html markup
$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
}); // id="test"인 요소의 value
$("button").click(function(){
  alert($("#w3s").attr("href"));
}); // id="w3s"인 요소의 href속성 값

Set

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
}); // id="test"인 요소의 text 변경
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
}); // id="test"인 요소의 html markup 변경
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
}); // id="test"인 요소의 value 변경
$("button").click(function(){
  $("#w3s").attr("href", "https://www.naver.com");
}); // id="w3s"인 요소의 href속성 값 변경

Add

$("p").append("Some appended text."); // p 뒤에 텍스트 붙이기 

$("p").prepend("Some prepended text."); // p 앞에 텍스트 붙이기 

function appendText() {
  var txt1 = "<p>Text.</p>";               // Create element with HTML 
  var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
  var txt3 = document.createElement("p");  // Create with DOM
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);      // Append the new elements(여러개)
}

$("img").after("Some text after");       // img 뒤에 텍스트 붙이기 
$("img").before("Some text before");     // img 앞에 텍스트 붙이기 

function afterText() {
  var txt1 = "<b>I </b>";                    // Create element with HTML 
  var txt2 = $("<i></i>").text("love ");     // Create with jQuery
  var txt3 = document.createElement("b");    // Create with DOM
  txt3.innerHTML = "jQuery!";
  $("img").after(txt1, txt2, txt3);          // Insert new elements after <img> (여러개)
}

Remove

$("#div1").remove(); // 선택된 요소와 자식 요소들을 전부 삭제

$("#div1").empty();  // 선택된 요소와 자식 요소들을 전부 삭제

$("p").remove(".test"); // p요소 중에 class="test"인 요소만 삭제

$("p").remove(".test, .demo"); // p요소 중에 class="test"이거나 class="demo"인 요소만 삭제

CSS Class

미리 정의된 클래스를 HTML요소에 적용하거나 없애거나 Toggle시킬 수 있다.

<style>
.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}
</style>

$("button").click(function(){
  $("h1, h2, p").addClass("blue");
  $("div").addClass("important");
});

$("button").click(function(){
  $("h1, h2, p").removeClass("blue");
});

$("button").click(function(){
  $("h1, h2, p").toggleClass("blue");
});

css()

css()함수는 선택된 요소에 대해 한개 이상의 스타일 속성을 줄 수 있다.

$("p").css({"background-color": "yellow", "font-size": "200%"});

전체 출처 링크

Share on

Twitter Facebook LinkedIn

Yohan Sun