-
10. JQuery 속성 변경하기JQuery 2022. 8. 30. 16:31
속성 가져오기의 함수들을 응용하여 속성의 값을 변경할 수 있다.
$(셀렉터).attr( “지정 속성”, “변경 내용” ) 해당 요소의 지정된 속성을 변경한다. $(셀렉터).val( “변경 내용” ) 해당 요소의 값(value)을 변경한다 $(셀렉터).text(“변경 내용” ) 해당 요소의 텍스트 값을 변경한다.(내부 html 태그 미포함) $(셀렉터).html(“변경 내용” ) 해당 요소의 텍스트 값을 변경한다.(내부 html 태그 포함) * 속성 가져오기 예시
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>문서 제목</title><link rel="icon" href="./stamp.png"><style>
</style></head>
<body><p id="test1">문자열1</p><p id="test2">문자열2</p><input type="text" id="test3" value="홍길동"><input type="text" id="test4" value="비밀번호"><div></div><br><button>속성변경</button></body><script>$("#test1").text("<b>변경된</b>문자열"); //html 태그를 인정하지 않는다.$("#test2").html("<b>변경된</b>문자열"); //html 태그를 인정하여 보여준다.
$("button").click(function(){$("#test3").attr("type","button");$("#test3").attr("onclick","alert('OK')");//id test4를 type password로$("#test4").attr("type","password");// div 영역에 버튼을 만든다.// 버튼에는 onclick 시 test() 함수가 실행된다. 예) test("param")$("div").append("<button onclick='test(\"안녕\")'>버튼</button>"); //이스케이프 문자 사용
var arg="my content";$("div").append("<button onclick='test(\'"+arg+"\')'>버튼</button>");});
function test(str){alert(str);}
</script>
</html>'JQuery' 카테고리의 다른 글
12. JQuery 클릭하면 텍스트를 증가시키기 예시 - 1 (0) 2022.09.01 11. JQuery 속성 변경하기 예시 - 1 (0) 2022.09.01 9. JQuery 속성 가져오기 (0) 2022.08.30 8. JQuery 마우스 이벤트 (0) 2022.08.30 7. JQuery 이벤트로 생성된 버튼에 이벤트 주기 (0) 2022.08.30