[jQuery] 문서 객체 메소드 정의 및 사용방법 정리 - 2(확인 필수)
2019. 5. 14. 17:50
반응형
문서 객체 메소드 정의 및 사용방법 정리 - 2
1 2 3 4 5 6 7 8 9 10 11 | addClass() //문서 객체의 클래스 속성을 추가 removeClass() //문서 객체의 클래스 속성 제거 attr() //속성과 관련된 모든 기능을 수행 removeAttr() //문서 객체의 속성을 제거 css() //스타일과 관련된 모든 기능을 수행 html() //문서 객체 내부의 글자와 관련된 모든 기능을 수행(HTML 태그 인식) text() //문서 객체 내부의 글자와 관련된 모든 기능을 수행 remove() //문서 객체 제거 empty() //문서 객체 내부를 비움 $() //문서 객체를 생성 clone() //문서 객체를 복사 | cs |
두번째 정리 입니다.
html() 와 text()
html() , text()의 차이는 무엇일까요??
html()는 html태그를 인식하고 text()는 인식을 하지 못하는 점입니다.
차이점을 예시로 확인해보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <body> <h1>example-1</h1> <h1>example-2</h1> <h1>example-3</h1> </body> <script> $(function(){ var html = $('h1').html(); var text = $('h1').text(); console.log(html); //결과 example-1 console.log(text); //결과 example-1example-2example-3 }); </script> | cs |
결과가 보이시나요??
html메소드를 이용한 것은 제일 처음 것만 출력이 되는 반면에 text 메소드 값은 모든 h1태그 안에 있는 텍스트를 출력합니다.
주의 하셔야해요!@#$%!@#
또한, html()는 html태그를 넣어서 사용할 수 있습니다.
text()에 html태그를 넣어서 사용하게 되면 html태그까지 text로 출력이 됩니다.
예시로 확인해보세요!!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <body> <div></div> </body> <script> $(function(){ $('div').html('<h1>example-4</h1>'); $('div').text('<h1>example-4</h1>'); }); </script> //변경 후 <body> <div> <h1>example-4</h1> // html()로 입력 $lt;h1>example-4$lt;/h1> //text()로 입력 </div> </body> | cs |
remove()와 empty()
두 메소드의 기능은 같지만 사용방법은 조금 다릅니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body> <div> <h1>example-1</h1> <h1>example-2</h1> </div> </body> <script> $(function(){ $('h1').first().remove(); //결과 : example-2 만 출력 $('div').empty(); //결과 div태그 안에 있던 h1태그가 제거 }); </script> | cs |
$()
문서 객체 생성할 때에는 $() 안에 매개변수에 html태그를 문자열로 넣어주면 됩니다.
동적으로 html태그를 생성할 수 있습니다.
예를 보시죠!!
1 2 3 4 5 6 7 | $(function(){ $('<h1></h1>').html('$()매개변수를 동적으로 넣어봤어요 -- 1').appendTo('body'); $('<div>$()매개변수를 동적으로 넣어봤어요 -- 2<div>').appendTo('body'); console.log($('h1').text()); console.log($('div').text()); }); | cs |
$()를 태그에 넣을때에는 appendTo 메소드를 사용하면 됩니다.
결과
1 2 | $()매개변수를 동적으로 넣어봤어요 -- 1 $()매개변수를 동적으로 넣어봤어요 -- 2 | cs |
반응형
'개발 관련(오류 및 정리) > JSP, JavaScript, JQuery - 개념정리' 카테고리의 다른 글
| [CSS] 텍스트(값이)가 테이블옆으로 튀어나올때 해결 (1) | 2019.05.23 |
|---|---|
| [Javascript] submit 후 팝업창 닫기 (0) | 2019.05.23 |
| [jQuery] 문서 객체 메소드 정의 및 사용방법 정리 - 1(확인 필수) (0) | 2019.05.14 |
| [jQuery] jQuery 식별자 충돌 방지 ( jQuery, Prototype $) - 모던웹을 위한 javascript (4) | 2019.05.14 |
| [jQuery & JAVA] jQuery.getJSON() 중복체크 기능 만들기 (0) | 2019.04.26 |
