간단한 jQuery 갤러리

jQuery/DOM&jQuery 2015.10.30 00:00

간단한 jQuery 갤러리

간단한 클릭이벤트 레이아웃 갤러리.클릭시 하단 박스와 그아래 텍스트를 변경한다. 대략적인 레이아웃 박스구조.


html소스 총 5명의 사진을 올릴것이다. 이미지는 썸네일이미지5장, 보여줄이미지 5장. 유사반복되는<li> 중간에 생략했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<section>
<h1>아이돌 갤러리</h1>
<ul id="imagegallery">
<li>
  <figure>
    <a href="images/pic-aiyou.jpg" title="아이유">
      <img src="images/sum-aiyou.jpg" alt="아이유" width="80" height="60"/>      
    </a>
     <figcaption>아이유</figcaption>
  </figure>    
  </li>
<!-- 3번반복-->
<li>
 <figure>
  <a href="images/pic-soyou.jpg" title="소유" >
   <img src="images/sum-soyou.jpg" alt="소유" width="80" height="60"/>   
  </a>
  <figcaption>소유</figcaption>
  </figure>
  </li>  
</ul>
<div>
<img id="placeholder" src="images/pic-aiyou.jpg" alt="아이유" width="400" height="300" />
<p id="description">아이유</p>
</div> 
</section>
cs

 
클릭시 하이퍼링크의 주소와 제목이  하단이미지박스의 주소와 텍스트으로 된다

1
<a href="주소" title="제목" >
cs

이 주소와 제목이 아래에 적용

1
2
<img id="placeholder" src="주소" alt="아이유" width="400" height="300" /> 
<p id="description">텍스트</p>
cs


jQuery없이 스크립트로만 구현하면 길어진다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function showPic(whichpic) {
  var source = whichpic.getAttribute("href");//하이퍼링크속성값
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);//주소교체
  var text = whichpic.getAttribute("title");//이름값
  var description = document.getElementById("description");
   description.firstChild.nodeValue = text; //자식값을변경
  return false;
}
 
function prepareGallery() {//각각 검사후 
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
    }
  }
}
cs


jQuery에서 구현

$()로접근 속성갑은 attr()로 가져오고 변경,텍스트값은 text()로 변경

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
    $("#imagegallery li").on("click"function(){      
     var imagestitle = $(this).find("a").attr("title"), 
          boximages = $(this).find("a").attr("href");
      $("#placeholder").attr("src", boximages);
      $("#description").text(imagestitle);  
          return false;
    });
});
cs


완성된것

http://sianasiatiger.cafe24.com/practice-idea/gall-jQ.html

저작자 표시
신고

설정

트랙백

댓글

DOM 스크립트 소스-소스 코드 예제

분류없음 2015.02.22 17:17

DOM 스크립트-소스 코드 예제



에이콘풀판사 DOM 스크립트 요약본
http://channy.creation.net/project/domscripting/

  1. 간단히 살펴보는 자바스크립트 역사

  2. 자바 스크립트 문법 익히기

  3. 문서 객체 모델(DOM)이란?

    • Test: alert title 속성
  4. 자바스크립트로 만드는 온라인 사진첩

  5. 꼭 알아야 할 핵심 기본기

    • Example: 스크립트 분리로 팝업 창 만들기
  6. 사진첩 기능 개선하기

  7. 실행시에 마크업 코드 생성하기

    • Test: document.write inline
    • Test: document.write external
    • Test: alert innerHTML
    • Test: innerHTML 업데이트
    • Test: alert node info
    • Test: createElement
    • Test: createTextNode
    • Test: appendChild
    • Test: documentFragments
    • Test: documentFragments
  8. 의미가 살도록 컨텐츠 개선하기

  9. CSS와 DOM 연동하기

    • Example: 변경 CSS alert 보기
    • Itinerary: 테이블 띠무늬 만들기
    • Story: 첫 단락 스타일 입히기
  10. 애니메이션 슬라이드쇼 만들기

  11. 총정리편 (더블트랙 웹사이트)

  12. DOM 스크립트의 미래


저작자 표시
신고

설정

트랙백

댓글

jQuery 1.4 변경점

jQuery/DOM&jQuery 2010.03.17 21:33

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(function() { 실행될함수});

아이디를 부여했고 css로 꾸미고 실행될함수를 지정해준것이다. jquery의 편리한점은 언제든지 필요한것을 순서대로 붙이면 된다는 점이였으나 그것이 과할 경우에 혼란을 줄수있다. 이번에 지원된 변경되모습을 보자.

$('a',{
   id: new,
   css: {'color':'#fcc','font-size':'28px'
   }
   click : function() { 실행될함수})
  }); 

어떻게 보면 복잡할 수도 있지만. 많은것을 부할경우 상호간의 개발자들이 알아보기 쉬울것이다.

이벤트 역시 마찬가지

이벤트역시 위와같은 방식처럼 일괄적으로 적용될수있도록 지원한다.

$('a'.bind({
    click: function() {
    //클릭시 실행될함수
     },
    mouseover: function() {
    //마우스 오버시 실행될함수
     },
    mouseout: function() {
    //마우스 아웃시 실행될함수
   }
})

새로추가된 focusIn, focusOut 이벤트

기존의 focus이벤트에서 부분적으로 수행할수 있도록 분리된 focusIn, focusOut이벤트가 추가되었다.

.live()메소드에 추가된 속성

네가지 "submit", "change", "focus" "blur" 속성이추가되었다.또한 .live( eventType, eventData, handler ) 형식으로 eventData옵션이 추가되었다..live()메소드에 대해 알고싶으면 이 포스팅을 참고

live메소드

nextUntil, prevUntil, parentsUntil메소드

  • Apple
  • Banana
  • Grape
  • Strawberry
  • Pear
  • Peach

위의 리스트에는 여러 과일이 있다. 이중 until 이란 말뜻대로 ~까지 선택하는것

nextUntil

선택한것에서~까지

$('ul li:contains(Apple)').nextUntil(':contains(Pear)');

prevUntil

반대로 이것은 뒤에서 ~까지

$('ul li:contains(Pear)').nextUntil(':contains(Apple)');

parentsUntil

말그대로 부모엘리먼트 까지이다

요소 풀기(Unwrap)

.wrap()메소드는 감싸는역할을 했다 반대로 이것은 풀어서 감싸고있는것을 제거시킨다.

날 감싸는걸 제거시켜주세요

위에서 div엘리먼트를 제거시켜보자

$('p').unwrap();

unwrap()여기 괄호를 비워둔것은 옵션이다.

데이터를 유지한 상태로 요소 제거하기

새로운 .detach()메서드는 DOM에서 요소를 제거한다. 중요한점은 해당 요소가 가진 데이터 요소를 파괴하지 않는다는 것. 이 데이터는 jQuery의 이벤트 시스템에 보존되어있기 때문에 .data()메서드 등을 그대로 사용하여 다시금 호출할 수있다.

주의~

jQuery 1.4는 기반을 뒤업는 업데이트를 포함하고 있기 때문에 1.3.x에서 작동하던 코드가 비정상 적으로 작동할 수 있다. John Resi는 이와 관련하여 하위 호환성을 유지하기 위한 jquery-compat-1.3 플러그인을 별도로 배포하고 있으니 참조.http://github.com/jquery/jquery-compat-1.3

  
 
저작자 표시
신고

설정

트랙백

댓글

jquery .live()메소드

jQuery/jQuery메소드 2010.03.17 20:18

jquery .live()메소드

live란 말뜻대로 살아있는 이벤트 핸들러이다.....

현재 있지않은 엘리먼트에 이벤트를 줄수있다.

나를누르면~

위와 같은 html에 아래와 같은 소스

$("p").live("click", function(){
      $(this)
      .after("

새문장이뜨네요 또 누르면

"); });

클릭하면 아래 문장이뜨고 또 그걸 클릭하면 또 문장이 뜰것이다

http://api.jquery.com/live/

위링크에 가서 demo를 보며 확인할 수 있다.

저작자 표시
신고

설정

트랙백

댓글

jquery ajax 요청 절대경로 다른도메인

Ajax 2010.03.16 20:28

ajax 요청 절대경로 다른도메인

ajax 요청하기

위 포스팅에서 ajax로 요청하는 방법을 보았다. 문제는 상대경로는 문제없이 읽어들일수 잇는데. 절대경로 즉 다른 도메인이나 서비스를 제공하진 않는 사이트라면 그렇지않다. 이는 대부분의 브라우저가 페이지를 다운로드한 서버외에 다른 서버에 HTTP요청하는 것을 막고있기 때문이다. 즉 보안적으로 브라우저의 당연히 갖춰야할 조취라 할수있다.

XSS

크로스 사이트 스크립팅(Cross-Site Script)

앞서 말한 ajax요청등을 악의적으로 사용하는경우를 말한다. 예로들자면 나쁜코드가 다른사용자의 브라우저에서 수행되도록 하는공격,게시판이라든가 쿠키에 접근가능한 일이 가능해진다.요즘 거의 이런일이 없고 보안상 잘준비되있다.

절대경로, 다른도메인에서 읽기

하지만 정상적으로 사용하고싶은사람은 어떻게하면 좋을까.요즘은 자신의 서버에 올려도 절대경로를 입력하면 보안상 작동하지않는다.

 $('#test').load('http://blog.rss.naver.com/어쩌고저쩌고.xml'});

위소스는 .load함수를 이용해서 네이버의 어떤블로그의 xml을 요청하는 경우이다 하지만 실행되지않는다.이를 해결방안으로는 크게 4가지가 있다.

  • JSON
  • 상호간의 규약된약속
  • php이용
  • cURL

JSON 형식의 경우는 xss가 허용된다 하지만 결코 온전히 존해하거 업데이트되는 데이타파일을 변환한다거나 새로 JSON형식으로 작성하는일은 반갑지 않은일이다. 두번쨰로 상호간의 규약된 약속이 있을경우이다.마지막으로 드 가지 방법을 알아보자

php파일이용

자신이 사용할 서버로 콘테츠를가지고 와서 jquery로 전달하는 간단한 php소스를 만드는방법이다

 $('#test').load('tempt.php'});

위와같이 사용하는서버에 만들 파일경로를 입력하고.

header('Content-Type: text/xml');
print file_get_contents('http://blog.rss.naver.com/어쩌고저쩌고.xml');

이와같이 file_get_contents를 사용한다. 문제는이방법역시 보안상 먹히지않는 것이 요즘대부분이라는점이다. 마지막 방법을 보자

cURL

 header('Content-Type: text/xml');
   $curl = curl_init();
   curl_setopt($curl, CURLOPT_URL, 'http://blog.rss.naver.com/어쩌고저쩌고.xml');
   curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
   curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, $timeout);
   print curl_exec($curl);
   curl_close($curl);
 

이에대해선.. http://en.wikipedia.org/wiki/CURL

보안

보안이 강화된웹에서 배우기위해 간단히 테스트하기 쉽지않은 것들이다.실전에서는 거의 두번째방법인 상호 규약된 체결과 약속하에 이루어 진다. 이런방법이있고 돌아간다 는점을 이해하면 되겠다.

저작자 표시
신고

설정

트랙백

댓글

jquery ajax 요청 함수

Ajax 2010.03.15 22:03

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});

위의 소스는 test.html이라는 문서의 아이디(id) part부분만을 불러올것이다.

get,getJSon,get

일부 매개변수들을 서버 상의 페이지로 전달해야 할 경우가 종종 있다. jQuery를 사용하면 이는 매우 간단하다. 필요한 메소드가 어떤 것인지에 따라서 $.post()와 $.get() 중 선택한다. 선택적 데이터 객체와 콜백 함수를 전달할 수도 있다. 아래는 데이터를 보내고 콜백을 사용하는 예제이다.

$.post('test.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('테스트 성공요.');
});

getJSon은 json파일을 이용할때이다 별반다를바없다.

$ajax()메소드

이 메소드는 위방식을 모두 이용할 수 있다.앞서 데이타 타입, 전송방법등을 보았다면 여기선 그걸 지정해주고 요청에맞게한다. 아래예제를 보자

$.ajax({
    url: 'test.xml', //url
    type: 'GET', //post,get,등..전송방식
    dataType: 'xml',//데이타 타입
    error: function(){// 실패시 실행함수
        alert('테스트 실패요');},
    success: function(xml){// 성공시 실행 함수
     alert('테스트 성공요');
    } });

잘알다시피 ajax서버가 구현될때 가능한것이다.무작정 브라우저 듸우고 왜안되냐고 질문하기도 하는데 자기컴퓨터에 서버를구축하든지 아니면 웹에 올려서 테스트해봐야 결과가 나온다.


저작자 표시
신고

설정

트랙백

댓글

입력 검색 폼(form) 꾸미기

jQuery/DOM&jQuery 2010.02.22 13:41

간단한 검색 폼

간단한폼을 만들어보고 jQuery를 이용하여 label의 텍스트가 검색폼에 들어가게하여 라인을 줄여볼것이다.


css에서 label을 블럭 엘리먼트로 변경해준다.

label{ display:block;}

그러면 흔히 볼수있는 다음과 같이모습을 볼수있을것이다.

한라인 줄이기

위의 결과물은 label엘리먼트가 한블럭 차지하여 혹시사이트가 작은공간을 요구할때 불편사항을 줄수도있다.따라서 css변화를 주어 겹치게할것이다.

var $search = $('#search').addClass('overlabel');

html에서 클래스를 그냥주지않고 위와같이 jQuery를이용한것은 후에 별도로 같은 구문을 사용할 필요가있기에 변수로 지정해준것이다.그리고 css는 다음과 같다.

.overlabel{ position: relative;}
.overlabel label{ 
position:absolute;
top:1px; left:3px;
cursor:text;}

원하는 결과가 나올것이다.하지만 다음과 같은 문제점이 발생한다.

  • label의 텍스트"입력하시오"와 사용자가 입력할 텍스트가 겹치게된다
  • label이 검색필드위에있기에 브라우저에 따라 마우스만으로 입력필드에 이동할 수 없을 경우도있다.

문제점해결

첫번째 문제를 위해 필드에 포커스가 올 때 감춰줄 필요가 있다

$(document).ready(function() {
  var $search = $('#search').addClass('overlabel');
  var $searchInput = $search.find('input');
  var $searchLabel = $search.find('label');
  $searchInput
  .focus(function() {
  //포커스되면
    $searchLabel.hide();
    //보여준다
  })
  .blur(function() {
    if (this.value == '') {
      $searchLabel.show();
     }  }); });

각 엘리먼트를 변수로 지정해 주었고 input엘리먼트에 텍스트를 입력할 경우 원래 텍스트를 감추고 반대로 떠나면 다시 보여주게 하고있다. 다음에는 레이블을 클릭시 이벤트를 발생할 수 있도록 하는 것이다.

$searchLabel.click(function() {
  $searchInput.trigger('focus');

마무리

거의 다되었지만 하나남은것이있다. 위와같이할 경우 페이지를 새로고침하면 입력하던 텍스트값이 남아있도록할 필요가있다.

if ($searchInput.val()) {
//입력한 값이 남아 있다면
    $searchLabel.hide();
  }

만약반대로 새로고침 할 경우 "입력하세요"가 나오게 하려면 null값을 주면 된다

if ($searchInput.val()) {
    $searchInput.val(null);
  }

이로서 완성. 완성된 페이지를 보려면 여기로 http://sianasiatiger.cafe24.com/study/F_searchform.html

저작자 표시
신고

설정

트랙백

댓글

jquery text() 메소드

jQuery/jQuery메소드 2010.02.20 14:39

jquery text() 메소드

.text() 메소드는 주요기능으로 텍스트값을 반환하는역할을 한다.

alert( $('p').text() );

html은

나를 출력하시오

기본적으로 엘레먼트의 텍스트를 반환하여 출력하게 되어있다.

  1. $('p') : p라는 엘리먼트에 접근한다
  2. .text() : 그엘리번트의 텍스트 값을 찾느다.
  3. alert : 경고창으로 뜨도록

위와 같이 하면은 경고창에'나를 출력하시오' 라고 나올 것이다.이번에는 괄호안에 값을 넣었을 경우를 보자

$('p').text('나를 출력');

html은

나 말고...

값이 대체 되기도 한다. 화면에는 원래나와야되는 '나말고...' 대신 '나를 출력'이 나타날것이다.정확히 말하면 대체 되는 것이 아니라 덮어지는 것이다.

저작자 표시
신고

설정

트랙백

댓글

jquery filter() 메소드

jQuery/jQuery메소드 2010.02.19 10:30

jquery filter() 메소드

filter()
filter()메소드는 영어 해석그대로 필터역할을 한다.선택한것에 접근 할때 그 입력값에 일치하는 엘리먼트를 가르킨다

나 말고

나를 집어주시요~

이 때 다음과 같이 사용하면

$('p').filter('#test').text();

나를집어주시오를 선택하게 된다. 순서는 다음과 같다.

  1. $('p') : p라는 엘리먼트에 접근
  2. .filter('#test') : 그중 test라는 아이디를 가진것을 선택
  3. .text() : 그리고 텍스트를 반환
저작자 표시
신고

설정

트랙백

댓글

jquery end() 메소드

jQuery/jQuery메소드 2010.02.18 20:55

jquery end() 메소드

원문은 여기에서 볼 수있다http://api.jquery.com/end/

.end()
end() 메소드는 현재의 엘리먼트 바로 앞의 엘리먼트를 지칭한다. 다음예제를보자

Hm..

this is the test

$(document).ready(function() {
			alert($('p').filter('#test').end().text());
		});

스크립트 소스에서 접근순서를보자

  1. $('p') : p엘리먼트에 접근
  2. .filter('#test') : #test라는 아이디에 접근
  3. .end() : 한차례앞의 것에 접근한다 따라서 p에 접근하게 된다
  4. alert($('p').filter('#test').end().text()); 소스는 p에리먼트안의 텍스트 Hm..this is the test를 출력시킨다.

체이닝(chaining)

end 함수가 유용한 것은 여러번사용하여 어떤 엘리먼트를 재지정 할 필요없다는 점이다. 다음예제를보자

  
$('form ')
    .filter('.required').text( )
     .end().end()
    .filter('.conditional').text();

$('form ')에 대해서 end 함수를 사용하여 접근 하는 방법을 짜는 소스를 줄여주고있다. 위의 것이 의미하는 바는 다음과 같다.

  
$('form ')
    .filter('.required').text( );
$('form ')    
    .filter('.conditional').text();

아래 소스를 보면은 접근하기 위해 $('form ')를 두번이나 사용했다.end를 사용하면 이럴 필요없다. 또 여러번 사용가능하기에 바로 앞의것만 아닌 맨 앞의것도 선택할 수 있는것이다. 따라서 .end().end()$('form ') 를 지칭한다.

이런 end함수의 기능을 체이닝(chaining)이라하며 jQuery의 장점중 하나이다

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바