문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== jQuery ======
<WRAP left notice 80%>
  * description : jQuery 관련 내용 기술
  * author      : 주레피
  * email       : dhan@repia.com
  * lastupdate  : 2020-03-18
</WRAP>

===== 속성 변경 =====
[[http://seras.tistory.com/97|jquery onclick 속성 변경]] \\

===== Ajax =====
[[https://sas-study.tistory.com/191|[Jquery] 제이쿼리, $.ajax() 함수 활용. 비동기 통신]] \\

===== Autocomplete =====
자동완성 기능 \\
[[https://programmer93.tistory.com/2|검색어 자동완성 - jQuery Autocomplete 사용법 - 삽질중인 개발자]] \\
[[https://shplab.tistory.com/entry/jQuery%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-Autocomplete-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%B5%EC%85%98-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0|[jQuery] 제이쿼리 Autocomplete(자동완성) 사용법 및 옵션 살펴보기]] \\
[[https://darkangelus.tistory.com/69|autocomplete 높이 고정]]\\
[[https://www.youtube.com/watch?v=hijqUHblMHs|jQuery UI Autocomplete: Hightlight Matching Text in jQuery UI Autocomplete]] \\
\\
===== Case Study =====
==== Button ====
값 가져오기
<code javascript>
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>button Test</title>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
            $( document ).ready( function() {
                $("#button").click(function(){
                    alert($(this).attr('value'));
                });
            });
        </script>
    </head>
    <body>
        <button id="button" value="huskdoll"> 클릭 </button>
    </body>
</html>
</code>
> 값 입력은 $(this).attr('value', ${value}); 형식으로 진행

[[https://huskdoll.tistory.com/69|jQuery 버튼값 가져오기]]

==== Click ====
How to remove "onclick" with JQuery
<code javascript>
// Old Way(pre-1.7)
$(selector).attr("onclick", "").unbind("click");
// New Way(1.7+)
$(selector).prop("onclick", null).off("click");
</code>

[[https://api.jquery.com/click/|Official docs .click()]]

==== Closest(), parents() ====
[[https://ismydream.tistory.com/94|jQuery closest(), parents() 메소드의 차이]] \\



==== DatePicker ====
DatePicker란 jQuery에서 제공하는 widget중 하나로, 날짜를 다룰 때 UI 형식으로 쉽게 날짜를 선택 하도록 도와주는 역할을 하는 widget이다

{{:wiki:form_datepicker.png?nolink&400 |}}
(DatePicker를 사용하기 위해서는 기본적으로 다음의 3가지 File을 import해야 한다)

<code javascript>
// jQuery UI CSS파일 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />  
// jQuery 기본 js파일
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
// jQuery UI 라이브러리 js파일
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>  
</code>

DatePicker의 기본적인 코드는 다음과 같다

<code javascript>
$(function() {
  $( "#testDatepicker" ).datepicker({
        buttonImage: "button.png", //옵션
        buttonImageOnly: true      //옵션 
  });
});
</code>

DatePicker 에서 사용 가능한 Option은 다음과 같다

[[http://www.nextree.co.kr/content/images/2016/09/jhkim-140522-datepicker-05.png|DatePicker 옵션]]

==== Each ====
[[https://webclub.tistory.com/455|jQuery - each() 메서드]]
$.each(object, function(index, item){}); \\
배열과 length속성을 갖는 배열과 유사 배열 객체들을 index를 기준으로 반복할 수 있습니다. \\
첫번째 매개변수로 배열이나 객체를 받으며, 두번째 매개변수로 콜백함수를 받습니다. \\
<code javascript>
var obj = { 
  daum: 'http://www.daum.net'
  , naver: 'http://www.naver.com'
};
$.each(obj, function(index, item){
  var result = '';
  result += index + ' : ' + item;
  console.log(result);
}]
출력 결과
daum : http://www.daum.net
naver : http://www.naver.com
</code>

$(selector).each(function(index, item{});
<code html>
<ul cliass="list">
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ior sit amet.</li>
    <li>Lorem ipsum </li>
<ul>

$('.list li').each(function(idex, item){
    $(item).addClass('li_0' + index);
    // or
    $(this).addClass('li_0' + index);
});
</code>

continue, break 방법
<code javascript>

</code>

[[http://blog.mahler83.net/2013/09/jQuery-each-loop%EB%A5%BC-%EB%8F%8C%EB%A9%B4%EC%84%9C-continue%2C-break-%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/|jQuery each loop를 돌명서 continue, break 하는 방법]]


[[https://findfun.tistory.com/193|jQuery API 정복 - 선택된 요소만큼 루프, each()]]

==== Format ====
[[https://stackoverflow.com/questions/477892/in-jquery-whats-the-best-way-of-formatting-a-number-to-2-decimal-places|In jQuery, what's the best way of formatting a number to 2 decimal places?]] \\

<code javascript>
<script type="text/javascript">

    // mini jQuery plugin that formats to two decimal places
    (function($) {
        $.fn.currencyFormat = function() {
            this.each( function( i ) {
                $(this).change( function( e ){
                    if( isNaN( parseFloat( this.value ) ) ) return;
                    this.value = parseFloat(this.value).toFixed(2);
                });
            });
            return this; //for chaining
        }
    })( jQuery );

    // apply the currencyFormat behaviour to elements with 'currency' as their class
    $( function() {
        $('.currency').currencyFormat();
    });

</script>   
<input type="text" name="one" class="currency"><br>
<input type="text" name="two" class="currency">
</code>

==== Json ====
[[https://java119.tistory.com/54|[JavaScript] JSON 데이터 다루기 문법 총 정리]]

==== Map function for objects (instead of arrays) ====
<code javascript>
myObject = { 'a':1, 'b':2, 'c':3 };
newObject = myObject.map(function (value, label) {
    return value*value;
});

// newObject is now { 'a':1, 'b':4, 'c':9 }
</code>

==== Radio ====
[[https://webcoding.tistory.com/entry/JSP-JSTL-cout-%ED%83%9C%EA%B7%B8-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0|jQuery select, radio의 disabled 설정]] \\
How to reset radiobuttions in jQuery so that none is checked
<code javascript>
Old Way(pre-1.6)
$('input[name="${name}"]').attr('checked', false);
New War(1.6+)
$('input[name="${name}"]').prop('checked', false);
</code>

[[https://stackoverflow.com/questions/977137/how-to-reset-radiobuttons-in-jquery-so-that-none-is-checked|https://stackoverflow.com/questions/977137/how-to-reset-radiobuttons-in-jquery-so-that-none-is-checked]]

Validate radio buttons
<code javascript>
var valid = false;
$('#formName').find(':input:radio').each(function(){
    if($(this).prop('checked'))
        valid = true;
});

if(!valid)
  return false;
</code>
[[https://stackoverflow.com/questions/11886274/validate-radio-buttons-with-jquery|Validate radio buttons with jquery?]]

[[https://blog.naver.com/perpectmj/220172693359|[jQuery] 라디오버튼 및 텍스트박스 비활성화시키기 "readonly" "disabled"]]
==== String 생성, 변경하기 ====
Converting a value to string in javascript
<code javascript>
1. value.toString()
2. "" + value
3. String(value)
</code>
[[https://2ality.com/2012/03/converting-to-string.html|https://2ality.com/2012/03/converting-to-string.html]]

==== Select ====
text로 선택하기
<code javascript>
var selected_text = '111111';
$("#S option").filter(function() { return (this.text==selected_text); }).attr('selected', true);
</code>
[[http://blog.daum.net/hepidaum/62|select box 옵션을 text로 선택하기]]

==== Trigger(트리거) ====
  * [[https://findfun.tistory.com/325|trigger(), 함수 실행시키기]]

===== Plugin =====
  * [[wiki:javascript:jquery:jtree|Jtree]]
  * [[wiki:javascript:jquery:jquery-ui|jQuery-UI]]

===== Tip =====
  * [[jquery:form submit 전 input value 체크]]
  * [[jquery:로딩시 이미지 크기 자동 조절 하기|로딩시 이미지 크기 자동 조절 하기]]
  * [[wiki:jquery:테이블 행(TR) 삭제하기|테이블 행(TR) 삭제하기]]
  * [[wiki:jquery:부모태그 가져오기|부모태그 가져오기]]
  * [[wiki:jquery:클립보드 복사|클립보드 복사]]
  * [[wiki:jquery:selector (fast.Jsoup)|selector (fast.Jsoup)]]
  * [[wiki:jquery:스크립트 로드 순서]]

===== Troubleshooting =====

===== Ref =====
* [[https://zetawiki.com/wiki/JQuery_%EB%B0%B0%EA%B2%BD%EC%83%89,_%EA%B8%80%EC%9E%90%EC%83%89_%EB%B3%80%EA%B2%BD|Jquery로 버튼 배경,글자색 변경하기]]

===== Case Study(jQuery Note) =====
  * [[wiki:javascript:jquery:jquery_note]]
\\

===== jquery 자신을 포함한 html 가져오기 =====
\\
<code jquery>
$('selector').wrap("<div/>").parent().html();  // div가 있는 경우
$('selector').parent().html();   // 적용   
</code>

{{tag>주레피 천호동밤안개 eleven jquery}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
