'JavaScript &amp; jQuery/jQuery' 카테고리의 글 목록 (4 Page)

'JavaScript & jQuery/jQuery'에 해당되는 글 24건

[jQuery] jQuery 셀렉터 정리[jQuery] jQuery 셀렉터 정리

Posted at 2018. 9. 10. 13:21 | Posted in JavaScript & jQuery/jQuery

■ jQuery 셀렉터 정리

#01. CSS 셀렉터

:: 명칭 ::	:: 서식 ::	:: 지정 대상 ::
태그 셀렉터	jQuery("태그명")	· 특정 태그
아이디(id) 셀렉터	jQuery("#ID명")	· 특정 ID를 속성으로 갖는 태그
네임(name) 셀렉터	jQuery("태그속성[name=Name명]")	· 특정 Name을 속성으로 갖는 태그
클래스(class) 셀렉터	jQuery(".Class명")	· 특정 클래스를 속성으로 갖는 태그
자손 셀렉터	jQuery("태그1 태그2")	· 특정 태그의 안쪽에 있는 태그
유니버셜 셀렉터	jQuery("*")	· 전체 태그
그룹 셀렉터	jQuery("셀렉터1, 셀렉터2")	· 복수의 셀렉터

#02. jQuery 독자 필터

:: 명칭 ::	:: 서식 ::	:: 지정 대상 ::
first 필터	jQuery("태그").first()	· 지정한 태그의 첫태그
last 필터	jQuery("태그").last()	· 지정한 태그의 마지막 태그
even 필터	jQuery("태그:even")	· 지정한 태그의 짝수 번째 태그
odd 필터	jQuery("태그:odd")	· 지정한 태그의 홀수 번째 태그
eq 필터	jQuery("태그").eq(번호),	· 지정한 번호의 태그(번호는 0부터 시작)
gt 필터	jQuery("태그").gt(번호)	· 지정한 태그보다 뒤의 태그(index + 1번째 요소)
lt 필터	jQuery("태그").lt(번호)	· 지정한 태그보다 앞의 태그(index 미만의 요소)
header 필터	jQuery("태그:header")	· h1 ~ h6까지의 heading 태그
contatin 필터	jQuery("태그:contatin(문자열)")	· 특정 문자열을 포함하고 있는 태그
has 필터	jQuery("태그:has(태그2)")	· 특정 태그를 호함하고 있는 태그
parent 필터	jQuery("태그").parent()	· 자식 태그 혹은 문자열을 포함하고 있는 태그
animated 필터	jQuery("태그:animated")	· 애니메이션 중의 모든 요소를 취득
contains 필터	jQuery("태그:contains(문자열)")	· 특정문자열을 포함한 요소를 취득
empty 필터	jQuery("태그").empty()	· 특정 태그의 문자열을 삭제

#03. CSS2에서 추가된 셀렉터

:: 명칭 ::	:: 서식 ::	:: 지정 대상 ::
자손 셀렉터	jQuery("부모 태그명 자손 태그명")	· 부모 태그의 모든 자손 요소의 자손 태그명을 취득
자식 셀렉터	jQuery("부모 태그명 > 자식 태그명")	· 부모 태그의 바로 밑에 자식 태그
인접 셀렉터	jQuery("태그1 + 태그2")	· 특정 태그의 다음 태그
형제 셀렉터	jQuery("태그1 ~ 태그2")	· 특정 태그의 형제 요소 태그2를 취득
first-child 유사클래스	jQuery("태그:first-child")	· 동일 태그 안의 첫 태그

#04. CSS3에서 추가된 셀렉터

:: 명칭 ::	:: 서식 ::	:: 지정 대상 ::
간접 셀렉터	jQuery("태그1 ~ 태그2")	· 특정 태그의 뒤에 나타나는 태그
부정유사 클래스	jQuery("태그1").not(태그2)	· 특정 태그 안에서 태그2를 제외한 태그
empty 클래스	jQuery("태그:empty")	· 자식태그 혹은 문자열을 포함하지 않는 태그
nth-child 유사 클래스	jQuery("태그:nth-child(번호)")	· 특정 태그 안에서 지정한 번호의 태그
last-child 유사 클래스	jQuery("태그:last-child")	· 동일 태그안의 가장 마지막 태그
only-child 유사 클래스	jQuery("태그:only-child")	· 특정 태그가 하나만 포함된 태그

#05. CSS의 속성 셀렉터

:: 명칭 ::	:: 서식 ::	:: 지정 대상 ::
[attribute]	jQuery("[속성명]")	· 특정 속성을 가진 태그
[attribute = 'value']	jQuery("[속성명 = '값']")	· 특정 속성이 지정한 값을 가진 태그
[attribute != 'value']	jQuery("태그명[속성명 != '값']")	· 특정 속성이 지정한 값을 갖지 않는 태그
[attribute ^= 'value']	jQuery("태그명[속성명 ^= '값']")	· 특정 속성이 지정한 값으로 시작되는 태그
[attribute $= 'value']	jQuery("[속성명 $= '값']")	· 특정 속성이 지정한 값으로 끝나는 태그
[attribute *= 'value']	jQuery("[속성명 *= '값']")	· 특정 속성이 지정한 값을 포함하고 있는 태그
[attributeFilter1] [attributeFilter2]	jQuery("[태그셀렉터1][태그셀렉터2")	· 복수 속성 셀렉터에 해당하는 태그

#06. 요소의 조작

:: 명칭 ::	:: 서식 ::	:: 지정 대상 ::
append(c) 내부	jQuery("태그").append(c)	· 요소 c를 현재 요소의 자식 요소 뒤에 추가
append(함수) 내부	jQuery("태그").append(함수)	· 함수의 결과를 현재 요소의 자식 요소 뒤에 추가 ※ 함수는 인수로서 인덱스 번호, 현재의 자식 요소를 나타내는 HTML 문자열을 받아 추가해야 할 HTML 문자열을 돌려준다.
prepend(c) 내부	jQuery("태그").prepend(c)	· 요소 c를 현재 요소의 자식 요소 선두에 추가
prepend(함수) 내부	jQuery("태그").prepend(함수)	· 함수의 결과를 현재 요소의 자식 요소 선두에 추가 ※ 함수는 인수로서 인덱스 번호, 현재의 자식 요소를 나타내는 HTML 문자열을 받아 추가해야 할 HTML 문자열을 돌려준다.
appendTo(c) 내부	jQuery("태그").appendTo(c)	· 현재 요소를 요소 c의 자식 요소 뒤에 추가(append의 역)
prependTo(c) 내부	jQuery("태그").prependTo(c)	· 특정 속성이 지정한 값을 포함하고 있는 태그
after(c) 외부	jQuery("태그").after(c)	· 요소 c를 현재 요소의 뒤에 추가
after(함수) 외부	jQuery("태그").after(함수)	· 함수 결과를 현재 요소의 뒤에 추가 ※ 함수는 인수로서 인덱스 번호를 받아 추가해야할 HTML 문자열을 돌려준다.
before(c) 외부	jQuery("태그").after(c)	· 요소 c를 현재 요소의 앞에 추가
before(함수) 외부	jQuery("태그").after(함수)	· 함수 결과를 현재 요소의 앞에 추가 ※ 함수는 인수로서 인덱스 번호를 받아 추가해야할 HTML 문자열을 돌려준다.
insertAfter(c) 랩	jQuery("태그").insertAfter(c)	· 현재 요소를 c의 뒤에 추가(after의 역)
insertBefore(c) 랩	jQuery("태그").insertBefore(c)	· 현재 요소를 c의 앞에 추가(before의 역)
wrap(html \| elem) 랩		· 현재 요소를 지정한 HTML 문자열 / 요소를 둘러싼다.
wrap(함수) 랩		· 현재 요소를 함수의 결과로 둘러 싼다.
wrapAll(html \| elem) 랩		· 현재 요소 전체를 지정한 HTML 문자열 / 요소로 둘러싼다.
wraplnner(html \| elem) 랩		· 현재 요소의 내용을 함수의 결과로 둘러싼다.
unwrap() 랩		· 현재 요소를 둘러싸고 있는 요소를 제거
replaceWith(c) 치환외부		· 현재 요소를 요소 c로 치환
replaceWith(함수) 치환외부		· 현재 요소를 함수의 결과로 치환
replaceAll(c)		· 현재 요소로 요소 c를 치환
empty() 삭제		· 현재 요소의 안에 있는 모든 요소를 삭제
remove([exp])		· 현재 요소를 삭제(인수 exp로 필터링 가능)
detach([exp])		· 현재 요소를 이벤트 리스너를 유지한 채로 파기 (인수 exp로 필터링 가능)
clone([flag])		· 현재 요소를 카피 (인수 flag가 true의 경우는 이벤트 리스너도 정리해 카피)

#07. 요소세트에 영향을 주는 조작

:: 명칭 ::	:: 서식 ::	:: 지정 대상 ::
add()
andSelf(0
children()
filter()
find()
map()
next()
nextAll()
not()
parent()
parents()
prev()
prevAll()
siblings
slice
clone

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] jQuery Ajax 전송 (0)	2018.09.28
[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기 (0)	2018.09.17
[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기 (1)	2018.08.20
[jQuery] 커스텀 팝업창 오픈하기 (0)	2018.08.14
[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기 (0)	2018.08.09

[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기

Posted at 2018. 8. 20. 10:42 | Posted in JavaScript & jQuery/jQuery

■ 캘린더( DatePicker ) 사용시 시작일 / 종료일 예외처리

사이트 제작중 검색할 데이터의 시작일과 종료일을 설정하는 경우는 자주 있는 일이다.

그렇다면 검색 조건을 시작일이 종료일보다 이후에 오면 안되고,

종료일이 시작일보다 먼저일 수 없게 예외처리를 해두기 위해 스크립트를 짜게 되었고.

아래와 같이 정리해 두었다.

# 소스코드

<html>
<head>
<title>:: 시작일 / 종료일 체크하기 ::</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
    .datePicker {
        text-align:center;
        width:80px;
    }

    ul {
        list-style:none;
        margin:0;
        padding:0;
    }

    li {
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        border : 0;
        float: left;
    }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
   jQuery(document).ready(function() {

        jQuery(".datePicker").datepicker();

       // jQuery UI Datepicker 한글 변환
       jQuery.datepicker.regional['ko'] = {
              closeText : "닫기"
           , prevText : ""
           , nextText : ""
           , currentText : "오늘"
           , monthNames : ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
           , monthNamesShort : ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
           , dayNames : ["일", "월", "화", "수", "목", "금", "토"]
           , dayNamesShort : ["일", "월", "화", "수", "목", "금", "토"]
           , dayNamesMin : ["일", "월", "화", "수", "목", "금", "토"]
           , weekHeader : "Wk"
           , dateFormat : "yy-mm-dd"
           , firstDay : 0
           , isRTL : false
           , yearSuffix : " 년"
           , showMonthAfterYear : true
           , changeMonth : true
           // , changeYear : true
           // , autoSize : true

           , beforeShow:function(input) {
               var position = jQuery(input).position();
               setTimeout(function() {
                   jQuery("#ui-datepicker-div").css({"left":position.left});
               })
           }
       };
       jQuery.datepicker.setDefaults(jQuery.datepicker.regional['ko']);
   });

    function inputDateComparison(obj) {

        // 현재 엘리먼트의 부모(li) > 부모(ul) > 첫번째자식(li) > 첫번째자식(input)
        let startDate = inputDateSplit(obj.parentNode.parentNode.firstElementChild.firstChild.value);    // 시작일

// 현재 엘리먼트의 부모(li) > 부모(ul) > 마지막자식(li) > 첫번째자식(input)

        let endDate = inputDateSplit(obj.parentNode.parentNode.lastElementChild.firstChild.value);        // 종료일

        let objDate = inputDateSplit(obj.value);    // 입력한 엘리먼트의 일자
        // 입력일을 확인하는 이유는 현재 작성한 일자가 시작일인지 종료일인지 확인하기 위해서이다.

        if(startDate == objDate && startDate > endDate) {
            alert("시작일이 종료일보다 이 후 일수는 없습니다.\n다시 선택하여 주시기 바랍니다.");
            obj.parentNode.parentNode.firstElementChild.firstChild.value = "";
            // obj.parentNode.parentNode.firstElementChild.firstChild.focus();
        }

        else if(endDate == objDate && endDate < startDate) {

            if(obj.parentNode.parentNode.firstElementChild.firstChild.value == "") {
                alert("시작일이 입력되지 않았습니다.\n시작일을 먼저 입력해주세요");
                obj.parentNode.parentNode.lastElementChild.firstChild.value = "";
                // obj.parentNode.parentNode.firstElementChild.firstChild.focus();
            }

            else {
                alert("종료일이 시작일보다 이 전 일수는 없습니다.\n다시 선택하여 주시기 바랍니다.");
                obj.parentNode.parentNode.lastElementChild.firstChild.value = "";
                // obj.parentNode.parentNode.lastElementChild.lastChild.focus();
            }
        }

        else {
            return false;
        }
    }

// 날짜형식에 "-"이 사용된 경우에 한하여 날짜값에서 "-" 기호를 제거한다.
function inputDateSplit(obj) {

        let dateArray = obj.split("-");
       return dateArray[0] + dateArray[1] + dateArray[2];
   }
</script>
</head>
<body>

<ul>

</ul>

</body>
</html>

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기 (0)	2018.09.17
[jQuery] jQuery 셀렉터 정리 (0)	2018.09.10
[jQuery] 커스텀 팝업창 오픈하기 (0)	2018.08.14
[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기 (0)	2018.08.09
[jQuery] SNS 공유 팝업창 제작(심화) (0)	2018.06.07

[jQuery] 커스텀 팝업창 오픈하기[jQuery] 커스텀 팝업창 오픈하기

Posted at 2018. 8. 14. 17:25 | Posted in JavaScript & jQuery/jQuery

다운로드 : https://www.jqueryscript.net/

Simple Plain Dialog Popup Plugin For jQuery Alerts이라는 jQuery 모듈을 사용하게 되었다.

이런 기존의 Dialog 경고창을 대신해 주는것을 jAlert이라고 하는 것 같은데 이건 그 수많은 모듈중 한가지일 뿐이다.

사용방법이 굉장히 단순해서 포스팅할 것 까지는 없었지만.

몇가지 기능적인 부분을 사용중 답답함을 느껴 이렇게 포스팅 하게 되었다.

■ 경고(Alert)창 팝업

#01. 기본 경고(Alert)창 팝업

# 소스코드

# 출력결과

#02. 콜백 기능을 이용한 경고(Alert)창 팝업

사실 해당 글을 포스팅하게 된 이유는 이것이다.

기본적인 alert창의 경우 alert창이 뜨게 되면 확인 버튼을 클릭하기 전까지

다음 작업이 진행되지 않지만, 이 jAlert의 경우는 창이 오픈됨과 동시에 바로 다음 작업이 진행되기 떄문에.

jAlert창이 팝업이 되고 정상적으로 OK 버튼을 누른 이후에 작업을 진행하기 위해서, 콜백 기능을 사용하게 되었다,

# 소스코드

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 심플 다이얼로그 팝업 ::</title>
<link rel="stylesheet" href="jquery.alerts.css">
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="jquery.alerts.js" ></script>
<script type="text/javascript">
    function callbackAlertWindow() {
        jAlert("피카부", "#VELVET", function() {
            window.location.href = "http://magic.wickedmiso.com/";
        });
    }
</script>
</head>
<body>
    <h1>CALLBACK ALERT</h1>
    <input type="button" onClick="callbackAlertWindow();" value="경고창"/>
</body>
</html>

# 출력결과

■ 확인(Confirm)창 팝업

# 소스코드

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 심플 다이얼로그 팝업 ::</title>
<link rel="stylesheet" href="jquery.alerts.css">
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="jquery.alerts.js" ></script>
<script type="text/javascript">
    function choiceConfirmWindow() {
        jConfirm("빨간맛", "#RED", function(result) {
            if(result == true) {
                alert("빨간맛 궁금해 허니");
            } else if(result == false) {
                alert("내가 제일 좋아하는건 여름에 너어~");
            }
        });
    }
</script>
</head>
<body>
    <h1>CALLBACK ALERT</h1>
    <input type="button" onClick="choiceConfirmWindow();" value="경고창"/>
</body>
</html>

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] jQuery 셀렉터 정리 (0)	2018.09.10
[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기 (1)	2018.08.20
[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기 (0)	2018.08.09
[jQuery] SNS 공유 팝업창 제작(심화) (0)	2018.06.07
[jQuery] 움직이는 팝업 레이어 만들기 (0)	2018.05.29

[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기

Posted at 2018. 8. 9. 23:43 | Posted in JavaScript & jQuery/jQuery

■ jQuery :: sortable()을 이용한 레이어 재배치

sortable 기능을 사용하면 클릭 드래그 형태로 이미 지정된 엘리먼트의 위치를, 변경하고, 지정할 수 있다.

해당 포스팅은 단순히 엘리먼트의 위치를 지정하는데 그치지 않고.

지정된 위치에따른 값을 재배치할 수 있게 재배치된 순서(indxe)값을 전송하는 것까지 목표로 하였다.

# 소스코드 - 테이블 행의 순서를 변경하고 그 값을 전송할 sortable_transmit.php

sortable_transmit.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 마우스 드래그 테이블 ::</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
    body { text-align:center; }
    .girlGroup { list-style-type:none;margin:0;padding:0;width:100%; }
    .girlGroup li { margin:3px;padding:0.4em;font-size:1em;height:18px;text-align:center; }
    .memberRow { border:solid 1px #C5C5C5;background:#F6F6F6; }
</style>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

        // sortable은 객체의 순서를 재배치 할 수 있다.
        jQuery(".girlGroup").sortable();

        jQuery(".memberRow").mouseover(function() {

            jQuery(".memberRow").css("border", "solid 1px #C5C5C5").css("background", "#F6F6F6");

            var idx = jQuery(".memberRow").index(this);
            jQuery(".memberRow").eq(idx).css("border", "solid 3px #FF0000").css("background", "#FFC0CB");
        });
    });

    function wujuSonyeoTransmit() {

        var girls = "";

       // memberRow의 개수만큼 반복문을 돌리면서 enName값을 콤마로 구분하여 하나의 문자열로 만든다.
        jQuery(".memberRow").each(function(idx) {

            // 한글 이름을 전송
            // girls += jQuery(".memberRow").eq(idx).text + ", ";

            // 영문 이름을 전송
            girls += jQuery(".memberRow").eq(idx).attr("enName") + ",";
        });

        // 마지막 콤마 제거 후, 값을 cosmicGirls 에 담는다.
        jQuery("#cosmicGirls").val(girls.slice(0, -1));

        jQuery("#sortTableForm").attr("action", "./sortable_receive.php");
        jQuery("#sortTableForm").submit();
    }
</script>
</head>
<body>
<form method="post" id="sortTableForm" name="sortTableForm">
<input type="hidden" id="cosmicGirls" name="cosmicGirls" value=""/>
    <h1>우 주 소 녀</h1>
    <ul class="girlGroup">
    <li class="memberRow" enName="seola">설아</li>
    <li class="memberRow" enName="xuanyi">선의</li>
    <li class="memberRow" enName="bona">보나</li>
    <li class="memberRow" enName="exy">엑시</li>
    <li class="memberRow" enName="soobin">수빈</li>
    <li class="memberRow" enName="luda">루다</li>
    <li class="memberRow" enName="dawon">다원</li>
    <li class="memberRow" enName="eunseo">은서</li>
    <li class="memberRow" enName="chengxiao">성소</li>
    <li class="memberRow" enName="meiqi">미기</li>
    <li class="memberRow" enName="yeoreum">여름</li>
    <li class="memberRow" enName="dayoung">다영</li>
    <li class="memberRow" enName="yeonjung">연정</li>
    </ul>
    <br/>
    <input type="button" onClick="wujuSonyeoTransmit();" value="전송"/>
</form>
</body>
</html>

# 소스코드 - 테이블 행의 순서를 변경하고 그 값을 전송받을 sortable_receive.php

sortable_receive.php

<?php
    $wujuSonyeo = explode(",", $_POST['cosmicGirls']);

    echo "<pre>";
    print_r($wujuSonyeo);
    echo "</pre>";
?>

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기 (1)	2018.08.20
[jQuery] 커스텀 팝업창 오픈하기 (0)	2018.08.14
[jQuery] SNS 공유 팝업창 제작(심화) (0)	2018.06.07
[jQuery] 움직이는 팝업 레이어 만들기 (0)	2018.05.29
[jQuery] 따라다니는플로팅 배너 제작 (0)	2018.04.23

Prev Next

1 2 3 4 5 6

'JavaScript & jQuery/jQuery'에 해당되는 글 24건

[jQuery] jQuery 셀렉터 정리[jQuery] jQuery 셀렉터 정리

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 커스텀 팝업창 오픈하기[jQuery] 커스텀 팝업창 오픈하기

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바