DAY 96. jQuery - 객체 조작(클래스/속성 설정)

 

객체 조작

 

content 설정

 

▪️ html()

선택된 요소의 content 영역(innerHTML/텍스트노드)을 리턴하고 설정하는 메소드이다.

html 태그를 태그로 인식한다.

리턴 시 첫 번째 요소 텍스트 노드를 리턴한다.

전체 요소 리턴 시에는 함수를 사용한다.

 

// 선택된 요소의 첫 번재 텍스트 노드를 리턴
$('요소명').html(); 

// 선택된 요소의 text 노드 내용 대입
$('요소명').html('텍스트 노드 내용');

$('요소명').html(function(index, 현재 값){});

 

▪️ text()

선택된 요소의 content 영역(innerHTML/텍스트노드)을 리턴하고 설정하는 메소드이다.

html 태그를 태그로 인식할 수 없다.

리턴 시 전체 요소 텍스트 노드를 리턴한다.

// 선택된 요소의 모든 텍스트 노드를 리턴
$('요소명').text(); 

// 선택된 요소의 text 노드 내용 대입
$('요소명').text('텍스트 노드 내용');

$('요소명').text(function(index, 현재 값){});

 

 

클래스/속성 설정

▪️ addClass()

선택자에 의해 선택된 요소에 클래스를 추가하는 메소드

// 띄어쓰기로 클래스 여러 개 추가 할 수 있다.
$('요소명').addClass('클래스 이름');

// 리턴된 값을 클래스로 추가한다.
$('요소명').addClass(function(n){
	인자는 선택된 요소들의 번호;
	return 값;
})

 

▪️ removeClass()

선택자에 의해 선택된 요소에 클래스를 삭제하는 메소드

// 띄어쓰기로 클래스 여러 개 삭제 할 수 있다.
$('요소명').removeClass('클래스 이름');

// 리턴된 값과 일치하는 클래스를 삭제한다.
$('요소명').removeClass(function(n){
	인자는 선택된 요소들의 번호;
	return 값;
})

 

 

▪️ toggleClass()

선택된 요소에 class가 있으면 삭제하고 없으면 추가하는 메소드

// 띄어쓰기로 클래스 여러 개에 적용할 수 있다.
$('요소명').toggleClass('클래스 이름');

// true는 추가만, false는 삭제만 한다.
$('요소명').toggleClass('클래스 명'[, function(index, curclass){}[, true|false]);

 

▪️ attr()

선택자에 의해 선택된 요소에 속성 값 확인하거나 변경하는 메소드

// 속성 명의 속성 값을 리턴한다.
$('요소명').attr('속성명');

// 선택자의 속성과 속성 값을 추가한다.
$('요소명').attr('속성명', '속성값');

// index : 선택된 요소의 index 값, value : 현재 값
$('요소명').attr('속성명', function(index, value){});

// 다중으로 속성 값 설정 시 사용, 객체 사용 가능
$('요소명').attr({속성명 : '속성값', 속성명 : '속성값' ...});

 

▪️ removeattr()

선택자에 의해 선택된 요소에 속성을 제거하는 메소드

// 속성 명의 속성 제거, 여러 개일 경우 띄어쓰기한다.
$('요소명').removeAttr('속성명');

 

▪️ css()

선택자에 의해 선택된 요소의 속성 값을 가져오거나 설정하는 메소드

// 속성 명의 속성 값을 리턴한다.
$('요소명').css('속성명');

// 선택자의 속성과 속성 값을 설정한다.
$('요소명').css('속성명', '속성값');

// 함수에서 리턴되는 값으로 속성을 설정한다.
$('요소명').css('속성명', function(index, 현재 값){});

// 오브젝트에서 설정한 다중 속성을 설정한다.
$('요소명').css({오브젝트});