Front-end/JQuery 6

(JQuery)AJAX 비동기구현

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

Front-end/JQuery 2023.03.08

(JQuery)DOM처리 메서드

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..

Front-end/JQuery 2023.03.08

(JQuery)DOM탐색 메서드 연습문제

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...

Front-end/JQuery 2023.03.07

(JQuery)이벤트 전파, 기본기능 금지 메서드

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

Front-end/JQuery 2023.03.06

(JQuery)DOM탐색 메서드

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 중에..

Front-end/JQuery 2023.03.06

(JQuery)셀렉터 표현식

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속성..

Front-end/JQuery 2023.03.06