Ajax_html 가져오기

Ajax 하면서 기억할 점

• 자바스크립트든 제이쿼리든 셀렉터로 가져와서 그 속성을 바꿔주는 개념을 기억하기

• 습관적으로 console 창 찍어주기 

 

 

 

 

*ajax는 다른 html 이나 다른 html의 일부분을 가져올 수 있다.*

list.html

 

• Id 가져올 때 #빼먹지말기 빼니까 표시가 안됨 
• html(data) 는 자바스크립트의  innerhtml 이랑 같은 뜻 
• listArea 안에 data인 html 내용을 넣겠다! 

 

 

ajax로 Html 을 가지고왔을 때 관련 style css는 html을 보여주는 jsp 페이지에 정해준다.

 

 

 

Jquery로 html 가져와서 팝업창 띄우기

$('button').click({});

$('button').click(function(e){});

 

- E만 찍었을 때 속성을 볼 수 있음 우리가 필요한건 target 

- e를 먼저찍어보고 그다음 target 그다음 id 

 

 

 

 

 

*jquery 에서 다른 html을 불러오는 기능*

$('표현할위치').load('불러올 위치 [가져올 요소]',callback);

$('#popupArea').load(,function(){});

- 어떤 버튼을 누르든 popup1 창 내용만 뜸 

-Load() 뭘 불러와서 , 뭘할거야 (전체소스를가져와서 일부만 보여주는)

-콜백함수 : 부른다 나중에 

-각 버튼을 누를 때 각각의 팝업내용이 뜰 수 있도록 e.target.id로 

 

 

<css>

팝업창 popup

• Position : absolute; 둥둥띄워야할 때 씀   다른요소무시하고 부모기준으로 움직임(이번경우 부모는 body)
•  : fixed 고정 되어있어서 스크롤 내려도 팝업창이 따라다님
•  : relative
• z- index:  1~10까지인데 동률이면 요소가 위에 작성된 애가 더 위에있음. 9999라고 쓰는 이유는  강조하는 것! 얘가 - 맨위에있어야한다