반응형
250x250
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Notice
Recent Posts
Today
Total
관리 메뉴

네이처리 노트

[jQuery] 속성보기 | attr val checked disabled 본문

개발기록/Javascript

[jQuery] 속성보기 | attr val checked disabled

네이처리 2022. 9. 13. 13:15
728x90
반응형

기초리스트

▶기초 ( 선언하기 $.ready() )
▶ 속성보기 ( attr val checked disabled )
▶ 추가 및 삭제 ( append remove before after text html )
▶ 부모형제요소 찾기 ( parent closest children find prev next filter )
▶ 스타일 변경하기 ( css show hide toggle addClass toggleClass )




공부하면서 정리한 내용입니다
참고한 내용은 링크를 확인해주세요





왠만한 속성에 전부 관여하기 가능

// 이미지 src 가져오기
$('img').attr('src');

// 이미지 입력
$('img').attr('src', 'images/logo.png');

// 스타일 부여
$('input').attr('style', 'display:block; background-color: red;'); 

// 체크박스 선택
$("input:checkbox[value=0]").attr("checked", true);  

// 비활성화
$("select").attr("disabled", true);

style을 다루는 방법은 $.css() 도 있음


value 값

// 값 가져오기
$("input:text").val(); 

// 값 부여하기
$("input:text").val("blueberry");


checked 선택

// 체크여부 
$("input:checkbox[name='type']").is(":checked") // boolean

$("input:checkbox[name='type']").prop("checked") // boolean

$("input:checkbox[name='type']").attr("checked") // "checked" or undefined

// 체크하기 or 체크해제
$("#selector").attr("checked", true)  

// checked 처리
$("input:checkbox[name='type']:checkbox[value='type1']").attr("checked", true);

$("input:radio[name='type']:radio[value='type1']").attr("checked", true);

$("input:radio[name='type']").removeAttr("checked");

prop() 와 attr()의 차이
attr(HTML attribute)은 일반적인 속성값을 변경할때
prop은 기능 제어되는 속성을 변경할때 사용한다.


disabled 비활성화

$("select option[value='0']").prop('disabled',true);





728x90
반응형
Comments