본문 바로가기

전체 글229

jquery ajax 요청 함수 jquery ajax 요청 함수 여러 예제를 봤겠지만 요청방식에는 다음과 같은 종류가 있다. getJSON get post ajax 위의 방식으로 요청하는 파라메터는 ajax빼고는 비슷하다 url 데이타 함수 이순서로 입력.예제를 참고하자 $.get('/stest.php', {'param':'jquery'}, function(data) { ...}); 가장간단한 방식은 load이다. load 어떤 위치의 test.html을 불러온다면 $('#test').load('/test.html'}); load는 가장간단한 방식니다. 데이타형식이 객체라면 post 아니면get 방식으로 불러온다. 또 차이점은 문서의 일부분을 불러올수있다는점 $('#test').load('/test.html' #part}); 위의 소스.. 2010. 3. 15.
입력 검색 폼(form) 꾸미기 간단한 검색 폼 간단한폼을 만들어보고 jQuery를 이용하여 label의 텍스트가 검색폼에 들어가게하여 라인을 줄여볼것이다. 입력하세요 css에서 label을 블럭 엘리먼트로 변경해준다. label{ display:block;} 그러면 흔히 볼수있는 다음과 같이모습을 볼수있을것이다. 입력하세요 한라인 줄이기 위의 결과물은 label엘리먼트가 한블럭 차지하여 혹시사이트가 작은공간을 요구할때 불편사항을 줄수도있다.따라서 css변화를 주어 겹치게할것이다. var $search = $('#search').addClass('overlabel'); html에서 클래스를 그냥주지않고 위와같이 jQuery를이용한것은 후에 별도로 같은 구문을 사용할 필요가있기에 변수로 지정해준것이다.그리고 css는 다음과 같다. .ov.. 2010. 2. 22.
HTMl5 레이아웃 만들기 HTMl5 간단한 레이아웃 만들기 html5를 이용해서 간단한 레이아웃을 만들어보자 먼저 생각하는 레이아웃의 모양은 다음과 같다. 각 엘리먼트와 그 크기는 그림과 같이 할것이다 html5 소스 위 그림에서 알수있듯이 먼저 헤더(header) 그리고 네비게이션(nav) 그다음에는 사이드바(aside)와 콘테츠(section, artucle) 맨아래 풋터(footer)를 둘것이다. 소스는 다음과 같다. html5 simple test header nav link link link aside section article footer 위에서 div엘리먼트를 쓰면서 왜 전체를 감싸주었는지는 아래에 설명하겠다. CSS로 완성 이제 css로 꾸며보자. 항상 해주는것이지만 일단 마진과 패딩을 0, 그리고 리스트스타일을.. 2010. 2. 20.
jquery text() 메소드 jquery text() 메소드 .text() 메소드는 주요기능으로 텍스트값을 반환하는역할을 한다. alert( $('p').text() ); html은 나를 출력하시오 기본적으로 엘레먼트의 텍스트를 반환하여 출력하게 되어있다. $('p') : p라는 엘리먼트에 접근한다 .text() : 그엘리번트의 텍스트 값을 찾느다. alert : 경고창으로 뜨도록 위와 같이 하면은 경고창에'나를 출력하시오' 라고 나올 것이다.이번에는 괄호안에 값을 넣었을 경우를 보자 $('p').text('나를 출력'); html은 나 말고... 값이 대체 되기도 한다. 화면에는 원래나와야되는 '나말고...' 대신 '나를 출력'이 나타날것이다.정확히 말하면 대체 되는 것이 아니라 덮어지는 것이다. 2010. 2. 20.
html5 변경점 사라진 엘리먼트 html5 엘리먼트 변경점 사라진 엘리먼트 html5에서는 사라진것도 많고 새로 만들어진 엘리먼트도 많다. 하나하나 살펴보자 사라진 엘리먼트 CSS로 다루는것이 더 좋기때문에 사라진 엘리먼트 basefont 이런식으로 문서 전체의 기본 폰트를 설정하기도했으나 css에서 완전히 처리해주니 불필요하다고 여겨짐 big, small 문자를 크게 또 작게 변경 해 주는 엘리먼트였으나 이것역시 css에서 가능 center 중앙에 배치하는 역할을 했으나 이것역시 css에서 가능하다. font font역시 basefont와 마찬가지 s,strike,u 줄로 텍스트를 꾸며주는 이들역시 css에서 가능하므로 사라졌다. tt 공지나, 상표를위해 사용했던것 이역시 css별도 강조 가능하기에 사라졌다. 프레임, 더이상 없다! .. 2010. 2. 19.
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.
웹표준 간단한 폼(form) 양식 웹표준 간단한 폼(form) 양식 리스트를 이용한 간단한 폼을 만들어보겠다. 그전에 폼에 사용되는 엘리먼트부터 보자 가장 기본적으로 구축할 모습은 다음과 같다. 개인정보입력 form form은 양식을 시작한다는 의미를가진다.또한 action옵션을 가짐으로서 입력완료하고 실행시 작동연결을 담당한다. fieldset fieldset은 양식의 테두리를 보여준다. 구역의 의미로 임력해야할여러 정보가있다면 큰범위로 나누어 줄때 사용한다. legend legend은 나누어진 구역의 의미를 가르켜준다.여기서는 개인정보입력이라고 되어있다. label label은 input엘리먼트가 사용될 목적을 지칭할때 사용된다. input input은 입력 양식을 보여준다, 잘 알다시피 라디오버튼,체크 박스, 텍스트등을 옵션으로 가.. 2010. 2. 18.

티스토리툴바