[jQuery] jQuery 적용이 안될때
2018. 01. 06 기준
jQuery는 자바스크립트와 마찬가지로 head태그에
선언되기 때문에, 위에서부터 순차적으로 코드를
읽어 내려가는 웹 브라우저 특성상 jQuery가 적용될
대상들(body태그)보다 먼저 실행되어 의도치 않게
적용되지 않는 경우가 종종있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.1.1.js"></script> <script type="text/javascript"> $("p").css("color", "red"); //<p>태그의 글자색을 빨간색으로 변경 </script> </head> <body> <p>제이쿼리</p> </body> </html> | cs |
결과값: 제이쿼리
위와같은 오류를 방지하기 위해서 자바스크립트에서의
window.onload 와 비슷한 문법이 jQuery에도 존재합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 1번 방법: $(document).ready(function() { //내용 }); 2번 방법: $(function() { //내용 }); 3번 방법: jQuery(function() { //내용 }); <!DOCTYPE html> <html> <head> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.1.1.js"></script> <script type="text/javascript"> $(function() { $("p").css("color", "red"); //<p>태그의 글자색을 빨간색으로 변경 }); </script> </head> <body> <p>제이쿼리</p> </body> </html> | cs |
결과값: 제이쿼리
간단하지만 종종 실수를 하죠~ 도움이 되셨길 바래요.
감사합니다.
'개발자가 좋은건가?? > Javascript , jQuery' 카테고리의 다른 글
| [jQuery] .text() 문자열 바꾸기 (0) | 2018.01.26 |
|---|---|
| [Javascript] opener함수 정리 (0) | 2018.01.18 |
| [Javascript] 현재페이지를 알아오기 (0) | 2018.01.18 |
| [Javascript] 웹브라우저 소스막기 (0) | 2018.01.18 |
| [jQuery] jquery 기본문법 (0) | 2018.01.16 |
