개발/jQuery에 해당되는 글 8건

숫자만 입력

개발/jQuery 2020. 3. 5. 09:33

예전에는 자바 스크립트로 코딩했었는데 

이번에는 jQuery로 하는 방법이다.

 

<input type="text" id="CALL_COUNT" name="CALL_COUNT"  maxlength="4" numberOnly />

 

위 텍스트 박스를 만들고

 

<script>

$("input:text[numberOnly]").on("keyup", function() {
    $(this).val($(this).val().replace(/[^0-9]/g,""));
});

</script>

 

하면 된다

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

input 붙여 넣기 방지  (0) 2017.10.17
대표적인 getter 메소드와 setter 메소드  (0) 2017.07.12
input 요소 선택  (0) 2017.07.12
jQuery 선택자  (0) 2017.07.12
비슷한 ID 가져오기  (0) 2017.07.07
,

input 붙여 넣기 방지

개발/jQuery 2017. 10. 17. 15:07

 

$("#objTBs1_0").bind('paste',function(e){
        var el = $(this);
        setTimeout(function(){
            var text = $(el).val();
            $("#objTBs1_0").val("");  //해당 text의 ID의 값을 초기화 시켜준다
        },100);
});

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

숫자만 입력  (0) 2020.03.05
대표적인 getter 메소드와 setter 메소드  (0) 2017.07.12
input 요소 선택  (0) 2017.07.12
jQuery 선택자  (0) 2017.07.12
비슷한 ID 가져오기  (0) 2017.07.07
,

대표적인 getter 메소드와 setter 메소드

개발/jQuery 2017. 7. 12. 14:16

<!DOCTYPE html>
<html lang="ko">

<head>
 <meta charset="UTF-8">
 <title>jQuery Element Access</title>
 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <script>
  $(function() {
   $("button").on("click", function() {
    // <img>요소의 src 속성값을 읽어오는 getter 메소드
    var imgSrc = $("img").attr("src");
    // <img>요소의 src 속성값을 새로운 값으로 설정하는 setter 메소드
    $("img").attr("src", "/examples/images/img_flag.png");
   });
  });
 </script>
</head>

<body>

 <h1>.attr() 메소드</h1>
 <p>아래의 버튼을 누르면 다음 이미지를 변경할 수 있어요!!</p>
 <button>src 속성 변경!</button><br><br>
 <img src="/examples/images/img_flower.png" style="width:320px; height:214px; border: 1px solid black">
</body>

</html>

 

 

메소드 설명
.html() 해당 요소의 HTML 콘텐츠를 반환하거나 설정함.
.text() 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함.
.width() 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정함.
.height() 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정함.
.attr() 해당 요소의 명시된 속성의 속성값을 반환하거나 설정함.
.position() 선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환함. (getter 메소드)
.val() <form>요소의 값을 반환하거나 설정함.

 

출처 tcp스쿨

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

숫자만 입력  (0) 2020.03.05
input 붙여 넣기 방지  (0) 2017.10.17
input 요소 선택  (0) 2017.07.12
jQuery 선택자  (0) 2017.07.12
비슷한 ID 가져오기  (0) 2017.07.07
,

input 요소 선택

개발/jQuery 2017. 7. 12. 10:53

<!DOCTYPE html>
<html lang="ko">

<head>
 <meta charset="UTF-8">
 <title>jQuery Element Selection</title>
 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <script>
  $(function() {
   $("button").on("click", function() {
    // 체크되어 있는 요소를 모두 선택함.
    $(":checked").next().text("체크되어 있는 요소는 이 요소입니다.");
   });
  });
 </script>
</head>

<body>

 <h1>Form 요소의 선택</h1>

 <form>
  <input type="checkbox" name="lecture" value="html"> <span>HTML</span> <br>
  <input type="checkbox" name="lecture" value="css"> <span>CSS</span> <br>
  <input type="checkbox" name="lecture" value="javascript"> <span>자바스크립트</span> <br>
  <input type="checkbox" name="lecture" value="jquery" checked> <span>제이쿼리</span>
 </form>
 <button>필터링</button>
 
</body>

</html>

 

위 소스에서 버튼을 클릭하면 체크 되어 있는 문항들의 텍스트가 변경 된다

 

선택자 설명
:button type 속성값이 "button"인 요소를 모두 선택함.
:checkbox type 속성값이 "checkbox"인 요소를 모두 선택함.
:file type 속성값이 "file"인 요소를 모두 선택함.
:image type 속성값이 "image"인 요소를 모두 선택함.
:password type 속성값이 "password"인 요소를 모두 선택함.
:radio type 속성값이 "radio"인 요소를 모두 선택함.
:reset type 속성값이 "reset"인 요소를 모두 선택함.
:submit type 속성값이 "submit"인 요소를 모두 선택함.
:text type 속성값이 "text"인 요소를 모두 선택함.
:input <input>, <textarea>, <select>, <button>요소를 모두 선택함.
:checked type 속성값이 "checkbox" 또는 "radio"인 요소 중에서 체크되어 있는 요소를 모두 선택함.
:selected <option>요소 중에서 선택된 요소를 모두 선택함.
:focus 현재 포커스가 가지고 있는 요소를 선택함.
:disabled 비활성화되어있는 요소를 모두 선택함.
:enabled 활성화되어있는 요소를 모두 선택함.

 

출처 tcp스쿨

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

input 붙여 넣기 방지  (0) 2017.10.17
대표적인 getter 메소드와 setter 메소드  (0) 2017.07.12
jQuery 선택자  (0) 2017.07.12
비슷한 ID 가져오기  (0) 2017.07.07
jQuery - select box 선택값 가져오기  (0) 2017.01.18
,

jQuery 선택자

개발/jQuery 2017. 7. 12. 09:23

<!DOCTYPE html>
<html lang="ko">

<head>
 <meta charset="UTF-8">
 <title>jQuery Element Selection</title>
 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <script>
  $(function() {
   $("button").on("click", function() {
    $("li:has(span)").text("<span>요소를 가지고 있는 아이템이에요!");
   });
  });
 </script>
</head>

<body>

 <h1>선택한 요소의 필터링</h1>

 <ul>
  <li>첫 번째 아이템이에요!</li>
  <li><span>두 번째</span> 아이템이에요!</li>
  <li>세 번째 아이템이에요!</li>
 </ul>
 <button>필터링</button>
 
</body>

</html>

 

위 소스에서 필터링 이란 버튼을 클릭하면 li 태그 중 span을 가지고 있는 두번째 아이템의 텍스트가 변경 된다.

 

선택자 설명
:eq(n) 선택한 요소 중에서 인덱스가 n인 요소를 선택함.
:gt(n) 선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택함.
:lt(n) 선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택함.
:even 선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택함.
:odd 선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택함.
:first 선택한 요소 중에서 첫 번째 요소를 선택함.
:last 선택한 요소 중에서 마지막 요소를 선택함.
:animated 선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택함.
:header 선택한 요소 중에서 h1부터 h6까지의 요소를 모두 선택함.
:lang(언어) 선택한 요소 중에서 지정한 언어의 요소를 모두 선택함.
:not(선택자) 선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택함.
:root 선택한 요소 중에서 최상위 루트 요소를 선택함.
:target 선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택함.
:contains(텍스트) 선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택함.
:has(선택자) 선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택함.
:empty 선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택함.
:parent 선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함.

 

 

 

출처 : tcp스쿨

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

대표적인 getter 메소드와 setter 메소드  (0) 2017.07.12
input 요소 선택  (0) 2017.07.12
비슷한 ID 가져오기  (0) 2017.07.07
jQuery - select box 선택값 가져오기  (0) 2017.01.18
jQuery - serialize()란? 사용방법  (0) 2017.01.18
,

비슷한 ID 가져오기

개발/jQuery 2017. 7. 7. 09:04

 

$("[id*='menu']");//menu를 포함하는


$("[id^='menu']");//menu로 시작하는


$("[id$='menu']");//menu로 끝 나는

 

같이 쓰려면

$("[id^='menu']"&&"[id$='_01']");  //menu로 시작하면서 _01로 끝나는 것을 찾을 수 있다.

 

추가로 체크된 박스 갯수 가져오기

var bb= $("[id^=objCBL1]:checked").length;  //objCBL1 로 시작하는 체크박스에서 체크된 갯수를 가져온다

별 신기한 것들이 다 있네

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

대표적인 getter 메소드와 setter 메소드  (0) 2017.07.12
input 요소 선택  (0) 2017.07.12
jQuery 선택자  (0) 2017.07.12
jQuery - select box 선택값 가져오기  (0) 2017.01.18
jQuery - serialize()란? 사용방법  (0) 2017.01.18
,

jQuery - select box 선택값 가져오기

개발/jQuery 2017. 1. 18. 15:53

[jquery] select  box 선택값 가져오기


// select box ID로 접근하여 선택된 값 읽기
$("#셀렉트박스ID option:selected").val();

// select box Name로 접근하여 선택된 값 읽기
$("select[name=셀렉트박스name]").val();

// 같은 방식으로 span과 같은 다른 태그도 접근 가능하다~
$("span[name=셀렉트박스name]").text();

// 선택된 값의 index를 불러오기
var index = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected"));

// 셀렉트 박스에 option값 추가하기
$("#셀렉트박스ID").append("<option value='1'>1번</option>");

// 셀렉트 박스 option의 맨앞에 추가 할 경우
$("#셀렉트박스ID").prepend("<option value='0'>0번</option>");

// 셀렉트 박스의 html 전체를 변경할 경우
$("#셀렉트박스ID").html("<option value='1'>1차</option><option value='2'>2차</option>");

// 셀렉트 박스의 index별로 replace를 할 경우
// 해당 객체를 가져오게 되면, option이 다수가 되므로 배열 객체가 되어 eq에 index를 넣어 개별 개체를 선택할 수 있다.
$("#셀렉트박스ID option:eq(1)").replaceWith("<option value='1'>1차</option>");

// 직접 index 값을 주어 selected 속성 주기
$("#셀렉트ID option:eq(1)").attr("selected", "selected");

// text 값으로 selected 속성 주기
$("#셀렉트ID")val("1번").attr("selected", "selected");

// value 값으로 selected 속성 주기
$("#셀렉트ID").val("1");

// 해당 index item 삭제하기
$("#셀렉트ID option:eq(0)").remove();

// 첫번째, 마지막 item 삭제하기
$("#셀렉트ID option:first").remove();
$("#셀렉트ID option:last").remove();

// 선택된 옵션의 text, value 구하기
$("#셀렉트ID option:selected").text();
$("#셀렉트ID option:selected").val();

// 선택된 옵션의 index 구하기
$("#셀렉트ID option").index($("#셀렉트ID option:selected"));

// 셀렉트박스의 아이템 갯수 구하기
$("#셀렉트ID option").size();

// 선택된 옵션 전까지의 item 갯수 구하기
$("#셀렉트ID option:selected").prevAll().size();

// 선택된 옵션 후의 item 갯수 구하기
$("#셀렉트ID option:selected").nextAll().size();

// 해당 index item 이후에 option item 추가 하기
$("#셀렉트ID option:eq(0)").after("<option value='3'>3번</option>");

// 해당 index item 전에 option item 추가하기
$("#셀렉트ID option:eq(3)").before("<option value='2'>2번</option>");

// 해당 셀렉트 박스에 change event binding 하기
$("#selectID").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});


[jquery] select  box 선택값 가져오기



출처: http://oingbong.tistory.com/175 [Oing]

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

대표적인 getter 메소드와 setter 메소드  (0) 2017.07.12
input 요소 선택  (0) 2017.07.12
jQuery 선택자  (0) 2017.07.12
비슷한 ID 가져오기  (0) 2017.07.07
jQuery - serialize()란? 사용방법  (0) 2017.01.18
,

jQuery - serialize()란? 사용방법

개발/jQuery 2017. 1. 18. 15:05

-serialize() 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다-

 

serialize()를 이용하면 파라미터  전달 시에

fname=값&femail=값&sex=값&job=값 이렇게 안해줘도 된다.


1. serialize()를 사용하지 않고 파라미터값을  전달시

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<form name="formname1" id="formname1" style="margin:0px;">
<div>
    <label for="name">이름</label>
        :
    <input type="text" name="fname" id="fname" value="C.m.A" />
</div>
 <div>
    <label for="email">이메일</label>
    :
    <input type="text" name="femail" id="femail" value="" />
</div>
<div>
    <label for="sex">성별</label>
    :
    <input type="radio" name="sex" value="0" />여자
    <input type="radio" name="sex" value="1" />남자
 </div>
<div>
    <label for="job">직업</label>
    :
    <select name="job" id="job">
    <option value="직업1">직업1</option>
    <option value="직업2">직업2</option>
    <option value="직업3">직업3</option>
    </select>
 </div>
</form>

 

라고 했을때 serialize()를 사용하지 않고 파라미터값을  전달시
 
fname=값&femail=값&sex=값&job=값
또는
var params = {
    fname       : '값',
    femail : '값',
    sex    : '값',
    job : '값'
};

 

 

2. serialize() 사용하기

 

var params = jQuery("#폼명").serialize() 또는 var params = $("#폼명").serialize()

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
function formSubmit() {
    var params = jQuery("#formname1").serialize();   

 // serialize() : 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다.

    jQuery.ajax({
        url: '샘플ajax.php',
        type: 'POST',
        data:params,
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        dataType: 'html',
        success: function (result) {
            if (result){
                // 데이타 성공일때 이벤트 작성
            }
        }
    });
}
</script>
 
<form name="formname1" id="formname1" style="margin:0px;">
<div>
    <label for="fname">이름</label>
        :
    <input type="text" name="fname" id="fname" value="C.m.A" />
</div>
 <div>
    <label for="femail">이메일</label>
    :
    <input type="text" name="femail" id="femail" value="" />
</div>
<div>
    <label for="sex">성별</label>
    :
    <input type="radio" name="sex" value="0" />여자
    <input type="radio" name="sex" value="1" checked="checked" />남자
 </div>
<div>
    <label for="job">직업</label>
    :
    <select name="job" id="job">
    <option value="직업1">직업1</option>
    <option value="직업2">직업2</option>
    <option value="직업3">직업3</option>
    </select>
 </div>
<div>
       <input type="button" value="Ajax 폼 전송" onclick="formSubmit()" />
 </div>
</form>

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

대표적인 getter 메소드와 setter 메소드  (0) 2017.07.12
input 요소 선택  (0) 2017.07.12
jQuery 선택자  (0) 2017.07.12
비슷한 ID 가져오기  (0) 2017.07.07
jQuery - select box 선택값 가져오기  (0) 2017.01.18
,
1

티스토리툴바