jQuery_기본 개념

jQuery장점

: DOM과 관련된 처리를 쉽게 구현할 수 있다.

: Ajax통신, 이벤트 처리 등 폭넓게 지원한다.

: 별도의 플러그인을 통해 차트, 슬라이드쇼, 테이블 등 간단히 구현이 가능하다.

 

jQuery연결방법

방법1 : jQuery홈페이지에서 js파일을 다운로드 받아 연결

방법2 : CDN(Content Delivery Network)을 통한 연결--> 인터넷이 연결되어 있어야 한다.

 

$사용 = 제이쿼리

# = id

$(document).ready(function(){
	$('ol-connect').css('background', 'beige');
});

 

$(document).ready()

: 페이지를 로드한 후 ready메소드 실행 = JavaScript의 window.onload()

: 자바스크립트의 window.onload속성은 여러 개 설정 시 마지막에 쓴 것으로 덮어써진다.

: jQuery의 $(document).ready()는 여러 개 설정하면 모두 연달아 실행한다.

jQuery(document).ready(function(){
			$('#아이디명').css('border', '3px dashed red');
		});
$(document).ready(function(){
			$('#아이디명').css('background', 'pink');
		});

 

<선택자와 메소드>

: 선택자를 지정하고 메소드를 통해 jQuery적용

 

disabled

: 입력창 비활성화 설정

 

1) 전체 선택자 *

$('*').css('color', 'white');//전체 선택
console.log($('*').css('color'));

css() : 문서 객체의 스타일을 검사하거나 변경할 때 사용

콘솔에 찍어볼 때 소괄호 안에 그대로 넣으면 된다.

rgb(0, 0, 0) : 선택자에 대한 컬러(글자색) 확인.

 

2) 태그 선택자

$('태그').css('효과', '효과속성');

$('label').css('font-weight', 'bold');
$('label, p').css('background', 'beige');

 

3) 아이디 선택자 #

$('#name').attr('placeholder', '아이디를 입력하세요');
console.log($('#name').attr('placeholder');//속성값을 알아낼 수 있다.
$('#name').attr('size', 100);
$('#name').removeAttr('size');

attr()

: 문서 객체의 특정 속성 값을 알아내거나 추가할 때 사용

 

removeAttr()

: 속성값 삭제

 

4) 클래스 선택자 .

$('.order').css('background', 'rgba(0, 0, 225, 0.1)');//(적,녹,청,투명도)
$('.order.important').css('background', 'tomato');

 

5) 자식 선택자, 후손선택자 >

$('div>h3').css('color', 'brown');
$('div li').css('color', 'orange');

 

6) 속성 선택자

$('input[size]').css('background', 'yellowgreen');
$('input[type=number]').attr('placeholder', '번호 필수 입력');
$('input[class~=inportant]').val('12345');
console.log($('input[class~=important]').val());

$('input[size]') : size를 가지고 있다면 변경!

 

~= : 띄어쓰기 구분자 했을 때 important가 들어가 있다면 값 넣기

 

val() : value에 값을 설정하거나 value값을 확인할 때 사용한다.(=value 자바스크립트의 벨류)

 

$('input[name*=d]').css('background', 'pink');
$('input[name^=n]').css('background', 'skyblue');
$('input[class$=der]').css('background', 'rgba(0, 100, 0, 0.1)');

[name*=value] : 특정값을 포함하고 있다

 

[name^=value] : ^로 시작하는 값의 속성 변경

 

[name$=value] : 지정된 문자열로 끝나는 노드

 

$('input:text').css('background', 'white');
$('input:password').css('background', 'gold');
$('input:checkbox').prop('checked', true);

prop()

: 속성 값의 여부를 true/false로 설정하거나 알아낼 때 사용.

: 속성에 대한 값이 true/false일때 사용.

 

attr()

: 속성에 대한 값이 다양할 때 사용한다.

 

속성 설정

방법1. 하나씩 스타일 설정

$('input:radio').css('height', '30px');

 

방법2. 메소드 체이닝 (스타일 묶어서 같이 설정 가능)

$('input:radio').css('width', '30px').css('height', '30px');

css().css();

 

방법3. 객체방법 (css의 설정이 여러개여서 중괄호{}로 해서 객체로 넘긴다.)

$('input:radio').css({'width': '30px', 'height':'30px'});
$('input:file').css({'background':'blue', 'color':'white'});

 

mouseenter() : 마우스를 대면 기존이미지에서 지정 이미지로 변경

$('input:image').mouseenter(function(){
	//<input type="image" src="../images/flower1.PNG" height="200px">//=this를 말한다
    $(this).attr('src', '../images/river1.PNG');
});

 

mouseout() : 마우스를 떼면 다시 이전 원래 이미지로 돌아간다.

$('input:image').mouseout(function(){
	$(this).attr('src', '../images/flower1.PNG');
});

 

mouseenter() + mouseout() 함수로 연결

$('input:image').mouseenter(function(){
    $(this).attr('src', '../images/river1.PNG');
}).mouseout(function(){
	$(this).attr('src', '../images/flower1.PNG');
});

 

순서에 따른 필터 선택자 : zero-based

 

$('태그:odd') : 태그의 홀수번째

$('태그:even') : 태그의 짝수번째

$('태그:first') : 태그의 첫 번째

$('태그:last') : 태그의 마지막 번째

 

순서체크 (제로베이스X)

$('태그:nth-child(2n)') : 짝수번째 

$('태그:nth-child(지정숫자)') : 지정숫자 번째

$('tr:odd').css('background','yellow');//tr의 홀수번째에 노란색넣기
$('tr:even').css('background','lightgray');//tr의 짝수번째에 회색넣기
$('tr:first').css({'background':'black', 'color':'white'});//tr의 첫번째에 배경블랙,글자 컬러화이트로 변경
$('tr:last').css({'background':'orangered', 'color':'white'});//tr의 마지막번째에 배경 오렌지, 글자컬러 화이트로 변경
//위에와 다르게 순서로 체크하기 때문에 제로베이스가 아닌 상태로 순서체크를 한다.
$('tr:nth-child(2n)').css('background','yellowgreen');//짝수번째에 그린
$('tr:nth-child(3)').css('background','orange');//3번째에 오렌지컬러 설정

 

$('태그:eq(지정숫자)') : 지정숫자번째

$('태그:gt(지정숫자)') : 지정숫자 이상 큰(제로베이스)

$('태그:lt(지정숫자)') : 지정숫자보다 작은

 

$('태그:contains('지정조건')') : 지정조건이 들어가있는 태그 포함

 

$('태그:has(a)') : 태그의 a태그가 들어간 부분

$('태그:has(a[href])') : 태그의 a태그 안에 href도 들어가 있는 부분

 

$('태그:not(:contains("지정조건"))') : not으로 태그를 뒤집어준다.

 

$('tr:eq(7)').css({'background':'black', 'color':'gray'});
//7번째에 배경 블랙,글자컬러 그레이로 지정.제로 베이스
$('tr:gt(2)').css('background','white');//2보다 큰곳에 배경 화이트로 설정,제로베이스
$('tr:lt(7)').css('font-size','30px');//7보다 작은 부분에 폰트사이즈 30px설정
			
$('td:contains("B형")').css('color', 'red');
//td태그의 컨테인즈: 포함, B형이 들어간부분만 빨간색으로 설정
			
$('td:has(a)').css('font-style','italic');//td태그의a태그가 들어간 부분에 폰트 이탈리어체로 변경
$('td:has(a[href])').css('background','cyan');
//td태그의 a태그안에 href도 들어가 있는 곳에 배경색 하늘색으로 설정
			
$('td:not(:contains("류라라"))').css('color','olive');//not으로 td태그의 뒤집어준다.