Programming/jQuery
[jQuery] Traversing (Axis)
Isaac S. Lee
2023. 10. 16. 11:12
🍁Traversing
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 5px;
margin: 5px;
}
#me {
border: 5px solid cornflowerblue;
}
.check {
outline: 5px solid coral;
}
</style>
</head>
<body>
<h1>Axis</h1>
<input type="button" value="버튼" id="btn1">
<hr>
<div id="div1">
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>큰형</div>
<div>작은형</div>
<div id="me">나
<div>자식
<div>손자</div>
</div>
<div>자식</div>
<div>자식</div>
</div>
<div>동생</div>
<div>막내동생</div>
</div>
<div>
작은아버지
<div>사촌</div>
</div>
</div>
<script src="../asset/js/jquery-1.12.4.js"></script>
<script>
</script>
</body>
</html>
[JavaScript] Axis: 축을 기준으로 검색
🍁Axis 태그를 찾는 방법으로 식별자를 이용해서 찾는 방법이 있고, 축을 기준으로 찾는 axis 기능이 있다. 기본 코드 Axis 할아버지 큰아버지 사촌 아버지 큰형 작은형 나 자식 손자 자식 자식 동
isaac-christian.tistory.com
Axis에 대해서는 위 글을 참고한다.
자식에 접근
모든 자식에 접근
- children
$('#me').children().addClass('check');
특정 자식에 접근
- first
- last
- eq
$('#me').children().first().addClass('check'); //첫째
$('#me').children().last().addClass('check'); //막내
$('#me').children().eq(1).addClass('check'); //둘째eq 함수에 -1을 넣으면 막내를 찾는다.
손자에 접근
모든 손자에 접근
$('#me').children().children().addClass('check');
children으로 두 번 접근하면 손자에 접근할 수 있다.
특정 손자에 접근
<div>
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>큰형</div>
<div>작은형</div>
<div id="me">나
<div>자식
<div>손자</div>
<div class="test">손자</div>
<div class="test">손자</div>
</div>
<div>자식</div>
<div>자식</div>
</div>
<div>동생</div>
<div>막내동생</div>
</div>
<div>
작은아버지
<div>사촌</div>
</div>
</div>//$('#me > div > div.test').addClass('check');
$('#me').children().children('.test').addClass('check');
children의 인자로 class명을 주어서 손자들 중에 class로 test를 가지고 있는 손자만을 검색한다.
조상에 접근
- parent
- parents
- parentsUntil
특정 부모에 접근
$('#me').parent().addClass('check'); //아버지
모든 부모에 접근
$('#me').parents().addClass('check'); //부모들
검색 범위 지정
$('#me').parentsUntil('#div1').addClass('check'); //부모들
parentsUntil은 검색 범위를 지정할 수 있다.
형제에 접근
형에 접근
- prev
- prevAll
- prevUntil
동생에 접근
- next
- nextAll
- nextUntil
형, 동생에 구애받지 않고 접근
- siblings
특정 형제에 접근
$('#me').prev().addClass('check'); //작은형
$('#me').next().addClass('check'); //동생
모든 형제에 접근
$('#me').prevAll().addClass('check'); //모든 형
$('#me').nextAll().addClass('check'); //모든 동생$('#me').siblings().addClass('check'); //모든 형제
모든 형제에 접근할 때, siblings를 사용해도 동일한 결과를 출력한다.
find()
$('#me').find('.test').addClass('check');
find는 계층을 가리지 않고 요소를 찾는다.
find에 조건으로 인자를 넣으면 해당 조건을 가지고 있는 요소만을 검색할 수 있다.
즉, 나로부터 파생된 하위 모든 태그를 검색할 수 있다.
🍁Traversing의 활용
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tbl1 td {
border: 1px solid black;
padding: 10px 20px;
}
</style>
</head>
<body>
<h1>테이블</h1>
<!-- table#tbl1>tr*10>td{item}*5 -->
<table id="tbl1">
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
</table>
<script src="../asset/js/jquery-1.12.4.js"></script>
<script>
</script>
</body>
</html>
td hover 효과
/*
$('#tbl1 td').mouseover(function() {
$(this).css('background-color', 'gold');
});
$('#tbl1 td').mouseout(function() {
$(this).css('background-color', 'transparent');
});
*/
/*
$('#tbl1 td').mouseover(function () {
$(this).css('background-color', 'gold');
}).mouseout(function () {
$(this).css('background-color', 'transparent');
});
*/
$('#tbl1 td').on({
mouseover: function () {
$(this).css('background-color', 'gold');
},
mouseout: function () {
$(this).css('background-color', 'transparent');
}
});
tr hover 효과
$('#tbl1 tr').on({
mouseover: function () {
// $(this).css('background-color', 'gold');
$(event.currentTarget).css('background-color', 'gold');
},
mouseout: function () {
// $(this).css('background-color', 'transparent');
$(event.currentTarget).css('background-color', 'transparent');
}
});
