본문 바로가기

전체 글10

jQuery2 jQuery 소개 jQuery의 정체 $()의 의미 jQuery에서 가장 많이 사용하는 기능은 $()입니다. 이건 대체 무엇을 의미할까요? 얘는 그냥 이름이 $인 함수를 호출한 것입니다. 우리가 어떤 함수를 호출할 때 함수이름()과 같이 쓰는 것처럼, 제이쿼리()하고 호출하는 게 됩니다. jQuery 라이브러리 내부에 이렇게 정의된 것을 확인할 수 있습니다. window.jQuery = window.$ = jQuery; 결국 $는 jQuery를 줄여 말하는 것입니다. 따라서 다음 두 코드는 동일합니다. $("div").css("color", "#f00"); jQuery("div").css("color","#f00"); 위 코드에서 $("div")는 div를 매개변수 값으로 $()함수를 호출한 것입니다. .. 2018. 6. 29.
jQuery3 jQuery - 노드 다루기 2018. 06. 29 Fri. 노드 찾기 jQuery에서는 id 이름, 태그 이름, 클래스 이름, 속성을 통해 노드를 찾을 수 있습니다. 이는 CSS의 셀렉팅과 거의 같습니다. 따라서 속성으로 노드를 찾는 것만 복습하고 넘어가죠 :9 $("E[A]") : 속성 A를 포함한 모든 E 노드 찾기 $("E[A=V]") : 속성 A의 값이 V인 모든 E 노드 찾기 $("E[A^=V]") : 속성 A의 값이 V로 시작하는 모든 E 노드 찾기 $("E[A$=V]") : 속성 A의 값이 V로 끝나는 모든 E 노드 찾기 $("E[A*=V]") : 속성 A의 값이 V를 포함하고 있는 모든 E 노드 찾기 찾은 노드 다루기 $대상.length length 프로퍼티를 이용하면 jQuery 객체 .. 2018. 6. 29.
jQuery4 jQuery - 노드 다루기 (생성, 추가, 삭제, 이동) 2018. 06. 29 Fri. 노드 생성 var $신규노드 = $("신규DOM") jQuery에서 노드를 생성하는 일반적인 방법은 그냥 $()함수를 쓰는 거죠. 생성하고자 하는 태그 정보를 문자열로 만들어 매개변수에 넣어주기만 하면 뿅하고 신규 노드가 만들어집니다. var $new = $("new item"); console.log($new.get(0)); 위 코드에서 var $new = $("new item"); 구문을 실행하면 jQuery 객체가 생깁니다. 해당 jQuery 객체에는 find(), get), click() 과 같은 다양한 기능들이 들어 있습니다. 또, 객체 내부에는 HTMLLiElement DOM 객체가 포함되어 있고요. 다.. 2018. 6. 29.
jQuery5 jQuery - 이벤트 다루기 2018. 06. 29 Fri. 이벤트란? 웹 페이지에서 사용자가 마우스를 클릭하거나 키보드 키를 입력하면, 브라우저는 입력정보(클릭 위치, 클릭 버튼, 입력키 값 등)를 이벤트에 담아 알려 줍니다. 이러한 이벤트는 크게 4가지 종류로 분류할 수 있습니다. 마우스 이벤트 키보드 이벤트 태그요소 고유 이벤트: 엘리먼트마다 발생하는 고유 이벤트. 예를 들어 태그요소의 경우 이미지가 모두 완료되면 load 이벤트를 발생시키며, 태그요소의 경우 입력한 정보가 바뀌면 change 이벤트를 발생시킵니다. 사용자 정의 이벤트 이벤트는 그냥 뿅하고 발생하는 게 아니라 일련의 흐름이 있습니다. 이벤트는 크게 3단계에 걸쳐 발생합니다. 바로 캡쳐 단계 - 타깃 단계 - 버블링 단계입니다. 이.. 2018. 6. 29.