728x90
300x250
SMALL
자바스크립트와 제이쿼리 차이 비교
특정 id의 li에 텍스트를 빨강으로 변경해보자
▶ 자바스크립트
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 | <head> <script> window.onload = function() { var menu2 = document.getElementById("test2"); var liCount = test.getElementsByTagName("li"); for (var i = 0; i < liCount.length; i++) { var li = liCount[i]; li.style.color = "#f00"; } } </script> </head> <body> <ul id="test1"> <li>black</li> <li>black</li> </ul> <ul id="test2"> <li>red</li> <li>red</li> <li>red</li> </ul> </body> |
getElementById("test2"); // 먼저 test2아이디에 접근한다.
var liCount = test.getElementById("li"); // li에 접근해서 liCount 변수에 넣어준다.
반복문으로 0부터 li개수만큼 li에 하나씩 접근해서 color 값을 변경해준다.
getElementById, getElementById 이런 기능들은 모두 DOM(Document Object Model)이라는 곳에서 제공하는 기능이다.
DOM은 수많은 클래스로 이뤄져 있다
▶제이쿼리
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <head> <script> $(document).ready(function() { $("test2 li").css("color", "#f00"); }) </script> </head> <body> <ul id="test1"> <li>black</li> <li>black</li> </ul> <ul id="test2"> <li>red</li> <li>red</li> <li>red</li> </ul> </body> |
test2 li에 바로 접근해서 색상값을 변경해 준다.
똑같은 기능이지만 자바스크립트로 했을때 보다 제이쿼리로 했을때 훨씬 간단하게 처리가능해진다.
728x90
반응형
LIST
'javaScript > JS Examples' 카테고리의 다른 글
| 값을 입력받아 개체 움직이기 (0) | 2019.02.19 |
|---|---|
| .appendTo() 사용해서 코드 위치 이동시키기 요소 위치변경및 추가 (0) | 2019.02.10 |
| 형변환을 이용한 배경 초마다 변경하기 (0) | 2019.01.27 |
| 자바스크립트::동의를 누르지 않으면 경고창 띄우기 (0) | 2019.01.17 |
| 인덱스에서 다른페이지 바로가기 연결 (location) (0) | 2018.12.18 |
댓글