dom52 간단한 jQuery 갤러리 간단한 jQuery 갤러리간단한 클릭이벤트 레이아웃 갤러리.클릭시 하단 박스와 그아래 텍스트를 변경한다. 대략적인 레이아웃 박스구조. html소스 총 5명의 사진을 올릴것이다. 이미지는 썸네일이미지5장, 보여줄이미지 5장. 유사반복되는 중간에 생략했다. 1234567891011121314151617181920212223242526아이돌 갤러리 아이유 소유 아이유 Colored by Color Scriptercs 클릭시 하이퍼링크의 주소와 제목이 하단이미지박스의 주소와 텍스트으로 된다 1cs이 주소와 제목이 아래에 적용12 텍스트cs jQuery없이 스크립트로만 구현하면 길어진다.12345678910111213141516171819function showPic(whichpic) { var source = .. 2015. 10. 30. DOM 스크립트 소스-소스 코드 예제 DOM 스크립트-소스 코드 예제 에이콘풀판사 DOM 스크립트 요약본 http://channy.creation.net/project/domscripting/ 간단히 살펴보는 자바스크립트 역사자바 스크립트 문법 익히기문서 객체 모델(DOM)이란? Test: alert title 속성 자바스크립트로 만드는 온라인 사진첩 Image Gallery 1: 자바 스크립트 없는 페이지Image Gallery 2: 사진 넣기Image Gallery 3: 사진 및 텍스트 넣기Image Gallery 4: 스타일 꼭 알아야 할 핵심 기본기 Example: 스크립트 분리로 팝업 창 만들기 사진첩 기능 개선하기 Image Gallery 1Image Gallery 2Image Gallery 3 실행시에 마크업 코드 생성하기 Te.. 2015. 2. 22. jQuery 1.4 변경점 jQuery 1.4 변경점 지난 1월달에 jquery 1.4가 나왔다. 변화된점을 요약. 참고한 출처는 여기다http://firejune.com/1527.자세히 설명되있으므로 참조 collection방식 프로그램밍을 해본 이들이라면 c언어를 접해봤을 것이고 클래스(class)에 대해 알것이다.집합된 객체(object)에 변수 함수등을 설정해준다. 이번에 나온 jquery 1.4도 이와 비슷하게 지원된다. 먼저 종전에 사용한 방법을 보자 아래의 html에서 아이디(id), css, 실행함수를 나오도록 해보자 jquery 1.4 그리고 종전의 방식으로 여기에 추가해보자 $('a').attr('id', 'new') .css({'color':'#fcc','font-size':'28px' }) .click(fun.. 2010. 3. 17. jquery .live()메소드 jquery .live()메소드 live란 말뜻대로 살아있는 이벤트 핸들러이다..... 현재 있지않은 엘리먼트에 이벤트를 줄수있다. 나를누르면~ 위와 같은 html에 아래와 같은 소스 $("p").live("click", function(){ $(this) .after("새문장이뜨네요 또 누르면"); }); 클릭하면 아래 문장이뜨고 또 그걸 클릭하면 또 문장이 뜰것이다 http://api.jquery.com/live/ 위링크에 가서 demo를 보며 확인할 수 있다. 2010. 3. 17. jquery ajax 요청 절대경로 다른도메인 ajax 요청 절대경로 다른도메인 ajax 요청하기 위 포스팅에서 ajax로 요청하는 방법을 보았다. 문제는 상대경로는 문제없이 읽어들일수 잇는데. 절대경로 즉 다른 도메인이나 서비스를 제공하진 않는 사이트라면 그렇지않다. 이는 대부분의 브라우저가 페이지를 다운로드한 서버외에 다른 서버에 HTTP요청하는 것을 막고있기 때문이다. 즉 보안적으로 브라우저의 당연히 갖춰야할 조취라 할수있다. XSS 크로스 사이트 스크립팅(Cross-Site Script) 앞서 말한 ajax요청등을 악의적으로 사용하는경우를 말한다. 예로들자면 나쁜코드가 다른사용자의 브라우저에서 수행되도록 하는공격,게시판이라든가 쿠키에 접근가능한 일이 가능해진다.요즘 거의 이런일이 없고 보안상 잘준비되있다. 절대경로, 다른도메인에서 읽기 하지만.. 2010. 3. 16. 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. 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. 이전 1 2 3 4 ··· 6 다음
