영삼넷IT 강국 = 김영삼 블로그에 오신걸 환영합니다.

jquery : 번갈아 가며 TR에 속성주기
<script type="text/javascript">
    $(document).ready(
        function() {
            $.each($('.tr_arr:odd'), function(i){ // 홀수 번째
                $(this).css("backgroundColor", "#FFFFFF");
            });
            $.each($('.tr_arr:even'), function(i){ //짝수 번째
                $(this).css("backgroundColor", "#F7F7F7");
            });
        });
</script>

<TABLE border=1>
<TR  class="tr_arr">
    <TD>data1</TD>
</TR>
<TR  class="tr_arr">
    <TD>data2</TD>
</TR>
<TR  class="tr_arr">
    <TD>data3</TD>
</TR>
<TR  class="tr_arr">
    <TD>data4</TD>
</TR>
</TABLE>

보편적인 암호화 알고리즘인 md5를 이용해 mssql 2000 에 저장된 사용자 패스워를 암호화 하고자 합니다.
그런데 2000 에서는 md5가 안되더군요. 그렇다고 db 를 2005 로 바꾸기엔 대형공사라..
여하튼 2000에선 md5가 안된다는걸 여태 몰랐습니다. ㅡㅡ;;
구글 사마의 도움을 받아 겨우 mssql 2000에서 사용할수 있는 md5.dll 화일을 발견했습니다.
혹시 필요하신분들이 있을듯 해서 글을 남겨 둡니다.


mssql 2000
자체적으로 md5를 지원하는 함수가 없다.
그래서 지원하는 dll 화일을 등록한다던지의 방법을 사용해야 한다.
http://www.codeproject.com/KB/database/xp_md5.aspx
에서 관련 dll 화일을 회원가입후 받아볼수가 있다.

등록은 C:\Program Files\Microsoft SQL Server\MSSQL\Binn 과 같은 MSSQL 실행화일 디렉토리에
다운로드한 xp_md5.dll 를 복사한후 아래의 문장을 실행하자

USE master;
EXEC sp_addextendedproc 'xp_md5', 'xp_md5.dll'

그후 사용자 함수로 사용하기 위해
사용할 DB에 아래의 함수를 추가 한다.
CREATE FUNCTION [dbo].[fn_md5] (@data TEXT) 
RETURNS CHAR(32) AS
BEGIN
  DECLARE @hash CHAR(32)
  EXEC master.dbo.xp_md5 @data, -1, @hash OUTPUT
  RETURN @hash
END

mssql 2005
자체적으로 md5를 지원한다. 다만 일반적인 프로그래밍에서의 md5 변환값과 동일하게 맞춰주기 위해
소문자처리등의 추가 변환이 필요하다
SubString(master.dbo.fn_varbintohexstr(HashBytes('MD5', 필드명 또는 문자열)), 3, 32)
만약 위에서 언급한 함수를 등록해서 사용하려면 2000과 똑같은 과정을 거치서 스칼라 함수로 등록하면된다.

구글의 번역 api 는 XSS 로 쿼리하고 받아옵니다.

비법은 script src="" 에 인자를 주는 것이었습니다.

script type="text/javascript" src="http://도메인/호출할.php?인자"

의 형태로 태그를 생성하여 head 에 appendChild 시킵니다.

php 에서는 결과값을 콜백함수로 호출합니다.

function xsscallback(res)
{
}
이런게 html 에 정의되어 있다면,

echo 'xsscallback("' + $res + '");';

하면 끝인거죠.

참 쉽죠?

똑같은 요청에도 다른 결과가 오는 서비스라면,
new Date() 의 .getTime() 값을 맨 뒤에 붙여주면 캐시되지 않습니다.

jQuery 의 $.param 으로 인자를 만들면 편합니다.
'http://yoursite/yourservice.php?' + $.param({a:'asdf',b:$('#yourtxt').val(),requesttime:dateObj.getTime()})

License : Public Domain

얼마전에 저는 정말 절망 속에서 있었습니다.
지난 3개월간 작업한 모든 데이타를 rm -rf 로 날려버렸고.
백업도 2달 전에 해놓은거라. .;; 진짜 암담한 상황이었습니다.

몇몇 지인분들께 여쭤봐도 "포기해~ 그게 정신건강에 좋아" 라는 얘기만 들었습니다.

그러다가 보게 된. http://kldp.org/node/103288

하던중 큰 시행착오는 없었고 저 문서대로만 하면되는데.
umount 하는데 ;; 문제가 많이 발생했습니다. 아래 차근 차근 설명을 쓰겠습니다.

제가 사용하는 centOS 에서만 그런지 모르겠지만.
옵션이 "-" 문자가 아니라 "--" 문자로 해야 작동을 했습니다.
--help 쳐보면 옵션 나오죠^^
저처럼 아무것도 모르는 초짜를 위해서 말씀드리자면.

저 링크에 있는 파일 받아서 설치하기 위해선
1-      ./configure (물론 압축풀린 곳에서)
2-      make
3-      make install

요렇고롬 해주면 됩니다.
패키지로도 되어있다고 하니깐. 우분투 패키지 관리자에서 잘 찾아보시길.

ext3grep 입니다.


설치후에 umount 해주니

device 가 아직 작동중이랍니다.

그래서 fuser -km /dev/sda6 (제 파티션 장치가 /dev/sda6입니다)
해서 연결된 장치를 지워주니 ssh 가 끊깁니다.;

원인인 즉슨, 제가 일반 유저로 로그인해서 su - 로
최고관리자 권한을 가져서 인데

이건
vi /etc/ssh/sshd_config
PermitRoot no <--- yes
/etc/init.d/sshd restart

요렇고롬 세팅 해주면 됩니다.

그런 문제없이 자연스레 umount 가 되시는 분은 그냥 넘어가십시요.

그다음 ext3grep –-dump-names --after=12146454 /dev/sda6
  위의 숫자는 unix time 입니다. php에서 mktime(시,분,초,월,일,연)
  해주면 쉽게 구할 수 있죠.(다른 방법있다면 그걸 선택하세요)

여튼 전 history 명령으로 제가 rm -rf 를 친 그 시점에대해서 복구하려고 위의
세팅을 맞췄습니다.


저렇게 하면 sdb1.ext3grep.stage1 와 sdb1.ext3grep.stage2
파일 비스므레한 파일이 생깁니다. ( 시간이  꽤 걸렸습니다 저는. 한시간 반정도?)
앞에껀 inode 정보 뒤에껀 디렉토리 정보죠.
사람이 읽을 수 있는건 뒤에꺼고요. 필요한건 두파일 모두입니다.

건들진 마세요. 그냥 두시면됩니다.


그다음 --restore-all  옵션과 --after 옵션으로
위에서 가져온 정보에 대해서 복구를 합니다. 다시 재차 조회해 오진 않으므로
시간소요는 적습니다.



이렇게 해서 제가 실행한 위치에 /RESTORE~~~~~ 어쩌구 폴더가 생기면서

그곳에 제 파티션의 파일들이 복구가 되었습니다. ^^ 아 사랑스러워. ^^

그 다음 다시 이 디바이스를 해당 폴더에 mount 시켜주고 복구된 파일을 /RESTORE 에서
원래의 장소로 복사해주면 끝.


정말...ㅜ.ㅜ 눈물을 머금고 처음부터 재작업을 하려고 했는데

이런걸 알게되다니... 위의 글을 써주신 분께 다시한번 감사를.


설명이 좀 부족해서 말이 엉킬수도 있겠네요.

여튼. ^^ 도움이되셨으면 좋겠습니다.

select box의 내용 가져오기
$("#select_box > option:selected").val();

select box의 값 설정
$("#select_box > option[@value=지정값]").attr("selected", "true")

jQuery 바로가기

이 글은 번역한 것입니다. 원문은 여기에서 확인하실 수 있습니다. 겸손한 자바스크립트를 구현하기엔 jQuery가 가장 적절하고 바람직하다는 생각에 옮겨봅니다. 저도 Quark씨처럼 당장의 편리함을 따른 것보다 jQuery의 철학을 따르는 것이 더 바람직하다고 생각합니다. 항상 디커플링을 지향하는 것이 생산성 문제를 개선하고 미래에 적응하는 것을 가능케 하기 때문입니다.

 오역된 부분이 있을 지도 모르겠습니다.-_-;; 교과서 영어가 아니라-_-;; 나름대로 의역을 하긴 했는데 어렵네요.

----여기부터는 번역입니다.

 jQuery는 겸손한(unobtrusive) 자바스크립트를 위한 자바스크립트 라이브러리다. jQuery는 태생적으로 Behavior driven development 방법론을 지향하고 CSS 셀렉터를 사용하여 HTML 문서를 훓는 방법(traversing)을 방법에 기반한다. 반면에 Prototype은 태생적으로 Class driven development를 지향하고 쉽게 자바스크립트 개발할 수 있도록 해준다. Prototype 라이브러리는 Ruby on Rails에서 아주 잘 지원되고 많은 헬퍼 함수들을 가지고 있다.

 세달 전에 마음을 jQuery로 굳히기까지 나는 항상 Prototype 라이브러리를 사용해왔다. jQuery은 나를 매우 고무시겼다. 여기에 그 이유가 있다.

  1. BDD(Behavior driven development)
  jQuery를 사용하면 CSS로 HTML 엘리먼트의 스타일을 정의하는 것 처럼 HTML 엘리먼트의 행동들을 분리하여 정의할 수 있다. 클릭했을 때 경고창을 띄우는 예제를 보자.

$(element).click(function(){
  alert("warning");
});

  이제 복잡한 예제를 살펴보자. speciallinks 클래스들의 모든 엘리먼트에 다음과 같은 행위를 집어넣자.
    1. href를 "javascript:void(0);"로 변경하고
    2. 클릭시 로그를 남기고
    3. onhover시(mouse over시) 배경색을 변경한다.

$("div.speciallinks").attr("href","javascript:void(0)")
  .click(function() {console.log("div.speciallinks clicked");})
  .hover(function(){$(this).addClass("hovered");},
       function(){$(this).removeClass("hovered");});

  2. MVC + J
    MVC 프레임웍은 웹 개발 환경을 Model-View-Controller로 나누었다. MVC 프레임워크에서 뷰는 HTML, CSS, Javascript의 부분으로 나누어지고 GUI 개발은 이 세부분이 하나로 결합하여 완성된다. 게다가 Ruby on Rails에서의 Prototype 라이브러리는 HTML과 JavaScript도 함께 합쳐버린다(meshup). 뷰를 개발하면서 JavaScript를 분리하는 BDD 방법론을 따르려 한다면 jQuery가 매우 적절하다. 나는 Ajax에서 MVC + J가 매우 강력하다는 것을 깨닭았다.

    나는 JQuery를 사용하여 나의 HTML 파일을 매우 깨끗하게 만들었고 모든 JavaScript 코드를 .js에 넣음으로써 HTML 엘리먼트의 행위를 모두 .js 파일에 정의하였다.

  3. 액션 체인(Chaining of actions)
    액션 체인은 DRY 원칙을 따를 뿐만 아니라 JavaScript 코드의 가독성을 증가시킨다. 만약 엘리먼트에 오퍼레이션들을 삽입하려면 다음과 같이 할 수 있다.

$("div.message").show()
  .append("<p>Action has been executed successfully")
  .addClass("flash");
// 각 함수는 라인으로 구분��여 사용한다.

    이 것은 jQuery의 모든 메소드가 query 객체를 반환하기 때문에 가능하다. 그리고 뒤따르는 메소드들이 선택된 HTML 엘리먼트에 체인 형식으로 적용된다.

   4. CSS 셀렉터 문제(CSS Selector rocks)
      CSS 셀럭터 HTML DOM을 사용하기에 매우 강력한 도구이다. jQuery는 HTML 문서의 엘리먼트를 식별하기 위해 CSS 셀러터를 이용하고 이를 위해 HTML 태그의 id 속성을 관리해야 하는 지루한 작업을 회피하게 해준다. 대부분의 id 속성은 CSS 셀렉터를 올바르게 사용하여 회피할 수 있다. Prototype의 $$ 함수는 CSS 셀렉터를 지원하지만 CSS 셀렉터의 능력을 모두 이끌어내지 못한다. 나는 Prototype에서 id 속성을 사용하는 것이 최선이라는 것을 알게 됐다.

   5. 엘리먼트의 존재 유무를 검사할 필요가 없다.
     프로토타입으로 액션으로 적용하기 전에 항상 엘리먼트가 존재하는지 확인해야 했다. 예를 들어 나는 사용자가 로그인 했을 때만 사용자가 명시한 내용을 보여주고 싶었다. 사용자가 로그인 했다면 렌더링된 페이지에 div{id='user-box'}같은 엘리먼트가 있다는 것을 검사해야 했다. 프로토타입에서는 그렇게 해야 했다.

if ($('user-box')!=null) {
    // jQuery에서는 이 if 블럭이 필요없다.
    $("user-box").style.backgroundColor = "red";
}

   6. Aids development process
     jQuery를 사용하면 HTML 코드가 간결해지고 거의 건드릴 필요가 없다. 나의 웹 디자이너는 쉽게 html과 stylesheet를 수정할 수 있고 Prototype 라이브러리를 몰라도 된다.

예제들:
  여기에는 jQuery와 프로토타입의 차이점을 강조하는 몇 가지 예제가 있다(물론, 이 코드가 최상의 코드는 아니다).

Example1:
 이 Tab 예제는 tabs 클래스에 속하는 3 개의 tab이 있고 id는 각각 tabs1, tabs2, tabs3이다(ids=>["tabs1","tabs2","tabs3"]). 사용자가 "show first tab" 링크를 클릭했을 때 #tab1만 보여진다.

 jQuery의 경우

$("div.tabs").hide();
$("div#tabs1").show();

    
  Prototype의 경우

$$("div.tabs").invoke("hide");
     //이거��
$$("div.tabs").each(function(x){
  Element.hide(x);
});
// 그리고 다음과 같은 코드로 마무리한다.
$("tabs1").show();

Example2:
엘리먼트의 CSS를 수정하는 예제

  jQuery의 경우

$("#user-box").css("background-color","red")

  Prototype의 경우    

var a = $("user-box");
a.style.cssText +=
       "background-color:red;";

Remy Sharp의 발표자료에서 다른 예제들도 볼 수 있다(http://ajaxian.com/archives/prototype-and-jquery-a-code-comparison).

Prototype이 좋은 이유
  1. Ajax 요청에서 div의 내용이 부분적으로 변경돼야 할때 JavaScript 행위는  activated/reactivated돼야 한다. jQuery에서는 이를 위한 많은 코드를 만들지 않아도 된다. 하지만 나는 Ajax로 로드된 이 부분을 항상 마음속으로만 새겨야 한다. Prototype에서는 로드된 HTML 엘리먼트들에 관련된 JavaScript 코드가 포함된다.
  2. Ruby on Rails의 Prototype 헬퍼들은 정말 대단하고 JavaScript와 Ajax를 만들때 많은 부분에서 매우 편리하다.
  3. Prototype은 자바스크립에서도 Ruby같은 문법을 사용할 수 있게 해준다. 개발을 쉽고 빠르게 할 수 있도록 배열, 객체 등의 기능을 변경해준다.
  4. jQuery에서는 JavaScrpt 파일이 모두 다운로드되고 DOM 생성된 후에만 엘리먼트의 행위를 사용할 수 있다. 연결이 느릴 때는 기다려야만 하기 때문에 매우 고통스럽다.

결론:
  jQuery와 Prototype은 둘 다 매우 굉장하다. 나는 더 적은 코드로 더 많은 일을 하면서 직관적이고 겸손하게 유지해야 한다는 jQuery의 철학이 큰 차이를 만든다고 생각한다. 그러나 나는 Prototype이 매우 그립다. jquery-rails가 통합되길 기다리고 있다. 결국 이 고지는 점령될 것이다. 나는 사람들이 이 변화를 감지하고 있다는 소식을 들을 때마다 기쁘다.

ps> 이 두 라이브러리를 함께 사용하려면 여기를 보라.

기반스크립트 : jQuery, MooTools, css

Prototip 2

Easiest Tooltip and Image Preview Using jQuery

Simpletip

Coda Popup Bubbles

MooTools 1.2 Tooltips: Customize Your Tips

Duplicate the jQuery Homepage Tooltips Using MooTools

jQuery Ajax Tooltip

CSS Bubble Tooltips

Easy CSS Tooltip

CoolTips

ToolTip_MooTools

SQL 쿼리
     TIP
        1. SELECT에 조인을 잘 쓰자
        2. MySQL 의 주요 SQL 문법 [ http://tinyurl.com/mqc7lk ] 참고 - 자세함.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"/> <META NAME="Author" CONTENT=""/> <META NAME="Keywords" CONTENT=""/> <META NAME="Description" CONTENT=""/> </HEAD> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> var Menu = new Array(); // DB에서 리스트 가져오기 Menu[0] = $([1, 2, 3]); Menu[1] = $([4, 5, 6]); Menu[2] = $([7, 8, 9]); $(document).ready(function(){ SetOption(); }); function SetOption() { // 선택된 녀석 가져오기 var i = $("select#hello").val(); $("select#sub>option").each(function(){ $(this).remove(); } ); $(Menu[i]).each(function(i, elem){ var newOpt = document.createElement('option'); newOpt.value = elem; newOpt.appendChild(document.createTextNode(elem)); $("select#sub").append(newOpt); }); } </script> <style type="text/css"> select { font-size:9pt; width:75px; } </style> <BODY> <select id="hello" onchange="SetOption()"> <option value="0">A</option> <option value="1">B</option> <option value="2">C</option> </select> <select id="sub"> </select> </BODY> </HTML>


스크롤바 색깔

XQuery Tree

http://dhtmlx.com

지금까지 본 트리 중에서 최고인 것 같다.

초보자를 위한 jquery 동영상
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/

아래와 같이 파일 업로드시 찾아보기... 버튼을 이미지로 바꿀 수 있는 팁입니다.

기존에 div등을 이용한 팁이 있지만, jQuery로 간단하게 적용할 수 있습니다.

변경전 :

변경후 :

사용방법 :

1. 첨부파일을 다운 받습니다.

2. 다음 두개의 스크립트 파일을 인클루드 시킵니다.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.filestyle.js" type="text/javascript"></script>

3. 적당한 곳에 다음 코드를 입력합니다.

$("input[type=file]").filestyle({
     image: "choose-file.gif",
     imageheight : 22,
     imagewidth : 82,
     width : 250
});

내 블로그나 홈페이지에 검색엔진을 장착해 보고 싶다면 엔진으로 스핑크스(Sphinx)를 선택해보는 것도 좋을 것 같습니다. 오픈 소스이고 PHP, Perl, C/C++, 등의 프로그래밍 언어 API 를 제공하고 있으므로 PHP 로 개발된 텍스트큐브와 같은 설치형 블로그에 검색을 붙이려면 PHP 용 API 를 이용하며 될 것입니다. 이미 텍스트큐브에도 검색이 있지만 레코드수가 많아서 검색해야할 항목이 많아질 경우 검색 시간이 많이 소요되고 복잡한 조건의 검색을 할 수 없는 문제가 있습니다. 개발언어를 다룰 수 있다는 조건 하에 스핑크스 검색엔진을 사용해볼 것을 권해봅니다.
스핑크스 검색엔진이 어떤 것인지 체험 해보려면 간단히 아래에 설명하는 방법으로 설치하고 테스트 해보면 됩니다. 참고로 리눅스 CetOS 5.x 에서 테스트 되었습니다. 물론 소스 코드가 공개 되어 있으므로 윈도우즈와 다른 리눅스, 유닉스 계열 OS 를 사용할 수 있습니다.

[root@sphinx ~]# yum -y install mysql-devel [root@sphinx ~]# cd /usr/local/src [root@sphinx src]# wget http://www.sphinxsearch.com/downloads/sphinx-0.9.8.1.tar.gz [root@sphinx src]# tar xvzf sphinx-0.9.8.1.tar.gz [root@sphinx src]# cd sphinx-0.9.8.1 [root@sphinx sphinx-0.9.8.1]# ./configure [root@sphinx sphinx-0.9.8.1]# make [root@sphinx sphinx-0.9.8.1]# make install

위와 같이 설치하면 아래와 같은 스핑크스 관련 파일들이 기본 폴더(/usr/local/bin)에 설치됩니다.

  /usr/local/bin/indexer
  /usr/local/bin/searchd
  /usr/local/bin/search
  /usr/local/bin/spelldump

또한 아래와 같은 설정 파일 샘플과 MySQL 용 SQL 샘플이 설치됩니다.

 /usr/local/etc/sphinx.conf.dist
 /usr/local/etc/sphinx-min.conf.dist
 /usr/local/etc/example.sql

MySQL 에 접속해서 테스트용 데이타베이스(test) 를 만들고 user 와 password 를 만들고 이 데이타베이스(test)에 권한을 부여 합니다. test로 데이타베이스를 정할 경우 이미 생성되 있으므로 권한 부여만 합니다.

[root@sphinx sphinx-0.9.8.1]# mysql -uroot -p Enter password: ******** Welcome to the MySQL monitor.  Commands end with ; or \g. Your MySQL connection id is 116 Server version: 5.0.45 Source distribution   Type 'help;' or '\h' for help. Type '\c' to clear the buffer.   mysql> grant all privileges on test.* to user@"localhost" identified by "password"; Query OK, 0 rows affected (0.05 sec) mysql> flush privileges; Query OK, 0 rows affected (0.01 sec)   mysql> exit Bye [root@sphinx sphinx-0.9.8.1]#

데이타베이스 설정이 완료 되었으면 스핑크스 셋팅 파일을 만들어줍니다.

[root@sphinx sphinx-0.9.8.1]# vi /usr/local/etc/sphinx-min.conf.dist [root@sphinx sphinx-0.9.8.1]# cp /usr/local/etc/sphinx-min.conf.dist /usr/local/etc/sphinx.conf [root@sphinx sphinx-0.9.8.1]# cat /usr/local/etc/sphinx.conf # # Minimal Sphinx configuration sample (clean, simple, functional) # source src1 {         type                                    = mysql           sql_host                                = localhost         sql_user                                = user         sql_pass                               = password         sql_db                                  = test         sql_port                                = 3306  # optional, default is 3306           sql_query                               = \                 SELECT id, group_id, UNIX_TIMESTAMP(date_added) AS date_added, title, content \                 FROM documents           sql_attr_uint                   = group_id         sql_attr_timestamp              = date_added           sql_query_info                  = SELECT * FROM documents WHERE id=$id } index test1 {         source                                  = src1         path                                    = /var/data/test1         docinfo                                 = extern         charset_type                    = sbcs } indexer {         mem_limit                               = 32M } searchd {         port                                    = 3312         log                                             = /var/log/searchd.log         query_log                               = /var/log/query.log         read_timeout                    = 5         max_children                    = 30         pid_file                                = /var/log/searchd.pid         max_matches                             = 1000         seamless_rotate                 = 1         preopen_indexes                 = 0         unlink_old                              = 1 } [root@sphinx sphinx-0.9.8.1]#

나의 데이타베이스 설정에 맞게 위와 같이 설정이 완료되면 아래와 같이 스핑크스에서 제공하는 샘플 테이블을 MySQL 에 만들어줍니다. 그리고 커멘드라인 프로그램 indexer 를 실행해서 검색을 위한 인덱스를 생성합니다. 인덱싱이 완료 되면 커멘드라인 프로그램 search 를 실행해서 검색을 할 수 있습니다.

[root@sphinx sphinx-0.9.8.1]# mysql -uroot -p test < /usr/local/etc/example.sql Enter password: ******** [root@sphinx sphinx-0.9.8.1]# mkdir /var/data [root@sphinx sphinx-0.9.8.1]# indexer test1 [root@sphinx sphinx-0.9.8.1]# search number Sphinx 0.9.8.1-release (r1533) Copyright (c) 2001-2008, Andrew Aksyonoff   using config file '/usr/local/etc/sphinx.conf'... index 'test1': query 'number ': returned 3 matches of 3 total in 0.000 sec   displaying matches: 1. document=1, weight=1, group_id=1, date_added=Sat Dec  6 11:42:12 2008         id=1         group_id=1         group_id2=5         date_added=2008-12-06 11:42:12         title=test one         content=this is my test document number one. also checking search within phrases. 2. document=2, weight=1, group_id=1, date_added=Sat Dec  6 11:42:12 2008         id=2         group_id=1         group_id2=6         date_added=2008-12-06 11:42:12         title=test two         content=this is my test document number two 3. document=4, weight=1, group_id=2, date_added=Sat Dec  6 11:42:12 2008         id=4         group_id=2         group_id2=8         date_added=2008-12-06 11:42:12         title=doc number four         content=this is to test groups   words: 1. 'number': 3 documents, 3 hits   [root@sphinx sphinx-0.9.8.1]#

위와 같이 인덱싱이 완료되고 search 커멘드라인 명령어를 이용해 "number" 라는 검색어(키워드)로 검색하면 검색결과 3개의 문서가 검색되었다고 알려줍니다.
PHP 로 검색엔진을 제어하기 위해 아래와 같이 검색 데몬(searchd)을 띄우고 PHP 용 API 를 이용해서 검색할 수 있습니다.

[root@sphinx sphinx-0.9.8.1]# /usr/local/bin/searchd Sphinx 0.9.8.1-release (r1533) Copyright (c) 2001-2008, Andrew Aksyonoff   using config file '/usr/local/etc/sphinx.conf'... creating server socket on 0.0.0.0:3312 [root@sphinx sphinx-0.9.8.1]# cd api [root@sphinx api]# php test.php number Query 'number ' retrieved 3 of 3 matches in 0.000 sec. Query stats:     'number' found 3 times in 3 documents   Matches: 1. doc_id=4, weight=100, group_id=2, date_added=2008-12-06 11:42:12 2. doc_id=1, weight=1, group_id=1, date_added=2008-12-06 11:42:12 3. doc_id=2, weight=1, group_id=1, date_added=2008-12-06 11:42:12 [root@sphinx api]#

위와 같이 검색 데몬 searchd 를 띄우고 샘플 PHP 소스 파일 test.php 를 실행하면 검색 결과를 확인할 수 있습니다. 샘플 소스 상단을 보면 sphinxapi.php 라는 파일을 Include 합니다. 이것이 PHP 용 API 입니다.

간단하게 스핑크스를 설치하고 테스트도 해봤습니다. 이제 내 블로그 데이터를 인덱싱하고 이를 검색할 수 있도록 검색 페이지를 만드는 일만 남았습니다.

오픈 소스 검색 엔진 스핑크스(Sphinx) 홈페이지
    - http://www.sphinxsearch.com/
스핑크스(Sphinx)로 PHP로 커스텀 검색 엔진 구현하기
    - http://www.ibm.com/developerworks/kr/library/os-php-sphinxsearch/index.html

1. jqac
 - jQuery를 활용한 Auto-complete/suggest javascript 라이브러리
 - 다운로드 : http://code.google.com/p/jqac/downloads/list
 - 데모 : http://www.cs.bgu.ac.il/~ygleyzer/files/utils/jqac/jqac_example.html

2. AutoComplete 1.2
 - prototype과 scriptaculous를 활용한 Auto-complete javascript 라이브러리
 - 다운로드 : http://www.beauscott.com/examples/autocomplete/autocomplete.zip
 - 데모 : http://www.beauscott.com/examples/autocomplete/doc/examples.html
 
3. AutoCompleter(mootools)
 - MooTools를 활용한 Auto-complete javascript 라이브러리
 - 다운로드 : http://digitarald.de/project/autocompleter/#download
 - 데모 : http://digitarald.de/project/autocompleter/1-1/showcase/delicious-tags/, http://digitarald.de/project/autocompleter/1-1/showcase/local/

4. AJAX AutoComplete
 - Jim Roos가 자체로 만든 Ajax framework
 - 다운로드 : http://jimroos.com/AutoComplete.zip
 - 데모 : http://www.jimroos.com/2007/05/ajax-autocomplete.html

5. YUI Autocomplete
 - Yahoo! UI Library로 만든 Auto-complete
 - 다운로드 : http://brandspankingnew.net/download.php?file=autosuggest_v2.zip
 - 데모 : http://developer.yahoo.com/yui/examples/autocomplete/index.html

6. AutoSuggest
 - 심플한 Javascript를 활용한 Auto-complete
 - 다운로드 : http://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html
 - 데모 : http://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html

7. dhtmlxCombo
 - 콤보형 Auto-complete
 - 다운로드 : http://www.dhtmlx.com/docs/download/dhtmlxCombo.zip
 - 데모 : http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml

8. AutoComplete (mootools)
 - scriptaculous를 활용한 Auto-complete
 - 다운로드 : http://script.aculo.us/
 - 데모 : http://demo.script.aculo.us/ajax/autocompleter

1.  jQuery 기본

 

jQuery 래퍼

// HTML조각 묶기

$(“<P>What’s cooking?</P>”);      

// 조각을 도큐먼트 끝에 추가

$(“<P>What’s cooking?</P>”).appendTo(“body”);         

//도큐먼트내의 모든 <div>요소를 조작하기 위한 래핑

$(“div”)

    // someId란 id를 가진 DOM요소를 래핑

      $(“#someId”)

    // someClass란 이름을 가진 CSS를 처리하기 위해 타입과 상관없이 모든 요소를 래핑한다.

      $(“.someClass”)

 

jQuery 연산을 연결하기

  // id가 somdting인 요소에 CSS를 추가하고 보여준다.

    $(‘#something’).addClass(‘someClass’);

    $(‘#something’).show();

è  $(‘#something’).addClass(‘someClass’).show();

// onload보다 먼저 실행됨

$(document).ready(function);

è  $(function);

 

jQuery 와 Prototype을 함께 사용하기

  // $전역이름을 JQuery라이브러기가 로드된 이후 Prototype로 되돌리기

    jQuery.noConflict()

  // Prototype과 함께 사용할 때 별칭을 선언하여 사용 권고

    var $j = jQuery;

  

이벤트 처리

다운로드 : http://docs.jquery.com/Downloading_jQuery 이곳에서 최신버젼(1.2.6)을 다운로드 받아 소스에 추가한다.

1. HMTL로드시 수행하는 코드
(1)자바스크립트
window.onload = function(){
   alert("시작");
}

 

(2)jQuery
$(document).ready(function(){
   alert("시작");
});

 

2. 객체 클릭시 이벤트 발생(a태그를 클릭했을시 해당 스크립트가 동작한다.)
(1)자바스크립트
<html>
<head>
 <script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
 <script type="text/javascript">
  window.onload = setObjects;
  function setObjects(){
   var aTag = document.getElementsByTagName("a")[0];
   aTag.onclick = function(){
    alert("welcome");
    //이벤트 발생을 막는 부분이다.
    if(event.preventDefault){
     event.preventDefault();
    }else{
     event.returnValue = false;
    }
    //이벤트 발생 막는 부분 끝
   }
  }
 </script>
</head>
<body>
 <a href="http://jquery.com/">jQuery</a>
</body>
</html>

 

(2)jQuery
$(document).ready(function(){  
   $("a").click(function(event){
      alert("Thanks for visiting");
      event.preventdefault();
      //event는 해당 태그의 이벤트를 넘겨받고 preventdefault()를 적용하면 해당이벤트는 동작하지 않는다.
      //고로 링크된 페이지로 이동하지 않는다.
   });
});

 

 

CSS의 제거.

 

<html>

<head>

 <style type="text/css">

  a.test{

   font-weight : bold;

  }

 </style>

 <script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>

 <script type="text/javascript">

  $(document).ready(function(){

   $("a").addClass("test");   //a태그에 class로써 test를 추가한다.

   $("a").removeClass("test");   //a태그에 class test를 제거한다. (우선 이줄을 제거한 상태에서 실행시켜보자)

  });

 </script>

</head>

<body>

 <a href="http://jquery.com/">jQuery</a>

</body>

</html>

 <a href="http://jquery.com/">jQuery</a>

</body>

</html>

[출처] 2. jQuery기초(2) (자바를 통하여 세계로) |작성자 세피룸

 

 

글자가 천천히 사라지는 효과

<html>
<head>
 <style type="text/css">
  a.test{
   font-weight : bold;
  }
 </style>
 <script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   $("a").click(function(event){
    event.preventDefault();  //이벤트 발생을 막는다(링크페이지로 이동안함)
    $(this).hide("slow"); //this현재 이벤트가 발생한 객체를 받는다.
   });
  });
 </script>
</head>
<body>
 <a href="http://jquery.com/">jQuery</a>
</body>
</html>

 

*********************************************************************************************

<input type="text" size="10"/> 이런식으로 태그를 추가하고 $("a")를 $("input")으로 변경 후 해보자!!

 

 

The Magic of jQuery

<html>
<head>
 <style type="text/css">
  a.test{
   font-weight : bold;
  }
 </style>
 <script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   $("a").click(function(event){
    $("a").addClass("test").show().html("foo");  //show()메소드는 a태그를 보여준다. 아래코드에서 class명이 hideme인 a태그를 하나더 추가해보고 테스트 해보면 알 수 있다.
    $("a")
     .filter(".clickme")  //a태그의 class명이 clickme인 것만을 걸러낸다.
      .click(function(){
       alert("You are now leaving the site.");
      })
     .end()  //첫번째 마법의 끝을 알린다.
     .filter(".hideme")  //a태그의 class명이 clickme인 것만을 걸러낸다.
      .click(function(){
       $(this).hide();  //이벤트가 발생한 객체를 숨긴다. (아까 했던 slow를 인자로 주면 천천히 사라진다.)
       return false;  //링크이벤트를 취소한다.
      })
     .end();
   });
  });
 </script>
</head>
<body>
 <a href="http://jquery.com/">jQuery</a><br/>
 <a href="http://google.com/" class="clickme">I give a message when you leave</a><br/>
  <a href="http://yahoo.com/" class="hideme">Click me to hide!</a><br/>
 <a href="http://microsoft.com">I'm a normal link</a>
</body>
</html>

 

 

 

jQuery 1 - Introduction

2008/12/06 21:44

Posted by 필소굿 Posted in " 인터넷&블로그/jQuery "

설치형 Textcube의 새 티켓 "Dojo를 jQuery로 대체하기"와 관련하여 자바스크립트를 좀 더 활용하기 위해 jQuery를 배워보기로 하고, 결과물들을 정리해 봅니다. 오늘은 첫 날이므로 jQuery에 대한 간단한 소개, 간단한 스크립트를 소개하겠습니다(아주 아주 기초적인. 저도 잘 모르기 때문에.).

jQuery 한 줄 소개

 jQuery는 자바스크립트/Ajax 프레임웍이며 자체가 한 파일로 이루어져 가벼우며 다수의 플러그인을 사용할 수 있어 확장성도 뛰어나다. 현재 1.2.6버전까지 개발되어 있고 워드프레스에서 적용하고 있으며 prototype에 비해 구문이 쉽고 속도가 빠른 편이라 최근에 각광받고 있다.

 

jQuery 참고 사이트

• The Write Less, Do More - jQuery
• jQuery Documentation
• Visual jQuery(jQuery 객체 소개)
• jQuery - 위키백과
• jQuery로 Ajax 개발을 단순화 하기
• What is jQuery?
• 개발새발 :: 내가 Prototype에서 jQuery로 옮긴 이유
• [jQuery] jQuery 간단한 소개 및 prototype, yui와 간단 비교
• jQuery - New Wave Javascript
• zbum blog
• jQuery 관련 사이트 모음

jQuery 첫 만남

지금까지 간단히만 자바스크립트를 뚝딱거리다가(팝업 윈도를 만든다거나 책에 있는 Ajax 예제를 그대로 옮겨 쓰면서 class명과 id만 겨우 바꾸는 수준) 제대로 프레임웍을 다뤄 보게 되었습니다. 아직 교재도 없지만서도 jQuery.com의 영문 도큐먼트를 하나씩 천천히 읽어가며 다뤄보겠습니다.

jQuery를 시작하기 위해서는 다른 스크립트와 마찬가지로 html 문서 첫부분에 jQuery.js를 임포트하여야 합니다. js 파일을 해당 서버에 저장할 수도 있겠지만, jQuery.com의 js 파일을 로드해 봅니다.

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

레퍼런스에 의하면 모든 개체들이 로드되고 난 다음에 스크립트를 적용하기 위해 jQuery에서는 'ready event'를 지정하여, 완전히 로드가 된 후 부터 프로그램을 시작합니다.

$(document).ready(function() {
    // do stuff when DOM is ready
});

Selector(선택 지시자)

DOM(Document Object Model)에 의하면 모든 태그와 각 태그의 class, id 속성 등으로 접근하려면 일반적인 환경에서는 getElementById 또는 getElementsByTagName 등으로 접근했는데, jQuery에서는 쉽게 $(" ") 형태로 접근합니다.

• 태그 - $("a"), $("div"), $("p") 등
• 클래스 - $(".class"), $("p.class")
• ID - $("#id"), $("div#id")
• 중첩 구조의 표현 - $("#orderedlist").find("li") = $("#orderedlist li")
• 지시자 확실히 알기 - Codylindley.com(추천)

간단히, 이 문단을 클릭해 보면 메시지가 뜨는 예제를 소개하겠습니다.

 $(document).ready(function() {
   $("p.select").click(function() {
     alert("Hello world!");
   });
 });

ready 이벤트로 문서를 모두 로드한 뒤, p(문단) 중에서 class가 select인 문단을 click하여 { } 사이에 있는 구문(경고창 실행)이 실행되는 구조입니다. 변수를 하나 잡고, 글자가 날까 말까 조마조마하며 썼던 getElementsBy~ 보다 훨씬 간편한 느낌입니다. 이런 접근법으로 지정한 부분의 내용을 추가하거나 CSS를 변경하는 예제입니다.

  $(document).ready(function() {
    $("#orderedlist").find("li").each(function() {
      $(this).append( " BAM! ");
      $(this).css("background", "#c3e1a7");
   });
 });

• one BAM!
• two BAM!

id가 orderedlist인 레이어의 li 태그css에 의해 배경색을 바꾸고, append에 의해 내용을 추가하고 있습니다.

다음은 토글 클릭으로 내용이 보였다 숨는 예제입니다.

   $("#sh").toggle(function(){
     $(".stuff").hide('slow');
   },function(){
     $(".stuff").show('slow');
   });

click me

opened

위 예제는 다양하게 많이 사용되고 있지요? 간단한 조작으로 좀 더 효과적인 레이어 이동 효과를 줄 수 있네요. 더 많은 효과(페이드, 애니메이션 등)를 위해 jQuery.com의 API > Effect 절을 참고하세요. 다음에 소개할 때에는 좀 더 jQuery의 핵심과 관련있는 내용을 더 찾아보겠습니다. 기다려주세요-:)

  

jQuery/Core란?

 jQuery/Core란 jQuery의 핵심이 되는 것을 의미한다. 그만큼 우리가 jQuery를 사용할 때 많이 사용되는 부분이기도 하다.

하지만 Core라고해서 어려울것은 없고, 의외로 간단하다. Core를 표현하면 "$()"이렇게 된다.

 

참고로,

jQuery를 표현할 때 두가지가 있는데 한가지는 "jQuery(document).ready()" 이렇게 "jQuery"를 사용하는 방법과 "$(document).ready()" 처럼 "$"로 사용하는 방법이 있다. 이것은 사용자 취향에 맞게 선택해서 사용하면 된다.

 

정확한 개념을 알고 싶으신 분은 http://docs.jquery.com/Core 여기로 가시면 자세히 알 수가 있다. 하지만 저 처럼 영어에

약하신 분들은 이렇게 이해를 하시면 된다.

그럼 이제 사용법에 대해서 한번 살펴 봅시다.

 

jQuery 사용법

 여기서 사용되는 예제나 API는  http://docs.jquery.com/ jQuery공식 사이트에서 발췌한 것임을 미리 말씀드리고 시작합니다.

 

1. jQuery( expression, context )

  : expression는 String로 표현되고 특정 태그를 찾을때 사용되며, context는 Element나 jQuery으로 인자 값으로 받는다.

    즉, $("input:radio", document.forms[0]); 이와 같이 사용된다.

 

 2. jQuery( html )

  : jQuery는 인자값으로 html 태그를 받아 그 태그를 HTML페이지에 추가를 할 수가 있다.

    즉, 이렇게 $("<div><p>Hello</p></div>").appendTo("body") 사용이 되기도 하고,  $("<input/>").attr("type", "checkbox");

    이렇게도 사용되기도 한다.

    풀이 하자면 첫 번째는 "body"안에 "<div><p>Hello</p></div>"를 삽입(appendTo()는 특정 태그에 사입할 때 사용 )한다는

    애기고 두번째는 "input"를 생성하되 "type=checkbox"로 하여 태그를 생성하게 된다. 두번째는 HTML 마지막 부분에 삽입이

    된다.

 

 3. jQuery( elements )

  : DOM element(s) 를 인자로 받아 그 지역의 elements를 설정할 수가 있다.(한개 혹은 다수를 지정할 수가 있다.)

    $(document.body).css( "background", "black" ); -> HTML 배경색을 검정색으로 바꾼다.

    $(myForm.elements).hide() -> myForm의 이름을 가진 form안의 elements을 숨긴다.

 

 4. jQuery( callback )

  : 이것은 인자값을 함수로 지정을 할 수가 있다는 애기로 jQuery를 처음 시작하는 부분에서 많이 접해 봤을 것이다.

    즉, "$(document).ready(function(){....};)" 이 부분

    이렇게 사용하는 것은 특정 이벤트가 발생할 때 그 부분을 함수로 처리 하기 위해서 이다. 예를 들어 마우스를 클릭시

    경고창을 띄워주고 싶다면 아래와 같이 하면 된다.

                           "$(document).click(function(){

                                   alert("마우스가 눌려짐!!");

                             };)"

 

- jQuery Object Accessors

 이번에는 직접 오브젝트를 엑세스할 수 있는 jQuery에 대해서 알아 본다. 뭐, jQuery 홈페이지에 가면 다 나와 있는 것들이긴 하지만 그래도 본좌의 나름 해석판을 듣고 싶다면 계속 봐도 된다. 다만, 본좌도 영어가 짧기 때문에 직접 실행해 봐서 이해 하기도 한 부분도 있고 이리저리 찾아 다니면서 알아낸 것 들도 있다. 그래서 영어 잘하시는 분 들이 봤을 경우 영 아니다 싶으면 자세히 답변을 남겨 주시면 참고하여 수정토록 하겠음...

그럼 오브젝트를 엑세스 할 수 있는 jQuery 에 대해서 알아 봅시다.

 

1. each( callback )

 : 해당 오브젝트에서 어떤 함수처리를 하고 싶을 경우 사용된다.  코드를 직접 보면 이해가 쉽게 된다.

    $(document.body).click(function() {
      $("div").each(function (i) {

        // 클릭 이벤트가 발생 되었을 경우 "div"태그에서만 글 색상을 변경하도록 한다.
        if (this.style.color != "blue") {
          this.style.color = "blue";
        } else {
          this.style.color = "";
        }
      });
    });

   이 코드를 실행 시키면 클릭 할때마다 색깔이 변경이 된다. 참고로 이 코드는 "body"안의 모든"div"태그를 뜻한다. 특정 "div"

   에서만 이벤트가 발생되기를 원하시면 그 태그의 인덱스를 찾아야 할 것이다.

 

2. size()

 : 해당 오브젝트의 Elements의 수를 알고자 할 때 사용된다.

    $(document.body).click(function () {
        $(document.body).append($("<div>"));
        var n = $("div").size();
        $("span").text("There are " + n + " divs." +
                     "Click to add more.");
    }).click(); // trigger the click to start

 

 3. length()

  : 해당 오브젝트의 Elements의 수를 알고자 할 때 사용된다. size()와 동일하다.

     $(document.body).click(function () {
      $(document.body).append($("<div>"));
      var n = $("div").length;
      $("span").text("There are " + n + " divs." +
                     "Click to add more.");
    }).trigger('click'); // trigger the click to start

 

 4. eq( position )

  : 해당 포지션에 위차한 태그를 찾는다. 한마디로 아파트로 비교하자면 몇호실을 찾는지와 같다. "405호실를 청소해라!"라는

    명령이 있다면 그 아파트의 "405호실"을 찾아가서 거기만 청소를 하면 된다. 구지 다른곳도 청소할 필요가 없다는 것이다.

    position의 위치는 0 부터 시작해서 -1까지다.

   

    $("p").eq(1).css("color", "red"); // "p"태그에서 1(0 부터 시작하므로 두번째를 의미한다.)번지에 해당하는 "p"를 변경한다.
 

 5. get()

  : 해당 태그의 Elements 들을 Array형태로 리턴한다. 즉, '$("div").get() 하면 모든 div태그 들을 Array 형태로 리턴한다.'

    한마디로 하면 DOM의 Elements를 배열로 리턴하는 것이다.

       function disp(divs) {
          var a = [];
          for (var i = 0; i < divs.length; i++) {
               a.push(divs[i].innerHTML);
          }
          $("span").text(a.join(" "));
        }
   
        disp( $("div").get().reverse() ); // div태그의 값들을 읽어 와서 그 값의 순서를 뒤집는다.

        // 예를 들어

        // <div>1</div><div>2</div><div>3</div> 이 있으면 reverse() 하면 3, 2, 1로 순서가 뒤집히게 된다.

 

 6. get( index )

   : index에 해당되는 위치의 element을 가져온다. 즉, 단일 element를 가져 오게 되는 것이다.

         $("*", document.body).click(function (e) { // body안의 모든 Elements에서 클릭 이벤트가 발생되면.
               e.stopPropagation();
               var domEl = $(this).get(0); // 클릭된 태그의 Elements중 0번지에 해당하는 Element를 가져온다.
               $("span:first").text("Clicked on - " + domEl.tagName); // 0번지의 태그이름을 출력한다.
          });

      이해하는데에는 어렵지 않을 것이다. 프로그래밍을 하다보면 위와 비슷한 함수를 많이 접해 보기 때문이다.

 

 7. index( subject )

  : subject의 인덱스 번호를 찾는다. 인덱스 번호도 0부터 시작된다.

      $("div").click(function () {
           // this is the dom element clicked
          var index = $("div").index(this); // "div"태그에서 클릭이벤트가 발생 될경우 그 "div"태그의 인덱스 찾아서 리턴한다.
          $("span").text("That was div index #" + index);
    });

 

jQuery/Core에 대해서는 여기서 마무를 하겠다. 이 외에도 Data Cash, Plugins에 대한 것도 있지만 아직은 다루지 않겠다.

시간이 짬짬이 날때 마다 글을 남기곤 있지만 회사 일도 바쁘다 보니 쉽게 글을 쓰지 못하는 것도 없지 않아 있다.

 

이 글을 쓰면서 예제 코드도 함께 올리려고 했는데 너무 도둑놈이 되는것 같아서 간단하게만 소개만 하였다. 뭐 본좌 나름대로

예제소스를 만들어 올리면 되지만...... 그렇게 하려면 시간이 많이 소모가 되고.... 잘못하다가는 회사에서 짤릴까봐 안했음..^^

 

다음은 Selector에 대해서 알아 볼 것이다. 나의 허접강의는 계속 된다..쭈욱~~~ ^^b

 [출처] 4. jQuery 기초(4) jQuery의 마법 (자바를 통하여 세계로) |작성자 세피룸

 [출처] 3. jQuery기초(3) (글자가 처천히 사라지는 효과) (자바를 통하여 세계로) |작성자 세피룸

 [출처] 1. jQuery 기초 (자바를 통하여 세계로) |작성자 세피룸

플래시 포토 갤러리 23가지 모음-Flash Photo Gallery

플래시플래시 포토갤러리 입니다. 예전에 이미 소개시켜드렸던 것도 있습니다.

맘에 드시는거 있으시면있으시면 데모페이지에서 확인후 다운받으시면 됩니다.
대분 압축파일로 모든소스가 첨부되어있으니 다운받아서 소스파일 수정하시면수정하시면 되겠죠.
각 제목을 클릭하시면 해당소스의 상세내용을 확인할수 있습니다.

페이지의 구분이구분이 없는것들은 한페이제 다 있는것들 입니다.






AutoViewer

Full 데모페이지   400*300 데모페이지    다운로드페이지





Zen Flash Gallery

데모페이지   다운로드페이지





Free Flash & XML Slideshow Photo Gallery

데모페이지  





SimpleViewer

Full 데모페이지1    Full 데모페이지2     480*680 데모페이지     다운로드페이지





Agile Gallery

Flash 데모페이지     AJAX 데모페이지       다운로드페이지





Free Flash Photo Album

데모페이지      다운로드페이지





Flash Page Flip Photo Gallery template for Picasa

데모페이지1   데모페이지2     다운로드페이지





Flash Photo Browser






Polaroid Gallery

데모페이지





PostcardViewer

데모페이지   다운로드페이지





Flash Photo Gallery

데모페이지    다운로드페이지





Free Photo Gallery v.2






Flash Slide Show Maker

데모페이지   다운로드페이지






Flashmo






Invert Media Flash Photo Gallery 1.0






Slideroll






Tahilt






FlShow

데모페이지1   데모페이지2  데모페이지3     다운로드페이지





WS-Slide show

데모페이지   다운로드페이지





Art Flash Gallery

데모페이지    다운로드페이지





PhotoViewerFree




 via: via: stayupdate

안녕하세요?
최근 가장 인기있는 자바스크립트 라이브러리는 jQuery입니다.
MS도 ASP.NET MVC에 jQuery를 포함시킬 예정입니다.

이미 시중에 jQuery 책이 번역되어 나와 있지만,
IBM 사이트에서 jQuery 강좌를 번역해서 연재하고 있으니까
이것을 먼저 보시는 것도 좋으리라 생각합니다.

jQuery로 작업하기, Part 1: 브라우저로 데스크톱 응용 옮기기

jQuery로 작업하기, Part 2: 내일 나올 웹 응용을 오늘 구현해보자

jQuery로 Ajax 개발을 단순화 하기 

jQuery로 작업하기, 3부: jQuery와 Ajax로 RIA 만들기

Ajax로 사이트 전면 개편, Part 1: Ajax와 jQuery로 기존 사이트 개선하기

Ajax로 사이트 전면 개편, Part 2: jQuery, Ajax, 툴팁, 라이트박스로 기존 사이트 개선하기

Ajax로 사이트 전면 개편, Part 3: jQuery, Ajax 탭, 회전식 슬라이드쇼로 기존 사이트 개선하기


Ajax로 사이트 전면 개편, Part 4: 기존 사이트를 jQuery와 Ajax forms를 사용하여 개선하기

1. 기본 셀렉터 (CSS 셀렉터 사용)

• element : 모든 <element> 엘리먼트와 일치하는 실렉터.
• #id : 지정된 아이디를 가지는 엘리먼트와 일치하는 실렉터.
• .class : 지정된 클래스명을 가지는 모든 엘리먼트와 일치.
• * : 모든 엘리먼트 지정.
• selector1, selector2, selectorN : 각각의 지정된 실렉터와 일치하는 엘리먼트 반환.

  예> a#myID.myClass  

       - 아이디가 myID이고 myClass를 클래스로 가지는 <a> 링크 태그와 일치하는 실렉터

      p a.myClass

       - <p> 엘리먼트 안에 myClass를 클래스로 가지는 모든 <a> 엘리먼트와 일치하는 실렉터

2. 계층 실렉터 

• ancestor descendant : 조상 <ancestor> 엘리먼트의 자손(descendant)인 모든<descentant> 엘리먼트와 일치
• parent > child : <parent>의 바로아래 자식인 모든 <child> 엘리먼트와 일치
• prev + next : <prev> 엘리먼트 바로 다음의 형재인 <next> 엘리먼트와 일치
• prev + sibling : <prev> 엘리먼트 다음의 형제인 모든 <sibling> 엘리먼트와 일치

3. 기본 필터 실렉터 

• :first : 페이지 처음 선택된 엘리먼트와 일치
• :last : 페이지 마지막 선택된 엘리먼트와 일치
• :not(selector) : 주어진 실렉터와 반대의 모든 엘리먼트와 일치
• :even : 페이지의 짝수 번째 엘리먼트와 일치(인덱스는 0부터 시작)
• :odd : 페이지의 홀수 번째 엘리먼트와 일치(인덱스는 0부터 시작)
• :eq(index) : 지정된 index 번째의 엘리먼트와 일치
• :gt(index) : 지정된 index 번째의 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치
• :lt(index) : 지정된 index 번째의 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치
• :header : 헤더 <h1> ~ <h6> 엘리먼트와 일치
• :animated : 현재 애니메이션이 적용되고 있는 엘리먼트와 일치

4. 내용 필터 셀렉터

• :content(text) : 지정된 text 내용을 포함하는 엘리먼트와 일치
• :empty : 자식을 가지지 않은 엘리먼트와 일치
• :has(selector) : 지정된 selector와 일치되는 엘리먼트를 포함하는 엘리먼트와 일치
• :parent : 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트와 일치

5. 가시 필터 셀렉터

• :hidden : 감춰진(hidden) 엘리먼트와 일치
• :visible : 보이는(visible) 엘리먼트와 일치

6. 속성 필터 셀렉터

• [attribute] : 지정된 속성(attribute)를 가지는 엘리먼트와 일치
• [attribute=value] : 지정된 속성(attribute)과 값(valu)을 가지는 엘리먼트와 일치
• [attribute!=value] : 지정된 속성과 같지않거나 지정된 속성 값을 가지지않는 엘리먼트와 일치
• [attribute^=value] : 지정한 값으로 시작하는  속성을 가진 엘리먼트와 일치
• [attribute$=value] : 지정한 값으로 끝나는  속성을 가진 엘리먼트와 일치
• [attribute*=value] : 지정한 값을 포함하는  속성을 가진 모든 엘리먼트와 일치
• [attributeFilter1][attributeFilter2][attributeFilterN] : 지정한 속성 필터 셀럭터와 일치하는 모든 엘리먼트와 일치

7. 자식 필터 셀렉터

• :nth-child(index/even/odd/equation) : N/짝수/홀수/공식에 따른 번째 자식 엘리먼트와 일치
• :first-child : 첫 번째 자식 엘리먼트
• :last-child : 마지막 자식 엘리먼트
• :only-child : 동기(형제)가 없는 자식 엘리먼트와 일치

8. 폼 셀렉터

• :input : 폼 엘리먼트와 일치 (input, select, textarea, button)
• :text : 텍스트 엘리먼트 (input[type=text])
• :password : 패스워드 엘리먼트 (input[type=password])
• :radio : 라디오 엘리먼트 (input[type=radio])
• :checkbox : 체크박스 엘리먼트 (input[type=checkbox])
• :submit : 전송버튼 엘리먼트(button[type=submit]이나 input[type=submit])
• :image : 폼 이미지 엘리먼트(input[type=image])
• :reset : 리셋 버튼 엘리먼트(button[type=reset]이나 input[type=reset])
• :button : 모든 버튼 엘리먼트 ( input[type=submit],  input[type=reset], button)
• :file : 모든 파일 엘리먼트 (input[type=file])
• :hidden : 감취진 엘리먼트만 선택

9. 폼 필터 셀렉트

• :enabled : 활성화 상태인 모든 폼 엘리먼트와 일치
• :disabled : 비활성화 상태인 모든 폼 엘리먼트와 일치
• :checked : 선택된 체크박스나 라이오 버튼 엘리먼트와 일치
• :selected : 선택된 엘리먼트와 일치 

jQuery함수/$(...)

jQuery(expression, context)

CSS선택 장치를 받고, 매치한 엘리먼트 집합의jQuery오브젝트를 돌려준다.

jQuery(html, [ownerDocument])

HTML문자열을 받아DOM Element(을)를 작성해, 그것들을 포함한다jQuery오브젝트를 돌려준다.

jQuery(elements)

받은 엘리먼트를jQuery오브젝트로 해 돌려준다.

jQuery(callback)

$(document).ready()의 단축형.

jQuery오브젝트 조작

each(callback)

모든 요소에 대해서 콜백 함수를 실행한다.

size()

jQuery오브젝트가 가지는 요소수를 돌려준다.

length

jQuery오브젝트가 가지는 요소수를 보관 유지한다.

selector

jQuery 1.3보다.jQuery오브젝트에 대해서, 지정된 선택 장치 서식을 보관 유지한다.

context

jQuery 1.3보다.jQuery오브젝트가 가진다DOM노드상에서의 오브젝트를 보관 유지한다.

eq(position)

jQuery오브젝트가 가지는 요소 가운데,1개를 지정해 추출한다.

get()

jQuery오브젝트로부터DOM Element배열을 취득한다.

get(index)

jQuery오브젝트로부터DOM Element(을)를 취득한다.

index(subject)

jQuery오브젝트로부터DOM Element(을)를 취득한다.

플러그 인

jQuery.fn.extend(object)

jQuery엘리먼트의 거동을 확장한다.

jQuery.extend(object)

jQuery오브젝트 그 자체의 거동을 확장한다.

상호 운용성

jQuery.noConflict()

$함수를 먼저 정의된 내용에 되돌린다.

jQuery.noConflict(extreme)

$함수 뿐만 아니라,jQuery오브젝트 그 자체도 앞의 정의 내용에 되돌린다. 

기본

#id

지정되었다id(을)를 가지는 요소를 선택한다.

element

지정된 태그 이름의 요소를 선택한다.

.class

지정된 클래스를 가지는 요소를 선택한다.

*

모든 요소를 선택한다.

selector1, selector2, ..., selectorN

복수의 선택 장치를 지정해 집합 요소를 선택한다.

계층

ancestor descendant

ancestor(을)를 선조에게 가진다descendant(을)를 선택한다.

parent > child

부모와 자식 관계를 지정해 요소를 선택한다.

prev + next

전후관계를 지정해 요소를 선택한다.

prev ~ siblings

prev이후의 형제 관계에 있는 요소를 선택한다.

기본 필터

:first

선두의 요소를 선택한다.

:last

말미의 요소를 선택한다.

:not(selector)

지정한 선택 장치를 제외한 요소를 선택한다.

:even

짝수차례의 요소를 선택한다.

:odd

홀수차례의 요소를 선택한다.

:eq(index)

인덱스 지정한 요소를 선택한다.

:gt(index)

지정한 인덱스보다 후의 요소를 선택한다.

:lt(index)

지정한 인덱스보다 전의 요소를 선택한다.

:header

h1,h2등의 헤더 요소를 선택한다.

:animated

애니메이션중의 요소를 선택한다.

컨텐트 필터

:contains(text)

지정한 문자열을 포함한 요소를 선택한다.

:empty

하늘 요소를 선택한다.

:has(selector)

지정한 선택 장치 요소를 자손에게 가지는 요소를 선택한다.

:parent

무엇이 밖에의 아이 요소(텍스트도 포함한다)를 가지는 요소를 선택한다.

표시/비표시 필터

:hidden

비표시의 요소나,hidden속성의inpout요소를 선택한다.

:visible

가시 상태에 있는 요소를 선택한다.

속성 필터

[attribute]

지정된 속성을 가지는 요소를 선택한다.

[attribute=value]

속성이 지정된 값을 가지는 요소를 선택한다.

[attribute!=value]

속성이 지정된 값을 가지지 않는 요소를 선택한다.

[attribute^=value]

속성치가 지정된 문자열로부터 시작되는 요소를 선택한다.

[attribute$=value]

속성치가 지정된 문자열로 끝나는 요소를 선택한다.

[attribute*=value]

속성치가 지정된 문자열을 포함한 요소를 선택한다.

[selector1][selector2]...[selectorN]

복수의 속성 필터를 지정해, 모두를 채우는 요소를 선택한다.

아이 요소 필터

:nth-child(index/even/odd/equation)

각 친요소에 대해서n번째 , 짝수, 홀수,n개먼 바다등의 지정을 해 요소를 선택한다.

:first-child

각 친요소에 대해서 최초의 아이 요소를 선택한다.

:last-child

각 친요소에 대해서 마지막 아이 요소를 선택한다.

:only-child

각 친요소가1개만 아이 요소를 가지는 경우에, 그 아이 요소를 선택한다.

폼

:input

모든input, textarea, select, button요소를 선택한다.

:text

모든text요소를 선택한다.

:password

모든password요소를 선택한다.

:radio

모든radio요소를 선택한다.

:checkbox

모든checkbox요소를 선택한다.

:submit

모든submit요소를 선택한다.

:image

모든image요소를 선택한다.

:reset

모든reset요소를 선택한다.

:button

모든button요소를 선택한다.

:file

모든file요소를 선택한다.

:hidden

모든hidden요소와 불가시 상태에 있는 요소를 선택한다.

폼 필터

:enabled

이용 가능한 상태에 있는 모든 요소를 선택한다.

:disabled

이용 불가인 상태에 있는 모든 요소를 선택한다.

:checked

체크가 들어가 있는 모든 요소를 선택한다.

:selected

선택 상태에 있는 모든 요소를 선택한다. 

Attr:

attr(name)

최초의 요소의 지정 속성치를 돌려준다.요소가 그 속성을 가지지 않는 경우, 반환값은undefined.

attr(properties)

해시를 건네주고, 모든 요소에 속성을 설정한다.

attr(key,value)

키와 값을 건네주고, 모든 요소에 속성을 설정한다.

attr(key,fn)

키와 함수를 건네주어, 함수의 반환값을 값으로서 모든 요소에 속성을 설정한다.

removeAttr(name)

지정 속성을 가지는 요소로부터, 속성을 삭제한다

Class:

addClass(class)

CSS클래스를 요소에 추가한다.공백 단락으로 복수 지정도 가능.

removeClass(class)

CSS클래스를 요소로부터 삭제한다.공백 단락으로 복수 지정도 가능.

toggleClass(class)

요소에 대해, 지정CSS클래스가 있으면 삭제해, 없으면 추가한다.

toggleClass(class, switch)

지정CSS클래스를,switch하지만true이면 추가해,false(이)라면 삭제한다

HTML:

html()

최초의 요소로부터HTML(을)를 문자열로서 취득한다.이것은XML(을)를 대상에는 동작하지 않지만,XHTML그럼 유효.

html(val)

모든 요소에 인수로 건네주었다HTML(을)를 세트 한다.이것은XML(을)를 대상에는 동작하지 않지만,XHTML그럼 유효.

Text:

text()

지정한 요소가 가지는 텍스트 노드를 결합해 돌려준다.

text(val)

지정한 요소에 텍스트 노드를 세트 한다.

Value:

val()

모든 요소가 가진다value속성의 값을 돌려준다.

val(val)

모든 요소에value속성에 값을 설정한다.또,checkbox(이)나selects,radio등의 값을 설정하는 일도 가능. 

Filtering

eq(index)

인덱스를 지정해 요소 집합으로부터1개를 선택한다.

hasClass(class)

요소 집합 가운데,1개에서도 지정의 클래스를 가지는 요소가 있으면true(을)를 돌려준다.

filter(expr)

지정한 조건식에 매치한 요소만을 추출한다.

filter(fn)

지정한 콜백 함수로 성냥 시킨 요소만을 추출한다.

is(expr)

요소 집합 가운데,1개에서도 조건식에 성냥 스쳐 요소가 있으면true(을)를 돌려준다.

map(callback)

jQuery오브젝트중의 요소 집합을 콜백 함수에 건네주어, 반환값을 배열로서 돌려준다.

not(expr)

요소 집합으로부터 조건식에 합치한 요소를 삭제한다.

slice(start, [end])

지정한 범위에 있는 요소를 선택한다.

Finding

add(expr)

현재의 요소 집합에 대해서, 더욱 조건식에 맞는 요소를 추가한다.

children([expr])

요소 집합이 가지는 아이 요소 중에서, 조건식에 맞는(생략시는 모두) 요소를 선택한다.

closest([expr])

jQuery 1.3보다.지정 요소로부터 가장 가까운 친요소를 선택한다.

contents()

요소 집합으로부터 텍스트도 포함한 모든 아이 요소를 선택한다.요소가iframe의 경우는 참조하는 문서를 돌려준다.

find(expr)

요소 집합으로부터 조건식에 맞는 자손 요소를 추출한다.이것은 처리중의 요소로부터, 더욱 상세하게 처리하고 싶은 자손 요소를 픽크압제에 유용.

next([expr])

각 요소의1개 다음에 오는 형제 요소를 모두 선택한다.

nextAll([expr])

현재의 요소의 다음 이후에 있는 모든 형제 요소를 돌려준다.

parent([expr])

각 요소의 친요소를 모두 돌려준다.

parents([expr])

각 요소의 선조 요소를 모두(루트 요소는 제외하다) 돌려준다.

prev([expr])

각 요소의1개전에 있는 형제 요소를 모두 선택한다.

prevAll([expr])

현재의 요소보다 전에 있는 모든 형제 요소를 돌려준다.

siblings(expr)

각 요소의 형제 요소를 모두 돌려준다.

Chaining

andSelf()

현재의 요소에 가세하고, 하나전의 요소 집합을 선택한다.

end()

연쇄 참조시에, 현재의 선택으로부터 하나전 상태에 되돌린다. 

내부 삽입

append(content)

모든 요소 내부에 컨텐츠를 추가한다.

appendTo(content)

요소의 내용을 다른 요소에 추가한다.

prepend(content)

모든 요소 내부의 선두에 컨텐츠를 삽입한다.

prependTo(content)

요소의 내용을 다른 요소에 추가합니다.

외부 삽입

after(content)

각 요소의 뒤로 컨텐츠를 삽입한다.

before(content)

각 요소의 전에 컨텐츠를 삽입한다.

insertAfter(content)

요소를 지정한 다른 요소의 뒤에 삽입한다.

insertBefore(content)

요소를 지정한 다른 요소의 전에 삽입한다.

주위에의 삽입

wrap(html)

각 요소를 구조적으로 지정HTML그리고 둘러싼다.

wrap(elem)

각 요소를 구조적으로 지정 요소로 둘러싼다.

wrapAll(html)

각 요소를 한덩어리로 해1개의HTML지정 요소로 둘러싼다.

wrapAll(elem)

각 요소를 한덩어리로 해1개의 지정 요소로 둘러싼다.

wrapInner(html)

요소가 가지는 각 자 요소(텍스트 포함한다)를HTML지정 요소로 둘러싼다.

wrapInner(elem)

요소가 가지는 각 자 요소(텍스트 포함한다)를 지정 요소로 둘러싼다.

치환

replaceWith(content)

각 요소를 지정HTML혹은DOM Element그리고 옮겨놓는다.

replaceAll(selector)

지정 조건에 합치하는 요소를 모두 옮겨놓는다.

삭제

empty()

요소 집합으로부터 모든 아이 요소를 삭제한다.

remove([expr])

DOM(으)로부터 지정 조건에 합치하는 요소를 모두 삭제한다.

카피

clone()

DOM요소를 카피해 새롭게 작성.

clone(true)

DOM요소를, 그 요소가 가지는 이벤트도 포함해 카피한다.

CSS

css(name)

최초의 요소가 가진다style속성의 값을 돌려줍니다.

css(properties)

스타일의 키와 값을 가지는 해시를 건네주고, 모든 요소의style속성을 설정합니다.

css(name, value)

키와 값을 건네주어 모든 요소의style속성을 설정합니다.

Positioning

offset()

최초의 요소의, 현시점에서의 표시 위치로부터의 오프셋을 취득합니다.

position()

top,left(을)를 친요소로부터의 오프셋으로 취득합니다

scrollTop()

최초의 요소의 현재의 스크롤 최상 위치를 취득합니다

scrollTop(val)

합치하는 요소의 스크롤 상위치를 지정합니다

scrollLeft()

최초의 요소의 현재의 스크롤상의 왼쪽 위치를 취득합니다

scrollLeft(val)

합치하는 요소의 스크롤왼쪽 위치를 지정합니다

Height and Width

height()

최초의 요소의 높이를 피크셀로 돌려줍니다.

height(val)

모든 요소의 높이를 설정합니다.

width()

최초의 요소의 가로폭을 피크셀로 돌려줍니다.

width(val)

모든 요소의 가로폭을 설정합니다.

innerHeight()

최초의 요소의 내부 높이(border(은)는 제외해,padding(은)는 포함한다)(을)를 취득합니다

innerWidth()

최초의 요소의 내부 가로폭(border(은)는 제외해,padding(은)는 포함한다)(을)를 취득합니다

outerHeight([options])

최초의 요소의 외부 높이(border,padding(을)를 포함한다)(을)를 취득합니다

outerWidth([options])

최초의 요소의 외부 가로폭(border,padding(을)를 포함한다)(을)를 취득합니다 

Page Load

ready(fn)

DOM하지만 로드 되어 조작·해석이 가능하게 된 타이밍에 함수를 실행합니다.

Event Handling

bind(type, [data], fn)

각 요소를, 예를 들면"click"(와)과 같은 이벤트의 핸들러에 대해서 바인드 합니다.커스텀 이벤트에 대해서도 이와 같이 조작할 수 있습니다.

one(type, [data], fn)

각 요소에 한 번만 실행되는 이벤트의 핸들러를 건네줍니다.

trigger(type, [data])

각 요소의 인수로 건네준 이벤트를 실행합니다.

triggerHandler(type, [data])

요소의 이벤트를 실행합니다만, 어디까지나 핸들러에 들어가 있는 함수만을 실행합니다.브라우저가 디폴트로 가지고 있는 동작은 행해지지 않습니다.

unbind([type], [data])

bind의 역입니다.각 요소로부터bind된 것을 삭제합니다.

Interaction Helpers

hover(over, out)

요소에 마우스가 탔을 때의 동작을 설정합니다.over하지만 마우스가 탔을 때,out하지만 빗나갔을 때에 불려 가는 함수입니다.

toggle(fn1, fn2, ..., fnN)

클릭될 때마다 함수를 차례로 호출합니다.

Live Events

live(type, fn)

jQuery 1.3보다.이벤트에 대해서 핸들러를 등록합니다.등록된 이벤트는, 현재 및 장래적으로도, 실렉터에 매치하는 모든 요소에 적용됩니다.

die([type], [fn])

jQuery 1.3보다.live그리고 등록된 이벤트를 삭제합니다.

Event Helpers

blur()

각 요소의blur이벤트를 실행합니다.

blur(fn)

각 요소에blur이벤트를 설정합니다.

change()

각 요소의change이벤트를 실행합니다.

change(fn)

각 요소에change이벤트를 설정합니다.

click()

각 요소의click이벤트를 실행합니다.

click(fn)

각 요소에click이벤트를 설정합니다.

dblclick()

각 요소의dblclick이벤트를 실행합니다.

dblclick(fn)

각 요소에dblclick이벤트를 설정합니다.

error()

각 요소의error이벤트를 실행합니다.

error(fn)

각 요소에error이벤트를 설정합니다.

focus()

각 요소의focus이벤트를 실행합니다.

focus(fn)

각 요소에focus이벤트를 설정합니다.

keydown()

각 요소의keydown이벤트를 실행합니다.

keydown(fn)

각 요소에keydown이벤트를 설정합니다.

keypress()

각 요소의keypress이벤트를 실행합니다.

keypress(fn)

각 요소에keypress이벤트를 설정합니다.

keyup()

각 요소의keyup이벤트를 실행합니다.

keyup(fn)

각 요소에keyup이벤트를 설정합니다.

load(fn)

각 요소의load이벤트를 설정합니다.

mousedown(fn)

각 요소의mousedown이벤트를 설정합니다.

mousemove(fn)

각 요소의mousemove이벤트를 설정합니다.

mouseout(fn)

각 요소의mouseout이벤트를 설정합니다.

mouseover(fn)

각 요소의mouseover이벤트를 설정합니다.

mouseup(fn)

각 요소의mouseup이벤트를 설정합니다.

resize(fn)

각 요소의resize이벤트를 설정합니다.

scroll(fn)

각 요소의scroll이벤트를 설정합니다.

select()

각 요소의select이벤트를 실행합니다.

select(fn)

각 요소에select이벤트를 설정합니다.

submit()

각 요소의submit이벤트를 실행합니다.

submit(fn)

각 요소에submit이벤트를 설정합니다.

unload(fn)

각 요소에unload이벤트를 설정합니다.

Basics

show()

각 요소가 비표시의 경우, 표시합니다.

show(speed, [callback])

표시시의 스피드를 설정할 수 있습니다.또, 표시가 완료했을 때에 호출하는 함수를 설정할 수도 있습니다.

hide()

각 요소를 비표시로 합니다.

hide(speed, [callback])

비표시시의 스피드를 설정할 수 있습니다.또, 비표시 되었을 때에 호출하는 함수를 설정할 수도 있습니다.

toggle()

요소의 표시/비표시를, 함수가 불려 갈 때마다 바꿉니다.

toggle(switch)

요소의 표시/비표시를, 인수에 맞추어 바꿉니다.

toggle(speed, [callback])

요소의 표시/비표시를, 함수가 불려 갈 때마다 애니메이션 첨부로 바꿉니다.

Sliding

slideDown([speed], [callback])

비표시의 요소를, 그 요소의 높이가 될 때까지 서서히 표시해 갈 것입니다.

sideUp([speed], [callback])

각 요소를, 높이가 제로가 될 때까지 서서히 비표시로 해 갑니다.

slideToggle([speed], [callback])

이 함수가 불릴 때마다, 각 요소에slideDown/slideUp(을)를 교대로 실행합니다.

Fading

fadeIn([speed], [callback])

각 요소를 용명 합니다.표시되었을 때에 불려 가는 함수를 설정할 수도 있습니다.

fadeOut([speed], [callback])

각 요소를 페이드아웃 합니다.비표시시에 불려 가는 함수를 설정할 수도 있습니다.

fadeTo(speed, opacity, [callback])

각 요소를, 지정한 투과도에, 지정한 속도로 서서히 변화시킵니다.

Custom

animate(params, [duration], [easing], [callback])

독자적인 애니메이션을 작성, 실행합니다.

animate(params, options)

독자적인 애니메이션을 작성, 실행합니다.

stop()

실행중의 효과를 정지합니다.

queue()

최초의 요소가 가지는 효과의 큐를 함수 배열로 돌려줍니다.

queue(callback)

각 요소가 가지는 큐의 마지막으로, 실행되는 함수를 추가합니다.

queue(queue)

함수 배열을 건네주어, 각 요소의 효과 큐를 옮겨놓습니다.

dequeue()

기다리는 행렬의 선두로부터 처리를 꺼내, 실행합니다.

Settings

jQuery.fx.off

jQuery하지만 제공하는 모든 동작으로부터, 애니메이션 처리를 제외합니다 

Ajax Requests:

jQuery.ajax(options)

HTTP통신으로 페이지를 읽어들입니다.

load( url, data, callback )

HTML(을)를 읽어들여,DOM에 삽입합니다.

jQuery.get( url, data, callback )

HTTP통신(GET)그리고 페이지를 읽어들입니다.

jQuery.getJson( url, data, callback )

HTTP통신(GET)그리고JSON형식의 데이터를 읽어들인다.

jQuery.getScript( url, callback )

HTTP통신(GET)그리고, 로컬의JavaScript파일을 읽어들여 실행한다.

jQuery.post( url, data, callback, type )

HTTP통신(POST)그리고 페이지를 읽어들인다.

Ajax Events:

ajaxComplete( callback )

AJAX리퀘스트의 송신 완료시에 실행되는 함수를 지정한다.Ajax Events의 일종.

ajaxError( callback )

AJAX리퀘스트의 송신 실패시에 실행되는 함수를 지정한다.Ajax Events의 일종.

ajaxSend( callback )

AJAX리퀘스트의 송신전에 실행되는 함수를 지정한다.Ajax Events의 일종.

ajaxStart( callback )

AJAX리퀘스트의 송신 개시시에, 이미active리퀘스트가 없는 경우에 실행되는 함수를 지정한다.Ajax Events의 일종.

ajaxStop( callback )

AJAX리퀘스트의 송신 종료시에, 실행되는 함수를 지정한다.Ajax Events의 일종.

ajaxSuccess( callback )

AJAX리퀘스트의 송신이 성공시에 실행되는 함수를 지정한다.Ajax Events의 일종.

Ajax Mics:

jQuery.ajaxSetup( options )

AJAX통신 전체로 공유할 수 있는 설정을 결정한다

serialize( )

입력된 모든Element(을)를 문자열의 데이터에 시리아라이즈 한다.

serializeArray( )

serialize메소드와 같이Form(이)나Element(을)를 시리아라이즈 하지만,JSON형식의 데이터 구조로 반환값을 돌려준다. 

유저 에이전트

jQuery.support

jQuery 1.3보다.브라우저마다의 기능의 차이나 버그등의 정보를 구조체로 돌려줍니다.

jQuery.browser

jQuery 1.3에서는 서포트외.jQuery.support(을)를 사용해 주세요.
navigator.userAgent(을)를 바탕으로 브라우저를 식별하기 위한 플래그 연상 배열.

jQuery.browser.version

jQuery 1.3에서는 서포트외.jQuery.support(을)를 사용해 주세요.
브라우저의 렌더링 엔진의 버젼 번호.

jQuery.boxModel

jQuery 1.3에서는 서포트외.jQuery.support(을)를 사용해 주세요.
브라우저가W3C(이)가 정하는 표준의CSS Box Model(을)를 사용하고 있을지.

배열과 오브젝트 조작

jQuery.each(object, callback)

범용적인 반복해 함수.

jQuery.extend(target, object1, [objectN])

오브젝트를 확장합니다.

jQuery.grep(array, callback, [invert])

배열로부터, 함수를 이용해 특정의 값을 제거합니다.

jQuery.makeArray(obj)

배열과 같이 이용하고 있는 오브젝트를, 실제로 배열로 변환합니다.

jQuery.map(array, callback)

배열의 각 치를 함수로 처리하고, 새로운 배열을 작성합니다.

jQuery.inArray(value, array)

지정한 값이 배열중에 있으면, 그 인덱스를 돌려줍니다.

jQuery.unique(array)

배열중으로부터 중복 하고 있는 값을 제거합니다.

검사

jQuery.isArray(obj)

jQuery 1.3보다.파라미터로 건네받은 값이 배열일지를 판별합니다.

jQuery.isFunction(obj)

건네받은 값이 함수인지 어떤지를 판별합니다.

문자열 조작

jQuery.trim(str)

문자열을 트림 합니다.

HTML/XHTML

• HTML Help Sheet. Panic Over.(PDF)
• HTML Cheat Sheet(PNG, PDF)
• HTML Character Entities Cheat Sheet(PNG, PDF)
• XHTML Cheat Sheet (PDF)

 CSS

• CSS Cheat Sheet (V2)(PNG, PDF)
• CSS Cheat Sheet(HTML)
• CSS Shorthand Cheat Sheet(PDF)
• CSS Level 1 Quick Reference (PDF)
• CSS Level 2 Quick Reference (PDF)
• CSS2.1 Quick Reference Card (PDF)
• CSS2 Reference Guide (PDF)

 JavaScript

• JavaScript Cheat Sheet(PNG, PDF)
• Addison-Wesley’s JavaScript Reference Card (PDF)
• JavaScript and Browser Objects Quick Reference(PDF)
• The most common DOM methods at a glance (PDF)
• JavaScript Quick Reference Card(PDF)
• mootools 1.2 cheat sheet(PDF)
• jQuery Cheatsheet(PNG)
• jQuery 1.2 Cheat Sheet(PDF)
• jQuery Visual Map (PNG)

 그 외

• RGB Hex Colour Chart(PNG, PDF)
• The Web Developer’s SEO Cheat Sheet(PDF)
• The WordPress Help Sheet(PDF)

  [출처] HTML, CSS, jQuery, WordPress 등 웹개발자를 위한 치트시트 모음|작성자 까망이

  HTML 안에 포함됨 div 태그를 열거하고, 각 클래스명을 조사해 가는 것입니다.
 (Array.indexOf (은)는 비표준입니다만, 간단하게 쓰기 위해서 사용하고 있습니다)

  즉, 모두의 코드와 같이 $("div.foo") (을)를 3회 써 버리면 위에서처럼 처리가 3회 실행되어 버립니다. 비효율적이지요.

ㅁ 개선방법1: 캐쉬
  셀렉터의 실행 결과를 변수에 캐쉬해 둡니다. 2회 분의 $("div.foo") 실행시간을 단축시킬 수 있습니다.

ㅁ 개선방법2: 메소드 체인
  메소드 체인을 사용하면, jQuery 같아지고 처리 효율도 오릅니다.

$("div.foo")실렉터의 실행 결과가 다음의 메소드에 차례로 인계됩니다. 임시 변수를 필요로 하지 않는 것도 장점입니다.


2. 클래스만을 지정하는 것은 금지

ㅁ 개선전

ㅁ 문제점
  클래스명 만을 지정하면, jQuery는 모든 HTML 노드를 열거하고, 각 클래스명을 확인합니다.

$(".foo") 의 배후는 다음과 같은 처리가 실행됩니다.

  모든 태그를 열거하여 루프를 돌리기 때문에 비효율적입니다.
  조금, 이야기가 빗나가지만 Firefox3 나 Opera9.5, Safari3 에는 getElementsByClassName() 메소드가 기본으로 포함되어 있습니다. 그 때문에 이러한브라우저는 빠른 $(".foo") 를 실행할 수 있는 능력을 가지고 있습니다. 그러나, jQuery 1.2.6 의 시점에서는 기본 getElementsByClassName()을 사용하고 있지 않습니다.

  jQuery 의 차기 CSS 셀렉터인 Sizzle는 getElementsByClassName()가 정의되는 경우에 사용하도록 구현되어있는 것 같습니다.

ㅁ 개선방법: 태그를 명시 한다
  태그를 명시합니다.

  모든 노드로부터가 아닌,  지정된 태그중에서 클래스명으로 검색이 좁히게 되어, 루프의 회수가 큰폭으로 줄어듭니다.


3. #id 를 적극적으로 사용한다

ㅁ개선전

ㅁ 문제점
  반복적으로 언급해온 대로 jQuery는 클래스 이름으로 검색하는 것은 비효율적이다.

  HTML 설계의 이야기가 되어 버립니다만, HTML 중 1번만 등장하지 않는 클래스명은 id 화 하는게 좋습니다. 그 편이 JavaScript 에서 취급하기에도 형편상 좋습니다.

ㅁ 개선방법
  main 을 클래스가 아닌 id 로 변경합니다.
  jQuery는 셀렉터에 id 가 지정되어 있을 경우에는 재귀적으로 탐색하지 않고 getElementById() 를 이용합니다. 따라서 모든 노드를 열거하는데 비해 비교적 빠른 처리를 할 수 있습니다.

4. 도중까지의 결과를 재이용한다

ㅁ 개선전

ㅁ 문제점
아래를 읽어 보면 이 경우에 대해 알수 있습니다.

 (2) 의 셀렉터에서는,
   1. #main 을 탐색
   2. 그 자손으로부터 div.entry 를 열거
   3. 그 자손으로부터 div.body 를 열거
 
  는 작업을 실행합니다. 이 중 1~2는 (1)(과)과 완전히 같은 처리입니다. (1)에서 구한 결과를 다시 사용하면 처리속도가 향상할 것입니다.

ㅁ 개선방법 : 캐쉬 전략

  $() 함수의 제2 인수에는 CSS 셀렉터를 찾는 기점을 지정할 수 있습니다. (1)의 결과에 포함된 엘리먼트의 자식에서 div.body 를 찾아 줍니다.

find() 메소드를 사용해도 괜찮을 것입니다.

어라?  여기까지 오면  메소드 체인이 생길 것 같네요.


ㅁ 응용 사례
  div.head 도 찾고 싶은 경우에는 어떻게 하면 좋을 까요?

  네, 이렇게 하면 좋겠네요.

  이 녀석도 메소드 체인 해보죠. end()를 사용하면, find()로 찾기 이전 상태에 되돌릴 수 있습니다.
 
   여기까지 오면 곡예수준입니다만.....윈래 코드보다 더 빠르다는것은 틀림없습니다.


5. 자식 셀렉터(>)를 사용하면 빨라질수 있다.

ㅁ 개선전

ㅁ 문제점
 ' #main div.entry '는 #main 의 후에 자손 실렉터(스페이스)가 있습니다. 즉, #main 노드아래의 모든 div 노드로부터 entry 클래스를 찾아냅니다.

$("#main div.entry") 의 배후에서는 다음과 같은 처리가 실행되고 있습니다.

  elems 에는 div#main 의 아래의 모든 div 태그가 저장됩니다. 이 모두에 대한 클래스명을 확인하는 것이, 경우에 따라서는 늦어져 버립니다.

  만약,div.entry 가  div#main 아래에만 존재한다면, "자손 실렉터"는 아니고 "자식 셀렉터"를 사용하면 효율적으로 동작할지도 모릅니다.

ㅁ개선방법
  자식 셀렉터(>)를 사용합니다.

jQuery 그럼 자식 셀렉터가 나오면, 모든 자손이 아니고, 자식중에서 매치하는 것을 조사합니다. 손자와 그 자식에 대해서는 조사하지 않기 때문에, 고속화가 기대됩니다.

$("#main > div.entry") 의 배후에서는 다음과 같은 처리가 실행됩니다.
꼭 자식 셀렉터를 사용하면 반드시 빨리된다 싶지 않지만 자식의 수에 비해 자손이 많은 경우, 자식셀럭터 쪽이 빨라집니다.

ㅁ 실제 코드 시험
  실제로 브라우저로 실행했을 때에 CSS 실렉터에 의해서 처리 속도가 얼마나 개선하는지를 확인해 봅시다.

시험은 블로그의 HTML 에서 실행해 보았습니다. HTML 구조는 다음과 같습니다.

이러한 HTML 에 대해서,jQuery (을)를 실행해 보았습니다.

CSS 셀렉터	FireFox 2	IE7	Opera9	Safari(win)
.body	22.18ms	19.85.ms	5.32ms	2.49ms
div.body	2.34.ms	2.82.ms	1.24ms	0.49ms
#days >div.day>div.body	2.66.mx	1.72ms	1.25ms	0.44ms

    * 모든 브라우저로,.body 에 비해 div.body (분)편이5~10배속구 되어 있다.
    * #days > div.day > div.body 는 아이 셀렉터를 2회 사용하고 있는데,
      div.body 와 같을 정도의 속도로 실행 되어 있다.


마지막에
  jQuery 는 라이브러리인 이상, DOM 을 직접 접근하는데 비해 늦어지는 것은 피할 수 없습니다.
  아무래도 처리 속도가 신경이 쓰이는 경우는, jQuery 의 코드를 DOM 를 직접 컨트롤하는 코드로 변환하면 좋을 것입니다. 경험적으로 Firefox 나 IE 그리고 처리 속도가10배정도가 됩니다.
  다만, 개발 효율설 측면에서는 처음에 jQuery 를 사용해 쓰기 시작하는 것을추천합니다.
jQuery 의 코드를 DOM 직접 변환하는 것은 간단합니다만, DOM 직접으로 개발을 진행시키는 것은 귀찮지요.

jQuery lightBox plugin

매우 심플한 Lightbox 플러그인.

Facebox

이미지 뿐아니라 텍스트도 표시할 수 있는 팝업창.

prettyPhoto a jQuery lightbox clone

Lightbox 클론

NyroModal

이미지나 Youtube의 동영상 폼 등 가능.

SimpleModal

이름과 같이 매우 심플한 모달창

>> 이미지 관련

jQZoom

돋보기 기능, 이미지를 확대(zoom) 기능

jQuery virtual tour

부동산 중개에서 물건 소개등에서 사용할 법한, 가상 투어 기능

Photo Slider

썸네일 이미지들의 움직임이 좋은 포토 슬라이더

jQuery Cycle Plugin

슬라이더 쇼 플러그인

jCarousel

세로형 가로형  슬라이더 지원

jCarousel Lite

간단한 슬라이더 버전

jQuery Gallery Scroller

이미지를 클릭하면 다음 이미지가 슬라이드 되는..

Drop Shadow jQuery Plugin

이미지에 그림자 효과를 주는 플러그인

>> 메뉴 관련

IconDock

맥(Mac)의 Dock 모양의 메뉴

LavaLamp for jQuery lovers!

각 메뉴 항목에 마우스 오버시 라바램프 같은 둥근 이미지 표시

Sliding Menu

메뉴가 스라이드 되어 나옴.

SuckerFish Style

플다운 메뉴

Accordion

아코디언 메뉴 UI

폼 양식 관련

jNice, styled forms

멋진 폼을 만들어 보기

Select Box replacement

커스텀 셀렉트 상자

jQuery Checkbox

커스텀 체크박스

jquery.combobox

커스텀 콤보 박스

focus fields

입력상자 클릭시 포커스 사용자 정의 표시

ToggleFormText plug-in

입력상자에  안내 텍스트가 표시되고, 클릭하면 숨기기

>> 테이블 관련

Tablesorter

정렬 가능한 테이블

Table Drag and Drop JQuery plugin

드래그 앤 드롭 테이블

HeatColor

값에 따라 배경색을 변경할수 있는 플러그인. 테이블 이외도 사용 가능.

>> 기타 관련

jVariations

오른쪽 양식에 따라 페이지를 전환

Jquery Wizard Plugin

위자드 플러그인

jQuery clueTip

다양한 유형의 툴팁.

jQuery Chart Plugin

차트 플러그인

jQuery color picker plug-in

칼라 픽커 플러그인

Color Picker

또다른 컬러픽커

Progress Bar Plugin

진행률 막대(프로그래스바)  플러그인

50+ Amazing Jquery Examples- Part1

 51 종류의 jQuery 예제.

The ultimate jQuery Plugin List

많은 플러그인 나열

1012 + Ajax/Javascript/Dhtml examples and demos to download

jQuery 뿐만 아니라 다양한 프레임웍 소개 사이트