처음 개발을 시작할땐 VB Script 였던것 같다.
그리고 나서, Javascript를 사용했었고, 어느 샌가 시간이 흐르고 흘러, Jquery 가 익숙해져버리고, 수없이 많은 Frontend 언어 들이 나와있다.
최근에 문득 생각이 들어서, jquery로 자주 사용하던 몇가지 기능을 javascript로만 만들어보기로 했다.
jquery 하면 $(document).ready ~가 시작 아니겠어요 ㅎㅎ
* 문서가 로딩이 완료되면, 안에 내용을 실행할 때 사용.
[jQuery]
$(document).ready(function(){
});
[pure javascript]
document.addEventListener('DOMContentLoaded', function () {
});
다음은, 가장 자주 사용했던 것 같습니다. Checkbox 컨트롤
*Checkbox가 선택되었는지 아닌지 확인
[jQuery]
if($("#weekday1").is(":checked")){
//true
}
[pure javascript]
var weekday1 = document.getElementById("weekday1");
if (weekday1.checked) {
// true
}
다음은, 게시판만들때 자주 사용하는 거 있죠? 전체선택/해제
<!DOCTYPE html>
<html>
<head>
<!-- jquery 사용 시 필수 s.-->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<!-- jquery 사용 시 필수 e. -->
<script>
$(document).ready(function(){
//전체 선택/선택 해제(jQuery)
$("#checkall").on('click', function(){
$("input[name='chk']").prop("checked", $(this).prop("checked"));
or
$("input[name='chk']").prop("checked", $(this).is(":checked"));
});
});
//전체 선택/선택 해제(pure javascript)
document.addEventListener('DOMContentLoaded', function () {
var checkAll = document.getElementById('checkall');
var checkboxes = document.querySelectorAll('input[name="chk"]');
checkAll.addEventListener('click', function () {
checkboxes.forEach(function (checkbox) {
checkbox.checked = checkAll.checked;
});
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th><input type="checkbox" id="checkall"></th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="chk" type="checkbox"></td>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td><input name="chk" type="checkbox"></td>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
다음은, 가끔 사용했던 것인데, radio로 사용하면 될 것을 checkbox로 만들어달라는 요청이 있을때 사용합니다.
*/단일선택/해제
<!DOCTYPE html>
<html>
<head>
<!-- jquery 사용 시 필수 s.-->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<!-- jquery 사용 시 필수 e. -->
<script>
$(document).ready(function(){
// single select/clear : 단일 선택(jQuery)
$("input[name='weekday']").on('click', function(){
var checked = $(this).is(":checked");
$("input[name='weekday']").prop("checked", false);
$(this).prop("checked", checked);
});
});
// single select/clear: 단일선택(pure javascript)
var weekdayInputs = document.querySelectorAll('input[name="weekday"]');
weekdayInputs.forEach(function(input) {
input.addEventListener('click', function() {
var checked = this.checked;
weekdayInputs.forEach(function(weekdayInput) {
weekdayInput.checked = false;
});
this.checked = checked;
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Weekly</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label for="weekday1"><input type="checkbox" name="weekday" id="weekday1" value="Sun" />Sun</label>
<label for="weekday2"><input type="checkbox" name="weekday" id="weekday2" value="Mon" />Mon</label>
<label for="weekday3"><input type="checkbox" name="weekday" id="weekday3" value="Tue" />Tue</label>
<label for="weekday4"><input type="checkbox" name="weekday" id="weekday4" value="Web" />Web</label>
<label for="weekday5"><input type="checkbox" name="weekday" id="weekday5" value="Thu" />Thu</label>
<label for="weekday6"><input type="checkbox" name="weekday" id="weekday6" value="Fri" />Fri</label>
<label for="weekday7"><input type="checkbox" name="weekday" id="weekday7" value="Sat" />Sat</label>
</td>
</tr>
</tbody>
</table>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 스크롤 페이징(paging with scroll) (0) | 2023.10.26 |
|---|