[jQuery] 강좌들

+ http://docs.jquery.com/Tutorials

+ 호환모드에서 (jQuery validate) Plugin 사용<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.pack.js"></script> <script type="text/javascript"> var $j = jQuery.noConflict(); $j(function() { $j("#login_form").validate({ rules: { email: "required email" //또는 email: { required: true, email: true } 와 같이 써도 됨 }, messages: { email: { required: "이메일 입력", email: "메일형식 오류" } }, errorClass: "invalid", validClass: "success" }); }); </script> <style type="text/css"> .invalid { color:red; } .success { color:blue; } </style> <form id="login_form"> <input type="text" id="email" name="email" /> <br/><input type="submit" /> </form>

+ 팁과 트릭 모음들 (많다...)
http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

+ 어떻게 jQuery로 코딩할 것인가! 7개의 온라인 프리젠테이션 (영문)
http://tutsvalley.com/tutorials/7-amazing-presentation-slides-to-teach-you-how-to-code-with-jquery/

+ jQuery Tips and Tricks I
http://www.queness.com/post/126/useful-and-handy-jquery-tips-and-tricks

+ jQuery Tips and Tricks II
http://www.queness.com/post/172/jquery-tips-and-tricks-ii

+ 줄임표현
$(document).ready(function() { });
> $(function(){ });

+ 새창 속성 부여
<a href="http://www.queness.com" rel="external">Queness in new window</a>
$('a[rel=external]').attr('target','_blank');

+ 모든 li 를 클릭하면 하위 a 태그를 클릭한 효과
<ul>
 <li><a href="home">home</a></li>
 <li><a href="home">about</a></li>
 <li><a href="home">contact</a></li>
</ul>

$("ul li").click(function(){  
  //get the url from href attribute and launch the url  
  window.location=$(this).find("a").attr("href"); return false;  
});

+ CSS 변경
$("a.cssSwitcher").click(function() {  
    //swicth the LINK REL attribute with the value in A REL attribute  
    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));  
});

<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a>
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a>
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

+ 마우스 x, y 좌표 얻기
$().mousemove(function(e){  
    //display the x and y axis values inside the P element  
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);  
});

+ 행동 막기
$('#close').click(function(e){ 
     e.preventDefault();
});

/* OR */

$('#close').click(function(){ 
    return false;
});

+ 스크롤 하여 이동
$('#top').click(function() {
    $(document).scrollTo(0,500);
}

+ .col 클래스 요소들 같은 높이 지정
$(document).ready(function() {
    setHeight('.col');
});

//global variable, this will store the highest height value
var maxHeight = 0;

function setHeight(col) {
 //Get all the element with class = col
 col = $(col);
 
 //Loop all the col
    col.each(function() {       
 
  //Store the highest value
  if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });
 
 //Set the height
    col.height(maxHeight);
}

+ 글자 크기 조종
$(document).ready(function(){

 //ID, class and tag element that font size is adjustable in this array
 //Put in html or body if you want the font of the entire page adjustable
 var section = new Array('span','.section2');
 section = section.join(',');

 // Reset Font Size
 var originalFontSize = $(section).css('font-size'); 
  $(".resetFont").click(function(){
  $(section).css('font-size', originalFontSize);
 });
 // Increase Font Size
 $(".increaseFont").click(function(){
  var currentFontSize = $(section).css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $(section).css('font-size', newFontSize);
  return false;
 });
 
 // Decrease Font Size
 $(".decreaseFont").click(function(){
  var currentFontSize = $(section).css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  $(section).css('font-size', newFontSize);
  return false;
 });
});

<a class="increaseFont">+</a> |
<a class="decreaseFont">-</a> |
<a class="resetFont">=</a>

<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

+ 선택된 항목 수
$('.someClass').length;

+ 구글에서 제공하는 코드 적용
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
    //Code to be inserted in this area
});
</script>

/* the best way (fastest and most efficient implementation) */
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    //This is more like it!
  });
</script>

+ 체크상자 체크 검사
// First way
$('#checkBox').attr('checked');

// Second way
$('#edit-checkbox-id').is(':checked');

// Third way
$("[:checkbox]:checked").each(
    function() {
       // Insert code here
    }
);

+ 요소 enable/disable
// To disable
$('.someElement').attr('disabled', 'disabled');

// To enable
$('.someElement').removeAttr('disabled');
// OR you can set attr to ""
$('.someElement').attr('disabled', '');

+ jQuery animation 멈추기
jQuery.fx.off = true;

+ IE fadeIn 효과 문제
// This causes this text glich
$("#message").fadeIn();

// This will fix it
$("#message").removeAttr("filter");

+ 외부 링크에 아이콘 붙여주기
$(document).ready(function() {
  $('#extlinks a').filter(function() {
 return this.hostname && this.hostname !== location.hostname;
  }).after('<img alt="external link" src="/images/external.png">');
});

또는
$("a").not("[href^=/]").not("[href^=#]").append("<img alt="external link" src="/images/external.png">");

또는
$("a:not([href*=mysite])").append("<span class='External'>?</span>");

+ 끌어 올리는 효과 준 후 없애주기
$("#myButton").click(function() {
    $("#myDiv").fadeTo("slow", 0.01, function(){ //fade
        $(this).slideUp("slow", function() { //slide up
            $(this).remove(); //then remove from the DOM
        });
    });
});

+ 요소 존재 확인
if ($("#someDiv").length) {
    //있다
}

+ 요소 만들어서 삽입
var newDiv = $('<div></div>');
newDiv.attr("id","myNewDiv").appendTo("body");

+ 요소가 보임 상태인지 검사
if($(element).is(":visible") == "true") {
       //보여지고 있는 상태
}

+ 화면 가운데 요소
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

//Use the above function as:
$(element).center();

+ 상위 div 요소 얻기
$("#searchBox").closest("div");

+ jQuery Live Event
http://viralpatel.net/blogs/2009/12/jquery-live-events.html
이곳의 Demo 를 보면 확실히 이해가 간다.
요소를 하나 추가하게 되는데 live 이벤트를 걸어놓은 경우
추가된 요소에도 이벤트가 동일하게 살려져서 걸린다.

http://tutorialzine.com/
http://www.jquery.wisdomplug.com/category/jquery-tutorials/

+ 매 X초마다 Ajax 내용 업데이트
http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html
function updateShouts(){
    // Assuming we have #shoutbox
    $('#shoutbox').load('latestShouts.php');
}
// 10초마다 #shoutbox 내용을 변경
window.setInterval(updateShouts, 10000);

+ jQuery Ajax 다른 도메인 쿼리
http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html

+ 트위터 JSON/JSONP API URL
http://jquery-howto.blogspot.com/2009/04/twitter-jsonjsonp-api-url.html

+ 고유한 블릿 주기
$("ul").addClass("Replaced");
$("ul > li").prepend("‒ ");

ul.Replaced { list-style : none; }

+ 검색입력란 안에 '여기에 검색어를 입력하세요' 넣기
<form action="#" method="post">
   <input id="SearchText" name="text" />
   <button>Search</button>
</form>

function populateElement(selector, defvalue) {
    $(selector).each(function() {
        if($.trim(this.value) == "") {
            this.value = defvalue;
        }
    });
 
    $(selector).focus(function() {
        if(this.value == defvalue) {
            this.value = "";
        }
    });
   
    $(selector).blur(function() {
        if($.trim(this.value) == "") {
            this.value = defvalue;
        }
    });
}
populateElement('#SearchText', 'Enter your search term here..');

+ h2 태그 다음 모든 p 태그 문장 변경
$("h2 + p").addClass("Large");

p.Large { font-size : 1.1em; }

+ 브라우저 찾아내기
//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );

//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//C. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );