JQUERY
예전 문서에 있던 것을 찾아 올려 두었습니다. 시간되는 대로 정리할 예정입니다.
$("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
| $().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(); | rongfadeTo(); | ||
| 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’) <- id가 report-body인 element를 jquery객체형으로 변환 후 리턴
2.class
A.Element 의 css class 이름으로 선택한다.
i.Ex) $(‘.Root’) <- css classattribute 가 Root인 element를 jquery객체형으로 변환 후 리턴
3.Element
A.Element 의 이름으로 선택한다.
i.Ex) $(‘li’) <- 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 => $(‘*’)
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() > 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(“<p>Hello</p>”);
[참조 : 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로 만든다.
예)
$("<div><i>안녕하세요</i></div>").appendTo("body");
2 $(elems)
자바스크립트 엘리먼트나 엘리먼트 배열을 JQuery 오브젝트로 만든다.
예)
$(document.body).html("<p>으흐흐.</p>");
$(document.form1).html("<p>으흐흐.</p>");
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로 반환.
이것은 $("div").get(num) 은 $("div")[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 접근하기
- 테이블 꾸미기
- jQuery.each break continue
- 텍스트 input 창에서 엔터(enter)시 실행
- 문서길이 구하기 GET DOCUMENT HEIGHT (CROSS-BROWSER)
- 페이지 스크롤시 자동으로 페이지 추가하기
- remove, empty, append
- 다양한 입력대기
- jquery
- jquery sample 모음
- jquery관련 추천사이트
- 파일업로드 버튼 이미지 버튼으로 바꾸기
- 레이어팝업띄우기_body의 색상반전
- 레이어팝업띄우기_simple
- jquery를 이용한 이미지 처리
- jquery를 이용한 check button 처리하기
- 중요 jQuery 1.6+
- 1.6 이상부터는 attr을 사용하지 않고 prop를 사용합니다.
- 버튼에 마우스 오버효과 쉽게 주기(다양한 탭방식에 적용)
- datepicker 를 이용한 응용(시작일은 오늘날짜보다 크고 종료일은 시작일보다 작지않은것 구하기)
- 자주사용하는 jquery
- jquery post 시 javascript 인자값 전달
- JQuery Core
- jQuery를 활용한 XML파일의 처리
- BackEnd (PHP)
- js 파일
- 데이타 가져오기
- 선택된 element의 하위에 존재하는 elemnet 선택
- jqgrid jqchart
- 이미지 로드 후 이미지 리사이징 하기
- jQueryRotate 를 이용한 이미지 흔들기(Swing)
- jquery 에서 iframe 으로 데이타 전송(submit)하는 간단한 예제(return(callback) 받음
- jquery.cookie 에 object 넣기
- 파일찾아보기를 이미지 버튼으로
- 잘되는 예제(OK, include IE)
- jqery의 element 가 지닌 css 스타일 그대로 카피하기