인터넷 펌

- toPrice(cipher)

: 엘리먼트의 value 에서 문자열을 제거한 숫자값에 3자리 콤마(,)

(cipher) 의 숫자를 넣으면 해당 숫자의 자릿수만큼 콤마로 자리수를 표시한다. 값을 넣지 않으면 기본 3자리

- getOnlyNumberic(data)

: 엘리먼트의 value 에서 문자열을 제거한 숫자만은 반환

 

- 파일 :

jquery.money.js

 

- 예제(함수) :

jQuery("#inputForm").keyup(function(event) {

jQuery(this).toPrice();

});

 

 

저작자표시

'공부 > JQuery' 카테고리의 다른 글

JQuery_[상태 필터 선택자]  (0) 2015.01.29
JQuery_[위치기반 필터 선택자]  (0) 2015.01.29
JQuery_[ $.param() / serialize() ]  (0) 2014.08.26
JQuery_[ Scroll 이벤트 ]  (0) 2014.08.25
JQuery_[ $.extend() ]  (0) 2014.08.25


Selector 

Comment 

 .animated

 선택상태가 실행되는 시점에서 진행 중인 애니메이션의 모든 엘리먼트를 선택

 :button

 버튼 엘리먼트를 선택

 :checkbox

 체크박스를 선택

 :checked

 체크박스 & 라디오 버튼 체크 또는 선택된 것들만 선택

 :contains(text)

 지정된 텍스트를 포함하는 모든 엘리먼트를 선택

 :disabled

 비활성화 상태인 엘리먼트를 선택

 :enabled

 활성화 상태인 엘리먼트를 선택

 :file

 파일타입 엘리먼트를 선택

 :has(selector)

 셀렉터와 일치한 최소 한개 이상의 엘리먼트를 포함하는 엘리먼트만 선택

 :header

 H1, H2, H3 등과 같은 헤더 모든 요소를 선택

 :hidden

 숨겨든 모든 요소를 선택

 :image

 이미지 타입의 엘리먼트를 선택

 :input

 패스워드 엘리먼트를 선택

 :not(selector)

 지정한 selector 와 일치하지 않은 엘리먼트를 선택

 :parent

 자식 엘리먼트를 가지는 엘리먼트를 선택

 :password

 패스워드 엘리먼트를 선택

 :radio

 라디오 버튼을 선택

 :reset

 리셋 버튼을 선택

 :selected

 선택된 모든 엘리먼트를 선택

 :submit

 전송 버튼을 선택

 :text

 텍스트 타입 엘리먼트를 선택

 :visible

 보이는 엘리먼트를 선택


ex)

$(document).ready(function() {

// id="el" 엘리먼트의 자식 li 태그 중 p 태그를 포함하는 엘리먼트를 찾아서 색깔변경

var el = $('#el > li:has(p)');

el.css('color', 'red');

});


<ul id="el">

<li>1</li>

<li>2</li>

<li>3</li>

<li<p>4</p></li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

</ul>

저작자표시

'공부 > JQuery' 카테고리의 다른 글

JQuery_[ input type="text" 입력시 3자리 콤마 자동찍기 ]  (0) 2015.03.17
JQuery_[위치기반 필터 선택자]  (0) 2015.01.29
JQuery_[ $.param() / serialize() ]  (0) 2014.08.26
JQuery_[ Scroll 이벤트 ]  (0) 2014.08.25
JQuery_[ $.extend() ]  (0) 2014.08.25


Selecter 

Comment 

 :first

 첫 번째 일치하는 엘리먼트를 선택 

 :last

 마지막으로 일치하는 엘리먼트를 선택

 :first-child

 각 리스트의 첫 번째 리스트 아이템을 반환

 :fast-child

 각 리스트의 마지막 리스트 아이템을 반환

 :only-child

 부모의 형제가 없는 자식인 엘리먼트를 선택

 :nth-child(n)

 부모의 n번째 자식인 모든 엘리먼트를 선택

 :even

 짝수 번째 엘리먼트를 선택

 :odd

 홀수 번째 엘리먼트를 선택

 :eq(n)

 일치하는 n번 'index'의 엘리먼트를 선택

 :gt(n)

 n번 'index'를 포함하지 않고 이후의 엘리먼트와 일치하는 엘리먼트를 선택(큰)

 :lt(n)

 n번 'index'를 포함하지 않고 이전의 엘리먼트와 일치하는 엘리먼트를 선택(작은)


ex)

$(document).read(function() {

// id="el" 하위 li 태그 중 첫 번째 엘리먼트 선택

var el = $('#el > li:first');

el.css('color', 'red');

});


<div>

2-1-1

<ul id="el">

<li>2-1-1-1</li>

<li>2-1-1-2</li>

<li>2-1-1-3</li>

<li>2-1-1-4</li>

<li>2-1-1-5</li>

</ul>

</div>

저작자표시

'공부 > JQuery' 카테고리의 다른 글

JQuery_[ input type="text" 입력시 3자리 콤마 자동찍기 ]  (0) 2015.03.17
JQuery_[상태 필터 선택자]  (0) 2015.01.29
JQuery_[ $.param() / serialize() ]  (0) 2014.08.26
JQuery_[ Scroll 이벤트 ]  (0) 2014.08.25
JQuery_[ $.extend() ]  (0) 2014.08.25

- $.param() 와 $(fromName).serialize() 모두 요청 매개변수 문자열로 만들어주는 메서드이다.


차이점은 

$.param() 은 파라미터(?) 가 JavaScript Object 타입이어야 하고, 

serialize() 는 입력양식의 Form 에서 바로 문자열로 만들 수 있다.


- $.param() 예제>

    <script src="http://code.jquery.com/jquery-1.7.js"></script>

    <script>

        $(document).ready(function () {

            var person= {

                name: 'Daniel',

                age: '29',

                address: 'Seoul'

            }

            alert($.param(person));

        });

    </script>

출력 : name=Daniel&age=29&address=Seoul



- serialize() 예제>

    <script src="http://code.jquery.com/jquery-1.7.js"></script>

    <script>

        $(document).ready(function () {


            $("#dataForm").submit(function (event) {

                alert($(this).serialize());

            });

        });

    </script>

</head>

<body>

    <form id="dataForm">

        <table>

            <tr>

                <td><label for="name">Name</label></td>

                <td><input type="text" name="name" id="name" /></td>

            </tr>

            <tr>

                <td><label for="age">Age</label></td>

                <td><input type="text" name="age" id="age" /></td>

            </tr>

            <tr>

                <td><label for="address">Address</label></td>

                <td><input type="text" name="address" id="address" /></td>

            </tr>

        </table>

        <input type="submit" value="Get Ajax String" />

    </form>

</body>

출력 : name=Daniel&age=29&address=Seoul


저작자표시

'공부 > JQuery' 카테고리의 다른 글

JQuery_[상태 필터 선택자]  (0) 2015.01.29
JQuery_[위치기반 필터 선택자]  (0) 2015.01.29
JQuery_[ Scroll 이벤트 ]  (0) 2014.08.25
JQuery_[ $.extend() ]  (0) 2014.08.25
JQuery_[ jQuery 속성선택자 ]  (0) 2014.08.22

- 사이트에서 스크롤이 문서 끝까지 내려가면 자동으로 포스트를 추가하여 스크롤을 늘리는 이벤트(무한스크롤)

우선, 사용자가 마우스 스크롤을 움직으면 무조건 Scroll() 이벤트가 발생한다.

무한 스크롤을 만들려면 화면 끝까지 스크롤이 도달했다는 사실을 인지하여야 한다.

Document 객체의 height 속성은 문서 전체의 높이를 의미한다.

스크롤이 페이지에서 끝까지 내려가면, window 객체의 ScrollTop 속성과 height 속성 값을 합한 것이

Document 객체의 높이와 같아진다. 이때 포스트를 추가하는 방식이다.

예 사이트) http://mixsh.com

 

ex>
    <script src="http://code.jquery.com/jquery-1.7.js"></script>
    <script>
        $(document).ready(function () {
            $(window).scroll(function () {
                var scrollHeight = $(window).scrollTop() + $(window).height();
                var documentHeight = $(window).height();

                if (scrollHeight >= documentHeight) {
                    for (var i = 0; i < 10; i++) {
                        $('body').append('<h1>Scroll Add</h1>');    // 임의로 그냥 텍스트 추가
                    }
                }
            });
        });
    </script>

 

우선 페이지에 스크롤 표시를 위해  <body> 태그에 데이타를 입력해서 스크롤을 이용할수 있도록 세팅을 한 후에 실험해야 한다.

저작자표시

'공부 > JQuery' 카테고리의 다른 글

JQuery_[위치기반 필터 선택자]  (0) 2015.01.29
JQuery_[ $.param() / serialize() ]  (0) 2014.08.26
JQuery_[ $.extend() ]  (0) 2014.08.25
JQuery_[ jQuery 속성선택자 ]  (0) 2014.08.22
JQuery_[ li 리스트 항목 순서 변경하기 ]  (0) 2014.04.16

- JQuery $.extend() 메서드는 객체확장시 사용된다.


    <script src="http://code.jquery.com/jquery-1.7.js"></script>
    <script>
        $(document).ready(function () {
            var object = {};

            object.name = 'Daniel';
            object.gender = 'Male';
            object.part = 'Second Guitar';
        });
    </script>

 

이렇게 추가를 하게 될 떄, 추가 속성의 수가 적으면 문제가 되지 않지만, 속성의 수가 많으면 아주 불편해진다.

이럴때 사용.

또한, 첫번째 매개변수로 입력한 객체에 추가하여 합칠 때도 사용된다.

    <script src="http://code.jquery.com/jquery-1.7.js"></script>
    <script>
        $(document).ready(function () {

            var object2 = { name: 'Daniel' };

            $.extend(object2, {
                gender: 'Male',
                part: 'seCond Guitar'
            });

            var outPut = '';
            $.each(object2, function (key, item) {
                outPut += key + ': ' + item + '\n';
            });
            alert(outPut);
        });
    </script>

 

 

 

저작자표시

'공부 > JQuery' 카테고리의 다른 글

JQuery_[ $.param() / serialize() ]  (0) 2014.08.26
JQuery_[ Scroll 이벤트 ]  (0) 2014.08.25
JQuery_[ jQuery 속성선택자 ]  (0) 2014.08.22
JQuery_[ li 리스트 항목 순서 변경하기 ]  (0) 2014.04.16
JQuery_[ 'undefined' 값 체크하기 ]  (0) 2013.11.05

- jQuery 속성 선택자


 선택자 형태

 설명 

 요소[속성] 

 특정 속성을 가지고 있는 문서 객체를 선택 

 요소[속성=값]

 속성 안의 값이 특정 값과 같은 문서 객체를 선택

 요소[속성~=값]

 속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택

 요소[속성^=값]

 속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택 

 요소[속성$=값]

 속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택

 요소[속성*=값]

 속성 안의 값이 특정 값을 포함하는 문서 객체를 선

ex)

    <script src="http://code.jquery.com/jquery-1.7.js"></script>

    <script>

        $(function () {

            $("input[type=text]").val('Hello Jquery');

        });

    </script>

저작자표시

'공부 > JQuery' 카테고리의 다른 글

JQuery_[ Scroll 이벤트 ]  (0) 2014.08.25
JQuery_[ $.extend() ]  (0) 2014.08.25
JQuery_[ li 리스트 항목 순서 변경하기 ]  (0) 2014.04.16
JQuery_[ 'undefined' 값 체크하기 ]  (0) 2013.11.05
JQuery_[ SelectBox 활용 값제어 ]  (0) 2013.07.16


    <div id="bbsTotalDiv">

        <ul id="divList">

            <li id="shareFileList">

                <a href="<c:url value="/bo/bbs/main/tab/AR_searchList.do"/>?bbsCd=${Bbs.BBS_SHARE_FILE}">                     <span onclick="jsMove('shareFileList');">공유 파일</span></a>

            </li>

            <li id="mediaList">

                <a href="<c:url value="/bo/bbs/main/tab/AR_searchList.do"/>?bbsCd=${Bbs.BBS_MEDIA}">

                <span onclick="jsMove('mediaList');">언론보도</span></a>

            </li>

            <li id="photoList">

                <a href="<c:url value="/bo/bbs/main/tab/AR_searchList.do"/>?bbsCd=${Bbs.BBS_EVENT_PHOTO}">                   <span onclick="jsMove('photoList');">행사사진</span></a>

            </li>

            <li id="movieList">

                <a href="<c:url value="/bo/bbs/main/tab/AR_searchList.do"/>?bbsCd=${Bbs.BBS_MOVIE}">

                <span onclick="jsMove('movieList');">동영상</span></a>

            </li>

            <li id="shareImgList">

                <a href="<c:url value="/bo/bbs/main/tab/AR_searchList.do"/>?bbsCd=${Bbs.BBS_SHARE_IMG}">                       <span onclick="jsMove('shareImgList');">공유 이미지</span></a>

            </li>

            <li id="prList">

                <a href="<c:url value="/bo/bbs/main/tab/AR_searchList.do"/>?bbsCd=${Bbs.BBS_PR}">

                <span onclick="jsMove('prList');">광고/홍보물</span></a>

            </li>

        </ul>

    </div>


- li  리스트가 이렇게 있으면.. 선택시 이벤트를 주고 (jsMove) Jquery 에서 순서변경

- Jquery 함수

var jsMove = function(id) {

    $("#" + id).prependTo("#divList");

};


저작자표시

'공부 > JQuery' 카테고리의 다른 글

JQuery_[ $.extend() ]  (0) 2014.08.25
JQuery_[ jQuery 속성선택자 ]  (0) 2014.08.22
JQuery_[ 'undefined' 값 체크하기 ]  (0) 2013.11.05
JQuery_[ SelectBox 활용 값제어 ]  (0) 2013.07.16
JQuery_ [ jQuery PlugIn - Validate (유효성 검사) ]  (0) 2013.03.26

- JQuery Form 에서의 입력값을 검증하다가 Type 이 'undefined' 이면 당황한다...

  DatePicker 의 입력값을 확인하려고

  $('#DatePickerVal').val() 해서 Null 체크하니 'undefined' 가 뜬다.. 비교를 못한다. Null 확인도 못한다. 당황했다.

 

if( jQuery.type(입력값) === 'undefined' ) {

alert('값을 입력하세요.');

return false;

}

모 이런식으로 대처하면 된다.

저작자표시

'공부 > JQuery' 카테고리의 다른 글

JQuery_[ jQuery 속성선택자 ]  (0) 2014.08.22
JQuery_[ li 리스트 항목 순서 변경하기 ]  (0) 2014.04.16
JQuery_[ SelectBox 활용 값제어 ]  (0) 2013.07.16
JQuery_ [ jQuery PlugIn - Validate (유효성 검사) ]  (0) 2013.03.26
JQuery_[ trigger() 이벤트 강제 실행 ]  (0) 2013.01.21

jQuery로 선택된 값 읽기

$("#selectBox option:selected").val();

$("select[name=name]").val();

 

jQuery로 선택된 내용 읽기

$("#selectBox option:selected").text();

 

선택된 위치

var index = $("#test option").index($("#test option:selected"));

 

-------------------------------------------------------------------

 

// Add options to the end of a select

$("#selectBox").append("<option value='1'>Apples</option>");

$("#selectBox").append("<option value='2'>After Apples</option>");

 

// Add options to the start of a select

$("#selectBox").prepend("<option value='0'>Before Apples</option>");

 

// Replace all the options with new options

$("#selectBox").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option>");

 

// Replace items at a certain index

$("#selectBox option:eq(1)").replaceWith("<option value='2'>Some apples</option>");

$("#selectBox option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");

 

// 지정된 index 값으로 select 하기

$("#selectBox option:eq(2)").attr("selected", "selected");

 

// text 값으로 select 하기

$("#selectBox").val("Some oranges").attr("selected", "selected");

 

// value 값으로 select 하기

$("#selectBox").val("2");

 

// 지정된 인덱스 값의 item 삭제

$("#selectBox option:eq(0)").remove();

 

// 첫번째 item 삭제

$("#selectBox option:first").remove();

 

// 마지막 item 삭제

$("#selectBox option:last").remove();

 

// 선택된 옵션의 text 구하기

alert($("#selectBox option:selected").text());

 

// 선택된 옵션의 value 구하기

alert($("#selectBox option:selected").val());

 

// 선택된 옵션 index 구하기

alert($("#selectBox option").index($("#selectBox option:selected")));

 

// SelecBox 아이템 갯수 구하기

alert($("#selectBox option").size());

 

// 선택된 옵션 앞의 아이템 갯수

alert($("#selectBox option:selected").prevAll().size());

 

// 선택된 옵션 후의 아이템 갯수

alert($("#selectBox option:selected").nextAll().size());

 

// Insert an item in after a particular position

$("#selectBox option:eq(0)").after("<option value='4'>Some pears</option>");

 

// Insert an item in before a particular position

$("#selectBox option:eq(3)").before("<option value='5'>Some apricots</option>");

 

// Getting values when item is selected

$("#selectBox").change(function() {

           alert($(this).val());

           alert($(this).children("option:selected").text());

});

저작자표시

'공부 > JQuery' 카테고리의 다른 글

JQuery_[ li 리스트 항목 순서 변경하기 ]  (0) 2014.04.16
JQuery_[ 'undefined' 값 체크하기 ]  (0) 2013.11.05
JQuery_ [ jQuery PlugIn - Validate (유효성 검사) ]  (0) 2013.03.26
JQuery_[ trigger() 이벤트 강제 실행 ]  (0) 2013.01.21
JQuery_[ one() 이벤트(이벤트를 한번만 연결) ]  (1) 2013.01.21

+ Recent posts

티스토리툴바