Web/AppSpring

7.jquery

2006년 Mozila의 자바스크립트 에반젤리스 Jhon Resig에 의해 개발 / 공개
여러 자바스크립트 라이브러리 ( prototype.js, Mootool.js 등) 중에 가장 주목 받고 있다.
jQuery로 코딩하면 자바스크립트 코드가 간결해 진다.
가볍다 ( 90KB)
IE6.0 이상, Firefox2.0 이상, Safari 3 이상, Opera 9이상, Google Chrome등의 주요 브라우저를 지원하여 클로스브라우징을 가능케 한다.

엘리먼트를 골라야 하는 시점들
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//엘리먼트를 골라야 하는 시점 1(Vanilla JS)
window.onload = function(){
	console.log(document.getElementBy("my-p"));
}

//엘리먼트를 골라야 하는 시점 2 (jQuery)
jQuery( document ).ready( function(){
	console.log( document.getElementById("my-p"));

//엘리먼트를 골라야 하는 시점 3 (jQuery)
$( document ).ready( function(){
	console.log(document.getElementById("my-p"));
})

//엘리먼트를 골라야 하는 시점 4 (jQuery)
$(function(){
	console.log(document.getElementById("my-p"));
});
jQuery 함수를 이용한 색 변경
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(function(){
  setTimeout( function(){
  var $li = $("li");
  $li.css("color","#f00" );

  //jQuery Object 뭐냐?
  console.log($li.length);
  console.log($li[0]); //HTMLElement Object

  //에러유발
  //$li[0].css("font-weigth","bold")

  $li[0].style.fontWeight = "bold";

  //jQuery API를 호출 하고 싶으면
  //jQuery 함수(=$)로 매핑한다
  $($li[0]).css("text-decoration","underline")


  //get api함수를 사용해서 HTMLElement 가져오기

  $($li.get(1)).css("backgroundColor","#ccc");

  },2000)
});
jQuery 활용방법
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("#first").css("color","red");


$("#secnod").css("color","blue");
$("#second").css("fontWeight","bold");

var $li3 = $("#third");
$li3.css("color","blue");
$li3.css("fontWeigth","bold");

//메소드 체인
$("#third").css("color","blue").css("fontWeight","bold");

// 파라미터로 JSON을 사용하는 방법
$("#fifth").css({
  "color":"blue",
  "fontWeight":"bold"
});
다양한 선택방법
1
2
3
4
5
6
7
8
9
10
11
12
13
$(".red strong").css("color","red").text("text");

$(".blue #s1").css("color","blue");	//자손 선택
$(".blue > #s2").css("color","red");	//자식선택 (바로아래)
$("#second + li").css("color","red");	//인접선택


$("li:first-child").css("color","red");	//첫번째 자식
$("li:last-child").css("color","red");	//마지막 자식


$("li[id]").css("color","red");	//id 속성이 있는 애만
$("li[class]").css("color","red");	//class속성이 있는애만
Share