728x90
.click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다.
문법
.click( handler )
예를 들어 button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다.
$( 'button' ).click( function() { // function } );<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id = "demo">p tag id demo</p>
<button type="button" id = "btnId">버튼</button>
<!-- //id 는
//class는 css에서 자주사용 -->
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*
방법1
$("button").click(function(){
alert('click');
});
방법2
$('#btnId').click(function(){
alert('btnid click');
});
방법3
$('#btnId').on("click",function(){
alert('btnid on click');
});
*/
$('#btnId').on("click", btnClick);
//btnClick을 지정해주면 이 함수가 실행된다
});
function btnClick(){
alert("btnClick")
}
</script>
</body>
</html>$("# " ).val( ) ; : getter
$("# " ).val("변경하였습니다") ; : setter
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
입력:<input type="text" id = "text" value = "">
<br><br>
<input type="button" id = "btn" value = "버튼">
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
//id btn으로 지정된 것이 클릭되면 실행된다.
//alert('click');
//getter
var value = $("#text").val();
alert(value);
//setter
$("#text").val("hi hello");
})
})
</script>
<!-- this -->
<!--
<p onclick = "func(0)">p tag 1</p>
<p onclick = "func(1)">p tag 2</p>
<p onclick = "func(2)">p tag 3</p>
<script type="text/javascript">
function func(n) {
let arrP = document.getElementsByTagName("p");
arrP[n].style.backgroundColor = "red";
</script>
} -->
<p>p tag 1</p>
<p>p tag 2</p>
<p>p tag 3</p>
<script type="text/javascript">
$(document).ready(function() {
$("p").click(function() {
//$(this).css("background","blue");
$(this).hide();
// 선택한값이 없어진다
//css(property명, 값) setter css(property명) getter
//"p"대신 this를 넣으면 <<<<<현재 클릭한 버튼 태그>>>>만 변동된다.
});
});
</script>
728x90
'HTML' 카테고리의 다른 글
| 37일차//JQuery// 속성추가 .attr ( ); (0) | 2021.03.05 |
|---|---|
| 37일차//JQuery// .append( ) .prepend( ) (0) | 2021.03.05 |
| 37일차//JQuery// text() (0) | 2021.03.05 |
| 37일차//JQuery// 자주쓰는 제이쿼리 함수 (모음) (0) | 2021.03.05 |
| 37일차//JQuery// 테이블에 tr마우스올릴시 색상변환(this) // .css( ) (0) | 2021.03.05 |
