네이처리 노트
[jQuery] 제이쿼리 기초 | 선언하기 $.ready() 본문
728x90
반응형
기초리스트
▶기초 ( 선언하기 $.ready() )
▶ 속성보기 ( attr val checked disabled )
▶ 추가 및 삭제 ( append remove before after text html )
▶ 부모형제요소 찾기 ( parent closest children find prev next filter )
▶ 스타일 변경하기 ( css show hide toggle addClass toggleClass )
공부하면서 정리한 내용입니다
참고한 내용은 링크를 확인해주세요
🐟 선언하기
ID로 정확하게 선언하는 것을 권장하지만, 상황에 따라 Element나 Class로 선언 할 수 있다.
그 외의 다양한 방법으로도 선언이 가능하다.
<!--HTML-->
<div id='banana' class='yellow-color'>
<input type="checkbox"/>
</div>//jQuery
// element 선언
let example1 = $("div");
let example2 = $("#ID");
let example3 = $(".classname");
// checkbox 선언
let example4 = $("#ID input");
let example5 = $("#ID input:checkbox");
let example5 = $("#ID input:checkbox[name='name']");🐟 $(Document).ready()
올바른 HTML 순서
<html lang="en">
<body>
<p> ready란 무엇 </p>
<!-- body 제일 아래에 script 위치 -->
</body>
</html>잘못된 HTML 순서
컴파일은 일반적으로 위에서 아래방향으로 이루어지는데, 아래의 잘못된 코드는 p태그가 나오기 전에 script문이 호출되버리기 때문에 결과적으로 JQuery문법이 p태그를 찾지 못함
<html lang="en">
<head>
<script>
$('p').click(function(){
$(this).hide();
});
</script>
</head>
<body>
<p> ready란 무엇 </p>
</body>
</html>
script code
$('document').ready(function(){
// body가 준비 된 후에 script 시작하기
});
script code (권장⭐)
$(function(){
// jQuery 3.0 이후는 이 방법을 권장
}
728x90
반응형
'개발기록 > Javascript' 카테고리의 다른 글
| [jQuery] 추가 및 삭제 | append remove before after text html (0) | 2022.09.13 |
|---|---|
| [jQuery] 속성보기 | attr val checked disabled (0) | 2022.09.13 |
| [jQuery] sortable (0) | 2022.09.13 |
| [jQuery] datepicker | timepicker (0) | 2022.09.13 |
| [jQuery] plugin | datatable (0) | 2022.09.07 |
Comments