제이쿼리

제이쿼리(jQuery)
: 제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립스 라이브러리

*기본 문법

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

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

$()함수
- $()함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할
- $()함수를 통해 생성된 요소를 제이쿼리 객체(jQuery object)라고 함
- 제이쿼리는 이렇게 생성된 제이쿼리 객체의 메소드를 사용하여 여러 동작을 설정 가능

* Window객체의 onload()메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정

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

---

* Document 객체의 ready()메소드로 같은 기능 실행가능

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

---

* jQuery Team에서 제공하는 더욱 짧은 문법

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

CSS 선택자를 이용한 선택

* CSS 선택자를 사용하여 HTML요소 선택하기 - 태그 이름을 사용하여 같은 태그 이름을 가지는 HTML요소를 모두 선택할 수 있다.

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

---

* id를 사용하여 특정 HTML 요소를 선택

$(function() {
	$("p").on("click", function() {
  	$("#jp").css("boarder", "2px soild orange"); // 아이디가 "jp"인 요소를 선택함
  });
});

---

* class를 사용

$(function()() {
	$("p").on("click", function() {
  	$(".jq").css("backgroundColor", "lightgray"); // 클래스가 "jq"인 요소를 모두 선택
  });
});

---

* 속성(attribute)을 사용

$function() {
	$("button").on("click", function() { //<img>요소 중에서 alt 속성값이 "flower"인 요소를 모두 선택
  	$("img[alt='flower']").attr("src", "/examples/images/img_monalisa.png");
  });
});

제이쿼리 선택자

*선택한 요소의 저장

$(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>요소를 가지고 있는 아이템");
   });
});

---

* input 요소의 선택

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

선택된 요소에 접근