jQuery 기본 #4 (예제 및 결과)

---

Note

// not(요소) 지정한 요소를 제외..
// each() 반복문 (java의 for( : )과 비슷한 역할)
// addClass(스타일클래스) : <style></style>에서 설정한 스타일클래스를 적용할 때

// css() : 특정 요소의 스타일 속성 추출
// css(스타일속성) : 특정요소의 지정된 스타일 속성값을 추출
// css(스타일속성, 속성값) : 특정 요소의 스타일을 설정..​

 

---

 

이벤트 처리기 해제

 

See the Pen jQuery-unbind by lsj5634 (@zinisang) on CodePen.

버튼을 클릭하면 작동이 되지만,

이벤트 해제를 누른이후로는 버튼이 작동하지 않는다.

---

 

n번째 요소 가져오기

 

See the Pen jQuery-nth by lsj5634 (@zinisang) on CodePen.

실행하자마자 요청한 n번쨰의 내용을

요청대로 다른 두 방식으로 출력한다.

---

 

지정된 표현식을 제외한 집합 가져오기

 

See the Pen jQuery-not by lsj5634 (@zinisang) on CodePen.

요청대로 radio타입을 제외한 내용들을 노란색으로 바꿨다.

---

 

DOM 요소 생성 후 원하는 요소에 추가

 

See the Pen jQuery-append by lsj5634 (@zinisang) on CodePen.

요청한 만큼의 행과 열을 생성해준다.

---

 

DOM 요소의 앞/뒤에 요소추가

 

See the Pen jQuery-insertAfter by lsj5634 (@zinisang) on CodePen.

이런 기본 화면에서

이렇게 TOP버튼과 hr 라인이 추가되었다.

---

 

검색된 요소를 특정 태그로 감싸기(wrap)

 

See the Pen jQuery-wrap by lsj5634 (@zinisang) on CodePen.

이렇게 따로 있던 내용들이,

 

이렇게 태그들을 가지게 되면서,

이렇게 정렬이 된다.

---

 

검색된 요소를 변경하기

 

See the Pen jQuery-replaceWith by lsj5634 (@zinisang) on CodePen.

이렇게 버튼이였지만,

클릭하면 div태그로 변경됨.

---

 

검색된 요소를 완전 제거

 

See the Pen jQuery-remove by lsj5634 (@zinisang) on CodePen.

기본화면에서,

empty()를 하면 이렇게 비우고,

remove()를 하면 아예 삭제한다.