09.content관련 메소드
@@content 관련 메소드
@html() 메소드
- 선택된 요소의 태그 + content(내용)을 리턴하거나 설정하는 메소드
- getter로 사용 시 해당 요소를 태그까지 포함한 content값을 얻어옴
- setter로 사용 시 작성된 HTML태그가 포함된 문자열을 실제 태그요소로 인식시킴
@콜백함수(Callback Function)
jQuery의 메소드 중 html(), text(), val() 등의 메소드는 매겨변수로 function(index, html/text/val)이라는 익명함수를 전달할 수 있음
이렇게 어떠한 메소드(함수)의 매개변수로 사용되는 함수를 콜백함수라고함
이벤트 핸들러도 콜백함수의 일종
@text() 메소드
- 선택된 요소의 content영역을 리턴하거나 설정하는 메소드
- getter로 사용시 content 내부에 있는 태그를 무시함
- setter로 사용시 문자열 내부에 html 태그가 있을경우 태그가 아닌 문자 자체로 인식함
10. 객체 생성및제거
@@객체생성방법@@
1) HTML 태그 작성 방법으로 객체 생성
var tag1 = "<h4>Create tag with HTML</h4>";
2) DOM 객체를 이용한 객체 생성 방법
var tag2 = document.createElement("h4");
tag2.innerHTML = "Create tag with DOM";
3) jQuery 방식의 객체 생성 방법
var tag3 = $("<h4>").text("Create tag with jQuery");
#가변인자를 가질수 있는 함수 append
2),3) 방식으로 생성된 객체는 한번 삽입되면 재사용불가
-> 가장 마지막에 작성된 삽입 메소드에만 적용됨
$("#area1").append(tag1, tag2, tag3);
@객체 삽입 메소드1
선택자 요소(A)를 기준으로 삽입 메소드 매개변수에
생성된 요소(B) 또는 함수의 리턴값을 추가
$(A).append(B) : A요소 내 뒷부분에 B를 추가(자식)
$(A).prepend(B) : A요소 내 앞부분에 B를 추가(자식)
$(A).after(B) : A요소 뒷부분에 B를 추가(형제)
$(A).before(B) : A요소 앞부분에 B를 추가(형제)
@객체 삽입 메소드2
생성된 요소(B)를 매개변수로 지정한 선택자 요소(A)에 삽입
-> 객체 삽입 메소드1에서 선택자 요소와 생성된 요소의 작성 순서만 반대
$(B).appendTo(A) : B를 A의 요소 내 뒷부분에 추가(자식)
$(B).prependTo(A) : B를 A의 요소 내 앞부분에 추가(자식)
$(B).insertAfter(A) : B를 A의 요소 뒷부분에 추가(형제)
$(B).insertBefore(A) : B를 A의 요소 앞부분에 추가(형제)
@객체 복제 메소드
clone([true:false])
- HTML 요소(객체)를 복사하는 메소드
- 매개변수로 객체에 부여된 이벤트 복제여부도 지정(기본값 false)
@객체 제거 메소드
empty() : 내부 모든 자식요소 제거
remove() : DOM요소 잘라내기. 연관된 이벤트는 제거됨
detach() : DOM요소 잘라내기. 연관된 이벤트를 모두 보관함
#remove()와 detach()는 잘라낸값을 return값이 존재
11. jQuery 메소드
@each() 메소드
- 객체나 배열을 관리하는 for in문과 비슷한 메소드
- 객체나 배열의 요소를 순차적으로 접근
1. $each(object, function(index, item) {} )
- object : 객체 또는 배열
- index : 배열의 인덱스 또는 객체 키를 의미
함수의 끝을 만나면 1씩 증가 또는 다음키로 이동
- item : 현재 인덱스 또는 키가 가진값을 의미
2. $("선택자").each(function(index, item){})
- class 등의 속성으로 그룹화된 요소에 접근할 경우 사용
@$.noConflict()
많은 자바스크립트 라이브러리가 '$'기호를 함수, 변수로 사용하고 있기 때문에 jQuery 라이브러리와
충돌하는 경우가 빈번함
이를 방지하기 위해 noConflict() 메소드를 통해 '$' 기호 대신 새로운 alias(별칭)을
부여하여 충돌 방지
12. 이벤트1
@이벤트 관련 속성@
이벤트 핸들러의 매개변수로 event객체를 전달함
-> event 객체 : 이벤트가 발생한 객체의 온갖 정보를 담고 있음
인라인 방식으로 이벤트 설정 시 매개변수로 event객체를 전달할 경우 키워드는 event로 고정
@ 이벤트 연결 종류
$("선택자").bind() : 현재 존재하는 문서 객체만 이벤트 핸들러 연결
$("선택자").unbind() : bind()로 연결된 이벤트 핸들러 제거
#bind(), unbind() 메소드는 jQuery 3.0.0부터 deprecated로 설정
대신 on(), off() 메소드를 사용
$("선택자").on("이벤트명", "이벤트핸들러")
-> 자바스크립트 표준 이벤트 모델과 모양이 비슷함
$("선택자").off("이벤트명")
'study > jQeury' 카테고리의 다른 글
3_jQeury_(이벤트,show,hide,slide) (0) | 2020.01.01 |
---|---|
1_jQeury_(기본선택자,메소드) (0) | 2019.12.28 |
0_jQeury_(개요,기본선택자1) (0) | 2019.12.27 |