개발 공부 정리 공간

메서드 이름 설명 $.get( ) get 방식으로 Ajax를 수행 $.post( ) post 방식으로 Ajax를 수행 $.getJSON( ) get 방식으로 Ajax를 수행해 JSON 데이터를 가져옴 $.getScript( ) get 방식으로 Ajax를 수행해 Script 데이터를 가져옴 $(selector).load( ) Ajax를 수행하고 선택자로 선택한 문서 객체 안에 집어넣음 ▷ $.ajax ( ) 메서드의 옵션 속성을 미리 설정하는 것 $.get(url, function(data, textStatus, jqXHR) { }); $.post(url, function(data, textStatus, jqXHR) { }); $.get(url, data, function(data, textStatus, ..

// jQuery의 Ajax 관련 메서드. 두가지 형태로 사용 $.ajax(options); $.ajax(url, options); ▷$.ajax() - 내부에서 XMLHttpRequest 객체를 만들어 Ajax를 수행함 ▷ success - 이벤트 - $.ajax() 메서드는 Ajax가 성공했을 때 자동으로 success 이벤트를 실행 - 리스너의 첫 번째 매개변수는 Ajax가 성공했을 때 받은 데이터 ▷ $.ajax() 메서드의 매개변수 url은 옵션 속성으로 지정 할 수 있음 ▷ $.ajax() 메서드 옵션 객체의 속성은 대부분 자동으로 지정하므로 속성은 신경 쓰지 않아도 됨 $.ajax( ) 메서드의 옵션 옵션 속성 이름 설명 자료형 async 동기, 비동기를 지정함 Boolean complete..

1. 선택자를 사용하지 않은 jQuery 플러그인 생성 $.플러그인이름 = function(){ // 플러그인 코드 작성 }; $(document).ready(function(){ // 플러그인 실행 $.플러그인이름(); }) // 예시 ------------------------------ $.reload = function(){ //페이지를 새로고침한다. location = location; }; $(document).ready(function(){ $.reload(); }) 2. 선택자를 사용하는 jQuery 플러그인 생성 $.fn.플러그인이름 = function(option){ //코드작성 } $(document).ready(function(){ //플러그인사용 $("선택자").플러그인이름(); ..

1. 속성과 값에 따른 탐색 선택자 // 선택한 요소 중 지정한 속성이 포함된 요소만 선택 $("요소 선택[속성]") // 선택한 요소 중 속성박이 명시한 값으로 시작하는 요소만 선택 $("요소 선택[속성^=값]") // 선택한 요소 중 속성값이 명시한 값으로 끝나는 요소만 선택 $("요소 선택[속성$=값]") // 선택한 요소 중 속성값이 명시한 값을 포함하는 요소만 선택 $("요소 선택[속성*=값]") // input 요소 중 type 속성값이 일치하는 요소만 선택 $(":type 속성값") $("#member_f:text") 2. 속성 상태에 따른 탐색 선택자 // 선택한 요소 중 숨겨진 상태 또는 보이는 상태의 요소만 선택 $("요소 선택:[visible | hidden]") $("#wrap p:..

1. each() / $.each() 메서드 선택자로 선택한 요소(문서 객체)는 배열에 순서대로 저장됨. each(), $.each() 메서드는 배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져옴 // 1 $("요소 선택").each(function(매개변수1, 매개변수2){}); $.each($("요소 선택"), function(매개변수1 매개변수2){}); // 2 $("요소 선택").each(function(){$(this)}) $.each($("요소 선택"), function(){$(this)}) 배열에 저장된 요소의 개수만틈 메서드를 반복 실행. 메서드를 실행할 때마다 매개변수1, 매개변수2에는 배열에 저장된 요소와 인덱스의 값이 배열에 오름차순으로 대입 배열에 저장된 요소의 ..

1. first / last 선택자 first : 선택된 요소 중 첫 번째 요소만 선택 last : 선택된 요소 중 마지막 요소 선택 $("요소 선택:first") or $("요소 선택").first() $("요소 선택:last") or $("요소 선택").last() 2. even / odd 선택자 even : 선택한 요소 홀수 번째(짝수 인덱스) 요소만 선택 odd : 선택한 요소 짝수 번째(홀수 인덱스) 요소만 선택 $("요소 선택:even") $("요소 선택:odd") 3. eq(index) / lt(index) / gt(index) 탐색 선택자 eq : 선택한 요소 중 지정한 인덱스가 참조하는 요소만 선택 lt : 선택한 요소 중 지정한 인덱스보다 작은(lt, LessThan) 인덱스를 참조 g..

1. 부모 요소 선택자 선택한 요소를 감싸고 있는 부모 요소 선택 $("요소선택").parent(); // 상위(부모) 모두 선택 $("요소 선택").parents(); 2. 자식 요소 선택자 선택된 요소를 기준으로 지정한 자식 요소만 선택 $("요소 선택 > 자식 요소 선택"); $("요소 선택").children("자식 요소 선택"); $("요소 선택").children(); 3. css 적용 방법 //인자값을 사용해 CSS 속성과 값을 전달하는 방식 $("요소 선택").css("속성명1", "값").css("속성명2", "값2"); //객체를 사용해 CSS 속성과 값을 전달하는 방식 $("요소 선택").css({"속성명1" : "값1", "속성명2" : "값2"... "속성명n" : "값n"}); ..

1. Ajax - 비동기 방식의 javascript와 XML을 가리킴 * 동기 방식 : 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행 * 비동기 방식 : 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 2. load() - 외부 콘텐츠를 가져올 때 사용 - 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용 //$(요소 선택).load(url, data, 콜백 함수) //외부 파일 (news.html) test // (test.html) $(function(){ $("#newsWrap").load("news.html #news"); }) //여기에 load 됨 3. $.ajax() : 데이터를 서버에 HTTP POST, GET 방식으로 전송할 수 있으며, ..