제이쿼리 엘리먼트,jquery elements

JQuery 엘리먼트는 javascript의 엘리먼트를 랩핑한 객체입니다.

JQuery의 강점은 선택자를 이용해서 JQuery 엘리먼트를 손쉽게 검색할 수 있는 능력에서 기반합니다.

JQuery엘리먼트는 아래의 생성자를 이용해서 찾을 수 있습니다.

JQueryElement = $(선택자);

선택자에 대한 내용은 CSS 목차 에서 선택자 부분을 참조하시면 됩니다.

JQuery 엘리먼트는 아래 표와 같은 함수를 제공하는데, 함수 체이닝을 지원하므로 간단한 속성변경을 할 때 아래처럼 사용하면 효율적입니다.

$("#footer").width(500).height(500);

 

함수 

	설명
html()  html(item)	javascript의 innerHtml과 같다.
length  size()	현재 엘리먼트가 가진 엘리먼트 수를 리턴한다
width()	엘리먼트의 넓이를 얻거나 설정합니다.
height()	엘러먼트의 높이를 얻거나 설정합니다.

 

엘리먼트

	설명
find(selector)	해당 엘리먼트의 하위 엘리먼트를 찾는다.
append(item)	HTML 요소의 마지막 자식 HTML 요소로 item을 추가합니다.
prepend(item)	HTML 요소의 첫번째 자식 HTML 요소로 item을 추가합니다
remove()	해당 엘리먼트를 제거합니다.
replace(item)	현재 엘리먼트 요소를 item 엘리먼트로 교체합니다.
each	엘리먼트를 순회합니다.
contents()	자식의 텍스트 노드까지 모두 가져옴
children()	자식 엘리먼트 노드를 가져옴  $().children().first() //첫번째 자식노드  $().children().last() //마지막 자식 노드  $().chldren().eq(N) //N번째 자식노드 가져옴
parent()	부모 노드를 가져온다.
parents(element)	입력한 부모 노드를 가져온다.
prev()	현재 노드의 이전 노드를 가져온다.
next()	현재 노드의 다음 노드를 가져온다.
before(item)	현재 노드 앞에 형제 노드를 추가한다.
after(item)	현재 노드 뒤에 형제 노드를 추가한다.

클래스

	설명
addClass(text)	클래스를 추가합니다.
removeClass(text)	클래스를 제거합니다.
toggleClass(text)	클래스가 있으면 제거하고, 클래스가 없으면 추가합니다.
hasClass(text)	클래스가 선언되어 있는지 확인합니다.

 

CSS 속성

	설명
css(attrName, attrValue)	엘리먼트에 CSS 속성을 추가합니다.
css(attrName)	엘리먼트의 CSS 속성을 가져옵니다.(문자열 형식으로 가져옴)
css(attrList)	엘리먼트에 CSS 속성을 여러개 추가합니다.  element.css({ background-color : red; color : white;  });

 

속성

	설명
attr(attrName, attrValue)	엘리먼트에 속성을 추가합니다.
attr(attrName)	엘리먼트의 속성을 얻습니다.
removeAttr(attrName)	엘리먼트의 속성을 제거합니다.

[출처] JQuery 엘리먼트|작성자 사기꾼