jQuery_01

jQuery를 대학생 시절 스치듯이 배운 경험이 있다.
이번 인턴 기간동안 짧게나마 사용을 해볼 것 같아 jQuery관련 포스팅을 시작해보려한다.
하여, jQuery가 어떻게 만들어졌고, 어떤 언어이고 이렇게 자세한 포스팅이 아닌
인턴기간동안 필요한 부분만 포스팅하려한다.

jQuery

제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다.

jQuery가 사용되는 이유
1. 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다.
2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다.
3. 애니메이션 효과나 대화형 처리를 간단하게 적용해 줍니다.
4. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있습니다.
5. 다양한 플러그인과 참고할 수 있는 문서가 많이 존재합니다.
6. 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있습니다.

jQuery 적용법

jQuery를 다운받아 적용하는 방법도 있지만 해당 포스팅에서는
CDN을 통해 적용한 방법만 활용했습니다.

• CDN(Content Delivery Network)

1. jQuery.com CDN : <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

2. 구글 CDN       : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

3. MS CDN         : <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

4. CDNJS CDN      : <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

5. jsDelivr CDN   : <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>

jQuery 문법

jQuery의 기본 문법

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

• $는 jQuery를 의미하고, jQuery에 접근할 수 있게 해주는 식별자.
• 선택자를 이용하여 원하는 HTML요소를 선택하고, 동작함수를 정의하여 선택된 요소에 원하는 동작을 설정.
• $()함수
  • 선택된 HTML 요소를 jQuery에서 이용할 수 있는 형태로 생성해 주는 역할.
  • 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS선택자를 전달하여 특정 HTML요소를 선택 가능
  • $()함수를 통해 생성된 요소 = jQuery object

Document객체의 ready() 메소드

기본적으로 js 코드는 웹 므라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다.
혹여나 로드가 되기 전에 코드를 우선적으로 참조해 사용한다면 문제가 발생한다.
하여 js에서는 다음과 같은 코드를 통해 window객체의 onload() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.

window.onload = function() {
    자바스크립트 코드;
};

• 마찬가지로, jQuery 또한 이러한 문제를 방지하기 위해 Document객체의 ready() 메소드를 이용한다.

$(document).ready(function() {
    제이쿼리 코드;
});

// 축소 버전
$(function() {
    제이쿼리 코드;
});

오류 발생 경우

• 아직 생성되지 않은 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");
  }

출처

https://tcpschool.com/jquery/jq_basic_js