요소, 속성, 객체 조작 메서드3_jQuery

속성 조작 메서드

- 하나의 객체가 가지고 있는 속성을 등록, 수정, 삭제

- html 속성, css(style), class 속성, 상태 속성 조작

- 선택한 객체가 배열이며, 배열의 원소가 여러개일 경우조작 및 행위에 관련된 메서드 실행 시

   모든 원소가 영향을 받는다.

- 부분적으로 조작이나 행위를 해야 할 경우 원소에 접근하여 조작 및 행위 메서드를 별도로 실행해야한다.

 

attr, removeAttr

- attr : 선택한 대상의 속성의 값을 가지고 오거나 속성을 추가 할 수 있다.

- removeAttr : 선택한 대상의 속성을 제거 할 수 있다.

<button type="button" id="btn01" data-myName="홍길동">속성확인</button>
<button type="button" id="btn02">속성삽입</button>
<button type="button" id="btn03" data-myAddr="전주">속성제거</button>
<script type="text/javascript">
	$(function(){
		$('#btn01').click(function(){
			//속성 id값 가지고 오기
			console.log($(this).attr('id'));
			//date-myName 속성 값 가지고 오기
			console.log($(this).attr('data-myName'));
			//해당 속성이 없을 경우 조회 할 시 undefined 결과값이 나온다.
		});
		$('#btn02').click(function(){
			//data-age 추가와 data-age 속성에 20값 삽입
			$(this).attr('data-age',20);
			console.log(this);
		});
		$('#btn03').click(function(){
			$(this).removeAttr('data-myAddr');
			console.log(this);
		});
	});
</script>

 

prop

- 상태 속성 값을 가지고 오거나 변경한다.

- checked, selected, hidden

- $('선택자').prop('상태속성') -> 상태 속성값을 true | false 로 결과값 반환

- $('선택자').prop('상태속성', true | false) -> 상태 속성 변경

<input type="checkbox" class="my-check">
<input type="checkbox" class="my-check">
<input type="checkbox" class="my-check">
<button type="button" id="btn04">선택</button>
<button type="button" id="btn05">해제</button>
<script type="text/javascript">
	$(function(){
		var $myCheck = $('.my-check');
		$('#btn04').click(function(){
			//상태 속성 값 확인하기
			//배열 객체의 상태 속성 확인임으로 첫번째 원소만 확인
			console.log($myCheck.prop('checked'));
			//정상적인 확인을 위해서 원소에 접근하여 확인해야한다.
			console.log($myCheck.eq(2).prop('checked'),'eq');
			//상태 속성 변경하기
			$myCheck.prop('checked',true);
			//선택한 객체(배열)의 원소가 여러개일 경우 행위 혹은 조작에 관련된 메서드 실행 시 일괄 적용
			$myCheck.attr('data-mydata',1);
		});
		$('#btn05').click(function(){
			$myCheck.prop('checked',false);
		});
	});
</script>

 

val

- 선택된 대상의 value 속성값 조작

- val() -> value 속성값 가지고 오기

- val('값') -> value 속성에 값 삽입

 

css

- 선택된 대상의 style 속성 조작

- $('선택자').css('css style 속성명') -> 해당 속성의 값을 가지고 온다.

- $('선택자').css('css style 속성명', 'css style 속성값')

  -> 해당 속성에 값을 대입

- $('선택자').css({

     '속성명 : '속성값',

     '속성명 : '속성값',

     '속성명 : '속성값',

}); -> 객체에 삽입된 css style 일괄 적용

<h1>양념갈비</h1>
<button type="button" id="btn06" style="color:#f00;">css 정보 가져오기</button>
<button type="button" id="btn07">css 적용</button>
<button type="button" id="btn08">css 일괄 적용</button>
<script type="text/javascript">
	$(function(){
		var $body=$('body');
			cssObj={
				'background-color' : '#f00',
				'color' : '#fff'
			}
		$('#btn06').click(function(){
			console.log($(this).css('color'));
			console.log($(this).css('font-size'));
			console.log($(this).css('background'));
		});
		$('#btn07').click(function(){
			$body.css('background-color','#f00')
				 .css('color','#fff');
		});
		$('#btn08').click(function(){
			$body.css(cssObj);
		});
	});
</script>

 

addClass, removeClass, hasClass, toggleClass

- 선택된 대상의 클래스 속성을 조작 한다.

- $('선택자').addClass('클래스') -> 선택된 대상에 클래스 삽입(중복허용 안함)

- $('선택자').removeClass('클래스') -> 선택된 대상의 인수에 해당되는 클래스 제거

- $('선택자').hasClass('클래스') -> 선택된 대상의 인수에 클래스가 있다면 true, 없다면 false

- $('선택자').toggleClass('클래스') -> 선택된 대상의 인수에 클래스가 있다면 제거, 없다면 삽입

<style>
	.red-text{color:olive;}
	.red-back{background-color:olive;}
	#myDiv{
		width:200px;
		height:100px;
		border:1px solid #000;
	}
</style>
<div id="myDiv">
	안녕하세요
</div>
<button type="button" id="btn09">addClass</button>
<button type="button" id="btn10">removeClass</button>
<button type="button" id="btn11">hasClass</button>
<button type="button" id="btn12">toggleClass</button>
<script type="text/javascript">
	$(function(){
		var $myDiv=$('#myDiv');
		//addClass
		$('#btn09').click(function(){
			$myDiv.addClass('red-text');
		});
		//removeClass
		$('#btn10').click(function(){
			$myDiv.removeClass('red-text');
		});
		//hasClass
		$('#btn11').click(function(){
			var result = $myDiv.hasClass('red-text');
			console.log(result);
		});
		//toggleClass
		$('#btn12').click(function(){
			$myDiv.toggleClass('red-back');
		});
	})
</script>