jQuery : 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리
1) CDN 호스트를 사용 (구글, ms에서 지원)
2) 직접 내려받아 사용하는 방법
// CDN
<script src="jquery-3.1.1.js"></script>
- onload : 웹브라우저의 html의 모든 tag를 javascript object로 변환한 후에, window에 모든 tag를 화면에 display하기 전에 발생하는 event
window.onload = function () { };
- $(document).ready()는 window.onload와 동일한 기능
$(document)
: JS object
.ready
: $(document) object의 method
// javascript에서는 1개의 event에 대하여 여러개의 함수를 등록 가능
$(document).ready(function () {
alert('First READY');
});
$(document).ready(function () {
alert('Second READY');
});
$(document).ready(function () {
alert('Third READY');
});
$('h1').css('color', 'red');
'*' : 전체 선택자
'태그 이름' : 태그 선택자<head> <script src="http://code.jquery.com/jquery-3.1.1.js"></script> <script> // $('selector') => selector사용 문법은 CSS selector 사용문법과 동일 $(document).ready(function () { // 전체 선택자(wild card selector) : '*' $('*').css('color', 'red'); }); // 태그 선택자(tag selector) $(document).ready(function () { // $('h1') => document.getElementsByTag() 함수를 사용하는 것과 동일한 효과제공 $('h1').css('color', 'orange'); }); $(document).ready(function () { $('h2, h3').css('color', 'blue'); }); </script> </head> <body> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet.</p> <h1>Lorem ipsum</h1> <p>consectetur adipiscing elit.</p> <h2>Lorem ipsum</h2> <h3>Lorem ipsum</h3> </body>
- 결과
'#id 이름' : 아이디 선택자
<head> <script src="http://code.jquery.com/jquery-3.1.1.js"></script> <script> $(document).ready(function () { // id selector $('#target').css('color', 'orange'); // $('h1#target').css('color', 'orange'); }); </script> </head> <body> <h1>Header-0</h1> <h1 id="target">Header-1</h1> <h1>Header-2</h1> </body>
- 결과
'.클래스 이름' : 클래스 선택자
<head> <script src="http://code.jquery.com/jquery-3.1.1.js"></script> <script> $(document).ready(function () { // class selector $('.item').css('color', 'orange'); $('h1.item').css('background', 'red'); $('.item.select').css('color', 'blue'); }); </script> </head> <body> <h1 class="item">Header-0</h1> <h1 class="item select">Header-1</h1> <h1 class="item">Header-2</h1> </body>
- 결과
- A > B : 자손 선택자
A의 자손 중 B를 선택- A B : 후손 선택자
A의 모든 후손 중 B를 선택<head> <script src="http://code.jquery.com/jquery-3.1.1.js"></script> <script> $(document).ready(function () { // child selector $('div > *').css('color', 'red'); // all descendent(자식, 손자 등 모든 후손을 선택) selector $('div *').css('color', 'red'); }); </script> </head> <body> <div> <ul> <li>Apple</li> <li>Bag</li> <li>Cat</li> <li>Dog</li> <li>Elephant</li> </ul> <p>this is paragraph</p> </div> </body>
- 결과
속성 선택자
<head> <script src="http://code.jquery.com/jquery-3.1.1.js"></script> <script> $(document).ready(function () { // val() : input tag의 내용(값, value)을 설정하는 메소드 $('input[type="text"]').val('Hello jQuery..!'); }); </script> </head> <body> <input type="text" /> <input type="password" /> <input type="radio" /> <input type="checkbox" /> <input type="file" /> </body>
- 결과
기본 선택자 뒤에 사용
<head>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
// 5초 후에 코드를 실행합니다.
setTimeout(function () {
// 변수 value 선언
// select > option => select의 자손 중 option 선택
// option:selected => (filter) option 객체 중 선택된 태그를 선택
var value = $('select > option:selected').val();
// 출력
alert(value);
}, 5000);
});
</script>
</head>
<body>
<select>
<option>Apple</option>
<option>Bag</option>
<option>Cat</option>
<option>Dog</option>
<option>Elephant</option>
</select>
</body>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
$('tr:odd').css('background', 'red');
$('tr:even').css('background', '#9F9F9F');
// $('tr:first').css('background', '#000000') => javascript object
// css method의 return값은 javascript object
$('tr:first').css('background', '#000000').css('color', '#FFFFFF');
});
</script>
</head>
<body>
<table>
<tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
<tr><td>강민수</td><td>AB형</td><td>서울특별시 송파구</td></tr>
<tr><td>구지연</td><td>B형</td><td>미국 캘리포니아</td></tr>
<tr><td>김미화</td><td>AB형</td><td>미국 메사추세츠</td></tr>
<tr><td>김선화</td><td>O형</td><td>서울 강서구</td></tr>
<tr><td>남기주</td><td>A형</td><td>서울 노량진구</td></tr>
<tr><td>윤하린</td><td>B형</td><td>서울 용산구</td></tr>
</table>
</body>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
$('tr:eq(0)').css('background', '#000000').css('color', 'white');
// 3n+1 => 3으로 나누었을 때 나머지가 1
$('td:nth-child(3n+1)').css('background', 'yellow');
$('td:nth-child(3n+2)').css('background', 'red');
$('td:nth-child(3n)').css('background', 'blue');
});
</script>
</head>
<body>
<table>
<tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
<tr><td>강민수</td><td>AB형</td><td>서울특별시 송파구</td></tr>
<tr><td>구지연</td><td>B형</td><td>미국 캘리포니아</td></tr>
<tr><td>김미화</td><td>AB형</td><td>미국 메사추세츠</td></tr>
<tr><td>김선화</td><td>O형</td><td>서울 강서구</td></tr>
<tr><td>남기주</td><td>A형</td><td>서울 노량진구</td></tr>
<tr><td>윤하린</td><td>B형</td><td>서울 용산구</td></tr>
</table>
</body>
each() 메소드 사용
매개변수로 입력한 함수로, 반복문처럼 객체나 배열의 요소를 검사
$.each(object, function(index, item){}) $(selector).each(function(index, item){})
<script>
$(document).ready(function () {
var array = [
{ name: 'Hanbit Media', link: 'http://hanbit.co.kr' },
{ name: 'Naver', link: 'http://naver.com' },
{ name: 'Daum', link: 'http://daum.net' }
];
// $.each() 메서드를 사용
// $ => javascript object, each : method
// index : array 배열의 index, item => { name: 'Hanbit Media', link: 'http://hanbit.co.kr' }
// each method의 callback function 선언
$.each(array, function (index, item) {
var output = '';
output += '<a href="' + item.link + '">';
output += ' <h1>' + item.name + '</h1>';
output += '</a>';
document.body.innerHTML += output;
});
});
</script>
<head>
<style>
.high-light-0 { background: yellow; }
.high-light-1 { background: orange; }
.high-light-2 { background: blue; }
.high-light-3 { background: green; }
.high-light-4 { background: red; }
</style>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
addClass()
// $('h1') => 5개 h1 객체를 갖고 있는 array 가 return
$('h1').each(function (index, item) {
$(item).addClass('high-light-' + index);
// $(this).addClass('high-light-' + index);
});
$(selector).each()
$('h1').addClass(function (index) {
return 'high-light-' + index;
});
});
</script>
</head>
<body>
<!-- <h1 class="high-light-0">item - 0</h1> -->
<h1>item - 0</h1>
<h1>item - 1</h1>
<h1>item - 2</h1>
<h1>item - 3</h1>
<h1>item - 4</h1>
</body>
$.extend()
: 많은 수의 속성을 추가할 때 사용<script>
$(document).ready(function () {
var object = { name: '윤인성' };
// $.extend()
$.extend(object, {
region: '서울특별시 강서구',
part: '세컨드 기타'
});
var output = '';
// each method : array, object 둘 다 사용가능
// key : object의 속성이름, item : object 속성 값
$.each(object, function (key, item) {
output += key + ': ' + item + '\n';
});
alert(output);
});
</script>
$.noConflict()
➡ 더이상 식별자 $ 를 사용할 수 없음