드디어 Jquery 의 이벤트 에 대해서 알아 봅시다 이벤트 이벤트는 어떤 입력 예를 들면, 클릭, 키 업 등등 에 따라서 실행되도록 하는 방법 입니다. Jquery 에서는 on 을 빼고 적어주면 됩니다. 이벤트 위임 java script 에서의 이벤트 위임은 부모가 되는 태그에 이벤트를 걸어서 버블링을 이용한 자식 태그들의 이벤트 실행 방법 이었습니다. 아래 처럼요 jquery 에서는 on 함수를 사용 합니다. ※ jquery 에서의 this 는 현재 태그(요소)를 의미 합니다. on 함수에는 ( 이벤트 , 위임할 요소, 기능 ) 을 넣어주면 됩니다. on 함수의 장점은, 부모 요소에 이벤트가 걸리지 않는다는 것과 아래처럼 순서에 상관없이 작동한다는 것 입니다. 즉, on 함수를 쓸 때는 에 태그가 없..

이번에는 window.onload vs document.ready 에 대해서 알아 봅시다. window.onload window.onload 는 페이지 당 1번만 사용이 가능 합니다. window.onload 는 페이지가 전부 로드 된 다음 실행하는 함수 입니다. 예를 들어서, 태그가 특정 엘리먼트 보다 위에 있을 때, 특정 엘리먼트를 찾지 못하는데, onload 를 사용하면 아래서 사용한 엘리먼트를 찾을 수가 있습니다. 그런데, 위에서도 언급되었지만 페이지 당 1번만 사용할 수가 있어서, 필요한 상황에는 코드를 한 곳에 몰아서 쓸 수 밖에 없는 현실을 가지고 있습니다. 이를 보완하기 위해 나온것이 Jquery 의 document.ready 입니다. document.ready document.ready ..

이번에는 innerHTML, 클래스 제어 에 대해서 알아 봅시다. innerHTML java script 에서 innerHTML 은 태그 사이에 있는 값 이죠? Jquery 는 어떻게 태그 사이에 있는 값을 접근 할까요? 바로 html 함수를 사용해주면 됩니다. 데이터를 변경하고 싶다면, () 안에 데이터를 넣어주면 됩니다 그리고, jquery 에서는 순수 문자열로 데이터를 넣을 수도 있습니다. 이렇게, 태그가 생기지 않고, 순수 문자열로 삽입 됩니다. 클래스 제어 클래스 제어는 , class 속성에 있는 값을 추가 , 삭제 하는 방법 입니다. java script 와 비교하면서 알아 봅시다. 클래스 추가 -java script- -jquery- 클래스 제거 -java script- -jquery- 토글..

이번에는 엘리먼트 속성 및 css 속성을 변경하는 방법을 알아 봅시다. 엘리먼트 속성 변경 엘리먼트는 다른 말로 태그 라고도 할 수 있겠습니다. 위와 같이 태그가 있을 때, 하위 속성(id, readonly 등등)을 얻어오려면 어떻게 해야 할까요? 바로 attr 함수를 사용하면 됩니다. 이 attr 함수는 두번째 매개변수로 값을 주면, 첫번째로 준 속성이 두번째로 준 값으로 변경 됩니다. 또한, 여러 속성들을 한번에 변경할 수도 있습니다. 아래처럼요 {} 를 이용하면 됩니다 ! css 속성 변경 기존에 java script 에서는 css에 접근하려면 .style 을 써서 접근을 했었습니다. 제이쿼리 에서는 css 함수를 사용합니다. css 함수도 위의 attr 함수처럼, 첫번째 매개변수만 전달하면, 해당..

Jquery 의 선택자 및 val 함수에 대해서 알아 봅시다 선택자 선택자는 html 에서 사용한 태그들을 선택하는 방법 입니다. $("선택자") 로 사용 합니다. 당연하게도, 사이에서 사용할 수 있습니다. 예제를 보죠 id 를 apple 로 가진 input 태그가 있습니다. 이 태그를 선택하려면 !? 기존의 java script 에서는 이렇게 사용 했었습니다. 그리고 Jquery 는 이렇게 사용 합니다. 다른 점이 있다면, java script 는 바로 태그를 가져오고, jquery 는 배열에 저장한 뒤 가져 옵니다. 그래서, 실제로 태그를 가지고 오려면, 뒤에 인덱스를 붙여줍니다. 실제로 사용할 때는, 인덱스를 붙이는 게 아닌 함수를 사용합니다. val val 함수는, value 에 있는 값에 접근하..

이제 잠시 Spring 은 잊고, Jquery 에 대해서 배워 봅시다. visual studio code 에서 사용해보도록 하겠습니다. 제이쿼리 제이쿼리는 자바 스크립트를 더욱 간편하게 사용할 수 있도록 해주는 라이브러리 입니다. 웹 페이지의 동적인 부분을 표현하는 자바 스크립트를 제이쿼리로 사용하면, 높은 생산성을 기대할 수 있게 됩니다. 제이쿼리의 사용법 제이쿼리를 사용하기 위해서는 아래처럼 링크를 사용하는 방법. ( 2개 중 아무거나 ) 또는, 다운로드를 받아서 사용하는 방법이 있습니다. 저희는 다운로드를 해서 사용하기로 했습니다. 검색엔진을 이용해서 "jquey" 를 검색 해주세요 uncompressed는 압축되지 않은 파일입니다. 그러면, 아래와 같은 경로의 새 창이 열리면서, Jquery.js..