JQuery - JQuery(제이쿼리) 노트 정리 #2

jquery(제이쿼리) attr() , porp()

-attr은 html의 정보 자체를 바꾸고 (값이 모두 String으로 넘어온다)
-prop는 javascript의 property를 바꾼다 (property 값이 넘어오기 때문에 boolean, date, function 등도 가져올수 있다)

//check 상태 확인
if($checkbox.prop("checked")) { 
$image.attr("src", "/img/check_on-min.png"); 
		$('#pri01').prop("checked",true);
} else { 
$image.attr("src", "/img/check_off-min.png"); 
		$('#pri01').prop("checked",false);
} 

jquery(제이쿼리) ajax serialize()

function formSubmit() {
    var params = jQuery("#id").serialize(); 
    // serialize() : 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다. 
   
    jQuery.ajax({
        url: '',
        type: 'POST',
        data:params,
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
        dataType: 'html',
        success: function (result) {
            if (result){
                // 데이타 성공일때 이벤트 작성
            }
        }
    });
}
//or
    $.post(url ,$("#id").serialize(),function(result){
      if (result.result) {
      	console.log('성공');
      }    
    },"json"); //dataType이 json 이라고 명시
    

jquery(제이쿼리) 동적 form 생성 submit

$('#btn_submit').click( function() {
     var $form = $('<form></form>');
     $form.attr('action', 'order.asp');
     $form.attr('method', 'post');
     $form.attr('target', 'iFrm');
     $form.appendTo('body');
     
     var idx = $('<input type="hidden" value="<%=idx%>" name="idx">');
     var page = $('<input type="hidden" value="<%=page%>" name="page">');
     var category = $('<input type="hidden" value="<%=category%>" name="category">');
     var keyfield = $('<input type="hidden" value="<%=keyfield%>" name="keyfield">');
     var keyword = $('<input type="hidden" value="<%=keyword%>" name="keyword">');
 
     $form.append(idx).append(page).append(category).append(keyfield).append(keyword);
     $form.submit();
});

jquery(제이쿼리) parents() , closest()

- parents() 메소드는 자신부터 document root 까지 검색을 하기 때문에 검색결과가 1개 이상 parents("tr")[0] 이런식으로 사용
- closest() 메소드는 closest("tr")로 바로 사용하면 됨, 단 하나의 결과만을 리턴

$("li.item-a").closest("ul").css("background-color", "red");
		//closest 의 경우에는 item-a 엘리멘트의 가장가까운 level-2 만 배경색이 변경
	$("li.item-a").parents("ul").css("background-color", "red");
		//parents 의 경우에는 item-a 엘리멘트의 모든 부모 ul 엘리멘트의 배경색이 변경

jquery(제이쿼리) trigger() 다른 이벤트 실행

$(".open_btn1").click(function(){
	$("img").trigger("click");
	$(".sel3").click();	
});

jquery(제이쿼리) hasClass() 찾는 클래스가 없는지 유무

if($(this).hasClass("event") == true){
	
}

jquery(제이쿼리) 태그 값 초기화 reset()

$("[name=forderform]").get(0).reset()

jquery(제이쿼리) blur() 포커스 없애기

$(this).blur();

 

 

여기서 부터는 유용하게 쓰이는 코드

 

jquery(제이쿼리)  enter(13) keydown()

$("#page").keydown(function(key) {
	if (key.keyCode == 13) {
	operate_list();
	}
});

jquery(제이쿼리) 여백 클릭시 해당 팝업 닫기

$(document).ready(function(){
	$(document).mouseup(function(e){
		var container = $("#toggleView");
		if(container.has(e.target).length === 0)
			container.hide();
	});
});

jquery(제이쿼리) 천천히 하단으로 내려가기

$(function(){
	$(".view").click(function(){
	$('html, body').stop().animate( { scrollTop : '2000' }, 5000);
	});
});

jquery(제이쿼리) 맨 위로 올라가기 , 맨 아래로 내려가기

//맨 위로 올라가기
$("body").scrollTop(0)
//맨 아래로 내려가기
$('html, body').scrollTop( $(document).height() );
$('body,html').animate({ scrollTop: $(document).height() }, 400);

 jquery(제이쿼리) 슬라이드 토글

<li class="subList">
	<div class="title">
		<img src="" alt="글리스트제목" />
		<span>제목</span>
		<img class="imgArrow imgArrow_down" src="" alt="아래화살표" />
		<img class="imgArrow imgArrow_up" src="" alt="위화살표" />
	</div>
	<div class="data">
		<img src="" alt="글리스트내용" />
		<span>
			<내용
		</span>
	</div>
</li>
<script>
	showSubData();
});
function showSubData()
{
	$(".bdListBox .subList .title").click(function(){ //클릭 이벤트 발생하는 부분
		$(this).siblings(".data").slideToggle();//내용리스트
		$(this).children(".imgArrow_up").toggle(); //위에 화살표
		$(this).children(".imgArrow_down").toggle();//아래 화살표
	});
}
</script>

jquery(제이쿼리) 좌우 스와이프 기능

<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
  //크롬에서 경고뜨면
  //.ListWrap {touch-action: none;}

$(function(){
 /*스와이프 기능*/
	$("div.ListWrap").on("swiperight",function(event){

	});
	$("div.ListWrap").on("swipeleft",function(event){
				
	});
});

jquery(제이쿼리) 이미지 돌리기

#image {
transition: all ease 1s;
}

var n = 0;
setInterval(function(){
	n +=3;
	$("#image").css("transform" , "rotate( "+n+"0deg )");
	console.log(13);
},500);

jquery(제이쿼리) tagsInput

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
<script>
$(function() {
  $('#wr').tagsInput({
    'width':'100%',
    'height':'auto',
    'defaultText':'입력'
  });
});				
</script>
<input type="text" value="" name="wr" id="wr" >

jquery(제이쿼리) window가 변경(resize)시 하단 숨기고 보이기

$(window).resize(function(){
	var conlen = $(window).height() - $(".bmenu").height();
	var limit = $(".moonmde01").offset().top + $(".moonmde01").height();
	if(conlen <= limit){
		$("#container").css("height","calc(100% - 75px)");
		$(".bmenu").hide();		
	}else{
		$("#container").css("height","calc(100% - 150px)");
		$(".bmenu").show();		
	}
});

jquery(제이쿼리) 뒤로가기

$(function(){
	$('winback').click(function(){
		window.history.back();		
	});	
});

jquery(제이쿼리) 전화번호 바 생성

$(function(){
	var varft = false;
	$("#reg_mb_tel").keyup(function(event){
		var telvar = $(this).val();

		if(event.keyCode != "8"){
			if((telvar.length == 2 && telvar == "02") || varft){
				if(telvar.length == 2){
					telvar = telvar+'-';
				}
				if(telvar.length == 7){
					telvar = telvar+'-';
				}
				
			varft = true;
			}else{
				if(telvar.length == 3){
					telvar = telvar+'-';
				}
				if(telvar.length == 8){
					telvar = telvar+'-';
				}
			}
			$(this).val(telvar);
		}
	});
});

jquery(제이쿼리) 년월 동적으로 넣기

function appendYear(){
	var date = new Date();
	var mm = date.getMonth();
	var dd = date.getDate();	
	var year = date.getFullYear();
	var selectValue = document.getElementById("ymselect");
	var optionIndex = 0;
	for(var i=year-100;i<=year;i++){
		for(var ii=1;ii<=12;ii++){
			selectValue.add(new Option(i+"년"+ii+"월" ,i+"-"+ii),optionIndex++);                        
		}
	}
}

jquery(제이쿼리) 이미지 축소 화면 비율 구하기

var ratio = (episode_image_obj.width() / episode_image_obj.prop('naturalWidth') * 100).toFixed(); //비율

jquery(제이쿼리) 게시글 무한 스크롤 내리면서 보이기

//li에 class bo_load 추가
//더보기 버튼에 class lt_title 추가
<style>
.more_li , .bo_load {display:none;}
.bo_load.active {
    display: block;
}
</style>
<script>
$(window).on('load', function(){
	load('.bo_load', '10');//li 시작 출력수
	$('.more_li').click(function(){
		load('.bo_load', '5');//더보기 버튼 누르면 출력수
	})
});
//스크롤 내리면서 보이기
$('body').scroll(function(){
	var te = $(this).scrollTop();
	var dh = $(document).height();
	var wh = $(window).height();

	if(te == dh - wh){
		$('.more_li').trigger('click');
		//		$(alid).get(0).click(); //trigger 작동안할때
	}
});

	var talcnt = 0;
	function load(id, cnt) {
	 var girls_list = id ;
    var girls_length = $(girls_list).length;//총리스트수
    var girls_total_cnt;
	talcnt = parseInt(cnt,10) + parseInt(talcnt,10);//축척되는 변수
	if (talcnt < girls_length) {
        girls_total_cnt = talcnt;//
    } else {
        girls_total_cnt = girls_length;
        $('.lt_title').hide();//더보기 버튼 숨김
    }
    $(girls_list + ":lt(" + girls_total_cnt + ")").addClass("active");
	//:lt 전달된 idex보다 작은 index요소를 모두 가져옴
}
</script>

jquery(제이쿼리) 사진 미리보기 & 사진 돌리기

var rotation = {
  1: 'rotate(0deg)',
  3: 'rotate(180deg)',
  6: 'rotate(90deg)',
  8: 'rotate(270deg)'
};
function _arrayBufferToBase64( buffer ) {
  var binary = ''
  var bytes = new Uint8Array( buffer )
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode( bytes[ i ] )
  }
  return window.btoa( binary );
}
function orientation(file, callback) {
  var fileReader = new FileReader();
  fileReader.onloadend = function() {
    var base64img = "data:"+file.type+";base64," + _arrayBufferToBase64(fileReader.result);
    var scanner = new DataView(fileReader.result);
    var idx = 0;
    var value = 1; // Non-rotated is the default
    if(fileReader.result.length < 2 || scanner.getUint16(idx) != 0xFFD8) {
      // Not a JPEG
      if(callback) {
        callback(base64img, value);
      }
      return;
    }
    idx += 2;
    var maxBytes = scanner.byteLength;
    while(idx < maxBytes - 2) {
      var uint16 = scanner.getUint16(idx);
      idx += 2;
      switch(uint16) {
        case 0xFFE1: // Start of EXIF
          var exifLength = scanner.getUint16(idx);
          maxBytes = exifLength - idx;
          idx += 2;
          break;
        case 0x0112: // Orientation tag
          // Read the value, its 6 bytes further out
          // See page 102 at the following URL
          // http://www.kodak.com/global/plugins/acrobat/en/service/digCam/exifStandard2.pdf
          value = scanner.getUint16(idx + 6, false);
          maxBytes = 0; // Stop scanning
          break;
      }
    }
    if(callback) {
      callback(base64img, value);
    }
  }
  fileReader.readAsArrayBuffer(file);
};

$(function(){
	$("#addDeviceImgInput").change(function(){
	file = $(this).get(0).files[0];
	imgPos = $("#addDeviceImg");
	var fileReader = new FileReader();
	fileReader.onload = function(e) {
	   orientation(file, function(base64img, value) {
		 var rotated = imgPos.attr('src', base64img);
		 if(value) {
		   rotated.css('transform', rotation[value]);
		 }
		 $(window).trigger("resize");
	   });
	}
	fileReader.readAsDataURL(file);
	});	
});