2023.1~

JQuery AJAX(Asynchronous JavaScript and XML) jQuery Ajax는 JavaScript 라이브러리인 jQuery의 일부 기능으로, 비동기적으로 서버와 데이터를 주고받을 수 있도록 도와줌 웹 페이지에서 비동기적으로 데이터를 로드하고 웹 페이지를 업데이트하는 데 사용 jQuery Ajax는 Ajax를 보다 쉽게 사용할 수 있도록 jQuery 라이브러리를 사용하여 작성된 메서드와 함수 jQuery Ajax를 사용하면 HTTP 요청을 쉽게 만들고 보내고, 응답을 처리하고, 웹 페이지를 업데이트하는 방법을 보다 쉽게 구현가능 jQuery Ajax를 사용하면 페이지 전체를 새로 고치지 않고도 동적으로 데이터를 가져와 사용자 경험을 향상시킬 수 있습니다. 이를 통해 웹 페이지의 속..

JQuery 개념 내부요소추가하기 prepend append html text DOM이동 내부추가하기 여기로 이동 외부요소추가 after before DOM이동 외부추가하기 여기로 이동 내부 추가 html() $(".insert1").html("html메서드는 내부 내용을 추가");//set var val=$(".insert1").html();//gettext() $(".insert1").append("append메서드");append() - 뒤로 추가 $(".insert1").append("append메서드");prepend() - 앞으로 추가 JQ $(".insert1").prepend("prepend메서드"); JS var div= document.getElementByClassName("inser..

JQuery attr,nth-child(),addClass, 1.중첩된 리스트의 두번째 레벨에 있는 모든 li요소에 special클래스를 추가한다. //방법1 $(".clear-after > li > ul > li").attr("class","special"); //방법2 $(".clear-after > li > ul > li").addClass("special"); 2. 테이블의 세번째 열에 있는 모든 셀에 year클래스를 추가한다. $("td:nth-child(3)").attr("class","year");$("tr > td").eq(2).attr("class","year"); 이 경우에는 모든 td를 나열해서 2번째 요소만탐색, 하나만 찾기 때문에 자식마다 모두 탐색을 해야하는데 맞지 않는다. 3...

JQuery 이벤트 전파 막기 이동 클릭 동적으로 추가된 요소에 대한 이벤트 처리 새로운 p태그 추가 이벤트해제 이미 작성되어 있는 p태그 이벤트 전파 및 기본 기능을 금지시키는 메서드 이벤트 메서드 종류 click() keydown() change() focus() stopPropagation() : 이벤트 전파를 막음 preventDefault() : 태그의 기본 기능을 막음 return false : 동시에 둘다 처리 가능 동적으로 추가 된 요소의 이벤트 처리 동적으로 요소를 추가 할 경우 그 요소들은 이벤트 적용 안됨 이벤트 핸들러 메서드의 종류 bind()/unbind() bind("이벤트타입",기능(){}) $("a").bind("mouseover mouseout",function(e){ co..

JQuery DOM탐색 메서드 필터 탐색 eq(): 선택한 엘리먼트들 중에 인덱스로 탐색 slice() : 선택한 element중에 인덱스 범위로 탐색 first() : 선택한 element 중에 첫번쨰 요소 탐색 last() : 선택한 element 중에 마지막 요소 탐색 트리 탐색 find() : 선택한 element들의 자손들 중에 탐색 children() : 선택한 element의 자식요소를 탐색 parent()/parents() : 선택한 element의 부모요소를 탐색 prev(),prevAll()/next(),nextAll() : 선택한 element앞/뒤에 오는 형제요소 탐색 siblings(): 선택한 element의 형제요소 모두 선택 필터 탐색 1. eq() 선택한 element 중에..

JQuery 셀렉터 표현식 id,class,n번째,자식요소, 하위요소,첫번째 자식,마지막 자식,속성 HTML 1.simple[현재요소의 배경색:#ff0] 2.jQuery[현재요소의 폰트색:#f00] 3.basic[현재요소의 폰트크기:30pt] 4.example[현재요소의 폰트스타일: 이텔릭] 5.div요소의 개수출력하기 6.아래 목록들중 div태그에 포함되어 있는 em요소만 배경색을 blue로 설정하시오 7.아래 목록들중 span의 자식요소인 em만 폰트색을 red로 설정하시오. hello jQuery Good Bye! javascript 8.아래 p태그들중에 첫번째요소에 배경색을 yellow로 설정하세요 9.아래 p태그들중에 마지막요소에 배경색을 red로 설정하세요 10.아래 p태그들중에 title속성..

DOM 실습 코드 HTML 태그 추가하기 appendChild()실행 insertBefore()실행 appendChild()활용 요소이동 부모태그 태그 이동할 요소박스 1. appendChild(node객체) 자식요소들 중에 마지막 위치에 추가 appendChild("\ text\") 불가 var p=document.getElementById("p"); var p=document.createElement("p"); div.appendChild(p); appendChild()실행 버튼 클릭시 txt도 바로 넣어주기 보다는 수정을 위해 따로 변수에 담아둔다 2.insertBefore(새로운 node, 기존 node) 특정 엘리먼트 앞에 추가 function addBefore(){ var fieldset=do..

DOM탐색 어떠한 태그의 상위,하위 태그 사용시 태그간의 관계를 가지고 선택하는 경우 페이지의 크기가 작을 경우 직접적으로 원하는 태그를 선택하지만 커질수록 간접적으로 관계를 가지고 태그를 선택하는 경우가 효율적 객체의 종류 document : 문서에 접근할 때 (문서객체) Element : tag, 요소 등 (태그객체) ->객체생성 (getElement...()이용): 인스턴스화인스턴스 -메모리에 올라가있는 것 var doc =document.getElementByID() doc.title , doc,class, doc.onclick Attribute : 속성 id, class, title, style .. (속성개체) Text : 태그 안의 내용 (텍스트객체) Node : html을 구성하는 모든 요..

window객체 브라우저 안의 모든 요소가 소속된 객체, 최상위이기 때문에 어디서든 접근 가능 브라우저 창을 제어하는 다양한 메서드 제공 open HTML HTML 팝업창 띄우기 팝업창 JavaScript pop ,close 부모창에 있는 것을 자식 창에서 가지고 오고 싶을 때 부모를 가리키는 속성 -> opener : open()를 이용해서 페이지를 열어준 부모페이지를 나타낸다 HTML 팝업창 닫기 JavaScript 기타 참고 onload 페이지 로딩될 때 이벤트 window.onload=()=>{ } onChange select태그와 같이 다른 것을 선택할 때 이벤트 처리를 할 수 있는 메서드 onclick과 같이 마우스 이벤트 처리 onBlur DOM탐색시 클릭했을 때 기능 정의 onclick (..

날짜(date) HTML 오늘 날짜 출력하기 오늘날짜 오늘날짜(표현방식설정) 특정날짜 출력하기 특정날짜 경과날짜구하기 현재날짜: 경과일:일 경과후 날짜: 경과날짜조회 D-Day기능 만들기 현재날짜 수료일: 남은 일수: 확인 JavaScript 오늘날짜 function testDate01(){ //날짜객체 생성 var date=new Date(); var spandate=document.getElementById("today"); // spandate.innerHTML=date.toLocaleString(); } //다른 형태로 출력 function testDate02(){ var date=new Date(); var spandate=document.getElementById("today"); var da..