*HTML Form Control에 값 설정
<input type=“text,password,date, color,,”>, <textarea>
문법)
$(“selector”).val( 값 );
*상태변환 ( 속성을 변환)
-attr 함수, prop 함수 사용하여 특정 태그에 속성을 설정할 수 있다.
-모든 태그에 속성을 추가하거나, checkbox, radio의 확인상태를 변경,
select 선택상태를 변경할 수 있다.
사용법)
$(“selector”).attr(“추가할속성명”, 값);
$(“selector”).prop(“추가할속성명”, 값);
*<select>
$(“selector > option:eq(인덱스)”).prop(“selected”,true);
1. selector로 tag를 찾고
2. eq에 해당하는 인덱스번째의 옵션을 찾고
3. 속성을 설정한다.
*HTML Form Control 값 얻기
- 이름이 하나인 HTML Form Control
<input type=“text,password,date, color,,”>, <select>,<textarea>
문법)
var 변수명=$(“selector”).val();
-이름이 중복되는 HTML Form Control
<input type=“radio,checkbox”>, <select>
is() 함수를 사용하면 대상에대한 속성상태를 얻을 수 있다.(true, false)
사용법)
$(“selector”).is(“:checked”), $(“selector”).is(“:selected”),
*radio,checkbox
- checked 상태 일때 값 얻기
<input type=“checkbox” name=“chk” class=“chk”> a
<input type=“checkbox” name=“chk” class=“chk”> b
<input type=“checkbox” name=“chk” class=“chk”> c
var chkArr=$(“[name=‘chk’]”);
for( var i= 0 ; i < chkArr.length ; i++){ //이름이 같으면 배열
if( $( chkArr[i] ).is(“:checked”)){ //true | false 확인상태
$( chkArr[i]).val(); //값을 얻는다.
}
}
*checked 상태인 Form Control만 얻기
var chkArr =$(“[name=‘chk’]:checked”);
for( var i= 0 ; i < chkArr.length ; i++){ //이름이 같으면 배열
$( chkArr[i]).val(); //값을 얻는다.
}
*each
- 배열과 반복문을 합쳐서 정의 할 수 있다.
문법)
-찾아낸 태그를 바로 반복
$(“selector”).each( function( 인덱스저장할변수, 방을저장할변수){
});
-태그를 찾고
var arr=$(“selector”);
$.each(arr, function( 인덱스저장할변수, 방을저장할변수){
});
*select
-selected상태일 때 값 얻기
$(“selector”).val();
:eq속성 ( 입력된 인덱스에 해당하는 태그를 찾는 속성 )
-selector에 eq 속성 사용
사용법)
$(“selector:eq(인덱스)”).함수명();
*동적으로 자식태그 추가, 삭제
-추가 : append() 함수 사용.
사용)
$(“selector”).append(“추가할 태그”);
-삭제 : remove() 함수
사용)
$(“selector”).remove();
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<style type=“text/css”>
</style>
<script type=“text/javascript”>
</script>
</head>
<body>
<div><a>aaa</a></div>
<div><p>bbbb</p><p id=“p”>cccc</p></div>
</body>
</html>
*자식 노드로 등록
$(“#div”).append(“<div>안녕</div>”)
<div id=“div”>
</div>
*plugin
- 자주 사용되는 디자인이나 기능을 미리 구현해놓고 배포하는 것.
- jquery.com에서 다양한 plugin 제공.
*summernote
- smart editor :
<textarea>나 <div>를 사용하여 사용자가 글자 이외에 다양한 대상을 입력 할 수 있는
JavaScript Library
-이미지를 붙여 넣으면 이미지가 binary 에서 text로 encoding 되어 전송된다.
-back-end로 값을 전송할 때에는 반드시 POST방식으로만 전송해야 한다.
-summernote.org에서 무료 제공.
'jQeury' 카테고리의 다른 글
| [jQuery] event, effect 설정 (0) | 2025.04.22 |
|---|