jQuery practice_240412

이름이 중복되는 Form Control 값 얻기

is()함수를 사용하면 대상에 대한 속성상태를 얻을 수 있다.(true, false)

• 사용법)
  $("selector").is(":checked"), $("selector").is(":selected")

radio, checkbox

checked상태일 때 값 얻기

                        //배열
<input type="checkbox" name="chk" value="a" class="chk">a
<input type="checkbox" name="chk" value="b" class="chk">b
<input type="checkbox" name="chk" value="c" class="chk">c

let chkArr=$("[name='chk']");//let chkArr=$(".chk");

for(var i=0; i<chkArr.length; i++){
	if($(chkArr[i]).is(":checked")){//true | false
      $(chkArr[i]).val()
    }
}//end for

* checked된 객체만 얻기
let chkArr = $("[name='chk']:checked")

for(var i=0; i<chkArr.length; i++){
	$(chkArr[i].val())
}

select

selected상태일 때 값 얻기
let sel=$("selector").val();

HTML Form Control에 값 설정

$("selector").val(값);

• 상태변환
  attr함수 prop함수를 사용하여 특정태그에 속성을 설정할 수 있다.
  //attr함수 : 소스코드에 동적으로 코드가 생성. 한번 설정되면 값이 사라지지 않는다.(설정된 속성 유지.)
  //prop함수 : 메모리에 코드가 생성. 속성을 여러 번 설정 가능.(설정된 속성이 여러 번 변경.)

모든 태그에 속성 값을 설정하거나, checkbox, radio의 확인상태를 변경, <select> selected상태를 변경 제어할 때 사용.

• 사용법)

$("selector").attr("추가할 속성명", 값);//속성을 한번만 설정할 때
	$("[value='남자']").attr("checked", true)

$("selector").prop("추가할 속성명", 값);//속성을 여러 번 변경하여 설정할 때

같은 이름의 특정 Form Control 접근

:eq(인덱스) 속성을 사용

• 사용법)
  $("selector :eq(인덱스)").prop("속성",값)$("selector :eq(" + 변수 + ")").prop("속성",값)

select

$("selector option:eq(인덱스)").prop("속성", 값)

effect

효과를 설정할 때 사용.

• 특정 대상 숨기기
  $("selector").hide();

• 특정 대상이 보이기
  $("selector").show();

• 특정 대상의 상태에 따라 반전(숨기상태 -> 보임상태, 보임상태 -> 숨김상태)
  $("selector").toggle();

---

• 서서히 보이기
  $("selector").fadeIn(ms)
  S("selector").fadeIn(ms, function(){보이기가 완료된 후 실행될 코드})

• 서서히 숨기기
  $("selector").fadeOut(ms)$("selector").fadeOut(ms, function(){보이기가 완료된 후 실행될 코드})

• 서서히 보여지는 동작의 반복
  $("selector").fadeToggle(ms, function(){작업 완료된 후 실행될 코드})

---

• 펼쳐 보이기
  $("selector").slideDown(ms, function)({ 펼쳐보이기가 완료된 후 실행될 코드 });

• 말아올리기
  $("selector").slideUp(ms, function(){ 말아올리기가 완료된 후 실행될 코드 });

• 반전
  $("selector").slideToggle(ms, function(){});

---

반복함수

• each() : 반복시키는 대상과 반복문을 합쳐 작성할 수 있다.

사용법)
selector없이 사용 : 생성된 배열을 반복해야 할 때.

문법)
$.each(배열명, function(인덱스, 배열의 값을 저장할 변수명){
변수명 - 인덱스 없이 배열의 방을 사용할 수 있다.
});

• selector 사용 : selector로 찾아낸 tag(Form Control)를 반복

                                   //selector로 반복중인 태그저장
$("selector").each(function(인덱수, 배열의 값을 저장할 변수명){
  $(변수명).jQuery함수();
});