본문 바로가기

전체 글238


jQuery (제이쿼리) - jQuery 클래스 관련 함수 이번 글에서는 클래스에 관련된 함수들을 모아보도록 하자. 1. addClass() : 해당 제이쿼리 객체에 클래스를 추가한다. .this { font-size : 20px; } $(document).ready(function() { $("#this").addClass("this"); }); 디스 이즈 스파르타!! 2. removeClass() : 해당 제이쿼리 객체의 클래스를 삭제한다. .this { font-size : 20px; } $(document).ready(function() { $("#this").removeClass("this"); }); 디스 이즈 스파르타!! 3. toggleClass() : 해당 제이쿼리 객체에 클래스가 있다면 삭제하고 없다면 추가한다. .this { font-size.. 2018. 6. 17.
jQuery (제이쿼리) - jQuery 특정 단어를 기준으로 나누고 붙이는 split, join 제이쿼리에는 특정 단어를 기준으로 배열을 만들 수 있는 split 이라는 함수와배열 사이에 특정 단어를 넣어 연결시킬 수 있는 join 이라는 함수가 존재한다. split 이라는 함수는 보통 파라미터를 받거나 특정한 패턴을 기준으로 값을 받을 때 많이 사용하고join 은 뭐 상황에 따라 다르겠지만 split 과 반대로 특정한 패턴을 만들 때 사용한다고 볼 수 있겠다. 우선 split 으로 간단한 예제를 만들어보자. $(document).ready(function() { var testResult = "세종대왕^90|이순신^78|장영실^100|김정호^98|신사임당^95"; var resultArr = testResult.split("|"); var html = ""; $(resultArr).each(fun.. 2018. 6. 17.
jQuery (제이쿼리) - jQuery 비교연산자 셀렉터 eq, lt, gt, not 이전 포스팅 중 제이쿼리 객체 배열에서 해당 인덱스에 해당하는 객체를 리턴 받는 방법으로제이쿼리에서 제공하는 함수인 eq() 와 get() 에 대해서 작성한 적이 있었다. 그리고 이번 포스팅은 비교연산자를 통해서 객체를 리턴 받는 방법을 소개 할텐데사실 제목만 보고도 사용방법이 딱 감이 오는 분들도 있을 것이다. 그만큼이나 쉽다. 1 li 2 li 3 li 4 li 5 li 6 li 7 li $(document).ready(function() { $("li:lt(3)").css("background-color", "red"); $("li:eq(3)").css("background-color", "yellow"); $("li:gt(3)").css("background-color", "green"); });.. 2018. 6. 10.
jQuery (제이쿼리) - jQuery 동일 노드 엘리먼트 선택하기 (셀렉터 +, ~) 이번에는 제이쿼리에서 동일 노드에 위치한 엘리먼트를 선택하는 방법에 대해서 알아보자. 첫번째 노드입니다. 중간계 노드입니다. 두번째 노드입니다. 세번째 노드입니다. 네번째 노드입니다. 다섯번째 노드데스요. 여섯번째다. 칠번째다. $(document).ready(function() { alert($("div + p").length); alert($("div ~ p").length); }); 위의 소스를 실행시켜보면 첫 번째 alert 은 2 의 값이 리턴되고 두 번째 alert 는 3 의 값이 표시된다. 위의 소스를 보면 3개의 세 개의 1레벨 div 노드가 있고 그 안에 태그들이 있는 형식인데... + 의 경우는 앞서 공부했던 > 와 마찬가지로 해당하는 태그와 인접해있어야만 선택이 된다. 단, 첫번째 위.. 2018. 6. 10.
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.