1. jQuery의 목적
1) HTML 요소 찾기
2) HTML contents, attribute, style 변경
3) animation
4) event handling
5) ajax 처리
2. jQuery 함수
항목 | HTML element 찾기 | element 속성 변경 |
element 생성 |
| 방법 | $(<selector>) | $(<selector>).doSomething(); | $(<HTML>); |
| 예시 | $("h1") | $("h1").text("hello"); | $("<P>Hello!</p>"); |
3. element 선택
선택 |
function X |
function O |
children |
("parent > children") |
("parent").children("항목") ** 모든 자식 요소 ("parent").children() |
descendant |
("parent descendant") |
("parent").find("항목") |
4. DOM 추가
선택 |
목적지대상.func(추가대상) |
추가대상.func(목적지대상) |
이전 형제노드 추가 |
목적지대상.before(추가대상) |
추가대상.insertBefore(목적지대상) |
다음 형제노드 추가 |
목적지대상.after(추가대상) |
추가대상.insertAfter(목적지대상) |
첫번째 자식노드 추가 |
목적지대상.prepend(추가대상) |
추가대상.prependTo(목적지대상) |
마지막 자식노드 추가 |
목적지대상.append(추가대상) |
추가대상.appendTo(목적지대상) |
[참고]
1. javascript 적용 원리
순서 |
주체 |
처리 |
1 |
browser |
load HTML file from server |
2 |
browser layout engine |
make DOM |
3 |
browser |
displays a rendered page in the browser's viewpart |
4 |
JS interpreter |
make changes ( browser's viewpart 에 표시된 것들에 한해) |
2. DOM
- Document Object Model
- root, branch, node 로 구성
- helps HTML, CSS, javascript work together effectively
3. javascript terms
용어 |
의미 |
parent |
every node has exactly 1 parent (except the root) |
child |
a node can have # of children |
sibling (brothers / sisters) |
siblings (brothers or sisters) are nodes with the same parent |
descendant | a child, grandchild, great-grandchild, etc of that element |
'Programming Practice > jQuery' 카테고리의 다른 글
| Ajax (0) | 2016.07.31 |
|---|