안드로이드 웹앱 콘테츠 개발자 양성(국비지원)/JQuery7 JQuery parseXML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 //XML문자열 var xml="Avatarsf, advanture"; //xml을 파싱해주는 jquery의 메소드 호출 var xmlDom=$.parseXML(xml); //xml을 xmlDOM객체로 변환 alert( $(xmlDom).find('title').text() + "\n" + $(xmlDom).find('genre').text() ) 2019. 12. 19. jquery에서 ajax 사용 메소드 [ get(), post(), ajax(), load() ] 한 웹페이지에서 여러가지 방식을 사용해보자. jquery에서 ajax사용하는 메소드를 알아보자. 우선 4개의 버튼과 textarea 1개를 만들자. 우선 get() 메소드를 알아보자. text.txt는 이미 만들었다. (같은 저장된 폴더에) 확인을 위해 서버에 업로드 하자. div에도 표시할 수 있다. get메소드를 이용해서 GET방식으로 데이터를 보낼 수 있다. 아래 사진과 같이 php파일을 (같은 저장된 폴더에) 만들었다. 확인을 위해 서버에 업로드를 하고 실행하자. 이번엔 post메소드로 POST방식으로 데이터를 보내보자. ajax(GET, POST 방식) 메소드를 이용해보자. load 메소드를 이용해서 html 내용을 가져오자. 변경된 사항이 있으니, 다시 서버에 업로드를 하고 확인하자. 이제 버.. 2019. 12. 18. ajax 이용 X 와 ajax 이용O 비교 (GET, POST 방식) 총 두개를 만든다. ①하나는 회원가입 모양만 있는 페이지를 만들어서 jax 이용 비교 ②회원가입 모양만 있는 페이지를 만들어서 jax 이용 get, post 방식을 알아본다. ajax를 이용하면 추가 데이터를 표현할때, 새로운 페이지로 안열어도 된다. 우선 ajax를 사용하지 않고 입력 필드에 값을 받고, 그 값을 표시해보자. 데이터를 받고 표시할 php 파일을 만든다. 그러나 제출을 누르면 php 코드가 나온다. 이것은 웹브라우저는 php컴파일 기능이 없어서이다. 확인을 하기 위해 호스트 주소를 이용하자. (예제에서는 닷홈 무료호스팅 이용) 자신의 호스트 주소에 AJAX라는 폴더를 만들고 거기에 올렸다. 확인 방법 : 웹 브라우저 주소창에 호스트주소/파일경로 를 입력하면된다. 제출을 누르면 결과를 ph.. 2019. 12. 18. Jquery dom 요소 제어 Jquery는 javascript에서 속성 값으로 하던 것들을 메소드로 제어한다. JQuery를 이용해서 DOM 요소를 제어 해보자. , 요소를 쓰자. JQuery는 id를 이용해서 찾아서 속성값 대신 메소드로 처리한다. text와 html의 차이는 요소의 인식이 다르다. (text는 인식 못함, html은 인식함) 앵커 요소로도 확인해 보자. 입력 필드에 값을 읽고, 써보자. 우선 입력 필드 1개와 버튼 2개를 만들자. 이제 버튼을 눌렀을 때, 기능을 써보자. 요소의 속성 값을 가져오고, 변경해보자. 우선 이미지지와 버튼 1개를 만든다. 버튼을 눌렀을 때, src 속성 값을 읽어와서 값을 변경한다. 스타일도 마찬가지로 가능하다. 리스트를 만들어 보자. 버튼을 누르면, 첫 번째 li의 색을 없애고 다름 .. 2019. 12. 18. JQuery animate (이미지를 이동, 투명도, 크기 변경) 이미지를 이동, 투명도, 크기를 변경할 수 있다. 우선 이미지 1개와 버튼 6개를 만들자. move버튼을 눌렀을 때, 왼쪽으로부터 200px떨어진 지점으로 이동되게 하자. 나머지 버튼의 기능들도 구현하자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 $(document).ready( function(){ $('#move').on('click', function(){ // **목표로 하는 css의 속성을 지정하면 자동으로 그 사이를 만들어주는 $('img').ani.. 2019. 12. 18. JQuery animation (이미지에 대해 다양한 효과) 이미지에 대해서 다양한 애니메이션 효과 주기 우선 10개의 버튼과 이미지를 준비하자. show, hide, toggle효과에 대해 알아보자. fadein, fadeout, fadeto 효과에 대해 알아보자. slideup, slidedown, slideToggle효과를 알아보자. 그리고 여러가지 효과를 한꺼번에 줄 수 도 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 $(document).ready( fu.. 2019. 12. 18. jQuery 적용하기 (파일 다운로드, CDN 방식) JQuery를 사용하는 이유는 단축된 문법, 멀티브라우저 지원이다. 우선 JQuery 파일을 다운 받자. 아래 사이트에서 받을 수 있다. https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com 다운로드를 누르면 개발환경에 따른 많은 파일들이.. 2019. 12. 18. 이전 1 다음
