http://www.tcpschool.com/jquery/intro

설치

J Query는 자바스크립트 라이브러리이므로, J Query 파일은 자바스크립트 파일(.js 파일) 형태로 존재한다. 따라서 웹 페이지에서 J Query를 사용하기 위해서는 J Query 파일을 먼저 웹 페이지에 로드(load)해야 한다.

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

위와 같은 load 방법을 CDN이라고 하며, 트래픽이 집중되지 않고 전송시간이 단축되는 장점이 있다.

---

문법

실행

1. 선택 및 함수 호출

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

2. 문서 로드 이후 코드 실행법

👉 JS의 window.onload= function(){코드;};와 같이 문서가 전부 읽혀진 다음에 코드를 실행시키는 방법이다.

$(document).ready(function() {
    코드;
});

위의 짧은 버전

$(function() {
    코드;
});

❗.ready는 컴퓨터가 읽는 문서가 모두 읽혔을때 실행되는 코드
❗.load는 사용자가 읽는 창이 모두 읽혔을때 실행되는 코드이다.

---

선택자

CSS 선택자

css 선택자를 이용한 요소 선택
1. 요소 선택

$(function() {
    $("p").on("click", function() {
    // <p>요소를 모두 선택
    	$("span").css("fontSize", "28px");
      	// <span>요소를 모두 선택
    });
});

2. Id 선택

$("#sumin0gig").on("click",function(){});
// 아이디가 sumin0gig인 요소를 click하면 함수를 실행;

3. class 선택

$(".jquery").on("click",function(){});
// 클래스가 jquery인 요소를 click하면 함수를 실행;

✔ 비표준 선택자

1. 선택한 요소의 저장

var items = $("li");
// li 요소를 모두 선택하여 items 변수에 저장

2. 선택한 요소의 필터링

$("li:has(span)");
// li요소 하위에 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("체크되어 있는 요소 모두 선택");
    });
});

선택자	설명
: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	활성화되어있는 요소를 모두 선택함.