//전체
$('#tbodyList input[type=checkbox]').length;
//체크된것만
$('#tbodyList input[type=checkbox]:checked').length;
//체크안된것만
$('#tbodyList input[type=checkbox]:not(:checked)').length;


화면 전체에 체크박스를 체크하고싶으면 #tbodyList 제거하면 됩니다.

ajax 는 Asynchronous Javascript and Xml 의 약자인데, 비동기식 자바스크립트와 XML 이라고 보면된다


javascript 의 XMLHttpRequest  를 이용하여 직접 구현하여도 되지만, 

jQuery 를 이용하는 것이 훨씬 더 간단하게 구현할 수 있다.



가장 큰 특징은 현재 페이지에서 페이지의 이동/전환없이, 특정 이벤트를 통해 서버와 http 통신을 할 수 있다는 것이며, 이를 통해 현재 페이지의 일부분을 업데이트 할 수 있다는 것이다.



function ajaxAct() {


$.ajax ({

type : "GET",                     // GET 또는 POST

url : 'updatetest.htm',          // 서버측에서 가져올 페이지

data : 'a=1&b=2&c=3',       // 서버측에 전달할 parameter

timeout : 5000,                  // 응답대기시간 

dataType : 'html',               // html , javascript, text, xml, jsonp 등이 있다

beforeSend: function() {      // ajax 요청하기전에 실행되는 함수

},

      success : function(data) {     // 정상적으로 완료되었을 경우에 실행된다

dataAct(data);              // data 인수에는 return 되어진 data 가 저장되어 있다

},

error : function(request, status, error ) {   // 오류가 발생했을 때 호출된다. 

console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);

},

complete : function () {   // 정상이든 비정상인든 실행이 완료될 경우 실행될 함수

}

});

}



이때, success , error, complete 대신에 done, fail, always 를 사용해도 된다. 


$.ajax ({


})

.done(function(){ console.log("요청 성공시 호출") })

.fail(function(){ console.log("요청 실패시 호출") })

.always(function(){ console.log("성공 실패 상관없이 호출") })




예를들어, 아래와 같이 코딩한 후 실행을 시킨다면


$.ajax ({

url : "request.php",

success : function(data) { console.log("success")},

error : function(data) { console.log("success")},

complete : function(data) { console.log("success")},

})

.done(function(){ console.log("done") })

.fail(function(){ console.log("fail") })

.always(function(){ console.log("always") })


콘솔에 표시되는 순서는 다음과 같다.


1. 성공일 경우 : success > complete > done > always

2. 실패일 경우 : error > complete > fail > always





GET 방식을 이용하는 경우라면 아래와 같이 parameter 전달시에 URL 에 추가해서 전달할 수도 있다. 


url : 'updatetest.htm?name=이름&sex=male',



위의 ajaxAct() 를 실행시키면 updatetest.htm 을 불러오게 될텐데 만약, 아래와 같이 코딩한다면,

정상적으로 동작하지 않게된다. 왜냐하면 href 로 인해 페이지의 전환이 일어나게되고

페이지의 전환이 생기게되면 ajax 요청은 무시되기 때문이다. 


그러므로 ajax 요청은 페이지 전환없이, javascript 함수등을 이용하여 호출해 주어야 한다. 





본 포스팅은 아래 포스팅을 참고하였음



출처: http://doolyit.tistory.com/20 [동해둘리의 IT Study]

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery.min.js"></script>
    
<script>
$(function() {
  $( "#datepicker1" ).datepicker({
    dateFormat: 'yy/mm/dd'
  });
});
</script>
    
생년월일: <input type="text" id="datepicker1">



한국어로 

<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

<script>
$(function() {
  $( "#datepicker1" ).datepicker({
    dateFormat: 'yy-mm-dd',
    prevText: '이전 달',
    nextText: '다음 달',
    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: ['일','월','화','수','목','금','토'],
    showMonthAfterYear: true,
    changeMonth: true,
    changeYear: true,
    yearSuffix: '년'
  });
});
</script>
    
생년월일: <input type="text" id="datepicker1">


시작 ~ 끝

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

<script>
    $(function() {
        $("#datepicker1, #datepicker2").datepicker({
            dateFormat: 'yy-mm-dd'
        });
    });

</script>

<p>조회기간:
    <input type="text" id="datepicker1"> ~
    <input type="text" id="datepicker2">
</p>



시작 ~ 끝 (한국어)


<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script>
  $.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd',
    prevText: '이전 달',
    nextText: '다음 달',
    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: ['일', '월', '화', '수', '목', '금', '토'],
    showMonthAfterYear: true,
    yearSuffix: '년'
  });

  $(function() {
    $("#datepicker1, #datepicker2").datepicker();
  });

</script>
<p>조회기간:
  <input type="text" id="datepicker1"> ~
  <input type="text" id="datepicker2">
</p>


메소드

addClass( class )    : 매치된 요소들의 각 집합에 지정된 CSS 클래스를 추가한다.

hasClass( class )    : 지정된 클래스가 매치된 요소 집합 중 최소 한 군데 이상 적용되어 있다면 true를 반환한다.

removeClass( class ) : 매치된 요소들의 각 집합에서 지정된 CSS 클래스 혹은 모든 클래스를 제거한다.

toggleClass( class ) : 지정된 클래스가 적용되지 않았다면 적용하고, 이미 적용되어 있다면 제거한다.

attr( name )         : 메치된 첫 번째 요소의 특정 어트리뷰트에 접근하여 값을 가져온다. 만일, 지정된 어트리뷰트 명이 존재하지 않는다면 undefined가 반환된다. 어트리뷰트에는 title, alt, src, href, width, style와 같은 것들이 해당된다.

attr( properties )   : 모든 매치되는 요소들의 어트리뷰트를 키/값 개체로 설정한다.

attr( key, value )   : 모든 매치되는 요소들의 단일 어트리뷰트의 값을 지정한다.

attr( key, fn )      : 모든 매치되는 요소들의 단일 어트리뷰트에 대해 계산된 값을 지정한다.

removeAttr( name )   : 매치된 요소 각각으로부터 해당 어트리뷰트를 제거한다


.css("name")

.css("name", "value")

.css({"name":"value", "name":"value", "name":"value"})


<p>TEST CSS</p>

 

<script>

$('p').css({'color':'red', 'font-weight':'bold'})

<script>

1. value값으로 체크하기


$("#radioA:radio[value='test']").attr("checked", true);



2. value값으로 체크 확인


$("#radioA:radio[value='test']").is(":checked");

* true / false 반환



3. 체크된 라디오버튼 value 값 가져오기


$('#radioA:checked').val();

$(":radio[id='radioA']:checked").val();



4. 체크 해제


$("#radioA").removeAttr("checked");



5. 라디오버튼 활성화/비활성화 처리


- 비활성화

$("#radioA").attr( "disabled" );


- 활성화

$("#radioA").removeAttr( "disabled" );



$('input:radio[name=이름]').is(':checked');


$('input:checkbox[name=이름]').is(':checked');

결과는  true / false 로 나옴.

'개발 > JQUERY' 카테고리의 다른 글

jquery datepicker(한글)  (0) 2017.08.01
jquery css 적용 방법  (0) 2017.07.26
jquery 배열, for문, 향상된 for문 each 객체의 확장  (0) 2017.04.18
jquery 숫자만 입력받기  (0) 2017.04.17
Jquery Number 숫자 유효성 체크  (0) 2017.04.05

Foreach와 같은 jQuery


$.each(array,function(index, item){


var output='';



output+='<a href="'+item.link+'">';


output+='<h1>'+item.name+'</h1>';


output+='</a><br>';



document.body.innerHTML+=output;


})




forEach응용방법


array.forEach(function (item){


//console.log(item.name+' / '+item.link);



var output='';


output+='<a href="'+item.link+'">';


output+=item.name;


output+='</a><br>';



document.body.innerHTML+=output;



});




배열과 For문, 향상된 FOR문


 


<script type="text/javascript" src="./js/jquery-2.1.4.js"></script>


<script type="text/javascript">


    $(document).ready(function(){


        var array=[


                {name:'Naver',link:'http://www.naver.com'},


                {name:'Daum',link:'http://www.daum.net'},


                {name:'google',link:'http://www.google.com'}                


        ];


        //for    


        for(var i=0;i<array.length;i++){


            console.log(array[i].name+'/'+array[i].link);


        }


        for(var i in array){


            console.log(array[i].name+'/'+array[i].link);


        }


    });


</script>




배열관리 .each


 


<script type="text/javascript" src="./js/jquery-2.1.4.js"></script>


<script type="text/javascript">


    $(document).ready(function(){


        $('h2').each(function(index,item){


            //console.log(index);


            //console.log(item);


            //console.log(item.innerHTML);


            this.innerHTML='hello';


            


        })


    });


</script>


<body>


    <h2>item-0</h2>


    <h2>item-1</h2>


    <h2>item-2</h2>


    <h2>item-3</h2>


</body>




객체의 확장


 


<script type="text/javascript" src="./js/jquery-2.1.4.js"></script>


<script type="text/javascript">


    $(document).ready(function(){


        var object={name:'윤인성'};


        


        $.extend(object,{


            region:'서울특별시 강서구',


            part:'세컨드 기타'


        })


        


        var output='';


        $.each(object, function(key,item){


            output+=key+' : '+item+'\n';


        })


        alert(output);


    });


</script>


[출처] http://blog.naver.com/skawo32167/220493716793

1
2
3
4
5
6
7
8
9
10
11
/*
** 폼
**
** <input type="text" numberonly="true" />  // 숫자만 입력 가능한 텍스트박스
** <input type="text" datetimeonly="true" /> // 숫자, 콜론(:), 하이픈(-)만 입력 가능한 텍스트박스
*/
$(function()
{
 $(document).on("keyup""input:text[numberOnly]"function() {$(this).val( $(this).val().replace(/[^0-9]/gi,"") );});
 $(document).on("keyup""input:text[datetimeOnly]"function() {$(this).val( $(this).val().replace(/[^0-9:\-]/gi,"") );});
});


만약 on 메소드가 없는 존나 옛날 버전이라면


1
2
3
4
5
6
7
8
9
$(function()
{
    $("input:text[numberOnly]").live("keyup"function() {
        $(this).val( $(this).val().replace(/[^0-9]/gi,"") );
    });
    $("input:text[datetimeOnly]").live("keyup"function(){
        $(this).val( $(this).val().replace(/[^0-9:\-]/gi,"") );
    });
});

으로 해주면 된다. 


약간에 문제가 있는듯 합니다.

한글만 입력하고 focus가 나가면 한글 1글자가 남는.....


출처: http://hobbiez.tistory.com/396 [취미생활]

입력 받은 값 숫자 유효성 체크입니다.


<input type="text" id="test" value="123abc456"/>

var test = $('#test').val();

if ( $.isNumeric(test) ) {

alert('숫자만 입력해주세요.');

$('#test').val('');

}


이런식으로 체크하고 초기화 하면 끝

체크여부 확인


   //check : true / uncheck : false

   $("#chkBox").is(":checked") ;

   $("input:checkbox[id='chkBox']").is(":checked") ;



   * 1.6이상일때 권장 사용법

   $("#chkBox").prop("checked") ;



체크박스 전체 선택하기 / 해제하기


  //전체 선택하기

  $("#chkBox").prop('checked', true) ;

  $("#chkBox").attr('checked', true) ;


  //전체 해제하기

  $("#chkBox").prop('checked', false) ;

  $("#chkBox").attr('checked', false) ;


체크박스 갯수 가져오기


  //선택된 체크박스 갯수 구하기

  $("#chkBox:checked").length ;


  //전체 체크박스 갯수 구하기

  $("#chkBox").length ;

'개발 > JQUERY' 카테고리의 다른 글

jquery 숫자만 입력받기  (0) 2017.04.17
Jquery Number 숫자 유효성 체크  (0) 2017.04.05
jQuery 좌표구하기  (0) 2017.03.17
ajax 통싱할때 form jquery로 한꺼번에 넘기기[serialize()  (0) 2017.03.17
jquery 모음  (0) 2017.03.17

정말 개고생했습니다.......ㅠ_ㅠ 

기존에 좌표 구하는 방식은

document.getElementById("ID이름").offsetTop; 

document.getElementById("ID이름").offsetLeft; 

이런식으로 좌표를 구했다.

하지만

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

이런 DOCTYPE이 들어가는 순간 저런식으로 구하면 좌표는 0,0 이 나온다.

 

그래서 찾은 jQuery 명령어

$("#ID이름").offset().top;

$("#ID이름").offset().left;

 

이런식으로 구하니 DOCTYPE 상관없이 구해온다.^^

 

 

function getDrawableElement(inDocument) {

    if (isQuirksMode(inDocument)) {

        var body = inDocument.getElementsByTagName('body')[0];

        return body;

    }

    else {

        // standards mode

        return inDocument.documentElement;

    }

}

function $top(name) {

    var drawableElement = getDrawableElement(document);  

    var screenPosition = document.getElementsByName("secureEelement")[0].getBoundingClientRect();

    return (screenPosition.top + drawableElement.scrollTop);

}

function $left(name) {

    var drawableElement = getDrawableElement(document); 

    var screenPosition = document.getElementsByName("secureEelement")[0].getBoundingClientRect();

    return (screenPosition.left + drawableElement.scrollLeft);

}

+ Recent posts