JQuery / JS에서 사용되는 코드 조각들

JQuery 혹은 자바스크립트 에서 사용되는 코드 조각들을 여기에 일단 유용한 것만 모아두자.

 

참고 - 셀렉트박스 유지를 위한 스크립트

페이지의 쿼리 파라메터를 읽어와서 기존 값을 유지하는 코드 함수, 그대로 가져왔는데 왠만하면 아래 글쓴이 링크로 가서 읽어보세요. (여긴 그냥 제 참고용으로 남겨둡니다. 설명은 원본글에서 읽으세요 ^^;;;)

https://wayhome25.github.io/django/2017/03/01/django-99-my-first-project-5/

// get url query string
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};
// 정렬방식 셀렉트 박스 유지
$(document).ready(function(){
  var sort = getUrlParameter('sort');
  if(sort == 'likes'){
    $('.sort-likes').prop('selected', 'selected')
  }else if(sort == 'mypost'){
    $('.sort-mypost').prop('selected', 'selected')
  }else{
    $('.sort-date').prop('selected', 'selected')
  }
});

시간 함수 - 이번 달의 마지막 날 구하기

var date = new Date(), y = date.getFullYear(), m = date.getMonth();
var firstDay = new Date(y, m, 1);
var lastDay = new Date(y, m + 1, 0);

https://stackoverflow.com/questions/13571700/get-first-and-last-date-of-current-month-with-javascript-or-jquery

 

시간 함수 - 지난달 혹은 다음달 구하기

var future = new Date(); // get today date
future.setMonth(future.getMonth() + 1)
y = future.getFullYear();
m = future.getMonth();
var firstDay = new Date(y, m, 1);
var lastDay = new Date(y, m + 1, 0);

 

모달 창으로 데이터 넘기기

자주 쓰는데 정리가 필요하다. 아래 글을 꼭 참고

https://smujihoon.tistory.com/139

모달창으로 데이터 넘기기

 

Empty 스트링 체크, 빈 문자열 체크 

문제는 undefinded 가 있다는 것

 

var bodydata = $(event.relatedTarget).data('body');
console.log(bodydata)
if (typeof bodydata !== 'undefined' && bodydata) {
	$('#confirmModalBody').html(bodydata);
}
else {
  {% if modal_body_text %}
  $('#confirmModalBody').html("{{modal_body_text|linebreaksbr|safe}}");
  {% else %}
  ;
  {% endif %}
}

예제 하나더

if(typeof str == "undefined" || str == null || str == "")
	return true;
else
	return false ;

출처: https://fruitdev.tistory.com/200 [과일가게 개발자]

 

id 로 객체 찾기 

id 로 elements 를 선택해야 하는경우, 찾는 문자열 정리본

https://wrkbr.tistory.com/288
$("div[id!='a']")// div 에 id가 a가 아닌 태그들 선택
$("div[id^='a']")// div 에 id가 a로 시작하는 태그들 선택
$("div[id$='a']")// div 에 id가 a로 끝나는 태그들 선택
$("div[id*='a']")// div 에 id가 a가 포함된 태그들 선택

$( "li[id^='start-'][id$='-end']" ) //and 개념
$( "li[id^='start-'],li[id$='-end']" ) //or 개념

 

버튼 텍스트 라벨 바꾸기

button 일때와 input 일때가 다른다고 하시네.

 

https://hianna.tistory.com/475

[Javascript] 버튼 이름 변경하기 (버튼 클릭)

 

button 일때는 .innerText 를 변경하면 되고

input 일때는 .value 를 변경하도록~

 

 

 

조각 모음

Dan Cristian Pădureț 님의 사진, 출처: Pexels