예전 문서에 있던 것을 찾아 올려 두었습니다. 시간되는 대로 정리할 예정입니다.

$("input[name=auth_write]").val([auth_write]); auth_write 변수일경우
$("input[name=auth_write]").val(['auth_write']); auth_write 특정값일 경우
"$("input[name='auth_read']").change(function(){
$("#roles-read").hide();
if($("input[name='auth_read']:checked").val() == 'roll')
$("#roles-read").show();
});"

다이나믹 폼

<script type="text/javascript">
    $(document).ready(function () {
        var numberIncr = 1; // used to increment the name for the inputs

        function addInput() {
            $('#inputs').append($('<input class="comment"name="name' + numberIncr + '"/>'));
            numberIncr++;
        }

        $('form.commentForm').on('submit', function (event) {

            // adding rules for inputs with class 'comment'
            $('input.comment').each(function () {
                $(this).rules("add", {
                    required: true
                })
            });

            // prevent default submit action         
            event.preventDefault();

            // test if form is valid 
            if ($('form.commentForm').validate().form()) {
                console.log("validates");
            } else {
                console.log("does not validate");
            }
        })

        // set handler for addInput button click
        $("#addInput").on('click', addInput);

        // initialize the validator
        $('form.commentForm').validate();

    });

</script>

alert으로 에러 메시지 출력하기

jQuery.validator.setDefaults({
onkeyup:false,
onclick:false,
onfocusout:false,
showErrors:function(errorMap, errorList){
if(this.numberOfInvalids()) { // 에러가 있을 때만..
//var caption = $(errorList[0].element).attr('caption') || $(errorList[0].element).attr('name');
alert(errorList[0].message);
$(errorList[0].element).focus();
// alert('[' + caption + ']' + errorList[0].message);
}
}
})

2개이상 폼(다중 폼)을 동시 전송(submit)하기

지금까지 우리가 학습한것은 하나의 폼은 한번 submit 된다는 것이다. 가령

<form action="abc"> <input type="submit"> </form>

그리고 jquery 에서는 아래와 같이 serialize 를 이용하여 전송이 가능하다.

<script>
    $(function () {
        $("#btn_submit").click(function () {
            $.post("경로", $("#sform").serialzie(), function (data) {});
        });
    });

</script>
<form id="sform" action="abc">
    <span id="btn_submit"></span>
</form>

물론 onsubmit 를 이용해서 처리해도 문제는 없다.

그렇다면 다중의 폼을 한군데로 전송할 수는 없을까?

<form id="sform1" action="abc">
    <span id="btn_submit1"></span>
</form>

<form id="sform2" action="abc">
    <span id="btn_submit2"></span>
</form>

고민은 그만 하자. 아래 방법으로 처리하면 간단하다. 일단 form 의 id를 class로 전환한다.

<script>
    $(function () {
        $("#btn_submit").click(function () {
            $.post("경로", $(".sform").serialzie(), function (data) {});
        });
    });

</script>

<form class="sform" action="abc">

</form>

<form class="sform" action="abc">

</form>

<span id="btn_submit"></span>

얼마나 간단하고 파워풀 한가... 좋은 팁 되셨기를 바랍니다.

opener 나 parent 접근하기

$("#id",opener.document)...
$("#id",parent.document)....

$('#id', window.opener.document)..

테이블 꾸미기

th 에는 색상이 바뀌고 tr도 색상이 바뀌어 좀더 다이내믹하게 보이게 구성하는 방식

style part

<style>
    .bg1 {
        background: #FFFFFF !important;
    }

    .bg2 {
        background: #F5F5F5 !important;
    }

    .bg3 {
        background: #EFEFEF !important;
    }

    .bg4 {
        background: #E1E1E1 !important;
    }

    .list tr:hover {
        background-color: #DBE8EC !important;
    }

</style>

script part

<script>
    $(function () {
        $(".list tr:odd").addClass("bg1");
        $(".list tr:even").addClass("bg2");
        $(".altern th:odd").addClass("bg3");
        $(".altern th:even").addClass("bg4");
    });

</script>

html part

<table class="table_main list">
    <col width="60" />
    <col width="*" />
    <thead>
        <tr class="altern">
            <th>선택</th>
            <th>제품명</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>내용1 </td>
            <td>내용2 </td>
        </tr>
    </tbody>
</table>

jQuery.each break continue

jQuery.each(callback)

each 메소드를 하는 하는 경우 for문과 같은 제어 문에서 사용되는 break , continue 의 쓰임이 필요 하다. each에서는 return true(continue) 와 return false(break) 를 이용해서 break, continue와 같은 동작을 일으킬수 있다.

$('#loop').each(function(i){
  if( i == 0 ) return true; //continue;
  return false;//break;
});

텍스트 input 창에서 엔터(enter)시 실행

// 텍스트 input 창에서 엔터(enter)시 실행
$(div).keypress(function(e){

  var result = ";

  if($.browser.msie) {
    result = event.keyCode;
  } else if($.browser.safari) {
    result = e.which;
  } else {
    result = e.which;
  }

  if (result == 13) {
  /******** 실행 ************/
    return false;
  }

});


/////////////////////

$('#input_text').keyup(function(e) {
  if(e.keyCode == 13) {
    alert('Enter key was pressed.');
  }
});

문서길이 구하기 GET DOCUMENT HEIGHT (CROSS-BROWSER)

function getDocHeight() {
  // GET DOCUMENT HEIGHT (CROSS-BROWSER)
  //현재 브라우저상의 다큐먼터 길이(스크롤 포함)
  /* //방법1
  var D = document;
  return Math.max(
  Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
  Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
  Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
*/
// 방법2

return Math.max(
  $(document).height(),
  $(window).height(),
  /* For opera: */
  document.documentElement.clientHeight
);
}

또한 아래 url로 가보시면 브라우저 중앙을 구해서 문서를 띄우는 jquery가 있습니다.

http://www.west-wind.com/weblog/posts/459873.aspx

페이지 스크롤시 자동으로 페이지 추가하기

$(window).scroll(function(){

  if (($(window).scrollTop() == $(document).height() - $(window).height()) )) { 
    var is_loading = $("#loadingbar").css("display"); 
    if (is_loading == "none") { 
      $("#loadingbar").show(); //실행 
    } 
  } 
});

remove, empty, append

<script>
    $(document).ready(function () {
        $('#btnEmpty').click(function () {
            $('div').empty();
            $('div').append("<b>hi</b>");
        });

        $('#btnRemove').click(function () {
            $('div').remove();
            $('div').append("<b>hi</b>");
        });
    });

</script>

$('div').empty(); // 내용지우기
$('div').append("<b>hi</b>"); 내용추가
$('div').remove(); 삭제

remove()이용하여 라인 삭제

<table>
    <tr id="line1">
        <td></td>
    </tr>
    <tr id="line2">
        <td></td>
    </tr>
    <tr id="line3">
        <td></td>
    </tr>
</table>

상기 처럼 처리후 특정 "삭제"버튼 클릭시 특정 라인만 삭제한다. 물론 이것은 db에서 완전히 날리고 리로딩 할때는 실제 삭제되지만 삭제시 마다 처리하면 부하가 걸리므로 하기처럼 라인만 삭제하여 보이지 않게 처리한다.

$('#line1').remove(); //삭제

다양한 입력대기

$(function(){

});

$(document).ready(function ()
{

});

각각의 폼에는 아래와 같이 입력될 수 있습니다

$('#btn').click(function(){
});

아래와 같은 경우는 html() 을 이용하여 동적으로 불러온 폼의 버튼을 제어할때 사용한다.

$("#btn").live("click", function(){

});

또한 여러가지 인자값을 받을 경우는

// $("a[id^='delete_entry_']").click(function(){
$("input[name^='automatic']").each(function(){
var myvar= this.var.split("_")[2];
});

처럼 처리하여 인자값을 다양하게 받을 수 있다.

$('#btn').click(function(){
});

//아래와 같은 경우는 html() 을 이용하여 동적으로 불러온 폼의 버튼을 제어할때 사용한다.

$("#btn").live("click", function(){

});

또한 여러가지 인자값을 받을 경우는

// $("a[id^='delete_entry_']").click(function(){
$("input[name^='automatic']").each(function(){
var myvar= this.var.split("_")[2];
});

처럼 처리하여 인자값을 다양하게 받을 수 있다.

jquery

jQuery

jQuery 특징

CSS Selector

Document 구조를 명로하면서도 읽기 쉬운 형태로 표현가능.
Plug-in Architecture - feature creep을 피하고 창의적 산출물 공유.

Method Chaining - 여러 동작을 한 줄에 나열이 가능하며, 임시변수 사용을 최소화하고 불필요한 반복을 피함.

2) Selector

#ID	문서 내 ID와 일치하는 Element를 가져온다.
ElementName	문서 내 동일한 이름을 가진 Element를 가져온다.
ClassName	문서 내 동일한 Class를 가진 Element를 가져온다.
*	문서 내 모든 Element를 가져온다.
Parent > Child	문서 내 부모 Element 아래에 있는 자식 Element를 가져온다.

Selector[Filter]

Element[attr]	attr 속성을 갖고있는 Element와 동일한 요소를 가져온다.
Element[attr=value]	attr 속성값이 value를 갖는 Element와 동일한 요소를 가져온다.
Element[attr^=value]	attr 속성값이 value로 시작하고 Element와 동일한 요소를 가져온다.
Element[attr$=value]	attr 속성값이 value로 끝나고 Element와 동일한 요소를 가져온다.
Element[attr*=value]	attr 속성값이 value를 포함하는 Element와 동일한 요소를 가져온다.

Attribute

일치하는 집합에서 첫번째 Element의 속성값을 가져오거나 일치하는 모든 Element의 속성값을 설정하는데 사용.

attr(name)	선택한 Element의 name에 해당하는 속성값을 가져온다.
attr(name, value)	선택한 Element의 name에 해당하는 속성값을 설정한다.
attr(properties)	선택한 Element의 속성을 properties의 내용으로 설정한다.
attr(name, single object function)	선택한 Element의 속성을 function 내용으로 설정한다.

Effect

rong

$().show()	$().slideDown()	$().fadeIn()
show();	slideDown();	fadeIn();
show(speed);	slideDown(speed);	fadeIn(speed);
show(speed, callback);	slideDown(speed, callback);	fadeIn(speed, callback);

$().hide()	$().slideUp()	$().fadeOut()
hide();	slideUp();	fadeOut();
hide(speed);	slideUp(speed);	fadeOut(speed);
hide(speed, callback);	slideUp(speed, callback);	fadeOut(speed, callback);

$().toggle()	$().slideToggle()	$().fadeTo()
toggle();	slideToggle();	fadeTo();
toggle(switch);	slideToggle(speed, callback);	fadeTo(speed, callback);
toggle(speed, callback);		fadeTo(speed, opacity, callback);

swich(true, false)true- display : block or visiblefalse - display : none	Down / UpDown- Element DisplayUp - Element Hide	In / Out / ToIn - Element DisplayOut - Element HideTo - Opacity
		opacity0부터 1까지 소수점 단위로 설정
speed(string or number)string - slow, normal, fastnumber - milliseconds
callback(function) / optional효과 후 호출할 함수명

jquery sample 모음

- 직접 제작한 jquery plugin 및 플러그인 만들기 강좌 <br>
<a href="/document/jquery/makeplugin">http://www.shop-wiz.com/document/jquery/makeplugin</a>
<br>
<br>

아래 링크로 실용적인 다양한 샘플들을 모아 두었습니다.
<br />
<a href="/document/jquery/index">http://www.shop-wiz.com/document/jquery/index</a>

jquery관련 추천사이트

http://www.ibm.com/developerworks/kr/series/web/index.html

파일업로드 버튼 이미지 버튼으로 바꾸기

첨부된 파일 jquery.filestyle.js 과 jquery를 이용하여 간단하게 적용가능합니다.

소스

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

<script> 
  $(function(){
	$("input[type=file]").filestyle({ image:"./search.jpg", imageheight:20, imagewidth:78, width:150 }); 
	});
</script> 

<input type='file' name="attachedfile">

레이어팝업띄우기_body의 색상반전

script

$(function(){ 
	$("#layerBack").live("click", function(){ 
		$("#layerBack").hide(); 
		$(".floatingLayers").hide(); 
	});

	$(".login").click(function(){ 
		var position = $(this).position(); 
		var left = position.left; 
		var top = position.top+20;

		floatingLayerBack(); 
		$("#layerpop").css({"position":"absolute", "left" : left+"px", "top" : top+"px", "z-index":"2000"}).toggle();

		$(".floatingLayers").show(); 
	});

	$(".closepop").click(function(){ 
		$("#layerBack").hide(); 
		$(".floatingLayers").hide(); 
	}); 
});

function floatingLayerBack() { 
	var bodyWidth = $("body").outerWidth(); 
	var bodyHeight = $("body").outerHeight();

	$("body").append('<div id="layerBack" style="display:none"></div>');

	$("#layerBack").css({ opacity: (30 / 100), filter: 'alpha(opacity=' + 30 + ')', position: 'absolute', zIndex: 1000, top: '0px', left: '0px', width: '100%', height: $(document).height(), background: "#000" }).show(); 
}

html

<div id="layerpop" class="loginBox floatingLayers" style='display:none; background-color:#CC00FF'>이곳은 레이어 팝업입니다. <br /> 
	<a class="closepop">[닫기]</a>
</div> 
<a class="login">로그인</a>

레이어팝업띄우기_simple

$(function(){ 
	$(".login").click(function(){ 
		var position = $(this).position(); 
		var left = position.left; 
		var top = position.top+20; 
		$("#layerpop").css({"position":"absolute", "left" : left+"px", "top" : top+"px", "z-index":"2000"}).toggle();

		$(".floatingLayers").show(); 
	});

	$(".closepop").click(function(){ 
		$(".floatingLayers").hide(); 
	}); 
});

<div id="layerpop" class="loginBox floatingLayers" style='display:none; background-color:#CC00FF'>이곳은 레이어 팝업입니다. <br /> 
	<a class="closepop">[닫기]</a>
</div> 
<a class="login">로그인</a>

jquery를 이용한 이미지 처리

$('#this_month').attr("src", "경로"); 
$('#this_month').attr("src", "./sample.jpg");

jquery를 이용한 check button 처리하기

중요 jQuery 1.6+

1.6 이상부터는 attr을 사용하지 않고 prop를 사용합니다.

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

check

$("input[name=cUse]")[0].checked
$("input[name=cUse]").attr("checked", (chk== '1' ? 'checked' : ''));

책크여부확인

alert($('#id').is(':checked'));

책크 갯수 구하기

$("input[name=chk]:checkbox:checked").length

응용: 특정 갯수 이상일때 체크 해제

$(".check_premier").click(function(){
if($("input[name=chk_pr]:checkbox:checked").length > 3){
alert('최대 3개까지 선택가능합니다.');
$(this).attr("checked", '');
}
});


$(".answer2").click(function(){
if($(".answer2:checkbox:checked").length > 2){
alert('최대 2개까지 선택가능합니다.');
$(this).attr("checked", '');
}
});

책크박스수만큼 특정 함수 실행

$("input[name=chk]").each(
function(){
//실행
}
}

//상기 응용으로 특정 책크박스가 책크일경우 실행

$("input[name=chk]").each(
function(){
if(this.checked){
//책크되었음
}else{
//실행
}
}
}

//실응용예제 //jAlert 및 jConfirm 사용 //책크된 것이 있으면 실행하고 아니면 경고 메시지 띄우기

$("#delfavor").click(function(){
if($("input[name=chk_delList]:checkbox:checked").length == 0){
jAlert('하나 이상 선택해 주세요', '경고메시지');
}else{
jConfirm('삭제된 데이타는 복구되지 않습니다.n삭제하시겠습니까?', '삭제확인', function(r) {
if(r==true) {
$.post("/myshop/wishlist/wishlist/", {tid:tid,ajax:"true"}, function(data){
},"json");//
}
});
}
});

체크 해제

$(this).attr("checked", false);

// 전체선택/해제

$("#check_all").click(function(){
$('input[class="sel_check"]').attr("checked", ( $(this).is(':checked') ? 'checked' : false));
});

//아래것보다 상위것을 추천

//보낸 메일함 전체 선택

//$("#select_all_sendlist").live('click', function(){ //이후 불러온 폼사용시
$("#select_all_sendlist").click(function(){
$('input[id="chk_sendList"]').attr("checked", ( $(this).is(':checked') ? 'checked' : ''));
});


<input type="checkbox" name="" id="select_all_sendlist" class="checkbox" />
<input type="checkbox" name="chk_sendList[{uniqueflag}]" id="chk_sendList" class="checkbox" />
<input type="checkbox" name="chk_sendList[{uniqueflag}]" id="chk_sendList" class="checkbox" />
<input type="checkbox" name="chk_sendList[{uniqueflag}]" id="chk_sendList" class="checkbox" />



//check box만 serialize하기
var arr_unchecked_values = $('input[type=checkbox]:not(:checked)').map(function(){return this.value}).get();
var idxs = $("input[name='comment_select[]']:checked").map(function(){return this.value}).get();

버튼에 마우스 오버효과 쉽게 주기(다양한 탭방식에 적용)

//각각의 이미지는 이미지명_on, 이미지명_off 로 구성되어 있다
<script>
    var on = function () {
        this.src = this.src.replace("_off", "_on");
    }
    var off = function () {
        this.src = this.src.replace("_on", "_off");
    }


    //sample1 마우스 오버시 on 이미지를 보이고 마우스 아웃시 다시 off이미지를 보여준다.
    $(".naviBar li").mouseover(function () {
        $(this).find(">a img").each(on);
    }).mouseleave(function () {
        $(this).find(">a img").each(off);
    });

    //sample2 마우스 오버시 on 이미지를 보이고 마우스 아웃시 다시 off이미지를 보여준다. 
    //그리고 두번째(실제 순서는 0, 1, 2...) 는 on을 계속 유지시킨다
    $(".naviBar li").mouseover(function () {
        $(this).find(">a img").each(on);
    }).mouseleave(function () {
        var i = $(".naviBar li").index(this);
        if (i != 1) $(this).find(">a img").each(off);
    });

    //sample3 이미지가 단수개일 경우는 on, off 함수를 정의하지 않고 바로 적용한다.
    $(".naviBar").mouseover(function () {
        this.src = this.src.replace("_off", "_on");
    }).mouseleave(function () {
        this.src = this.src.replace("_on", "_off");
    });

    //sample4 1번가 동일하게 작용하며 마우스 오버시 다른레이어도 같이 출력한다.

    $('.naviMessage').hide();
    $(".naviBar li").mouseover(function () {
        $(this).find(">a img").each(on).end().find(".naviMessage").show();
    }).mouseleave(function () {
        $(this).find(">a img").each(off).end().find(".naviMessage").show();
    });

</script>



<ul class="naviBar">
    <li><a href="#"><img src="button1_off.gif" /></a></li>
    <li><a href="#"><img src="button2_off.gif" /></a></li>
    <li><a href="#"><img src="button3_off.gif" /></a></li>
</ul>


//sample4를 위한 구성도
<ul class="naviBar">
    <li><a href="#"><img src="button1_off.gif" /></a>
        <div class="naviMessage"></div>
    </li>
    <li><a href="#"><img src="button2_off.gif" /></a>
        <div class="naviMessage"></div>
    </li>
    <li><a href="#"><img src="button3_off.gif" /></a>
        <div class="naviMessage"></div>
    </li>
</ul>


간단하지만 어떻게 응용하느냐에 따라 쉽고 다양하게 마우스 오버 효과를 구현할 수 있다.

datepicker 를 이용한 응용(시작일은 오늘날짜보다 크고 종료일은 시작일보다 작지않은것 구하기)

    $( "#t_s_date1" ).datepicker({ minDate: 0 });
    $('#t_r_date1').datepicker(
    {
    showOn: "both",
    beforeShow: function(input, inst) {
    return {
    minDate: $("#t_s_date1").datepicker("getDate")
    };
    },
    dateFormat: "dd M yy",
    firstDay: 1,
    changeFirstDay: false
    });

자주사용하는 jquery

    Selectors

    1.#elementid
    A.element 의 id로 선택한다.
    i.Ex) $(‘#report-body’) &lt;- id가 report-body인 element를 jquery객체형으로 변환 후 리턴


    2.class

    A.Element 의 css class 이름으로 선택한다.
    i.Ex) $(‘.Root’) &lt;- css classattribute 가 Root인 element를 jquery객체형으로 변환 후 리턴


    3.Element
    A.Element 의 이름으로 선택한다.
    i.Ex) $(‘li’) &lt;- document에서 li element는 모두 jquery객체형으로 변환 후 리턴

    4.:selected
    A.Selectbox element에서 선택된option 값들만 가져온다.
    i.Ex) $(‘#select_link:selected’);

    5.:checked
    A.Radio 버튼이나 체크박스에서 선택된 값들만 가져온다.
    i.Ex)$(‘#select_radio:selected’);

    6.Wildcard =&gt; $(‘*’)
    A.전체를 선택한다.
    i.Ex)report-body element 의 부모/자식 element 의 css값을 한꺼번에 바꾸고 싶을 때
    $(‘*’,$(‘#report-body’).css(‘margin-top’,’5px’);


    참고URL : http://docs.jquery.com/Selectors


    core
    1.each(function(){}) : 배열이나 배열형태의jquery 객체 iteration
    A.ex) selectbox element 의 option value 를 바꾸고 싶을 때.
    $(‘#select_link_report).each(function(){
    $(this).attr(‘value’,’1’);
    });

    2.size() 선택자로부터 선택된element 의 개수를 파악한다.

    A.Ex) 해당 element 가 실제 존재하는지 확인하고 싶을 때
    if ( $(‘#wiselog’).size() &gt; 1 ){
    alert(‘wiselog element selected!!’);
    }

    Attributes

    1.attr(name); 해당 elements 의 attr값을 리턴해준다.

    A.Ex) 해당 element 의 id 를 알고싶을때
    $(‘#wiselog’).attr(‘id’);

    2.attr(name,value); 해당 element 의 attr값을 setting 해준다.

    A.Ex) wiselog element에 width 를 변경하고 싶을 때.
    $(‘#wiselog’).attr(‘width’,’130px’);

    3.attr(name,function(){}); 해당 attribute 의 function 을 setting 해준다.

    A.Ex) 특정 element에 onclick 이벤트를 설정하고 싶을 때
    $(‘#wiselog’).attr(‘onclick’,function(){alert(‘wiselog element clicked!!’)});

    4.html() 해당 element 의 innerHTML 값을 반환한다.
    A.ex) $(‘#wiselog’).html()

    5.html(value) 해당 element 의 innerHTML 값을 변경한다.
    A.Ex)$(‘#wiselog’).html(“&lt;p&gt;Hello&lt;/p&gt;”);


    [참조 : http://dasida.tistory.com/1055845]

jquery post 시 javascript 인자값 전달

    참조 : http://stackoverflow.com/questions/939032/jquery-pass-more-parameters-into-callback

    var doSomething = function(extraStuff) {
    return function(data, textStatus) {
    // do something with extraStuff
    };
    };

    var clicked = function() {
    var extraStuff = {
    myParam1: 'foo',
    myParam2: 'bar'
    }; // an object / whatever extra params you wish to pass.

    $.post("someurl.php", someData, doSomething(extraStuff), "json");
    };

JQuery Core

    JQuery Core
    JQuery 객체 만들기

    1 $( html )

    html을 JQuery Object로 만든다.
    예)
    $(&quot;&lt;div&gt;&lt;i&gt;안녕하세요&lt;/i&gt;&lt;/div&gt;&quot;).appendTo(&quot;body&quot;);

    2 $(elems)
    자바스크립트 엘리먼트나 엘리먼트 배열을 JQuery 오브젝트로 만든다.

    예)
    $(document.body).html(&quot;&lt;p&gt;으흐흐.&lt;/p&gt;&quot;);
    $(document.form1).html(&quot;&lt;p&gt;으흐흐.&lt;/p&gt;&quot;);

    3 $( expr, context )

    표현식과 context를 이용하여 JQuery객체를 만든다.
    표현식은 여기서 설명해 두었다.

    4 $( fn )

    $(document).ready()의 짧은 표현이며, 일반 자바스크립트의 document.onload=function(){..}와 대응된다.

    예)
    $(function(){
    //여기에 코딩을하면된다.
    //..
    //
    });

    6 eq(pos)
    선택된 JQuery오브젝트를 pos번째 JQuery Object만으로 선택.

    9 gt(pos)
    선택된 JQuery 오브젝트중 pos보다 나중에있는 오브젝트들을 선택.

    12 lt(pos)
    선택된 JQuery 오브젝트중 pos보다 앞에있는 오브젝트들을 선택.


    10 index(subject)
    subject의 위치.

    11 length
    선택된 요소의 갯수.

    5 each(fn)
    선택된 모든 JQuery Object에대해 fn을 실행.


    13 size()
    선택된 요소의 갯수.


    7 get()
    선택된 JQuery오브젝트를 일반 HTML Element로 반환.

    8 get(num)
    선택된 JQuery 오브젝트중 num번째 오브젝트를 일반 HTML Element로 반환.
    이것은 $(&quot;div&quot;).get(num) 은 $(&quot;div&quot;)[num]은 같다.


    14 $.fn.extend( prop )
    간단하게 플러그인을 만든다.

    15 $.noConflict()
    '$'가 다른 라이브러리등과 충돌하지 않게 함.

jQuery를 활용한 XML파일의 처리

$(function() { 
  $('#update-target a').click(function() { 
    $.ajax({ 
      type: "GET", 
      url: "sample.xml", 
      data: "adno=1&postcode=156712", // 특정변수값을 주어서 결과를 받을때 
      dataType: "xml", 
      success: function(xml) { 
        $(xml).find('label').each(function(){ 
          var id_text = $(this).attr('id') // 속성값일때 
          var name_text = $(this).find('name').text() // 태그값일때 
          $('<li></li>').html(name_text + ' (' + id_text + ')')
		    .appendTo('#update-target ol'); 
      }); //close each( } 
    }); //close $.ajax( 
  }); // click(function() { 
}); //$(function() {

<body> <div id='update-target'> <a href="#">Click here to load addresses</a> <ol></ol> </div> </body> </html>

sample.xml

<?xml version="1.0" encoding="utf-8"?> 
<labels> 
  <label id='ep' added="2003-06-10"> 
    <name>Ezra Pound</name> 
    <address> 
      <street>45 Usura Place</street> 
      <city>Hailey</city> 
      <province>ID</province> 
    </address>
  </label> 
  <label id='tse' added="2003-06-20"> 
    <name>Thomas Eliot</name> 
    <address> 
      <street>3 Prufrock Lane</street> 
      <city>Stamford</city>
	  <province>CT</province>
	</address> 
  </label>
  <label id="lh" added="2004-11-01"> 
    <name>Langston Hughes</name>
	<address>
	  <street>10 Bridge Tunnel</street> 
      <city>Harlem</city>
	  <province>NY</province>
	</address>
  </label> 
  <label id="co" added="2004-11-15"> 
    <name>Christopher Okigbo</name> 
    <address>
	  <street>7 Heaven's Gate</street>
	  <city>Idoto</city> 
      <province>Anambra</province>
	</address>
  </label> 
</labels>

BackEnd (PHP)

<?php 
  $return['key1'] = "사랑"; 
  $return['key2'] = "행복"; 
  $return['key3'] = "진실"; 
  echo json_encode($return); //결과 {"key1":"\uc0ac\ub791","key2":"\ud589\ubcf5","key3":"\uc9c4\uc2e4"} 
?>

js 파일

function json_encode_text(){ 
	$.post("./proc.php", {}, function (data){ 
		eval("var obj=" + data);  // eval을 추천드리지 않음
		console.log(obj.key1); 
		console.log(obj.key2); 
		console.log(obj.key3); 
	}); 

	// 아래처럼 하는 것이 좀더 보안상 안전함
	$.post("./proc.php", {}, function (data){ 
		console.log(obj[key1]); 
		console.log(obj[key2]); 
		console.log(obj[key3]); 
	}); 
}

상기는 eval("var obj=" + data)을 사용하여 변수를 obj로 만들어 사용하였습니다. 그러나 아래와 같이 사용하면 바로 json으로 변수를 처리하여 사용할 수 있다.

function json_encode_text(){ 
	$.post("./proc.php", {}, function (data){ 
		console.log(data.key1); 
		console.log(data.key2); 
		console.log(data.key3); },"json"); 
	}

사용가능한 ResponseType

html
json
script
xml

데이타 가져오기

######## source part(source.html) 폰돌|19|남 강호동|22|남 복순이|18|여

######## html part(sample.html)

$(document).ready(function(){
  $("#dataarea").load("source.html",function(data){
    var rows=data.split("\n"); 
    var str=""; str+="<table border=1>"; 
    for(var i=0;i<rows.length;i++) {
      var cel; cel=rows[i].split("|"); 
      str+="<tr><td>"+cel[0]+"</td><td>"+cel[1]+"</td><td>"+cel[2]+"</td></tr>"; 
    } 
    str+="</table>";

    $("#output").html(str); 
  }); 
});

HTML

<textarea id='dataarea' style='display:none'></textarea> <div id='output'></div> </body> </html>

결과

폰돌|19|남 강호동|22|남 복순이|18|여

선택된 element의 하위에 존재하는 elemnet 선택

    아래는 특정 엘리먼트의 하위 element 들에 셀렉터를 사용하는 기능이다.
    3가지 모두 유효하므로 참조 하시면 됩니다.

    <script language="javascript" type="text/javascript">
        <!--
        $(function () {
            $(".btn_reply").click(function () {
                //var k = $(".btn_reply > a").attr("title");
                //var k = $("a", this).attr("title");
                var k = $(this).find("a").attr("title");
                alert(k);
            })
        });
        //

        -->
    </script>


    <span class="btn_reply"><a title="reply to pondolhim">Reply</a></span>

jqgrid jqchart

    http://www.trirand.net

    chart 및 grid를 찾으신다면..

이미지 로드 후 이미지 리사이징 하기

    // 상품사이즈 조절
    $('.quick_img img').bind('load', function(){

    var img = new Image();
    img.src = $(this).attr("src");

    if(jQuery.browser == "mozilla"){
    img = this; // $(this)를 해주면 FF에서 동작하지 않는다
    }

    //alert(this.width+","+this.height);
    if(img.width > img.height){
    $(this).css("width", "56px");
    $(this).css("height", "auto");//$(this).css("height", "auto");
    }else{
    $(this).css("height", "56px");
    $(this).css("width", "auto");
    }
    });

jQueryRotate 를 이용한 이미지 흔들기(Swing)

    <script type="text/javascript" src="../../inc2/js/jQueryRotate.2.2.js"></script>
    <script>
        $(function () {

            var startangle = -60;
            var endangle = 60
            var duration = 500;
            var rotation = function () {
                $("#img").rotate({
                    duration: duration,
                    angle: startangle,
                    animateTo: endangle,
                    callback: rerotation
                });
            }


            var rerotation = function () {
                $("#img").rotate({
                    duration: duration,
                    angle: endangle,
                    animateTo: startangle,
                    callback: rotation
                });
            }
            rotation();
        });

    </script>
    </head>

    <body>

        <img src="https://www.teeworlds.com/images/dl_arrow.png" id="img">

jquery 에서 iframe 으로 데이타 전송(submit)하는 간단한 예제(return(callback) 받음

        <script>
            $(function () {
                $("#btn_reg_basic").click(function(){
                    $("#form_basic").attr("target", "hiddenIframe");
                        $("#form_basic").attr("action", "/adm/basic_x/");
                            $("#form_basic").submit(function(){
                                $("#hiddenIframe").load(function() {
                                    console.log(this);
                                });

                        }).submit();

                });

            });

        </script>
        <iframe name="hiddenIframe" id="hiddenIframe" width="100px" height="100px"></iframe>


        /adm/basic_x(프로세스를 처리하는 페이지)에서는
        echo "<script>
            alert('update 되었습니다.'); parent.document.getElementById('testID').value = '';

        </script>";

        와 같이 처리되면 됩니다.


        //iframe과 통합하여 사용하기(상기 버젼의 심플형태)
        $("#comment_write_form").submit(function(e){
        if($('#comment_write_form').formvalidate()){
        if( !$("#hiddenIframe").length) $("body").append('<iframe name="hiddenIframe" id="hiddenIframe"
            width="200px" height="200px" style="display:none"></iframe>');
        $("#comment_write_form").attr("target", "hiddenIframe");
        $("#comment_write_form").attr("action", "./lib/ajax.board.php");
        $("#hiddenIframe").load(function() {
        //console.log(this);
        });
        }else e.preventDefault();
        });

        //다른예(추천)
        $("#ID").validate({
        submitHandler: function(form){
        if( !$("#hiddenIframe").length) $("body").append('<iframe name="hiddenIframe" id="hiddenIframe"
            width="200px" height="200px" style="display:none"></iframe>');
        $("#ID").attr("target", "hiddenIframe");
        $("#ID").attr("action", "URL");
        $("#hiddenIframe").load(function() {
        $("#hiddenIframe").remove();//삭제해주어야 동일 페이지에서 1번 클릭시 여러번 전송되는 것을 막을 수 있음
        });
        return true;//바로 submit();

        }
        });


        처리 부분에서 object로 디스플레이 하면 좀더 다양한 데이타를 가져올 있습니다.
        echo "<script>
            rtn = ".json_encode($rtn)."

        </script>";
        그리고 iframe.load에서는
        console.log(this.contentWindow.rtn); 이렇게 바로 받아서 처리하시면 됩니다.

jquery.cookie 에 object 넣기

        jquery.cookie.js 다운 : https://github.com/carhartl/jquery-cookie


        cookie.js 삽입
        (function ($) {
        $.fn.extend({
        cookieList: function (cookieName) {

        return {
        add: function (val) {
        var array = this.items();

        //현재 동일값 존재 여부 확인 후 없으면 넣는다.
        console.log("this.items().indexOf(val):"+this.indexOf(val));
        console.log("this.items().length():"+this.length());
        //this.hasitem(val);
        console.log(typeof(this.hasitem(val)));
        if(typeof(this.hasitem(val))== "undefined"){
        array.push(val);

        var inStr = JSON.stringify(array);
        $.cookie(cookieName, inStr, { expires:360, path: '/' });


        }else{

        console.log(this.items().indexOf(val));
        console.log("index 존재:"+val);
        }

        },
        remove: function (val) {
        var items = this.items();

        var index = items.indexOf(val);

        if (index != -1) {
        items.splice(index, 1);
        $.cookie(cookieName, items.join(','), { expires: 360, path: '/' });
        }
        },
        indexOf: function (val) {
        return this.items().indexOf(val);
        },
        clear: function () {
        $.cookie(cookieName, null, { expires: 360, path: '/' });
        },
        items: function () {
        var cookie = $.cookie(cookieName);
        return cookie ? JSON.parse(cookie):[];
        },
        hasitem: function (val){
        for (var k in this.items()){
        var entry1 = JSON.stringify(this.items()[k]);
        var val1 = JSON.stringify(val);
        if(val1 == entry1){
        console.log("key:"+k);
        return k;
        }
        }
        },
        length: function () {
        return this.items().length;
        },
        };
        }
        });
        })(jQuery);

실제 사용 HTML

        <!DOCTYPE html>
        <html lang="kr">

        <head>

            <meta charset="utf-8">

            <!-- Le styles -->
            <!--<link href="http://bootstrapdocs.com/v2.0.4/docs/assets/css/bootstrap.css" rel="stylesheet"> -->
            <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
            <script src="jquery.cookie.js"></script>
            <script src="cookie.js"></script>

            <script>
                var cookieList = $.fn.cookieList("userCookie9");

                function setCookie(url, name, age) {

                    var obj = new Object();
                    obj.url = url;
                    obj.name = name;
                    obj.age = age;

                    cookieList.add(obj);
                }


                function getResult() {
                    for (var k in cookieList.items()) {
                        //console.log("url:"+cookieList.items()[k].url);
                        //console.log("name:"+cookieList.items()[k].name);
                        if (cookieList.items()[k].url) {
                            console.log("url:" + cookieList.items()[k].url);
                            $('#msg').append(cookieList.items()[k].url);
                        }
                        //console.log("age:"+itemList[k].age);
                    }
                }

                function getReverse() {
                    var itemList = cookieList.items();
                    itemList.reverse();
                    for (var k in itemList) {
                        console.log("url:" + itemList[k].url);
                        console.log("name:" + itemList[k].name);
                        console.log("age:" + itemList[k].age);
                    }

                }


                $(function () {
                    setCookie("나의 url 2", "나의 이름 2", "18");
                    getResult(); //입력순서대로 가져오기
                });


                // getReverse();//최신 입력순으로 가져오기

            </script>
        </head>

        <body>
            <div id="msg"></div>
            <!-- http://forum.5nit.com/jquery/how-to-store-an-array-in-jquery-cookie.html -->
        </body>

        </html>

파일찾아보기를 이미지 버튼으로

안되는 예제(IE에서는 동작하지 않음)

$(function(){
$("#btn_file").click(function(e){
$("#input_file").click();
});

}
<input type='file' id="input_file" />
<button id="btn_file">파일첨부</button>

상기처럼 처리되면 IE를 제외하고는 작동한다. 그래서 편법으로 레이어를 올리는지 한다.

하지만 아래 방법은 모든 브라우저에서 잘 작동한다. 가장 핵심적인 키워드는 이다.

잘되는 예제(OK, include IE)

$(function(){


}
<input type='file' id="input_file" />
<label for="input_file">파일첨부</label>

그리고 상기 label 에다가 다양한 style로서 이미지화 시키시면 OK..

jqery의 element 가 지닌 css 스타일 그대로 카피하기

        usage :
        var style = css($("#elementToGetAllCSS"));
        $("#elementToPutStyleInto").css(style);

        reffered functions :

        function css(a) {
        var sheets = document.styleSheets, o = {};
        for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
        if (a.is(rules[r].selectorText)) {
        o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
        }
        }
        }
        return o;
        }

        function css2json(css) {
        var s = {};
        if (!css) return s;
        if (css instanceof CSSStyleDeclaration) {
        for (var i in css) {
        if ((css[i]).toLowerCase) {
        s[(css[i]).toLowerCase()] = (css[css[i]]);
        }
        }
        } else if (typeof css == "string") {
        css = css.split("; ");
        for (var i in css) {
        var l = css[i].split(": ");
        s[l[0].toLowerCase()] = (l[1]);
        }
        }
        return s;
        }

Table of contents 목차

JQUERY

다이나믹 폼
2개이상 폼(다중 폼)을 동시 전송(submit)하기
opener 나 parent 접근하기
테이블 꾸미기

style part
script part
html part

jQuery.each break continue
텍스트 input 창에서 엔터(enter)시 실행
문서길이 구하기 GET DOCUMENT HEIGHT (CROSS-BROWSER)
페이지 스크롤시 자동으로 페이지 추가하기
remove, empty, append
다양한 입력대기
jquery
jquery sample 모음
jquery관련 추천사이트
파일업로드 버튼 이미지 버튼으로 바꾸기
레이어팝업띄우기_body의 색상반전

script
html

레이어팝업띄우기_simple
jquery를 이용한 이미지 처리
jquery를 이용한 check button 처리하기
중요 jQuery 1.6+
1.6 이상부터는 attr을 사용하지 않고 prop를 사용합니다.
버튼에 마우스 오버효과 쉽게 주기(다양한 탭방식에 적용)
datepicker 를 이용한 응용(시작일은 오늘날짜보다 크고 종료일은 시작일보다 작지않은것 구하기)
자주사용하는 jquery
jquery post 시 javascript 인자값 전달
JQuery Core
jQuery를 활용한 XML파일의 처리
BackEnd (PHP)
js 파일

사용가능한 ResponseType

데이타 가져오기

HTML
결과

선택된 element의 하위에 존재하는 elemnet 선택
jqgrid jqchart
이미지 로드 후 이미지 리사이징 하기
jQueryRotate 를 이용한 이미지 흔들기(Swing)
jquery 에서 iframe 으로 데이타 전송(submit)하는 간단한 예제(return(callback) 받음
jquery.cookie 에 object 넣기
파일찾아보기를 이미지 버튼으로

안되는 예제(IE에서는 동작하지 않음)

잘되는 예제(OK, include IE)
jqery의 element 가 지닌 css 스타일 그대로 카피하기

평점을 남겨주세요

평점 : 2.5

총 투표수 : 1 개