본문 바로가기

jQuery16


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 get(), eq() 의 차이점 앞서 제이쿼리의 get() 과 toArray() 의 차이점을 알아봤는데 이번에는 get() 과 eq() 함수의 차이점을 알아보도록 하자. get() 함수는 index 를 주어 get(index) 의 형태로 객체를 얻어올 수 있다고 했는데eq() 함수 또한 index 를 주어 get(index) 의 형태로 객체를 얻어올 수 있다. 그렇다면 이 둘의 차이점은 뭘까? 이것 역시 앞서 지긋지긋하게 설명했던 제이쿼리 객체와 HTML 객체를 얻어오는 것의 차이점이 있다.get() 이 HTML 객체를 얻어오는 함수라면 eq() 는 해당 배열의 index 에 해당하는 객체를 제이쿼리 객체로 얻어온다. 간단한 예제를 보고 끝내도록 하자. 룩셈부르크 대한민국 일본 러시아 중국 미국 북한 가나 아프리카 $(function(.. 2018. 6. 3.