본문 바로가기
반응형

제이쿼리8

JQuery(제이쿼리) Method/ .remove() - 선택한 요소를 제거하는 메서드) JQuery(제이쿼리) Method/ .remove() - 선택한 요소를 제거하는 메서드) .remove() .remove()는 선택한 요소를 HTML 문서에서 제거한다. ​ 문법 .remove( [selector] ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣는다. 예를 들어 $( 'p' ).remove( '.rm' ); 은 클래스 값으로 rm을 가진 p 요소를 제거한다. 다음과 같이 해도 결과는 같다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거한다. Click to Remove h1 Heading Lorem ipsum dolor. 결과) ​ ​ 참고 선택한 요소의 내용만 지울 때는 .empty()를 사용한다. 선택한 .. 2023. 11. 25.
JQuery(제이쿼리) Method /.val(), html(), text() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드 JQuery(제이쿼리) Method /.val(), html(), text() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드 .val() from의 선택 요소 텍스트 값을 설정 혹은 받아옴 ​.val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드 - val() : input, select,textarea 등의 form elements에서 값을 구한다. .val(value) : form elements에 값을 지정한다. - 값을 변경 할 때 : $(변경할 부분 선택).val(값); 값을 가져 올 때 : $(변경할 부분 선택).val(값); ex) $('input').val('helloworld); //input의 value 값에 helloworld라고 넣는다 $('input')... 2023. 11. 25.
JQuery(제이쿼리) 속성추가, 제거, jquery attr(), removeAttr() JQuery(제이쿼리) 속성추가, 제거, jquery attr(), removeAttr() 제이쿼리 속성추가, 제거, jquery attr(), removeAttr() - attr() 사용방법 jquery 의 attr() 메소드는 선택된 요소의 속성이나 값을 설정, 또는 리턴하는데 사용된다. 이 메소드가 그 속성값을 리턴할 때, 이것은 첫번째로 매치되는 요소의 값을 리턴한다. 이 메소드가 그 속성값을 설정할때, 이것은 매치되는 요소들의 하나 이상의 속성/값의 묶음으로 설정한다. 1. 속성값을 리턴 $(selector).attr(attribute) ​ 예) 이미지가 있을 때 이 요소의 width 속성값을 경고창에 띄우는 예이다. ​ 2. 속성과 값을 설정 $(selector).attr(attribute,v.. 2023. 11. 25.
JQuery(제이쿼리) 이벤트 사용시 $(this)의미와 활용 JQuery(제이쿼리) 이벤트 사용시 $(this)의미와 활용 $(this)는 일종의 변수, 선택자라고 볼 수 있다. 일반적으로 동일한 소스가 반복되는 네비게이션 메뉴, 탭, 아코디언메뉴, 리스트등에서 많이 활용. 활용 예) btn이라는 class를 동일하게 가진 버튼들이 존재할때 ​ 현재는 어느버튼을 눌러도 class가 같기 때문에 모든 버튼에 글씨가 변하는 것을 볼 수 있다. 이 this를 활용하여 타겟버튼만 변경되게 바꿔보면 button.click(function(){ $(this).val("눌렀어~"); }); 이 부분만 바꾸면 ​ 만약 이 방법을 안쓴다면 아래 예제소스와 같이 각 버튼마다 id를 별도로 줘야한다. 각각의 이벤트를 만들어주는 번거롭고 비효율적인 일을 할수도 있다. 그러니 이 $(t.. 2023. 11. 25.
Jquery(제이쿼리) 차트만들기, Ajax를 이용해 날씨차트만들기 ● 차트만들기 https://www.chartjs.org/ 왼쪽의 사이드바에서 쓰고 싶은 차트를 선택 ​ Vertical Bar Chart에서 밑의 Sample코드를 복사해서 사용 ​ 날씨출력 데이터 가져오기 # jquery 파일을 추가합니다 Chart.min.js 파일과 utils.js 파일은 첨부 ​ ​ 날씨출력 데이터 가져오기 ​ 1. 날씨데이터 가지고 오기 => ex01movie.html 참고 http://api.openweathermap.org/data/2.5/weather?q=seoul&appid=1eb1d18602c0e2dde562cdc2005a4495&units=metric ​ 2. console 창에 현재 기온, 최고 기온, 최저 기온을 가지고 올것 현재 기온 temp, 최고 기온 tem.. 2023. 10. 24.
Jquery(제이쿼리) 오픈API, Ajax방식으로 데이터를 요청해 json데이터 추출(영화, 지도) ● Ajax란? ​ ※ 오픈 API 사용하는 방법 1. 회원가입 2. 내가 필요한 API가 뭔지 찾기 3. 샘플코드 보기 (맨 위 OR 맨 아래) 4. ★★★★★ Key신청하기 5. 샘플코드 뜯어보고 수정하기 6. 모르는 내용은 문서확인하기 7. Url 테스트 8. 코드 개발 시작 ​ http://127.0.0.1:5500 인증키: 709950ed56fb6243b4b795fb49640262 https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=709950ed56fb6243b4b795fb49640262&targetDt=20211128 ​ ● 영화 데이터 추출 ​ https://www.kobis.. 2023. 10. 24.
반응형