2.Manipulate

DOM (document object model)을 다루는 기능들

Class Attribute

.hasClass('class_name')            현재 요소가 지정한 Class를 가지고 있으면 true 리턴, 아니면 false 리턴

.addClass('class_name')            현재 요소에 지정한 Class를 추가

.removeClass('class_name')       현재 요소에서 지정한 Class를 삭제

.toggleClass('class_name')         현재 요소에 지정한 Class가 없으면 추가, 있으면 삭제

Copy

.clone()        현재 요소를 깊은 복사해서 리턴

DOM Around    

DOM 들을 감싸주는 기능

.wrap('wrapping')      현재 요소를 ( )에서 지정하는 selector나 html문자열을 직접입력, 요소 등으로 감싸준다.

(현재 요소를 지정한 요소의 자손으로 넣는다. <p>와 같이 직접 html문자열로 넣어줘도 가능하다.)

.unwrap()                현재 요소를 감싸고 있는 요소를 제거한다. 다시말해 부모요소를 제거함.

.wrapAll('wrapping')   wrap()과 같지만, 현재 선택되어 있는 요소를 모두 하나로 묶어서 감싸주는 것 wrap은 각 요소마다 랩을 씌움

DOM Inside

DOM 내부에 값이나 요소를 넣는 메서드

.append('element')        현재 선택중인 요소 안에, element를 넣음. html구문을 str로 직접 넣어줄수도 있다.

.appendTo('target')        현재 선택중인 요소를, target 안에 넣음 (append와 방향이 반대이다.)

.prepend('element')        현재 선택중인 요소 안, 젤 앞자리에 element를 넣음.

.prependTo('target')       현재 선택중인 요소를, target안 젤 앞자리에 넣음.

.text('text')                    현재 선택중인 요소에, text를 내부에 넣음.

.html('html str')              현재 선택중인 요소에 html구문을 넣음. 보안성이 떨어진다.

        

DOM Outside

DOM 외부(부모)에 요소를 추가하는 메서드

.after('element')        현재 요소보다 뒤에 element를 부모요소로 넣음. (wrap은 안에 들어가는거고 after는 그냥 뒤자리에 넣는것)

.insertAfter('target')    현재요소를 target 뒤에 부모요소로 넣음

.before('element')      현재 요소보다 앞에 element를 부모요소로 넣음. 

.insertBofore('target')  현재요소를 target 앞에 부모요소로 넣음

DOM Removal, Replace

DOM의 내부값이나, 객체 자체를 삭제하거나 변경하는 메서드

.empty()                    현재 객체의 내부(자손이나 값)를 삭제함

.remove()                   현재 객체 자체를 삭제함.

.replaceWith('element')  현재요소를 뒤에 지정한 element로 교채함. (html구문을 str으로 넣어줘도 된다.)

.replaceAll('target')       뒤에 지정한 target에 현재 선택중인 요소들로 변경함

(replaceWith는 chaining기법으로 뒤에 추가하는 메서드를 적용받을 수 없다. replaceAll 은 앞에 모든 효과를 받을 수 있다.)

DOM Attribute

DOM의 속성을 확인Get하거나 변경Set하는 메서드

.attr('att_name')

.attr('att_name','new_value')

.removeAttr('att_name')

.prop('att_name')

.prop('att_name','new_value')

.removeProp('att_name')

.val()        value에 있는 값을 가져옴

.val('new_value')

DOM CSS

.css()                        ( )안이 비어있으면 css 속성 모두 리턴

 ( ) 안에 css속성명과 값을 적어주면 설정.

.width()                     content 넓이 리턴

.innerWidth()              content+padding 넓이 리턴

.outerWidth()              content+padding+border 넓이 리턴 

.outerWidth(true)         margin까지 총 넓이 리턴

.height()                      content 높이 리턴

.innerHeight()               content+padding 높이

.outerHeight()               content+padding+border 높이

.outerHeight(true)          margin 까지 총 넓이 리턴

.offset().left(or top)        

.position().left(or top)