1. 문서객체 설정
each 메소드
배열을 관리하는 for in문과 비슷한 메소드로 객체나 배열의 요소를 검사하는 메소드
index : 객체, 배열의 순번
item : 값을 보관하는 변수, 배열의 실제 값
메소드 |
내용 |
$.each(배열이름, function(index,item) { } ) |
지정한 배열을 0번부터 자동으로 불러와 순번을 index, 값을 item에 넣는 메소드 |
$('s').each(function(index,item){ } ) |
선택자로 선택한 요소를 index순번으로 item에 요소 값을 수정시 사용하는 메소드 |
<style>
/* 0,1,2,3으로 이름을 설정해 반복문 돌리게 한다. */
.colorBack_0{background-color: yellow;}
.colorBack_1{background-color: lime;}
.colorBack_2{background-color: aqua;}
.colorBack_3{background-color: orange;}
</style>
</head>
<body>
<div id="area"></div>
<div id="area1"></div>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<button onclick="colorTest();">실행</button>
<script>
var objArr = [
{name:'네이버',link:'http://www.naver.com'},
{name:'다음',link:'http://www.daum.net'},
{name:'구글',link:'http://www.google.com'},
{name:'w3school',link:'http://www.w3schools.com'}
];
$.each(objArr,function(index,item){
var output='';
output +='<h3><a href='+item.link+">"+item.name+"</a></h3>";
var oriContent = $('#area1').html();
$('#area1').html(oriContent+output);
});
function colorTest(){
//h1태그들을 모아서 0번부터 실행해서 위의 스타일을 하나씩 적용
$('h1').each(function(index,item){
$(item).addClass('colorBack_'+index);
});
}
extend메소드
jQuery에서 객체의 내용을 추가하는 메소드
$.extend(객체이름, {
추가할 객체내용,
추가할 객체내용2,
...
}
);
var obj = {name:'병성',age:19};
var obj2 = {game:'지렁이게임', item:'지렁이똥'};
console.log(obj);
console.log(obj2);
//두 객체 합치기 앞쪽(obj)에 추가된다.
$.extend(obj,obj2);
console.log(obj);
console.log(obj2);
//변수에 임의의 객체값 넣기
$.extend(obj,{hp:100,mp:200});
console.log(obj);
noConflict메소드
jQuery변수를 $외에 다른 것으로 지정하는 메소드
다른 라이브러리를 사용하다보면 $ 표기법이 겹치는 경우가 발생할 수 있기 때문에 에러방지를 위해 사용함.
var 변수명 = $.noConflict();
변수명을 $ 대신 사용
var jq=$.noConflict();
jq(function(){
jq.extend(obj,obj2);
});
2. 클래스 / 속성 설정
addClass()
선택자에 의해 선택된 요소에 클래스를 추가하는 메소드
1.$('s').addClass('클래스이름');
//클래스를 여러 개 추가는 띄어쓰기를 하면된다.
2.$('s').addClass(function(n){
인자는 선택된 요소들의 번호;
return 값; //리턴된 값을 클래스로 추가
});
removeClass()
선택자에 의해 선택된 요소에 클래스를 삭제하는 메소드
1.$('s').removeClass('클래스이름');
//클래스를 여러 개 추가는 띄어쓰기를 하면된다.
2.$('s').removeClass(function(n){
인자는 선택된 요소들의 번호;
return 값; //리턴된 값과 일치하는 클래스 삭제
});
toggleClass()
선택된 요소에 class가 있으면 삭제하고 없으면 추가하는 메소드
1.$('s').toggleClass('클래스이름');
//클래스를 여러 개 추가는 띄어쓰기를 하면된다.
2.$('s').toggleClass('클래스명', [function(index,curclass){ }],[true|false]);
true 추가만, false 삭제만
<style>
.a {
color: white;
}
.b {
background-color: black;
}
.c{
border: 5px solid aquamarine;
}
.p0{background-color: brown;}
.p1{background-color: chocolate;}
.p2{background-color: coral;}
.p3{background-color: cornflowerblue;}
</style>
</head>
<body>
<div class="a">여러분 힘내세요 이제 마지막 시간입니다</div>
<button onclick="test()">class추가</button>
<button onclick="test1()">class삭제</button>
<button onclick="test2()">class토글</button>
<button onclick="test3();">추가</button>
<button onclick="test4();">제거</button>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<script>
function test(){
$('div').addClass('b c');
}
function test1(){
$('div').removeClass('b');
}
function test2(){
$('div').toggleClass('b');
}
console.log($('p'));
//p태그들이 배열에 저장되고 0번부터 끝번호까지 하나씩 접근함. 거기에 class를 추가함
function test3(){
$('p').addClass(function(n){
return 'p'+n;
});
}
function test4(){
$('p').removeClass(function(n){
return 'p'+n;
});
}
attr()
선택자에 의해 선택된 요소에 속성의 값을 확인하거나 값을 추가하는것
1. $('s').attr("속성명")
//속성명의 속성값을 리턴
2.$('s').attr('속성명','속성값')
//선택자의 속성과 속성값을 추가
removeAttr()
선택자에 의해 선택된 요소에 속성을 제거하는 메소드
1. $('s').removeAttr('속성명')
//속성명의 속성명을 제거, 여러개일 경우 띄어쓰기 사용
css()
선택자에 의해 선택된 요소의 속성값을 가져오거나 설정하는 메소드
*단축속성설정 제대로 지원않고 브라우저별 상이 (예: border,background)
1.$('s').css('속성명');
//속성명의 속성값을 리턴
2. $('s').css('속성명','속성값');
//속성명의 속성값을 설정
3. $('s').css('속성명',function(index,현재값){ });
//함수에서 리턴되는 값으로 속성을 설정
4. $('s').css({오브젝트});
//오브젝트에서 설정한 다중 속성을 설정
<body>
<img src="http://www.iei.or.kr/upload/teacher/bsyoo_teacher.jpg"><br>
<button onclick="move();">크기조정</button>
<button onclick="change();">사진변경</button>
<button onclick="changeFunc();">크기변경</button>
<button onclick="removeAtt();">삭제</button>
<script>
function removeAtt(){
$('img').removeAttr("src");
}
function move(){
$('img').attr("width","100px");
$('img').attr("height","100px");
console.log($('img').attr('src'));
}
function change(){
$('img').attr('src','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWEc4tJAAcrB2sgAzWU3cn1USy3otoyNdXPwFSVhD3bx6tgC0A');
}
function changeFunc()
{
setInterval(
function(){
$('img').attr('width',function(n,v)
{
console.log(n+":"+v);
console.log(v); //100px
return parseInt(v)+100;
})
},2000);
}
</script>
<h1 class="first">test1</h1>
<h1 class="second">test2</h1>
<h1 class="third">test3</h1>
<h1 class="first">test4</h1>
<script>
$(function(){
$('.first').css("color",'lime');
console.log($('.first').css("color"));
//한번에 여러개 설정 가능
$('.first').css("color",'tomato').css('border','1px solid skyblue');
$('h1').css('background-color', function(n,v){
//n:인덱스 번호, v:값
console.log(n+" : "+v);
switch(n){
case 0 : return 'aqua';
case 1 : return 'violet';
case 2 : return 'orange';
case 3 : return 'brown';
}
});
var st1 = {'font-size':'3em', 'background-color':'brown', 'color':'red'};
//객체로 넣을 수도 있다.
$('h1').not('.first').css({'font-size':'4em','font-weight':'900'});
//변수를 만들어 사용
$('h1').not('.first').css(st1);
});
</script>
</body>
3. content 설정
html()
선택된 요소의 content영역을 리턴 / 설정하는 메소드, html태그를 태그로 인식
리턴시 첫번째 요소 텍스트노드 리턴/ 전체 요소 리턴시 함수 사용
1. $('s').html();
//선택된 요소의 첫번째 텍스트 노드를 리턴
2. $('s').html("text노드 내용");
//선택된 요소의 text노드 내용을 대입
3. $('s').html(function(index,현재값) { });
text()
쓰는방식은 위와 완전 동일하다 차이점은 html형식은 <br>같은 태그들이 먹히고, text()에선 그냥 글자로 출력되어버린다.
<p>test1</p>
<p>test2</p>
<p>test3</p>
<div id="area"></div>
<button onclick="test();">문구출력</button>
<button onclick="test1();">기본문구출력</button>
<button onclick="test2();">함수이용 구분변경</button>
<button onclick="test3();">html()/text()차이</button>
<script>
function test()
{
$('p').each(function(index,item){
$('#area').html($('#area').html()+$(item).html());
});
}
function test1(){
$('p').html('<b><mark>월요일</mark></b>이라도 힘내세요');
}
function test2(){
$('p').html(function(n,v){
if(n==0 || n==2){
return '알레르기 조심';
}
})
}
function test3(){
$('p').text('<br>같은 태그가 먹히냐 안먹히냐 차이')
}
</script>
객체 생성 및 제거
구분 |
내용 |
html 태그 |
직접 html 구문을 문자열로 작성 ex) <p>내용</p> |
jQuery 방식 |
jQuery객체 이용 구문작성, $(생성태그).css() | html() | text() | attr() |
DOM 방식 |
document.createElement('태그명').innerHTML("텍스트노드내용"); |
<div id="area"></div>
<button onclick="test();">생성</button>
<script>
function test() {
$('#area').html('<h1>새로 생성</h1>');
//생성과 동시에 css 처리도 가능.
var el = $('<h1></h1>').text('나는 jquery방식으로 생성').css('color', 'tomato');
$('#area').append(el);
}
</script>
append(), prepend()
<h1 id="test1">a</h1>
<h1 id="test2">a</h1>
<h1 id="test3">a</h1>
<h1 id="test4">a</h1>
<button onclick="test1()">실행</button>
<button onclick="test2();">to실행</button>
<button onclick="test3();">after실행</button>
<button onclick="test4();">to실행</button>
<script>
function test1() {
$('#test1').append($('<span>b</span>'));
$('#test1').prepend($('<span>c</span>'));
}
function test2() {
//위치가 변경됨
//$('#test2').appendTo($('<div>b</div>').appendTo($('body')));
//$('#test2').appendTo($('<span>b</span>'));
// $('#test2').appendTo($('#test1'));
//$('#test2').prependTo($('<span>c</span>'));
$('<span>b</span>').appendTo($('#test2'));
}
function test3() {
$('#test1').after($('<span>b</span>'));
$('#test1').before($('<span>c</span>'));
}
function test4() {}
$('<span>b</span>').insertAfter($('#test4'));
$('<span>b</span>').insertBefore($('#test4'));
}
</script>
특정 위치 뒷부분이나 앞부분에 붙이는걸 활용한 예제
이미지3개가 자동으로 하나씩 넘어가게 만들기
<div id="pic">
<img id="img1" width="100px" height="100px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiFiT3OwaH_l91FeUA1KN6McAKjPLUwC3URdDVhWwPAEhvB3Zb">
<img id="img2" width="100px" height="100px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuew-VJRfzDdwhPppfQvw-iHgrf9uQP5MVs1xlg_RimPmzYHQgug">
<img id="img3" width="100px" height="100px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4GdOEcWCtUPYAjklcaBj_eItcqWENYfDgrlJLVnpgLvHKHFQi">
</div><br>
<button onclick="trans()">이미지 이동</button>
<script>
function trans() {
setInterval(function () {
$('#pic').append($('img').first());
}, 1000);
}
</script>
clone 메소드
html 내부에 있는 요소를 복사하는 메소드
$('태그명').clone([true | false]).appendTo('추가될위치');
//태그명의 태그를 복사하여 추가될 위치에 넣기
//인자값 이벤트 핸들러까지 복사할지 여부(true,false)
<button id="clone">실행</button>
<div id="clone-test">
<div id="item1" class="item">
<span>안녕</span>
</div>
</div>
<style>
.item{
width: 100px; height: 100px;
display: inline-block;
margin: 5px 5px 0px 0;
line-height: 100px;
background: yellowgreen;
}
.item span{
font-size: 24px;
font-weight: bold;
color: white;
}
.lime{
background-color: lime;
}
</style>
<script>
$(function(){
$('#item1').hover(function(){
$(this).addClass('lime');
},function(){
$(this).removeClass('lime');
});
$('#clone').click(function(){
$('#item1').clone(true).appendTo($('#clone-test'));
});
});
</script>
document에 있는 객체 제거
html 내부에 요소객체를 제거하는 메소드
메소드 |
내용 |
$('s[s...]').remove(['s]); |
문서 내에 선택자를 제거 후 삭제된 요소를 리턴 인자값을 기준으로 삭제가능, 이벤트 핸들러, 데이터까지 삭제 |
$('s').detach(); |
문서 내 선택자를 제거 후 삭제된 요소를 리턴 이벤트 핸들러,데이터는 삭제안함, 나중에 활용 가능 |
$('s').empty(); |
문서 내 선택자를 제거 후 삭제된 요소를 리턴 선택자 자신과 속성은 삭제안하고 내용만 삭제 |
<button id="empty">empty()</button>
<button id="remove">remove()</button>
<button id="detach">detach()</button>
<div id="remove-test" class="box">
<div id="item2" class="item">
<span>안녕</span>
</div>
</div>
<div id="result" class="box"></div>
<script>
$(function(){
$('#item2').hover(function(){
$(this).addClass('lime');
},
function(){
$(this).removeClass('lime');
});
$('#empty').click(function(){
$('#remove-test').empty();
});
$('#remove').click(function(){
var e=$('#remove-test').remove();
})
$('#detach').click(function(){
var e = $('#remove-test').detach();
$('#result').html(e);
})
})
</script>
<style>
.box{
width: 100px; height: 100px;
padding: 5px 10px 15px 10px;
margin: 10px;
}
#remove-test{
border: 2px solid red;
}
#result{
border: 2px dashed blue;
}
</style>
