jQuery

jQuery - 01.정의 및 사용하기

보로로롬 2016. 7. 12. 13:47

jQuery란?


엘리먼트를 선택하는 강력한 방법과

선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는

자바스크립트 라이브러리



----------------------------------------------------------------------------------------------


jQuery 사용하기 


일단    ->   http://jquery.com/  사이트로 접속을합니다.

아래사진에 색칠되있는것 처럼 다운로드를 눌러주시구요~




다운로드 맨아래로 가시면 jQuery.CDN을 눌러주세요.

저는 최신버전이아니고 제일 많이쓰는 버전으로.. 할거기 때문에..








클릭하셔서 아래와같이 화면이 나오시면 jQuery 1.x 버전!!

다운로드는 안하고  uncompressed 이버튼을 눌러주세요.






클릭하시면 아래와같이 창이뜨는데 저희는 

src="https://code.jquery.com/jquery-1.12.4.js 이부분만 복사를 해주세요.




복사하셨으면 아래처럼 <script src="https://code.jquery.com/jquery-1.12.4.js>

이렇게 등록해주시면 사용이 가능합니다.  





이제 jQuery를 사용할수 있습니다.!!!!

테스트를 한번 해볼게요.





위와같이 소스를 쓰시고 실행을 하시면!!!!!

alert창이 뜨면서 'jQuery 시작해봐요' 라고 출력이 됩니다.



---------------------------------------------------------------------------------------------------------------------


$ = jQuery 


선택자

$(“*”) : 전체요소선택

$(“태그명”) : 태그명선택

$(“#아이디명”) : 아이디명 선택

$(“.클레스명”) : 클레스명 선택

$(“태그명1 태그명2″) : 태그명1의 하위요소 태그명2

$(“태그명1>태그명2″) : 태그명1의 자식요소

$(“선택요소”).parent : 선택요소의 부모요소

$(“선택요소”).children(“태그명”) : 선택요소의 자식요소

$(“선택요소”).prev() : 선택요소의 형제요소의 이전요소

$(“선택요소”).next() : 선택요소의 형제요소의 다음요소

$(“선택요소”).siblings(“태그명”) : 선택요소의 형제요소 모두

$(“:종류”) : input 요소 중 종류가 일치하는 요소 선택


----------------------------------------------------------------------------------------------------------------------

예제


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
// 	alert('jQuery 시작해봐요!')
		//$('선택자').css('속성','값'); <- 스타일 속성값 지정 문법
			//모든 엘리먼트들의 색을 파란색으로
			$('*').css('color','blue');
		//h3태그에 밑줄그리기
			$('h3').css('textDecoration','underline');
		//h3,h4태그에 바탕색 남자의색으로 지정
			$('h3,h4').css('backgroundColor','pink');
		//div라는 클래스 명을 갖는 요소의 글자 크기를 30으로 지정
			$('.div').css('fontSize','30px');
		//tag 아이디를 갖는 글자의 색상을 빨강으로 지정
			$('#tag').css('color','red');
});
</script>
</head>
<body>
<h3>jQuery 기본 selecor</h3>
<h4>웹 프로그래밍</h4>
<div class="div">
	<ol>
		<li>jsp</li>
		<li id="tag">JavaScript</li>
		<li>jQuery</li>
		<li>Ajax</li>
	</ol>
</div>
</body>
</html>

출력 값

위와 같이 출력이 됩니다.

---------------------------------------------------------------------------------------------------------