Coding 공부/Jquery
[Jquery] attr, checkbox, class(addClass, removeClass, hasClass, toggleClass)
CBJH
2024. 4. 12. 12:44
728x90
반응형
1. attr
1.1 attr setter 예제
<head>
~
<style>
img{
width: 100px;
height: 100px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
var imgList =['./images/dog.jpg','./images/cat.jpg','./images/sudal.jpg']
var i = 0
function myFunc(){
i++
if(i>=imgList.length) i=0;
$("#my-img").attr('src', imgList[i]) //setter
}
</script>
</head>
<body>
<img src="./images/dog.jpg" alt="개" id="my-img">
<button onclick="myFunc()">클릭</button>
</body>- 버튼 클릭 시 이미지 변경
<head>
~
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
var i =0;
function myFunc(){
i++;
if(i%2 === 1) $("#pw").attr('type','text');//암호화 해제
if(i%2 === 0) $("#pw").attr('type','password');//암호화 해제
}
</script>
</head>
<body>
<input type="text" id="id" value ="id">
<input type="password" id="pw" value="password">
<button onclick="myFunc()">클릭</button>
</body>
</html>- 클릭 시 암호화, 텍스트화
1.2 attr getter 예제
<head>
~
<style>
img{
width: 100px;
height: 100px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
var result = $("#my-img").attr('src')
alert(result)
}
</script>
</head>
<body>
<img src="./images/dog.jpg" alt="개" id="my-img">
<button onclick="myFunc()">클릭</button>
</body>
2. radio
<head>
~
<style>
radio{
display: block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
var result = $("input[name='radio-group1']:checked").val()
alert(result)
}
</script>
</head>
<body>
<input type="radio" name="radio-group1" value ="A" checked>
<input type="radio" name="radio-group1" value ="B" >
<input type="radio" name="radio-group1" value ="O" >
<button onclick="myFunc()">클릭</button>
</body>
3.checkbox
<head>
~
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
var result = $("#chk").is(":checked")
if(result ===true){
var val = $("#chk").val()
alert(val)
}else{
alert(result)
}
}
</script>
</head>
<body>
<input type="checkbox" id="chk" value ="my-val">
<button onclick="myFunc()">클릭</button>
</body><head>
~
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
$("#chk").prop('checked',true) //모두 동의 할때 쓰임, property : 특성, 상태
}
</script>
</head>
<body>
<input type="checkbox" id="chk" value ="my-val">
<button onclick="myFunc()">클릭</button>
</body><head>
~
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
var result = $("input[name=check-group1]:checked").each(
function(){
var val = $(this).val()
alert(val)//china, thailand
}
)
}
//체크된 체크박스 정보가 each 메서드의 콜백함수로 넘어가서
//$(this) - 대상 -체크된 체크박스 위치
</script>
</head>
<body>
<input type="checkbox" id="chk1" name="check-group1" value ="japan">
<input type="checkbox" id="chk2" name="check-group1" value ="china">
<input type="checkbox" id="chk3" name="check-group1" value ="thailand">
<button onclick="myFunc()">클릭</button>
</body>
4. 클래스
<head>
~
<style>
.my-red{
color: red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
$("#my-div").addClass('my-red')
//my-div에 my-red 클래스 추가
//$("#my-div").removeClass('my-red') 클래스 제거
}
</script>
</head>
<body>
<div id="my-div">내 div</div>
<button onclick="myFunc()">클릭</button>
</body><head>
~
<style>
.my-red{
color: red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
$("#my-div").toggleClass('my-red')
//toggleClass = addClass + removeClass + hasClass
//검사해서 my-red가 있으면 없애고, 없으면 추가한다
}
</script>
</head>
<body>
<div id="my-div" class="my-red">내 div</div>
<button onclick="myFunc()">클릭</button>
</body>