jQuery

14. jQuery 조회 범위 제한

DOM 에서 특정한 엘리먼트의 하위에 속해있는 엘리먼트를 조회할 땐, 조회하고자하는 엘리먼트를 감싸고있는 상위 엘리먼트 객체에 대해서 getElement(s)By~ 를 사용한다. 위 처럼 특정 엘리먼트 조회 시 jQuery 에서의 사용은 다음과 같다 1) $('a b'); 2) $('b', 'a'); 3) $('a').find('b'); 위 모두 a 엘리먼트에 한해서 b 엘리먼트를 조회하는 것이다. 코드로 확인해보면, Son Messi Tottenham Kane Alli 위와 같이 HTML 엘리먼트들을 만들었다. 자바스크립트 부분이다. Tottenham_id 라는 id를 가진 엘리먼트에 한해서 Tottenham_class 라는 class 명을 가진 엘리먼트들을 조회한 후, css 메소드를 적용하는 것이다..

13. jQuery 속성 제어

DOM 에서 속성 제어 시 getAttribute, setAttribute, removeAttribute 등을 사용했지만, jQuery 에서는 속성 제어 시 attr 이라는 메소드를 사용한다. 코드로 확인해본다. sjh id가 sjh인 jQuery 객체를 변수 a에 담은 후, attr 메소드를 사용한 것이다. a.attr('href') 는 a 객체에 대해서 href 에 대한 내용을 의미하고, a.attr('title') 은 a 객체에 대해서 title 에 대한 내용을 의미하며, removeAttr 은 속성을 제거하는 것이다. 다음의 코드를 하나 더 보기 전에 알아두어야 할 것이 있다. 엘리먼트의 속성값에 접근할 때 attribute 와 property 두 가지 방식이 있다. a.setAttribute('..

10. jQuery 알아보기

jQuery 객체란 ? jQuery 함수가 리턴한 값이다. 일반적인 jQuery의 쓰임은 다음과 같다. $('A').B $() 이 부분이 jQuery 함수가 되며 A가 jQuery 함수의 인자값이 된다. A에 대한 jQuery 함수가 리턴한 값이 jQuery 객체가 되는데 그 객체에 대한 프로퍼티가 B 이다. 코드로 확인해본다. Kane Son Alli li 태그들에 대하여 jQuery 함수의 리턴값을 li 변수에 담았다. li 변수는 jQuery 객체가 된다. 브라우저에 웹문서를 열고 개발자도구로 확인해 보았다. jQuery 객체는 유사배열이기 때문에 배열의 값에 대해 사용하는 [] 로 각 배열 데이터를 확인했다. li[1] 은 son 이다. 이 son이라는 값에 대해서 css 메소드를 적용해보려고 했..

8. jQuery 기본 사용법

jQuery는 자바스크립트의 라이브러리이다. "DOM을 이용해서 직접 제어하는것이 아닌 jQuery 라이브러리를 이용해서 보다 쉽게 이용할 수 있는 것" 이라고 할 수 있다. DOM에 대한 정의는 아직은 잘 모르겠다. 그냥 document.getElementByTagName 이런것을 이용하여 웹브라우저에 표시되는 것이 DOM 이라고만 알고있다. 여러 정보를 찾아봐도 DOM에 대해 정확히 설명할 수가 없다. 나중에 정리되면 다시 정리해 볼 것이다. jQuery를 사용하기 위해선 jQuery를 담고있는 코드파일을 먼저 로드시켜야 한다. 해당 코드파일을 다운로드 받아 웹소스에 저장하여 사용해도 되지만 CDN이라는 간편한 방법이 있다. CDN이란 Contents Delivery Network 라고 해서 컨텐츠를..

[1] $(document).ready 란?

$("#clickButton") : 태그id가 clickButton click(function(){}) : click 이벤트를 주었을 때 alert("Hello"); : Hello 라는 경고창을 화면에 뿌려준다 여기서 주의할 점은 script 소스와 input button 소스의 위치입니다. script 소스가 위에 있고 input button 소스가 위에 있습니다. html 소스 흐름은 위에서 아래로 순차적으로 진행이 됩니다. "클릭" 버튼을 눌러봐도 alert 이벤트가 발생하지 않습니다. 그 이유는 clickButton 태그id에 대한 클릭이벤트를 정의한 script 소스가 상단에 있고 input button 소스가 그 다음에 위치하게 되어 해당 태그id가 없는상태로 인식한 것입니다. (script ..