본문 바로가기

개발/jQuery18

jQuery (제이쿼리) - jQuery next(), nextAll() next() 함수는 셀렉터로 지정한 객체의 다음 객체(동일 노드 혹은 하위 노드)를 선택해주는 함수인데 사실 이걸 어디다 써먹어야 하는지는 공부로 작성하고 있는 지금은 와닿지는 않는다. 기본적인 문법은 다음과 같다. $(document).ready(function() { // 반갑습니다 가 선택 된다. alert($("div").next().html()); // 반갑습니다 가 선택 된다. alert($("div").next("b").html()); // undefined 가 발생한다. alert($("div").next("p").html()); }); 안녕하세요 반갑습니다 어서오세요 웰컴 파라미터로 셀렉터를 넣을 수 있으며 파라미터를 넣을 경우 대상 셀렉터의 바로 다음에 위치한 객체가 파라미터로 넣어서 .. 2018. 6. 24.
jQuery (제이쿼리) - jQuery append(), appendTo(), prepend(), prependTo() HTML DOM 에 새로운 객체를 추가하는 제이쿼리 함수에는 append 와 appendTo 가 있다.그리고 prepend 와 prependTo 도 있는데 이 두 종류의 함수는 작동 방법이 다를 뿐이고 사용 방법은 완전 동일하다. append 는 해당 객체를 꼬리에 붙이는 함수이고 prepend 는 해당 객체를 머리에 붙이는 함수이며 각각 To 가 붙은 appendTo 와 prependTo 와의 차이점은 객체를 먼저 선언하느냐 대상을 먼저 선언하느냐의 차이이다. 기본 사용 문법은 다음과 같다. $(document).ready(function() { // 대상을 먼저 선언한다. $("#divContents").append("순번 1"); // 객체를 먼저 선언한다. $("순번 2").appendTo("#d.. 2018. 6. 24.
jQuery (제이쿼리) - jQuery add() 이번에는 제이쿼리 함수 중 add() 라는 함수에 대해 공부 해볼건데 이 함수는 이름에서도 알 수 있듯이 무언가를 추가하는 역할을 한다. 그렇다면 뭘 추가할 수 있느냐 하면 기존 셀렉터로 선택 된 제이쿼리 배열에 대해 추가적으로 셀렉터를 지정해 기존 제이쿼리 배열에 새로운 값들을 추가할 수 있다. 이것도 간단한 예제로 살펴보자. 1. A-C 2. D-G 3. H-L 4. M-P 5. Q-S 6. T-V $(document).ready(function() { $("h1").css("color", "red").add("h2").css("background-color", "yellow"); }); 위의 예제를 보면 처음 선언한 셀렉터는 h1 태그 셀렉터이고 해당 셀렉터 뒤에는 color 를 red 로 변경해주.. 2018. 6. 24.
jQuery (제이쿼리) - jQuery slice() 사실 어디에 쓰는건지 아직 잘 모르겠는데 하여튼 제이쿼리에는 slice() 라는 함수도 있다. 그리고 영어에는 slice of cake 라는 말도 있는데 예전에 모 대리님한테 slice of cake 라는 말을 사용 했다가 slice 가 아니고 piece 라고 매우 갈굼 먹은 다음에 구글링을 해보니 slice of cake 도 맞는 말이라고 해서 맞잖아요!!! 빼애애애애애액!!! 했더니 마지못해 인정하던 기억도 난다. 하여튼 방금 쓰잘데기 없는 사족을 달은 이유는 이 slice 라는 함수를 좀 더 이해하기 쉽게 하기 위해서인데 이 slice 라는 함수는 여러 개의 객체 중 일정 부분을 선택할 수 있게 해주는 범위 함수이기 때문이다. 기본적인 사용 문법은 다음과 같다. $(document).ready(fu.. 2018. 6. 24.
jQuery (제이쿼리) - jQuery map() 지금까지 공부한 제이쿼리 함수 중 이번에 작성하는 map() 함수는 이해하기가 유난히 난해 했는데 뭐 어찌저찌 나름대로 이해를 했으니 여기다가 후다닥 정리해보도록 하겠다. 다른 블로그들을 찾아보니 무슨 배열의 길이를 유지를 하고 어쩌고 저쩌고 값을 조작이 어쩌고 저쩌고 값을 배열로 가져오는데 어쩌고 저쩌고 써 있는 것들이 뭔가 전혀 와닿지 않는 함수는 이번이 처음이다. 거기다 예제도 별로 없... 그래서 나름대로 이해를 한 것이 map() 함수는 선택자의 새로운 배열을 만들면서 값을 조작 또는 지정 할 수 있다. 정도 되겠다. 뭐... 항상 하는 말이지만 아니면 말고!! split(), join() 함수를 공부하면서 사용했던 예제를 가지고 다시 한 번 공부해보자. $(document).ready(func.. 2018. 6. 17.
jQuery (제이쿼리) - jQuery filter(), not() 제이쿼리의 filter 함수는 조건에 맞는 값을 배열로 리턴해주는 기능을 한다. 반대로 not 함수는 이름에서부터 보이듯이 조건에 맞지 않는 값을 배열로 리턴해주는 기능을 한다. 조건으로는 셀렉터를 넣는 방법과 펑션을 이용하는 방법이 있는데 우선 셀렉터를 이용한 방법을 알아보자. $(document).ready(function() { var trueArr = $("p").filter(".this"); // alert(trueArr.length); var falseArr = $("p").not(".this"); // alert(falseArr.length); alert("this 클래스 갯수 : " + trueArr.length + ", this 클래스 아닌 갯수 : " + falseArr.length);.. 2018. 6. 17.
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.