jquery11 Ajax 호출 결과로 DOM을 조작하는 방법 Javascript만으로도 DOM을 조작할 수 있지만, jQuery를 사용하면 조금 더 간단하고 깔끔하게 마크업을 관리할 수 있음 1. remove() - remove() 메서드는 선택된 셀렉터 요소는 물론 자식 요소들까지 모두 제거 -class 이름이 hello인 요소를 모두 제거하는 코드 2. append() A.append(B) 문법의 append 메서드는 A의 자식 요소에 B요소를 추가하는 역할 그런데 이미 A가 다른 어떤 자식을 갖고 있는 상태에서 append() 메서드를 호출하게 되면, B요소는 가 갖는 가장 마지막 자식 요소 뒤에 추가된다 -class이름이 inner인 요소의 자식 요소에 Test 요소를 추가하는 코드 3. after() 셀렉터 요소의 형제 요소를 추가 아래 사진과 appen.. 2023. 2. 28. JQuery_serialize(직렬화) - form 안의 값들을 한 번에 전송 가능한 data로 만들 수 있음 - 많은 양의 data를 보낼 때 유용 https://api.jquery.com/serialize/ 2022. 11. 22. JQuery_객체조작 1. 속성 조작 메서드 요소의 속성을 바꿈 2. 수치 조작 메서드 요소의 너비값 또는 높잇값 등 수치를 바꿈 3. 객체 편집 메서드 객체 생성 또는 삭제, 복제 등 2022. 11. 21. JQuery_속성 탐색 선택자 속성의 포함 여부를 따져 요소를 선택 $("#wrap a[target]") //target 속성을 포함하는 요소만 선택 .css({"color":"red"}); 속성의 값에 따른 탐색 선택자 $("#wrap a[href*=google]") //href 속성 값이 https 로 시작하는 요소만 선택 속성의 상태에 따른 선택자 $("#wrap p:hidden").css({ "display":"none", //display:block "background":"#ff0" }); var z1=$("#zone1 :selected").val(); console.log(z1); var z2=$("#zone2 :checked").val(); console.log(z2); 컨텐츠 탐색 선택자 find() : 선택한 하위요.. 2022. 11. 21. ajax / json ajax : Asynchronous JavaScript and XML - xml형식의 데이터 비동기 처리(작업의 요청 순서와 상관없이 처리되는 방식) - json(JavaScript Object Notation) : 배열이나 객체형식으로 작성되어지는 데이터 : 문자형식의 데이터를 효율적으로 주고 받는 구조 {}:객체 (key ,value형태) { "name":"리미","age":28, "address":"서울" } //접근 방식 ; object.name / object["name"] []:배열 [ "html","java","javascript" ] //접근방식 : object[indexNumber] 중첩구조 [{}] 배열안에 객체 [ {"city":"서울","hotpalce":"홍대"}, {"city":.. 2022. 11. 21. JQuery_배열 관련 메서드 **배열정의 : let obj = [] **객체정의 : let obj = {} (콜론 방식 obj.속성명 or obj["속성명"]) $("요소선택").each(function) / $.each($("요소선택"),function) : 배열에 저장된 문서 객체만큼 메서드 반복실행 (저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구함 //배열안에 객체 정의 let obj=[ {"area":"서울"}, {"area":"부산"}, {"area":"전주"} ]; 1. $("요소 선택").each(function(매개변수1, 매개변수2){}) $(obj).each(function(i,o){ //i=인덱스번호, o=실제 배열의 데이터 console.log(i+":"+o.area); }); 2... 2022. 11. 21. 이전 1 2 다음
