-
제어 대상 찾기 js vs jquery(색변경)js 2020. 8. 15. 21:31
js
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <script> window.onload = function(){ var li = document.querySelectorAll('li'); for(var name in li) { li[name].style.color='red'; } for(var i=0;i<li.length;i++) { li[i].style.color='red'; } } </script> <body> <ul> <li>언리스트원</li> <li>언리스트투</li> </ul> <ol> <li>올리스트원</li> <li class = 'test'>올리스트투</li> </ol> </body> </html>js와 같은 경우 li태그의 색을 변화시키기 위해선 dom객체를 사용하여 객체의 태그명이나 class 명등을 가져온 뒤 반복문을 사용하여 색을 변화시켜주어야한다.
하지만 jqeury와 같은 경우 매우 단순하게 구현 할 수 있다.
jquery
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> </body> <script> $('li').css('color', 'red') </script> </html>jquery링크를 복사해서 붙여준후
$('li') -> 모든 li태그들의 css('color','red') -> 빨간색으로 바꾸어준다.
js에 비해 코드량도 훨씬 줄었고 가독성도 좋다 .
왜 jquery를 그렇게들 많이 사용하는지 알겠다.
'js' 카테고리의 다른 글
js - 객체 (0) 2020.08.17 js -데이터 타입 (0) 2020.08.17 js-변수 (0) 2020.08.17 js개념잡기 (0) 2020.08.17 js input 값 곱 (0) 2020.08.09