본문 바로가기

jquery7

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.

Jquery 이벤트, this 키워드 ● Event란? •기본적으로 전역에 작성된 프로그램은 프로그램이 실행됨과 동시에 바로 실행되지만 함수(Function)으로 묶인 부분은 호출되지 않으면 실행되지 않는다. •이러한 이유 때문에 원하는 시점에 원하는 기능을 실행하기 위해 프로그램이 실행되는 계기가 필요하다. •이런 역할을 하는 것이 Event이며, 모든 함수는 Event와 연결되어 호출되는 형태를 가진다. ◆ jQuery의 이벤트 처리 방식 - 객체에 직접 이벤트를 등록 - 선언적 함수 - function sum(){ alert(“hello”); } $(“div”).click(sum); - 익명적 함수 - $(“div”).click(function(){ alert(“hello”); }); ● Event 종류 실습) 마우스.. 2023. 10. 19.

Jquery란, 준비방법, 문법, 스타일 제어 ● Jquery 사용 배경 '멀티 브라우져 지원'. 어느 브라우져에서나 동일하게 작동을 한다는 것. 특히 IE의 독자노선 행보로 인해 IE와 다른 브라우져들은 자바스크립트에서 지원하는 기능이 다르거나, 같은 기능이 있더라도 사용 방법이 다른 경우 jquery에서는 이것을 전부다 해결해준다. 멀티 브라우져에서의 ajax이용, 이벤트 설정, DOM 탐색이야말로 jquery의 핵심적인 기능인 것이다. : 또 다른 장점은 바로 간단하게 이용할 수 있는 핵심 기능들을 포함하고 있다는 것. : 특히, jquery-mobile은 모든 모바일 단말에서의 똑같은 UI와 동작. 단순히 attribute를 설정해주는 것만으로 UI들이 바로바로 적용되는 놀라운 기능들을 소개해주고 있다. 사용이유 ● Jquery란? jQuer.. 2023. 10. 19.

이전 1 2 다음

티스토리툴바