[J-Query] Selector

J-Query

J-Query 는 Java Script 의 라이브러리다.
(장점: 자바스크립트 보다 원하는 걸 잘 뽑아낼 수 있다. (여러가지 함수 제공))

※ 라이브러리

• 자주 사용하거나 직접 구현이 어려운 기능을 만들어 모아 놓은 Program Group
• 자바스크립트 라이브러리 로는 J-Query 외에도 RequireJS, Prototye, AngluarJS, Backbone 등이 있다.

✅ 사용하는 이유

1) 사용의 편리성이 있다.

var elem = document.getElementById( “demo” );
elem.addListener(“click”, function(){
alert( “hello, j-Query” );
})

이렇게 작성된 코드를 아래와 같이 작성해 사용할 수 있다.

$( “#demo” ).click( function(){
alert( “hello, j-Query” );
})

2) Cross Browsing

• 자바스크립트는 브라우저 별로 해석하므로 종류나 버전마다 표현이 안되거나 다르게 되는 경우가 있다.
  (해석기는 각각의 회사에서 제공하기 때문에 브라우저마다 해석이 다르다.)
• J-Query 에는 각각 브라우저에 맞춰 분기되기 때문에 신경쓰지 않아도 된다. (지금은 각 브라우저가 표준을 맞춰나서 큰 역할은 아니다)

3) 다양한 Plugin

• J-Query를 기초로 한 유용한 플러그인이 많다. (Bootstrap, J-Query UI, Pagination 등)
  
  

---

사용 방법 : html 문서 head에 <script src="파일경로"></script>

Selector ($)

✨ Selector

J-Query 에서는 css에서 사용하는 Selector 의 기능을 차용해서 원하는 요소를 쉽게 가져올 수 있다.
(기존에 JavaScript에서 사용하는 방식은 원하는 요소만 하나 가져오기 위해선 굉장히 긴 코드를 사용해줘야 한다.)

• $("p") : p 태그인 요소
• $("#byn") : 아이디가 btn인 요소
• $(".btn") : 클래스가 btn인 요소
• $(this) : 현재 엘리먼트 선택 (나 자신)
• $("*"): 모든 엘리먼트 선택
• $("p.intro") : p 태그 중에서 class가 intro 인 엘리먼트 (p 하고 공백을 두면 p의 자식 중 class 가 intro인 요소)
• $("p:first") : p 태그 중에서 첫 번째 엘리먼트
• $("ul li:first") : 첫번째 ul 태그 하위의 첫번째 li 엘리먼트
• $("ul li:first-child") : 모든 ul 태그 하위의 첫번째 li 엘리먼트

가장 기초가 되는 id, class, 태그를 가져오는 코드를 비교해보자!

<script>
    // javascript (여러개인 경우에만 배열에 담는다.)
    console.log(document.getElementById('one')); // id = "one"
    console.log(document.getElementsByClassName('cls')); // class = "cls"
    console.log(document.getElementsByTagName('p')); // p 태그

    console.log('==================')

    // J-Query (하나인 경우에도 배열에 담아온다.)
    console.log($('#one')); // id = "one"
    console.log($('.cls')); // class = "cls"
    console.log($('p')); // p 태그
</script>

이렇게 봤을 때 가장 큰 차이점은 J-Query 는 "하나인 경우에도 배열에 담아온다" 는 것이다.

그럼 다른 예시 코드도 살펴보자

console.log($('*')); // 전체 선택 (보통 조건을 주고 조건 안에서 전체 선택을 한다.)
console.log($('h1.cls')); // h1 태그 중에서 클래스가 cls(띄어쓰기 들어가면 자식으로 인식)
console.log($('p:first')); // p 태그 중에서 첫번째 (대체 가능)

console.log($('ul li')); // ul 태그의 자식 요소 중 li 태그를 의미
console.log($('ul li:first')); // 첫 ul의 자식의 첫 li 선택
console.log($('ul li:first-child')); // 각 ul의 자식의 첫 li 선택

이렇게 어떠한 요소 중에서 일부만도 가져올 수 있다.

❗ this

this는 이벤트를 당한 당사자 요소를 뜻한다.
그래서 만약 이벤트를 걸어주고 this를 사용해주면 이벤트를 당한 당사자가 선택되어 출력 또는 동작된다.

$('p').click(function(){ 
    console.log($(this)); // 클릭된 p 요소가 콘솔에 출력된다.
});

---

속성을 선택 하는 방법은 다음과 같다. $('태그[속성]')

console.log($('a[href]')); // a 태그 중에서 href 속성이 있는 요소
console.log($('a[target="_blank"]')); // a 태그 중에서 target 속성이 _blank 인 요소
console.log($('a[target!="_blank"]')); // a 태그 중에서 target 속성이 _blank가 아닌 요소

---

짝수(Even) 와 홀수(Odd)

짝수를 찾을 때에는 even을 사용하고 홀수를 찾을 때에는 odd를 사용한다.
※ 주의 : 배열에 담아져 오기 때문에 인덱스 0번부터 시작한다. (0은 짝수!)