728x90
.each() 메서드
- 매개변수로 입력한 함수를 사용한다.
- for 반복문처럼 객체나 배열의 요소를 검사한다.
- 기본 형태
<script>
$.each(obj,function(index.item){});
$(selector).each(function(index, item){});
// index에는 배열의 인덱스가 오고 item에는 해당 인덱스의 값이 담긴다.
</script>- 예를 들어 여러개의 h1 태그가 있다면 각각의 값을 확인하고 사용할 수 있다.
<body>
<h1> content1 </h1>
<h1> content2 </h1>
<h1> content3 </h1>
<h1> content4 </h1>
<h1> content5 </h1>
<h1> content6 </h1>
<script>
$("h1").each(function(idx,item){
//h1 각 태그에 적용할 함수 정의
});
</script>
</body>
addClass() / removeClass() 메서드
- addClass()는 문서 객체에 class 속성을 추가하는 메서드
- removeClass()는 문서 객체에 class 속성을 제거하는 메서드
- 예제
- class 버튼을 누르면 div1 class를 추가해 css가 적용되고 remove 버튼을 누르면 class가 삭제되어 css적용이 풀린다.
<head>
<style type="text/css">
.div1 {
display: inline-block;
margin: 10px;
background-color: yellow;
border:1px solid black;
}
</style>
</head>
<body>
<div >div1</div>
<div >div1</div>
<button onclick="clickbtn()"> class </button>
<button onclick="removeBtn()"> remove</button>
<script>
function clickbtn(){
$("div").addClass("div1");
}
function removeBtn(){
$("div").removeClass("div1");
}
</script>
</body>
attr() / removeAttr() 메서드
- 특정 속성의 값을 알아내거나 추가/ 제거할 수 있다.
<body>
<input type="text" id="text1">
<script>
//input의 타입의 값을 반환한다.
$("input").attr("type");
//input의 타입 속성의 값을 password로 변경/추가한다.
$("input").attr("type","password");
//input 태그에 있는 id 속성을 제거한다.
$("input").removeAttr("id");
<script>
</body>
728x90
'노트' 카테고리의 다른 글
| 토이 프로젝트 주식 커뮤니티 만들기(6) - JSP 회원가입 페이지 (0) | 2022.06.05 |
|---|---|
| 토이 프로젝트 주식 커뮤니티 만들기(5) - 초기화면 생성/JSP 드롭다운 버튼 (0) | 2022.06.03 |
| jQuery 필터링 메서드 (1) | 2022.05.18 |
| jQuery 개요, 기본 문법 (0) | 2022.05.17 |
| 5월 6일 JSP (0) | 2022.05.07 |