[Java Script] 1-1) jQuery (제이쿼리)

존래식에 의해 개발된 경량 자바스크립트 라이브러리로, 자바스크립트보다 쉽게 사용할 수 있다.

 

장점)

- DOM과 관련된 처리를 쉽게 구현 가능.

- AJAX 처리 이벤트 처리 등을 폭넓게 지원한다.

- 슬라이드쇼 차트 등을 간단히 구현 할 수 있다.

 

jQuery 연결 방법)

1. 홈페이지에서 js 파일을 다운 받기

2. CDN(Contents Delivery Network)를 통한 연결

문법)

$ : 제이쿼리를 의미 (접근할 수 있게 해주는 식별자)

$(선택자).동작함수();
: 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작함수를 정의하여 선택된 요소에 원하는 동작을 설정.

$( ) : HTML 태그 이름 뿐만아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택 할 수 있음.

→ 이 함수를 통해 생성된 요소를 제이쿼리 객체(jQuery object) 라고 칭함.

 

---

$(document).ready

: 페이지가 로드된 후 ready안의 콜백함수 실행 (자바스크립트의 document.onload 속성과 같은 개념)

/* jQuery == $ */

jQuery(document).ready(function(){
   $('#p2').css('background','blue');
})

$(document).ready(function(){
   $('#p2').css('background','yellow');
})

= id선택자 ('#p2')를 선택하여, css('background', 'green'); 배경색을 그린색으로 설정한다.

---

기본 선택자

전체선택자

*

HTML 페이지에 있는 모든 문서 객체를 선택한다.

$(function(){      $('*').css('color','red');  });

 

태그선택자

태그(id/class)를 선택하는 선택자

[ javaScript ] document.querySelector('#h3Id').style.color = 'green'; document.querySelector('#h3Id').style.color = 'black';

[ jQuery ] $('#h3Id').css('color','purple');  $('.h4Class').css('color','blue');

 

 

아이디 선택자

특정한 아이디 속성을 가지고 있는 문서 객체를 선택하는 선택자

[ JavaScript ]  document.querySelectorAll('.test1').forEach(function(v)){    v.style.color = 'blue'; }) document.querySelector('.test2').style.backgroundColor='yellow';

[ jQuery ] $(function(){    $('.test1').css('color','lightblue');    $('.test1.test2').css('background','blue'); });

 

자식 선택자와 후손 선택자

기본 선택자 앞에 붙여 사용하며 기본 선택자의 범위를 제한

<ul> <li><h3>apple</h3></li> <li>banana</li> <li>orange</li> <li>pineapple</li> <li>peach</li> </ul>
[ JavaScript ] document.querySelector('div>h3').style.color='purple'; document.querySelectorAll('div h3'). style.color='purple';.style.backgroundColor='yellow';	[ jQuery ] $(function(){   $('div > h3').css('color','red');  // 자식 선택자   $('div h3').css('background','orange'); });

속성 선택자	기본 선택자 뒤에 붙여 사용한다.
	요소[속성] 요소[속성 = 값] : 속성의 값으로 객체를 선택 요소[속성 ~= 값] : 속성 안의 값이 특정 값과 같은 객체를 선택 요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 객체를 선택 요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 객체를 선택 요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 객체를 선택

요소[속성 = 값] : 속성의 값으로 객체를 선택	$('input[type=text]').val("change value");
요소[속성 ~= 값] : 속성 안의 값이 특정 값과 같은 객체를 선택	$('input[class ~= test').val("123456");
요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 객체를 선택	$('input[type ^= ra]').attr("checked",true);
요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 객체를 선택	$('input[type $= box]').attr("checked",true);
요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 객체를 선택	$('input[class *= ra]').css("width","100px"). css("height","100px");

// attr : 속성을 checked를 true로