📌jQuery란?
제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식(john Resig)이 자바스크립트를 이용해 만든 라이브러리 언어입니다.
(라이브러리란 자바스크립트로 만들어진 다양한 함수들의 집합을 가리킵니다.)
📖 jQuery 기본구조
$() => 팩토리 함수 : jQuery 객체를 생설
=> 자바스트립트객체랑 다르다
=> jquery함수를 호출
var= obj ={} => 자바스크립트 객체
window.onload = function() {}=> HTML문서 로딩 후 함수 호출(외부 리소스 포함)
$(document).ready(function(){ //외부리소스 제외 : 문서 구조만 로딩
$('.poem-stanza').addClass('highlight');
});
$(function(){
$('.poem-stanza').addClass('highlight');
})📖each
each() => 해당 요소마다 각각의 작업을 수행
$('요소').each(function(index,item){
//제이쿼리 객체여서 제이쿼리함수를 불러서 각요소들 수행
$(item). //각 요소들의 작업을 수행
});
$.each(배열,function(index,item){
//$.은 전역함수로써의 each를 호출한것
$(item). //배열의 각 요소들의 작업을 수행
});✍예제1
<script>
$(document).ready(function () {
// 변수를 선언합니다.
var array = [
{ name: 'kosta', link: 'http://kosta.co.kr' },
{ name: 'Naver', link: 'http://naver.com' },
{ name: 'Daum', link: 'http://daum.net' }
];
var output ="";
/*<a href ="http://naver.com>Naver</a>"
// $.each() 메서드를 사용합니다.
$.each(array,function(index,item){
//$.은 전역함수로써의 each를 호출한것
output += '<a href ="'+ item.link+'">'
output += item.name+'</a><br>';
}); */
var arr2 = $.map(array, function(item, index){
if(item.name == 'Daum'){
return item;
}
});
$.each(arr2, function(index, item){
output += '<a href="' + item.link + '">'
output += item.name + '</a><br>';
});
$('body').html(output); //ineerHTML처럼 사용된다.
});
</script>✍예제2
<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 () {
$('h1').each(function(index,item){
//셀렉트 집합들
$(item).addClass('high-light-'+index);
//파라미터안쓰면 item대신 this사용
});
});
</script>
</head>
<body>
<h1>item - 0</h1>
<h1>item - 1</h1>
<h1>item - 2</h1>
<h1>item - 3</h1>
<h1>item - 4</h1>
</body>
개발자로 차근차근