event처리하기
click:모든 태그에 적용할 수 있다
$("selector").click( function() {
//클릭됐을떄 실행코드
} );
change: <select> , 키 입력이 가능한 HTML Form Control에서 사용함
$("selector").change( function() {
//바뀌었을때 실행 될 코드
} );
focusin: 키 입력이 가능한 HTML Form Control
커서가 들어 갔을 때
$("selector").focusin( function() {
//커서가 들어갔을 때 실행될 코드
} );
focusout: 키 입력이 가능한 HTML Form Control (blur와 비슷)
커서가 빠져나갔을 떄... 값과는 상관 X
$("selector").focusin( function() {
//커서가 들어갔을 때 실행될 코드
} );
keydown - 키가 눌렸을 때 : 키 입력이 가능한 HTML Form Control에 대해 사용
$("selector").keydown( function(evt ) { //evt를 넣는 이유는 비교를 해서 작업처리하기위해...
//키가눌렸을때 실행될 코드
-keycode는 얻을 수 있지만 key char는 얻을 수 없다...
evt.which를 쓰면 키코드를 얻음 ==evt.keycode
} );
mouseover : 마우스 포인터가 특정영ㅇ역에 들어갔을 때 사용,모든 태그에 적용가능
$("selector").mouseover( function( ) { //evt를 넣는 이유는 비교를 해서 작업처리하기위해...
//마우스 포인터가 특정영역에 들어갔을 때 사용자에게 제공 할 코드.
} );
mouseout : 마우스 포인터가 특정영역에서 빠져 나갔을 때 사용,모든 태그에 적용가능
$("selector").mouseout( function( ) { //evt를 넣는 이유는 비교를 해서 작업처리하기위해...
//마우스 포인터가 특정영역에 빠져나갔을 때 사용자에게 제공 할 코드.
} );
HTML Form Control의 값 얻기.
name 속성이 유일한 Form Control:
<input type="text,password,date,color,hidden , ,, " > <select> , <textarea>
name속성이 중복되는 Form Control: checkbox, radio , selecto
얘들은 배열로 처리함 value, class따위가 아니라 name이다 name!!
checked 상태일 때 Form Control 값 얻기
1.attribute selector를 사용하여 Form Control 얻기
let chkArr= $("[name='chk' ] ")
2.반복
for(var i = 0; i<chkArr.length; i++) {
//checkbox의 확인상태 얻기
if( $("chkArr[i].is(":checked" ) ") ) {
$(chkArr[i].val)
}
}
<select>
-selected 상태일 때 값 얻기.
var se; = $("selector").val()
eq속성: selector에 eq속성 을 사용, eq=입력된 인덱스에 해당하는 태그를 찾는 속성
$("selector:eq(인덱스)").함수명();
var sel = $("selector")
for( var i=0; i<sel.length; i++) {
$("selector:eq('+i' )").val
}
상태변환
attr 함수, prop 함수를 사용하여 특정 태그에 속성을 설정할 수 있다.
attr사용시 소스코드에 동적으로 코드가 생성된다,,, 한번 설정되면 값이 사라지지않고 설정된 속성이 유지됨.
prop사용시 메모리에 동적으로 코드가 생성된다, 속성을 여러번 설정할 수 있다.
모든태그에 속성을 추가하거나 , checkbox, radion의 확인 상태를 변경, <select>의 selected 상태변경,제어가 가능.
사용법)
$("selector").attr("추가할 속성명",값);
$("selector").prop("추가할 속성명",값); //prop 함수가 권장됨
<select> 선택 상태 변경...
:eq(인덱스) 속성을 사용한다
사용법
$("selector 자식태그:eq(인덱스).prop(속성,값);
effect
-효과를 설정할 때 사용한다.
특정대상 숨기기
$("selector").hide()
특정대상 보이기
$("selector").show()
특정 대상의 상태에 따라 반전 유지( 숨김 - 보임 - 숨김 - 보임)..
$("selector").toggle()
서서히 보이거나 서서히 숨기기
서서히 보이기
$("selector").fadein(ms)
$("selector").fadein(ms, function() {
//보이기가 완료 된 후 실행 될 코드.
} )
서서히 숨기기
$("selector").fadeout(ms);
서서히 보여지는 동작의 반전
$("selector").fadeToggle(ms);
펼쳐보이기
$("selector").slideDown(ms, function() {
//펼쳐진 후 실행 될 코드.
} );
말아올리기
$("selector").slideUp(ms, function() {
//말아올린 후 실행 될 코드.
} );
반전
$("selector").slide(ms, function() {
//말아올린 후 실행 될 코드.
} );