10-2. jQuery (Traversing ~ AJAX)

-jQueryTraversing 

 

이번 시간에는 돔 트리로 원하는 위치에 ele 추가, 수정, 삭제하는 법!

 

DOM tree

 

html은 돔 트리  구조이다.

ex) <span> 태그 기준으로 했을때 부모 개념은 <div> 태그

 

---

 

 

Traversing up the DOM tree 

• parent()
• parents()
• parentsUntil()

parent 함수를 이용해서 span태그의 parent에 스타일 적용

 

 

$("span") : <span> 태그로 되어있는 모든 element

1) $("span")의 부모는 : <li> 태그

2) $("span")의 부모는 : <p> 태그

 

 

parents()는 위에 있는 모든 부모들

 

parentsUntil("div")은  div를 만날때까지 모든 부모들

 

 

 

 

---

 

Traversing down the DOM tree

• children()
• find()

 

children()

 

 

 

 

 

find()

 

<span>태그 찾는 법

div 밑에 모든 것들-!

 

 

---

 

 

Traversing Sideways in The DOM Tree

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

 

$("h2").sibilings()-> 같은 레벨에 있는 것들

 

 

id가 p1인 내용만 가져오는 것

 

---

 

 

jQuery Traversing - Filtering

 

• first()
• last()
• eq()
• filter()
• not()

자바스크립트 인덱스는 0부터

 

 

 

---

 

jQuery - AJAX Introduction

 

load() method 

simple, but powerful AJAX method

서버로부터 데이터를 가져와서 로드하고 해당 데이타를 element에 리턴함

파라미터 세개

 

 

---

 

jQuery - AJAX get() and post()

 

 

메소드는 post 와 get 방식

내가 전송한 데이터가 url에 나타나면 get 방식

• get 
• post 

 

post는 아이디, 비번 입력해서 보낼때 (보호해야할 데이터)

게시물도 포스트. 겟 방식은 보낼 수 있는 데이터가 제한되어있음

 

구글 검색 : 인풋 박스에 현재 내가 입력한 데이타를 서버로 전송하겠다 (submit) 

서버에서는 내가 입력한 그 글씨로 자신들이 가진 데이터베이스에서 결과물을 찾아서 response

 

 

form은 파일을 어디에 보낼건지 무조건 적어야함

 

ajax는 비동기적으로 즉, 뒷단에서 서버로 가져와서 보여줌

 

callback : 내가 직접하는 게 아니라 서버에 요청했을때 서버에서 해당 파일을 찾아서 작업한 후 나한테 보내준 다음에 자동으로 불려지는 메소드

 

 

나한테 보내줄때 데이타와 상태값 보내줌

 

div에 표시하고 싶을때 

 

post : 파라미터 세개. 데이타까지

 

데이타 보낼때 : json 포맷

데이타 : value

 

noConflict() : 제이쿼리 사용임을 명시할때 

 

 

---

 

 

alert로 test 해보기

console.log도 많이 사용함

get

 

 

get방식 이미지 확인