jQuery - Selector

jQuery 란?
JavaScript 라이브러리 중 하나입니다.
JavaScript 의 프로그래밍을 혁신적으로 단순화 시키고 편리하게 제작가능케 함
가장 널리 쓰이고, 가장 오래 쓰여온 JavaScript 라이브러리로
오늘날 주요 웹사이트는 거의다 jQuery를 사용함.

주요기능)
- HTML DOM을 쉽게 다룰수 있다
- CSS를 쉽게 다룰수 있다.
- HTML 이벤트 등도 쉽게 다룰수 있다
- 다양한 이펙트와 애니메이션도 쉽게 다룰수 있다.
- AJAX를 쉽게 다룰수 있다.
- 코드 보안성(?) 쉽게 다룰수 있다 (?)

공식사이트: http://jquery.com/
모토: write less, do more
일본어: ジェイクエリー

다운로드시 2가지 버젼)
압축된 버젼 :     jquery.min.js  (배포용)
비악축 버젼 :     jquery.js  (개발,디버깅용)

다양한 CDN 존재) https://releases.jquery.com/
-구글CDN  https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
-MS CDN  https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js

※ CDN : Content Delivery Network  혹은 Content Distribution Network
컨텐츠의 배포를 위해 세계 곳곳에 다운로드 가능한 서버에 컨텐츠를 배치시키고 다운로드 가능케 함.
CDN 의 이점 : 이미 방문한 사이트를 통해 이미  해단 컨텐츠가 다운로드되어 캐시 된 경우 로딩속도 향상 기대
            단점 : 해당 CDN 서버에 문제생기면, 이를 사용하던 서비스들도 문제 생김

※ 2022.2 현재: 최신 버젼은 3.6.0,  CDN 최신 버젼은 3.6.0

---

* 기본적은 jQuery 구문은 
HTML element 선택 +  그 element 에 동작(action) 수행

* 기본구문:
$(selector).action()

$ : jQuery 에 접근하기 위한 함수
(selector) : 다양한 방법으로 element 선택 가능.

$(this).hide() - 현재 element.
$("p").hide() - 모든 <p> element 를 숨긴다
$(".test").hide() - class="test"인 모든 element 를 숨긴다 
$("#test").hide() - id="test"인 모든 element 를 숨긴다

$(selector)의 리턴값은 
"wrapped set" 이라 불리우는 jQuery Object 다

이 object 는 select된 DOM element'들'을 담고 있는 array 와 같은 구조를 갖고 있다.
배열처럼 wrapped set 를 iterate 하여 각각의 element 를 접근할수 있다. 

(혹은 배열인덱스를 사용하여 접근 가능 (ex: $(selector)[0])
jQuery의 action 함수들은 위 select 된 모든 element에 적용되는 것이다.

 

 

- 기본적으로 jQuery을 사용하는 웹페이지들은 다음 코드로 시작함
   $(document).ready(함수);

$(document).ready(function(){
   alert("ready() 함수");
});

- 'document' 즉, 웹문서의 로딩이 '완료'되면 ready() 의 매개변수로 주어진 함수를 수행

$(document).ready(function(){
  document.write("안녕하세요<br>");
});

- 축약된 형태도 많이 사용
$(함수)  <==> $(document).ready(함수)

 

$(function(){
 alert("ready() 함수2");
});

- 실습: <button> 을 클릭하면 "p" 가 사라지게 해보세요 (.hide())
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
     })
})

---

* jQuery Selector

 

기본적으로 jQuery Selector는 CSS Selector 를 그대로 사용한다.
그러나, 그 밖에도 jQuery 에서 제공하는 고유한 selector 들이 있다.

jQuery 에서 모든 selector 들은 $( ) 안에 명시된다.

- $("*")    : 모든 element
- $(this)   : 현재 element

$("p.intro")
$("p:first")
$("ul li:first")
$("[href]")
$("a[target='_blank']")

https://api.jquery.com/category/selectors/
https://api.jquery.com/button-selector/

https://www.w3schools.com/jquery/trysel.asp

---