객체조작 메서드는 속성 조작 메서드와 수치 조작 메서드 그리고 객체 편집 메서드로 나눌 수 있다.
속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메서드는 요소의 너비 또는 높잇값과 같은 수치를 바꿀 때 사용하고 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제,수정 할 때 사용한다.
속성 조작 메서드
- html() 메서드
1. $('요소 선택').html(); 만 썻을경우 하위요소 '문자열'로 태그명과 그안 text를 다 가져온다.
2. $('요소 선택').html('안녕하세요'); 인 경우에는 해당 요소에 '안녕하세요'라는 text를 삽입한다. 원래 요소에 아무것도 없는경우는 생성을 해주고 요소에 뭐가 들어있는 경우는 '안녕하세요'로 편집을 한다.
3. $('요소 선택').html('＜p＞안녕하세요.＜/p＞'); 인 경우에는 해당 요소 안에 ＜p＞안녕하세요.＜/p＞ p태그와 text 전부 생성한다. ( virtual dom 생성)
ex
<h1>
<strong>객체 조작 및 생성</strong>
</h1>
<h2>
<em>html()</em>
</h2> $('h2').html('<p>안녕하세요</p>');
console.log($('h1').html());ex 1.
console.log($('h1').html()); 으로 html() 인자에 아무것도 안쓰면 $('h1') 하위요소 안에 들어가있는 태그와 text전부 '문자열'로 가져온다.
console.log(typeof($('h1').html()));
javascript의 자료형 확인 typeof로 확인을 해주면 string = 문자열 이라고 나와있다.
ex 2~3.
html문서를 보면 ＜h2＞안에 ＜em＞html()＜/em＞이 들어있다.
$('h2').html('＜p＞안녕하세요.＜/p＞'); 를 js에 써주게 되면 원래 있던
＜em＞html()＜/em＞을 ＜p＞안녕하세요.＜/p＞으로 바꿔준다. 그리고 ＜h2＞안에 아무것도 없었던 상황이면 새로 생성을 해준다. ( virtual dom 생성)
＜em＞html()＜/em＞이 ＜p＞안녕하세요.＜/p＞로 바껴있는거 확인
virtual dom 생성된거 확인
- text() 메서드
1. 선택한 요소의 text를 '문자열'로 가져온다. ( text만 가져온다 html() 처럼 태그는 가져오지 않음. )
2. 선택한 요소안에 text를 생성할 수 있고 원래 있던 text를 변환하는것도 가능하다.
3. html()처럼 virtual dom은 만들어지지 않는다.
ex
$('h1').text('<p>한번바꿔볼게요.</p>')ex 1~3.
console.log($('h1').text()); 으로 text() 인자에 아무것도 안쓰면 $('h1') 하위요소 안에 들어가있는 text전부 '문자열'로 가져온다.
보면 원래 있던 ＜strong＞객체 조작 및 생성＜/strong＞이 ＜p＞한번바꿔볼게요.＜/p＞로 바뀐걸 확인할 수 있다.
virtual dom은 생성되지 않는다.
- css() 메서드
1. $('요소 선택').css('속성명'); 을 쓰게되면 해당 요소 속성값을 '문자열'로 가져온다.
2. $('요소 선택').css('속성명','속성값')으로 속성을 새로 생성할 수 도있고 이미 속성이 존재한다면 css()메서드안의 속성명과 속성값으로 바꿔준다.
3. css()메서드는 오직 ( Cascading Style Sheets )만 생성하고 수정할 수 있고 ＜img＞속성인 src같은건 조작이 불가능하다.
css() 메서드 사용 방식은 크게 2가지로 나뉜다.
$('요소 선택').css('속성명','속성값');
$('요소 선택').css({속성명 : '속성값'});첫 번째 방식은 최대인자를 두개밖에 못 받고, 두 번째 방식은 길게 써서 나갈 수 있다.
첫 번째 방식과 두 번째 방식의 차이점은 첫 번째 방식은 'String' 이고 두 번째 방식은 'Object' 이다.
두 번째 방식이 나중에 JS에서 사용하기 용이하다. ( JS에서는 Object를 많이 다루기 때문 'background-color'처럼 중간에 '-'들어가고 긴 경우에는 카멜케이스로 바꿔서 쓴다 'backgroundColor' )
ex 1.
<div class="asd"></div> .asd{
width: 300px;
height: 300px;
} console.log($('.asd').css('width'));
console.log($('.asd').css('width')); 를 통해서 width값을 '문자열'로 가져오는걸 확인할 수 있다.
ex 2.
ex1에서의 html과 css가 있는경우 .asd 클래스명을 가진 ＜div＞에게 'background-color'를 입히고 싶으면
$('.asd').css('background-color', 'blue');
$('.asd').css({backgroundColor : 'blue'});
이렇게 속성과 속성명을 생성할 수 있다.
.asd{
width: 300px;
height: 300px;
background-color: blue;
} $('.asd').css('background-color', 'yellow');
$('.asd').css({backgroundColor : 'yellow'});
이미 있을경우에는 바꿔줄 수 있다.
ex 3.
$('img').css('src','mages/girl.jpg');Cascading Style Sheets가 아니기 때문에 불가능하다.
- attr() 메서드
( 인라인 스타일방식 사용 )
1. $('요소 선택').attr('속성명'); 을 쓰게되면 해당 요소 속성의 속성 값을 '문자열'로 가져온다.
2. $('요소 선택').attr('속성명,'속성값'); 으로 속성을 새로 생성할 수 도있고 이미 속성이 존재한다면 attr()메서드안의 속성명과 속성값으로 바꿔준다.
3. 해당 요소를 css문서로 속성과 속성값을 적어준것도 변환이 가능하다. ( 이런 방식이 있다고만 확인하고 변환해주는 건 attr()로 하는건 추천하지 않는다.)
ex 1.
console.log($('img').attr('width'));
console.log($('img').attr('width')); 로 width 값 확인.
해당 type은 '문자열'인것 확인
ex 2.
<img alt="girl" width="800" height="500">위에 html을 보면 src가 존재하지 않는다.
$('img').attr('src','images/girl.jpg');를 쓰게되면 src속성이 생성된다.
src 속성이 생성되어 image가 제대로 확인된다. ( src속성의 경로는 js가 html로 들어가기때문에 html에서 써준것과 같이 써주면 된다. ) 이번엔 attr()로 속성과 속성명을 바꿔보자.
$('img').hover(function(){
$(this).attr('src','images/cat.jpg');
},function(){
$(this).attr('src','images/girl.jpg');
});hover이벤트는 마우스를 올리고 내리면 이벤트가 발생하는데 마우스를 올리면 고양이 사진으로 바뀌고 내리면 다시 원래 사진으로 돌아오게 된다.
ex 3.
<div id="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
</div>div 1,2,3을 감싸주고 있는 wrap이라는 id를 가진 div가 있다.
#wrap{
width: 1000px;
height: 300px;
border: 1px solid #000;
}
#wrap div{
float: left;
width: 300px;
height: 250px;
border: 1px solid #000;
}이렇게 wrap이라는 id를 가진 div안에 3개의 div가 가로정렬 되게끔 해줬다.
저 float : left; 를 display : flex;로 바꿔주고자 할때
$('#wrap div').attr('style','display : flex');
flex로 바뀐걸 확인할 수 있다. 또 뒤에 추가로 더 적어줄라면
$('#wrap div').attr('style','display : flex; justify-content: space-around');이런식으로 적어줄수 있는데 근데 이렇게 할경우에는 뒤에 justify-content : space-around 가 div에 적용되는 것이 아닌 div안에있는 text에 적용된다.
추천하지 않는 방식.
- removeAttr() 메서드
선택한 요소에서 기존의 속성을 제거할 때 사용한다. ( html에서의 inline style방식, attr()메서드로 만든 속성만 지울 수 있고 css에서 만든건 별개라서 지울 수 없다. )
ex
$('img').removeAttr();당연한말이지만 removeAttr()안에 아무것도 안넣으면 아무변화도 없다.
$('img').removeAttr('src');
$('img').removeAttr('src','images/girl.jpg');속성명만 적어도 속성이 지워지고 속성값이랑 같이써줘도 지워진다.
확인해보면 src속성이 지워져서 alt속성으로 써놓은 대신 text가 나온다.
<div class="asd" style="background-color: blue; width:300px; height:300px"></div>
inline style방식으로 만든 style
$('.asd').removeAttr('style');inline style방식이라 removeAttr()메서드로 제거 가능하다.
.asd{
width: 300px;
height: 300px;
background-color: blue;
}css방식은 removeAttr()로 제거 불가능하다.
- addClass() 메서드
1. addClass()는 일반적으로 어떠한 Event와 같이 많이 사용한다. ( 이벤트에 의해 DOM이 바뀔 때 )
2. $('선택 요소').addClass('클래스명'); 선택한 요소에 지정한 클래스를 생성 또는 바꿔준다.
( $('.클래스명') 처럼 .은 사용하지않고 클래스명만 )
3. addClass()를 사용하여 class를 만들경우에는 해당 요소에 따로 class명을 안쓰고 사용할 수 있고 css도 가능하다.
<p id="p1">내용1</p>
<p id="p2" class="red">내용2</p>
<p id="p3">내용3</p>
<p id="p4" class="green">내용4</p>
<p id="p5" class="yellow">내용5</p>
<p id="p6"></p>ex
각각의 p요소가 있을경우 내용1에 'background-color'를 입히고 싶을 때
.apua{
background-color : apua;
} $('#p1').addClass('apua');
따로 ＜p＞태그에 class 속성을 만들어서 css를 입혀주지 않아도 생성이 된다.
- removeClass() 메서드
1. removeClass()도 일반적으로 어떠한 Event와 같이 많이 사용한다. ( 이벤트에 의해 DOM이 바뀔 때 )
2. $('선택요소').removeClass('클래스명'); 기존에 있던 class속성을 제거할 때 쓰인다.
( $('.클래스명') 처럼 .은 사용하지않고 클래스명만 )
ex
.red{
background-color : red;
} $('#p2').removeClass('red');
css로 .red의 class에 'background-color'속성을 입힌게 removeClass() 메서드로 제거됐다.
- toggleClass() 메서드
1. toggleClss()도 일반적으로 어떠한 Event와 같이 많이 사용한다. ( 이벤트에 의해 DOM이 바뀔 때 )
2. $('선택요소').toggleClass('클래스명'); 선택한 요소에 html에서 ＜p＞ 태그에 toggleClass('클래스명'); 이 있는경우에는 제거하고 없으면 생성한다.
ex
.green{
background-color: green;
}$('#p3').toggleClass('green');
$('#p4').toggleClass('green');
$('#p3')에는 html ＜p＞태그에서 green이라는 class가 없기때문에 생성되었고 $('#p4')에는 html ＜p＞태그에서 green이라는 class가 있기 때문에 제거되었다.
- hasClass() 메서드
$('선택 요소').hasClass('클래스명'); 선택한 요소에 지정한 class가 있으면 true, 없으면 false를 반환한다.
console.log($('#p5').hasClass('yellow'));
console.log($('#p6').hasClass('yellow'));
$('#p5')에서는 html ＜p＞태그에서 'yellow' class가 있기때문에 'true'
$('#p6')에서는 html ＜p＞태그에서 'yellow' class가 없기때문에 'false'
- val() 메서드
선택한 폼 요소의 value 속성값을 가져오거나 새 값을 적용할 때 사용한다.
대표적으로 ＜input type="text"> 를 만들고 ＜button＞을 만들어서 사용자가 input에 어떠한 data값을 입력하고 button을 누르게되면 그 data를 가져온다.
그 밖에도 textarea, select가 있다.
<input type="text">
<button>가져오기</button> $('button').click(function(){
console.log($('input').val());
});
input 창에 사용자가 데이터값을 입력하여 가져오기버튼을 누르면 해당 데이터를 가져온다. type을 text로 해서 입력하고 가져오면 'String'이 나온다.
- prop() 메서드
선택한 폼 요소의 상태 속성 값을 가져오거나 새롭게 설정할 때 사용한다.
대표적으로 ( 선택 상자, 체크 박스, 라디오 버튼 )을 만들고 ＜button＞을 만들어서 ＜input＞에 'neme' 속성과 'value' 값을 서버로 전송 시켜준다.
<input type="checkbox" id="blue" name="color" value="blue"> Blue
<input type="checkbox" id="red" name="color" value="red"> Red
<button>확인</button>
이렇게 Blue와 Red 체크박스가 있으면
$('button').click(function(){
var blue = $('#blue').prop('checked');
console.log(blue);
});chack인 상태에서 button을 누르면 true 아닌 상태에서 button을 누르면 false가 반환된다.
$('#blue').prop('checked',true);true인 상태에서 button을 클릭하면 체크되고, false인 상태에서 button을 클릭하면 체크되지 않는다.
$('#blue').prop('disabled',true);