제이쿼리란?
존레식에 의해 개발된 경량 javascript 라이브러리
Write Less, Do More(보다 간단하지만 더 많으것을!)을 모토로 복잡했던 코드를 손쉽게 구현
-DOM과 관련된 처리 쉽게 구현
-일관된 이벤트 연결 쉽게 구현
-시각적 효과 쉽게 구현
-Ajax애플리케이션 쉽게 개발
애니메이션 기능, Ajax통신, 이벤트 처리 등 폭넓게 지원
jQuery플러그인을 통해 차트작성, 슬라이드쇼, 엑셀같은 테이블도 간단한 코드로 구현가능
jQuery연결
CDN(Content Delivery Network)을 통한 연결
->온라인으로 js파일을 불러와서 실행
src = "http://code.jquery.com/jquery-latest.js"
파일 다운로드 연결(오프라인에서 하는 경우)
->jQuery홈페이지에서 최신버전 js파일을 다운로드 후 파일 경로를 추가
jQuery 시작
jQuery를 사용하는 웹 페이지 시작코드 $ 또는 jQuery사용
window.load 속성과 같은 개념의 메소드
페이지 내용을 로드한 후 read메소드 실행
<script>
$(document).ready(function(){
});
또는 축약형으로
$(function(){
});
</script>
선택자 부분에는 태그의 이름이 들어 올 수 있지만 id값이나 class값이 들어갈 수 도있다.
$(function () {
$('#start').css('width', '100px');
$('#start').css('height', '100px');
$('#start').css('background-color', 'blue');
$('h1').css('color', 'aqua');
})
<body>
<h1>제이쿼리 시작</h1>
<div id="start"></div>
또한 선택자 부분에 CSS에서 쓰이던 다양한 선택자도 적용이 가능하다.
ex) h3:last-of-type, h3:nth-child(1) 등등
h3:last-child -> 구조에서 마지막 요소가 h3이면 선택됨
h3:last-of-type -> 구조마다 마지막 h3 태그에게 옵션을 준다.
<div>
<h3>a</h3>
<h3>s</h3>
<h3>d</h3>
<h3>ddd</h3>
</div>
<script>
$(function () {
$('h3:last-of-type').css('background-color', 'green');
//구조에서 h3:nth-child(n) n번째 에게 옵션을 바꿈
$('h3:nth-child(1)').css('color','tomato');
});
//'h3:last-child' -> 구조에서 마지막 요소가 h3이면 바꿈
//'h3:last-of-type' -> 구조마다 마지막 h3 태그에게 옵션을 준다.
</script>
<h3>asdasd</h3>
<div>
<p>1</p>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<span>
<p>4</p>
</span>
<script>
$(function(){
//구조에서 p태그가 혼자인경우 옵션을 바꿈
$('p:only-child').css('background-color','tomato');
});
</script>
eq와 gt, lt
<p>다중 엘리멘트를 불러왔을때 인덱스로 검색하는 방법</p>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
$(function(){
//구조적으로 #list라는 범위를 지정해주고 그 밑으로까지 옵션 변경
//eq(숫자)의 해당하는 요소 변경
$('#list li:eq(0)').css('color','tomato');
//gt(숫자)의 밑으로 전부 변경
$('#list li:gt(1)').css('color','blue');
//#list라는 제한이 없어 그 밑에 까지 영향!
$('ul li:gt(1)').css('color','blue');
//6번째 위로 전부 옵션 변경!
$('ul li:lt(6)').css('color','hotpink');
});
</script>
//part 2#
<h4>1</h4>
<h4 class="tt">2</h4>
<h4>3</h4>
<h4 class="tt">4</h4>
<script>
$(function(){
$(':header').css('color','gold');
$(':contains(1)').css('color','gray');
$('h4:not(.tt)').css('color','aqua');
});
</script>
선택자의 종류(참고)
https://www.w3schools.com/jquery/sel_attribute_contains_value.asp