DOM vs jQuery

오늘은 jQuery를 쓰는 이유,,,그러니까 DOM과 jQuery를 비교해 보도록 할게요!

우선 앞서 배웠던 DOM으로 코딩해보도록 할게요...!

DOM으로 코딩을 하게되면 이런식으로 하게 되고

결과화면은 다음과 같게 나옵니다.

jQuery를 쓰는 이유는 여러줄의 코딩을 짧게 쓰기 위함이라고 앞서 말씀드렸었는데요...

그렇다면 jQuery는 어떻게 사용하는 것일까요?

우선 http://jquery.com/download/  사이트에 들어갑니다.

다음 빨간 네모를 친 jQuery 3.2.1버전을 다운로드 받습니다.

다운로드 받은 후 작업중인 html파일이 있는 폴더에 저장합니다.

이렇게 세팅하면 jQuery를 사용할 준비가 모두 완료되었습니다.

이제 코딩을 시작해 보도록 하겠습니다.

script 태그를 통해서 jQuery파일을 삽입한 후

코딩을 합니다.

버튼을 누르기 전의 화면입니다.

jQuery가 적용되기 전의 모습입니다.

다음 화면은 <실행> 버튼을 클릭 후의 화면입니다.

li 속성을 가진 모든 요소들이 빨간색으로 변하는 것을 볼 수 있습니다.