본문 바로가기

개발/jQuery

(18)
jQuery (제이쿼리) - jQuery index(), contains 이번에는 제이쿼리 객체의 index 를 얻어올 수 있는 index() 함수에 대해 공부해보자.사용법은 지극히 간단하므로 바로 밑의 예제를 통해 사용법을 보도록 하자. 라면 피자 치킨 라면 감자라면 피자라면 치킨라면 피자 피자헛 도미노피자 미스터피자 치킨 BHC뿌링클 BHC맛초킹 처갓집 교촌치킨 시장치킨 $(function() { var index = $("li").index($("li:contains('치킨')")); alert(index); }); 위와 같은 코드가 있을 때 index 는 몇 번이 나올까? 아마 모든 프로그래밍 언어에서 동일하거나 비슷할 거라고 생각이 되는데 배열이 아닌 이상 거의 정답은 2 가 나온다. 그렇다면 subList 의 치킨을 선택하고 싶다면 어떻게 해야 할까?아마 보통은 다..
jQuery (제이쿼리) - jQuery get(), eq() 의 차이점 앞서 제이쿼리의 get() 과 toArray() 의 차이점을 알아봤는데 이번에는 get() 과 eq() 함수의 차이점을 알아보도록 하자. get() 함수는 index 를 주어 get(index) 의 형태로 객체를 얻어올 수 있다고 했는데eq() 함수 또한 index 를 주어 get(index) 의 형태로 객체를 얻어올 수 있다. 그렇다면 이 둘의 차이점은 뭘까? 이것 역시 앞서 지긋지긋하게 설명했던 제이쿼리 객체와 HTML 객체를 얻어오는 것의 차이점이 있다.get() 이 HTML 객체를 얻어오는 함수라면 eq() 는 해당 배열의 index 에 해당하는 객체를 제이쿼리 객체로 얻어온다. 간단한 예제를 보고 끝내도록 하자. 룩셈부르크 대한민국 일본 러시아 중국 미국 북한 가나 아프리카 $(function(..
jQuery (제이쿼리) - jQuery get(), toArray() 제이쿼리 함수 중 get() 이라는 함수가 있다. 이 함수는 사실 그렇게 많이 사용한 경우가 없었는데... 라기보다 사용한 적이 없었는데 그래도 다른 솔루션에 보면 많이 있는 것 같아서 알아두면 유용한 함수이니 알아두고 넘어가도록 하자. 기본적인 사용 문법은 다음과 같다. $("p").get(); - 선택자.get(); $("p").get(2); - 선택자.get(index); 너무나도 단순해서 사용 문법에 대해서는 더 설명을 할 수가 없다. 그렇다면 단순히 선택자를 사용해서 선택하는 것과 get() 을 사용하는 것의 차이점은 뭘까? 바로 그 차이점은 앞선 포스팅에서 지긋지긋하게도 말했던 제이쿼리 객체와 HTML 객체에 있다. get() 함수는 선택자로 선택된 엘리먼트들을 HTML 객체 배열로 리턴을 해..
jQuery (제이쿼리) - jQuery each 제이쿼리에서는 each 라는 함수를 제공한다. 보통은 for 문 대신 사용한다고 하는데 내가 보기엔 while(hasNext) 와 비슷하지 않나 싶다. 사용하는 방법에는 여러 가지가 있는데 그 중 몇 가지를 살펴보자. $(function() { var result = ""; $("p").each(function() { result += $(this).html() + "\n"; }) alert(result); result = ""; $.each($("p"), function() { result += $(this).html() + "\n"; }); alert(result); result = ""; var pElem = $("p"); $.each(pElem, function(i) { result += i + ..
jQuery (제이쿼리) - jQuery Selector 실습 앞서 제이쿼리에서 사용하는 기본적인 셀렉터에 대해 알아봤었는데 이번엔 그 실습을 해보자. $(function () { var jq = $("#pTag"); alert(jq.html()); jq = $("p"); alert(jq.html()); jq = $(".pTag"); alert(jq.html()); jq = $("[name=pTag]"); alert(jq.html()); }); Hello, jQuery! $(function() {}); 구문은 document.ready 와 같은 구문이다. 복잡하게 알려고 하지 말고 그냥 그렇구나 하고 넘어가는 것이 정신건강에 좋다.$(document).ready(function() {}); 의 형태로 많이 사용된다. html() 은 제이쿼리 셀렉터로 선택된 jQue..
jQuery (제이쿼리) - jQuery Selector (제이쿼리 선택자/셀렉터) jQuery(이하 제이쿼리) 의 Selector(이하 셀렉터) 는 기본적으로 $ 을 붙여 사용한다. jQuery Selector : $( ) $ 대신 jQuery 를 붙여 jQuery( ) 의 형태로도 사용이 가능하지만 보통은 $ 를 사용한다. (예전에 있던 프로젝트 부장이 공통모듈 만든다고 $ 를 사용한 소스를 만들었다가 낭패였던 기억이...) 위에도 써놨듯 셀렉터는 $( ) 의 기본 형태를 갖는데 의미 없이 이렇게 만들어 진 것이 아니라 이 형태 자체가 하나의 함수라고 볼 수 있으며 자바스크립트와 비교하자면 $ 는 함수명이고 괄호 안에 파라미터를 적어 넘김으로써 하나의 함수가 실행된다고 볼 수 있다. 예를 들어 $('div') 라는 구문을 사용했다면 $ 라는 함수에 div 라는 파라미터를 넘긴 것과 ..