본문 바로가기

jquery48

입력 검색 폼(form) 꾸미기 간단한 검색 폼 간단한폼을 만들어보고 jQuery를 이용하여 label의 텍스트가 검색폼에 들어가게하여 라인을 줄여볼것이다. 입력하세요 css에서 label을 블럭 엘리먼트로 변경해준다. label{ display:block;} 그러면 흔히 볼수있는 다음과 같이모습을 볼수있을것이다. 입력하세요 한라인 줄이기 위의 결과물은 label엘리먼트가 한블럭 차지하여 혹시사이트가 작은공간을 요구할때 불편사항을 줄수도있다.따라서 css변화를 주어 겹치게할것이다. var $search = $('#search').addClass('overlabel'); html에서 클래스를 그냥주지않고 위와같이 jQuery를이용한것은 후에 별도로 같은 구문을 사용할 필요가있기에 변수로 지정해준것이다.그리고 css는 다음과 같다. .ov.. 2010. 2. 22.
jquery text() 메소드 jquery text() 메소드 .text() 메소드는 주요기능으로 텍스트값을 반환하는역할을 한다. alert( $('p').text() ); html은 나를 출력하시오 기본적으로 엘레먼트의 텍스트를 반환하여 출력하게 되어있다. $('p') : p라는 엘리먼트에 접근한다 .text() : 그엘리번트의 텍스트 값을 찾느다. alert : 경고창으로 뜨도록 위와 같이 하면은 경고창에'나를 출력하시오' 라고 나올 것이다.이번에는 괄호안에 값을 넣었을 경우를 보자 $('p').text('나를 출력'); html은 나 말고... 값이 대체 되기도 한다. 화면에는 원래나와야되는 '나말고...' 대신 '나를 출력'이 나타날것이다.정확히 말하면 대체 되는 것이 아니라 덮어지는 것이다. 2010. 2. 20.
jquery filter() 메소드 jquery filter() 메소드 filter() filter()메소드는 영어 해석그대로 필터역할을 한다.선택한것에 접근 할때 그 입력값에 일치하는 엘리먼트를 가르킨다 나 말고 나를 집어주시요~ 이 때 다음과 같이 사용하면 $('p').filter('#test').text(); 나를집어주시오를 선택하게 된다. 순서는 다음과 같다. $('p') : p라는 엘리먼트에 접근 .filter('#test') : 그중 test라는 아이디를 가진것을 선택 .text() : 그리고 텍스트를 반환 2010. 2. 19.
jquery end() 메소드 jquery end() 메소드 원문은 여기에서 볼 수있다http://api.jquery.com/end/ .end() end() 메소드는 현재의 엘리먼트 바로 앞의 엘리먼트를 지칭한다. 다음예제를보자 Hm.. this is the test $(document).ready(function() { alert($('p').filter('#test').end().text()); }); 스크립트 소스에서 접근순서를보자 $('p') : p엘리먼트에 접근 .filter('#test') : #test라는 아이디에 접근 .end() : 한차례앞의 것에 접근한다 따라서 p에 접근하게 된다 alert($('p').filter('#test').end().text()); 소스는 p에리먼트안의 텍스트 Hm..this is the .. 2010. 2. 18.
jQuery 기능적 폼(form) 만들기 jQuery 기능적 폼(form) 만들기 jQuery 이용하여 좀더 기능적으로 form을 만들어보자.기본적인 폼의코드는 다음과 같다 개인 정보 입력 이름 (필수) 연락방법을 선택하세요 (적어도 하나) E-Mail (선택) Phone (선택) Fax (선택) 이름을입력할 input엘리먼트는 클래스명을required 그리고 나머지들은 클래스명을 conditional로 주었다.이코드를 다음과 같이 수정할것이다. legend엘리먼트를 다른 엘리먼트로 대체하여 좀더 편리하게 css로 꾸미게 한다 반드시 입력할 이름란에 '*'를 또 다른 입력란에는 '**'를 필수, 선택 대신으로 대체시킨다 필요한 선택입력 항목 박스를 클릭시 텍스트 입력 박스가 보이도록 또 감추도록한다. 엘리먼트 수정 legend엘리먼트는 css로.. 2010. 2. 18.
ajax 테이블 페이징 ajax 테이블 페이징 jquery를 이용한 ajax 테이블 페이징 테이블에 여러자료가 있고 그것이 아주많다면 한페이지에 다루기 힘들것이다. 따라서 일부분만보여주고 페이지로 나누어 보여주려고 한다. 여전히 네이버 베스트셀러리스트를 참조했다. 소스가기니 접어두었다.아래 참조 베스트셀러 순위 책제목 저자 출판사 가격 1 덕혜옹주 권비영 다산책방 11,800원 2 삼성을 생각한다 김용철 사회평론 22,000원 3 죽을 때 후회하는 스물다섯 가지 오츠 슈이치 21세기북스 12,000원 4 시크릿 두 번째 이야기 폴 해링턴 살림 12,000원 5 1Q84 무라카미 하루키 문학동네 14,800원 6 마법의 돈관리 고득영 국일미디어 12,000원 7 박철범의 하루공부법 박철범 다산에듀 12,000원 8 엄마를 부탁해.. 2010. 2. 17.
jquery를 이용한 ajax 테이블 정렬 순서변경 jquery를 이용한 ajax 테이블 정렬 순서변경 오름차순과 내림차순 방법으로 모두 정렬하려면 이번엔 다른 키코드를 삽입해야 한다. 이제까지는 오름차순만 사용했지만 이번에 변수를 넣어서 클릭시 차순이 변화되도록 해보자. if (a.sortKey b.sortKey) return 1; return 0; 저번에 보았던 비교 값을 이용한 정렬이다. 만약 숫자가 작다면 -1 값을 반환 크다면 1을 반환 상관없으면 0을 반환하도록 되어있다. 이를이용하여 오름차순으로 정렬되게 했다. 자그럼다음코드를 보자 if (a.sortKey b.sortKey) return -1; retu.. 2010. 2. 17.
자바스크립트 메모리 누수 자바스크립트 메모리 누수 C언어들에서는 임시적으로 지정한 포인트라던가 이런것들이 자동 삭제 되지만 자바스크립트에서는 그렇지않다.별도 용도로 지정한 변수가 역할이 끝났지만 그대로 남아있기에 메모리를 여전히 차지하게되고 따라서 후에 많은 함수들이 사용되면 언제 방해될지모르는일이다.이를 메모리 누수(memory leak)라고 말한다 테이블 정렬 수행속도테이블 정렬 수행속도이포스팅의 예제를다시보자 $.each(rows, function(index, row) { row.sortKey = $(row).children('td').eq(column) //별도로 sortKey 로 지정해주고 .text().toUpperCase(); }); rows.sort(function(a, b) { //여기서 따로 수행처리하도록 if.. 2010. 2. 17.
jquery를 이용한 ajax 테이블 정렬 수행속도 jquery를 이용한 ajax 테이블 정렬 수행속도 테이블정렬을 해보았다면 이번에 수행속도를 좀더 올려보자 테이블 정렬 참조포스트jquery를 이용한ajax 테이블 정렬 위의포스팅에서 정렬처리구문은 다음과 같았다. rows.sort(function(a, b) { var keyA = $(a).children('td').eq(column).text() .toUpperCase(); var keyB = $(b).children('td').eq(column).text() .toUpperCase(); if (keyA keyB) return 1; return 0; }); $.each(rows, function(index, row) { 위와같은경우는 비교할때 key.. 2010. 2. 17.
jquery를 이용한ajax 테이블 정렬 jquery를 이용한ajax 테이블 정렬 여러책을 놔두고 베스트셀러를 주제로 테이블에 정렬시켜보자. 기본적으로 팔려나가는 순위되로 나영시켜놓고 책제목, 순위, 저자, 가격순으로 클릭시 정렬되게 해보자 네이버에 올라와있는 베스트셀러를 참조했다. 다음과같은 이미지를 모델로 할것이다 html은 다음과 같이짜주었다. 너무길기에 아래 내용들은 생략.그리고 테이블 웹표준 코딩에 대해서 저세히 알고싶다면 표준웹코딩게시물을 보도록 긴 소스기에 접어놓았다 베스트셀러 순위 책제목 저자 출판사 가격 1 덕혜옹주 권비영 다산책방 11,800원 2 삼성을 생각한다 김용철 사회평론 22,000원 3 죽을 때 후회하는 스물다섯 가지 오츠 슈이치 21세기북스 12,000원 4 시크릿 두 번째 이야기 폴 해링턴 살림 12,000원 5.. 2010. 2. 12.