jQuery 기초 정리

박지성 학부생·2023년 1월 10일

CSS JavaScript html jquery

FrontEnd Develop log

목록 보기

12/12

제이쿼리(jQuery)란?

제이쿼리(jQuery)는 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해주는 오픈 소스 기반의 자바스크립트 라이브러리이다.
-> CSS 기초정리
-> HTML 기초정리

제이쿼리의 장점
- 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원된다.
- HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있다.
- 애니메이션 효과나 대화형 처리를 간단하게 적용할 수 있다.
- 같은 동작을 하는 프로그램을 더 간결한 코드로 구현할 수 있다.
  
  제이쿼리 문법
  제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있습니다.

제이쿼리 기본 문법

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

달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다.
- 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정할 수 있다.

$() 함수

$() 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할을 한다.
- $() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있다.

이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체(jQuery object)라고 한다.
- 제이쿼리는 이렇게 생성된 제이쿼리 객체의 메소드를 사용하여 여러 동작을 설정할 수 있습니다.

자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다.

이와 같은 특성은 다음과 같은 경우에 오류를 발생시킨다.

아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우
아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우

// 아직 생성되지 않은 HTML 요소에 속성을 추가하는 예제
function func() {

    addAttribute();  // 아이디가 "para"인 HTML 요소에 속성을 추가함.

    createElement(); // 아이디가 "para"인 HTML 요소를 생성함.

}

function createElement() {

    var criteriaNode = document.getElementById("text");

    var newNode = document.createElement("p") newNode.innerHTML = "새로운 단락입니다.";

    newNode.setAttribute("id", "para");

    document.body.insertBefore(newNode, criteriaNode);

}

function addAttribute() {

    document.getElementById("para").setAttribute("style", "color: red");

}

위 예제에서 addAttribute() 함수는 아이디가 "para"인 HTML 요소에 새로운 속성을 추가하는 함수이다.

createElement()함수는 아이디가 "para"인 HTML 요소를 생성하여 추가해 주는 함수이다.

위의 예제에서는 아이디가 "para"인 HTML 요소가 생성되기 전에 해당 요소에 속성을 추가해 주는 addAttribute() 함수가 호출되므로, Uncaught TypeError가 발생하여 실행중이던 스크립트는 중지될 것이다.

만약 먼저 호출되는 addAttribute() 함수를 createElement() 함수 뒤에 호출하면, 정상적으로 동작할 것이다.

제이쿼리 선택자

제이쿼리에서는 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지도 사용할 수 있다.

이러한 비표준 선택자를 사용하면 선택한 요소를 저장하거나, 그 결과에 대해 필터링까지 할 수 있다.

선택한 요소의 저장
제이쿼리에서는 선택한 요소들을 변수에 저장하여 사용할 수 있다.

//문서 내의 모든 <li>요소를 선택하여 변수에 저장한 후, 해당 변수를 사용하는 예제
$(function() {
    var items = $("li"); // <li>요소를 모두 선택하여 변수 items에 저장함.
    $("button").on("click", function() {
        $("#len").text("저장된 <li>요소의 총 개수는 " + items.length + "개 입니다.");
    });
});

하지만 이렇게 저장된 요소들은 변수에 저장될 당시의 요소들만 저장된다.
즉, 요소가 저장된 이후에 문서에 추가되거나 삭제된 요소들을 자동으로 갱신하지는 않는다.

선택한 요소의 필터링
제이쿼리에서는 선택한 요소 중에서 더욱 세분화된 선택을 하기 위한 필터링을 진행할 수 있다.

//문서 내의 모든 <li>요소 중에서 <span>요소를 가지고 있는 요소만을 선택하는 예제
$(function() {
    $("button").on("click", function() {
        $("li:has(span)").text("<span>요소를 가지고 있는 아이템이에요!");
    });
});

- 필터링에 사용할 수 있는 선택자는 다음과 같다.
- - :eq(n) 선택한 요소 중에서 인덱스가 n인 요소를 선택함.
- - :gt(n) 선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택함.
- - :lt(n) 선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택함.
- - :even 선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택함.
- - :odd 선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택함.
- - :first 선택한 요소 중에서 첫 번째 요소를 선택함.
- - :last 선택한 요소 중에서 마지막 요소를 선택함.
- - :animated 선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택함.
- - :header 선택한 요소 중에서 h1부터 h6까지의 요소를 모두 선택함.
- - :lang(언어) 선택한 요소 중에서 지정한 언어의 요소를 모두 선택함.
- - :not(선택자) 선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택함.
- - :root 선택한 요소 중에서 최상위 루트 요소를 선택함.
- - :target 선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택함.
- - :contains(텍스트) 선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택함.
- - :has(선택자) 선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택함.
- - :empty 선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택함.
- - :parent 선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함.

input 요소의 선택

제이쿼리에서는 입력 양식에 관련된 특정 요소를 손쉽게 선택할 수 있다.

$(function() {
    $("button").on("click", function() {
        // 체크되어 있는 요소를 모두 선택함.
        $(":checked").next().text("체크되어 있는 요소는 이 요소입니다.");
    });
});

특정 <input> 요소를 선택할 수 있는 선택자는 다음과 같다.
- :button type 속성값이 "button"인 요소를 모두 선택함.
- :checkbox type 속성값이 "checkbox"인 요소를 모두 선택함.
- :file type 속성값이 "file"인 요소를 모두 선택함.
- :image type 속성값이 "image"인 요소를 모두 선택함.
- :password type 속성값이 "password"인 요소를 모두 선택함.
- :radio type 속성값이 "radio"인 요소를 모두 선택함.
- :reset type 속성값이 "reset"인 요소를 모두 선택함.
- :submit type 속성값이 "submit"인 요소를 모두 선택함.
- :text type 속성값이 "text"인 요소를 모두 선택함.
- :input <input>, <textarea>, <select>, <button>요소를 모두 선택함.
- :checked type 속성값이 "checkbox" 또는 "radio"인 요소 중에서 체크되어 있는 요소를 모두 선택함.
- :selected <option>요소 중에서 선택된 요소를 모두 선택함.
- :focus 현재 포커스가 가지고 있는 요소를 선택함.
- :disabled 비활성화되어있는 요소를 모두 선택함.
- :enabled 활성화되어있는 요소를 모두 선택함.

제이쿼리 UI 소스를 이용한 예제

코드

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>해병 군가</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
  #accordion-resizer {
    padding: 20px;
    width: 350px;
    height: 220px;
  }
  </style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
  $( "#accordion" ).accordion({
    heightStyle: "fill"
  });

  $( "#accordion-resizer" ).resizable({
    minHeight: 140,
    minWidth: 200,
    resize: function() {
      $( "#accordion" ).accordion( "refresh" );
    }
  });
} );
</script>
</head>
<body>
<div id="accordion-resizer" class="ui-widget-content">
<div id="accordion">
<h3>팔각모 사나이</h3>
<div>
  <p>
      (1절) 팔각모 얼룩무늬 바다의 사나이 검푸른 파도타고 우리는 간다
      <br/>
      내 조국 이땅을 함께 지키며 불바다 헤쳐간다 우리는 해병
      <br/>
      팔각모 팔각모 팔각모 사나이 우리는 멋쟁이 팔각모 사나이
      <br/>
      <br/>
      (2절) 팔각모 얼룩무늬 귀신잡는 사나이 불타는 적진향해 우리는 간다
      <br/>
      내 겨레 이평화 함께 지키며 적진을 뚫고 간다 우리는 해병
      <br/>
      팔각모 팔각모 팔각모 사나이 우리는 멋쟁이 팔각모 사나이
  </p>
</div>
<h3>영원한 해병</h3>
<div>
  <p>
      (1절) 사나이 가슴에 큰 뜻 품었다
      <br/>
      불사신 그 이름 영원한 해병
      <br/>
      노도와 함성이 산하를 덮을때
      <br/>
      상륙전 선봉에서 우리는 간다
      <br/>
      무엇이 두려우랴 무적의 사나이
      <br/>
      겨레와 함께하는 영원한 해병
      <br/>
      <br/>
      (2절) 파도를 어깨 위에 둘러메었다
      <br/>
      겁없는 그 이름 영원한 해병
      <br/>
      포탄과 연막이 바다를 덮을때
      <br/>
      상륙전 선봉에서 우리는 간다
      <br/>
      무엇이 두려우랴 무적의 사나이
      <br/>
      겨레와 함께하는 영원한 해병
  </p>
</div>
<h3>상륙전가</h3>
<div>
  <p>
      (1절) 충무공 높은 기상 이어 받들어 젊은화랑 맥박이 가슴에 뛴다<br/>
      정의와 자유를 길이 지키려 해병은 굳세게 싸우고 있다<br/>
      아~상륙전 진격의 싸움 삼군의 앞장서서 해병은 간다<br/>
      <br/>
      (2절) 날아라 전폭기야 울어라 함포 모함을 떠나면 배수진이다<br/>
      빗발치는 탄막을 뚫고 헤치며 성난 바다 험산인들 두려 울소냐<br/>
      아~상륙전 필승의 싸움 삼군의 앞장서서 해병은 간다<br/>
      <br/>
      (3절) 장하다 강한 신념 노도를 차고 불바다 헤쳐 나간 인천 상륙전<br/>
      중앙청 하늘 높이 올린 태극기 동포는 감격 속에 만세불렀다<br/>
      아~상륙전 정의의 싸움 삼군의 앞장서서 해병은 간다
  </p>
</div>
<h3>도솔산가</h3>
<div>
  <p>
      (1절) 하늘의 우룃소리 땅위에 아우성 불바다 피투성이 새우기 몇밤<br/>
      이나라 해병들이 명예 걸메고 목숨 내건 싸움터 도솔산일세<br/>
      오~ 도솔산 높은 봉 해병대 쌓아올린 승리의 산 오늘도 젋은 피 불길을 뿜는다<br/><br/>
      
      (2절) 아침안개 속으로 햇살받으며 돌가루 먼지속에 그리던 간밤<br/>
      땀투성이 얼굴을 들어 볼때에 도솔산 고지고지 발아래 있네<br/>
      오~ 도솔산 높은 봉 해병대 쌓아올린 승리의 산 오늘도 젋은 피 불길을 뿜는다<br/><br/>
      
      (3절) 돌바우 벼랑도 골짜기에도 손발의 피땀으로 아로 새겨진<br/>
      해병대의 그이름 가실리 없어도 세상사람 잊었소 도솔산 싸움<br/>
      오~ 도솔산 높은 봉 해병대 쌓아올린 승리의 산 오늘도 젋은 피 불길을 뿜는다
  </p>
</div>
</div>
</div>
</body>
</html>

결과
http://p21700305.dothome.co.kr/JqEx.html

참고: http://www.tcpschool.com/jquery/jq_intro_basic

박지성 학부생

참 되게 살자

이전 포스트