HAGUANGHO269 jQuery (제이쿼리) - jQuery 자식(하위 엘리먼트) 노드 선택하기 (셀렉터 >) 제이쿼리에서 자식 노드(하위요소, 하위 엘리먼트)를 선택할 때는 아래의 두 가지 방법이 많이 사용 된다. 첫번째 노드입니다. 두번째 노드입니다. $(document).ready(function() { var count1 = $("div font").length; var count2 = $("div > font").length; alert("첫번째 셀렉터의 값 : " + count1 + "\n" + "두번째 셀렉터의 값 : " + count2); }); 이 외에도 많은 방법이 있을 수도 있지만 우선은 위에 작성한 방법만 알아두고 넘어가자. 위의 소스를 실행하게 되면 count1 은 2 의 결과값을 리턴하고 count2 는 1 의 결과값을 리턴하게 되는데 그 이유는 셀렉터를 사용해 노드를 선택할 때 > 를 .. 2018. 6. 10. jQuery (제이쿼리) - jQuery extend() 제이쿼리에는 이미 존재하는 함수를 재정의해서 사용하거나 함수를 새로 추가할 수 있는 extend() 함수가 존재한다. 사실 두 가지 사용 방법이 다른 건 아니고 똑같은 사용 방법이지만 어떻게 사용하냐에 따라서 함수를 재정의 하게 되거나 함수를 새로 추가 하게 되는 결과가 나온다. 마찬가지로 간단한 예제로 살펴보자. $(function() { alert($("p").eq(1).html()); }); function changeMethod() { $.fn.extend({ eq : function(num) { return "선택된 인덱스는 " + num + "입니다."; } }); alert($("p").eq(1)); // eq() 의 기능을 재정의했기 때문에 밑의 함수는 사용할 수 없다. //alert($(.. 2018. 6. 3. jQuery (제이쿼리) - jQuery index(), contains 이번에는 제이쿼리 객체의 index 를 얻어올 수 있는 index() 함수에 대해 공부해보자.사용법은 지극히 간단하므로 바로 밑의 예제를 통해 사용법을 보도록 하자. 라면 피자 치킨 라면 감자라면 피자라면 치킨라면 피자 피자헛 도미노피자 미스터피자 치킨 BHC뿌링클 BHC맛초킹 처갓집 교촌치킨 시장치킨 $(function() { var index = $("li").index($("li:contains('치킨')")); alert(index); }); 위와 같은 코드가 있을 때 index 는 몇 번이 나올까? 아마 모든 프로그래밍 언어에서 동일하거나 비슷할 거라고 생각이 되는데 배열이 아닌 이상 거의 정답은 2 가 나온다. 그렇다면 subList 의 치킨을 선택하고 싶다면 어떻게 해야 할까?아마 보통은 다.. 2018. 6. 3. jQuery (제이쿼리) - jQuery get(), eq() 의 차이점 앞서 제이쿼리의 get() 과 toArray() 의 차이점을 알아봤는데 이번에는 get() 과 eq() 함수의 차이점을 알아보도록 하자. get() 함수는 index 를 주어 get(index) 의 형태로 객체를 얻어올 수 있다고 했는데eq() 함수 또한 index 를 주어 get(index) 의 형태로 객체를 얻어올 수 있다. 그렇다면 이 둘의 차이점은 뭘까? 이것 역시 앞서 지긋지긋하게 설명했던 제이쿼리 객체와 HTML 객체를 얻어오는 것의 차이점이 있다.get() 이 HTML 객체를 얻어오는 함수라면 eq() 는 해당 배열의 index 에 해당하는 객체를 제이쿼리 객체로 얻어온다. 간단한 예제를 보고 끝내도록 하자. 룩셈부르크 대한민국 일본 러시아 중국 미국 북한 가나 아프리카 $(function(.. 2018. 6. 3. jQuery (제이쿼리) - jQuery get(), toArray() 제이쿼리 함수 중 get() 이라는 함수가 있다. 이 함수는 사실 그렇게 많이 사용한 경우가 없었는데... 라기보다 사용한 적이 없었는데 그래도 다른 솔루션에 보면 많이 있는 것 같아서 알아두면 유용한 함수이니 알아두고 넘어가도록 하자. 기본적인 사용 문법은 다음과 같다. $("p").get(); - 선택자.get(); $("p").get(2); - 선택자.get(index); 너무나도 단순해서 사용 문법에 대해서는 더 설명을 할 수가 없다. 그렇다면 단순히 선택자를 사용해서 선택하는 것과 get() 을 사용하는 것의 차이점은 뭘까? 바로 그 차이점은 앞선 포스팅에서 지긋지긋하게도 말했던 제이쿼리 객체와 HTML 객체에 있다. get() 함수는 선택자로 선택된 엘리먼트들을 HTML 객체 배열로 리턴을 해.. 2018. 5. 28. 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 + .. 2018. 5. 28. 이전 1 ··· 37 38 39 40 41 42 43 ··· 45 다음