2_jQeury_(메소드2)

study/jQeury · 2019. 12. 31. 08:15

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