Web/JavaScript8 DOM vs jQuery 오늘은 jQuery를 쓰는 이유,,,그러니까 DOM과 jQuery를 비교해 보도록 할게요! 우선 앞서 배웠던 DOM으로 코딩해보도록 할게요...! DOM으로 코딩을 하게되면 이런식으로 하게 되고 결과화면은 다음과 같게 나옵니다. jQuery를 쓰는 이유는 여러줄의 코딩을 짧게 쓰기 위함이라고 앞서 말씀드렸었는데요... 그렇다면 jQuery는 어떻게 사용하는 것일까요? 우선 http://jquery.com/download/ 사이트에 들어갑니다. 다음 빨간 네모를 친 jQuery 3.2.1버전을 다운로드 받습니다. 다운로드 받은 후 작업중인 html파일이 있는 폴더에 저장합니다. 이렇게 세팅하면 jQuery를 사용할 준비가 모두 완료되었습니다. 이제 코딩을 시작해 보도록 하겠습니다. script 태그를 통해.. 2017. 5. 10. jQuery 오늘은 jQuery에 대해서 알아볼게요! jQuery 란 무엇일까요...? jQuery는 자바스크립트 라이브러리 입니다. 훨씬 작은 코드로 많은 것들을 할 수 있게 할 수 있는 라이브러리라고 할 수 있습니다. 그럼 어떻게 사용하는 건지 알아보도록 할께요! 예를들어 $('#value1').hide(); 라는 코드를 해석해보면 id속성이 value1인 요소가 숨겨지게 됩니다. jQuery를 단순하게 생각해보면 '어떠한 요소를 가져와서' 그것에 '무언가를 하기' 로 요약할 수 있습니다. 그래서 같은페이지 내에 Contents 라는 코드가 있으면 숨겨지게 됩니다. 이렇게 jQuery는 어떠한 요소를 가져와서 무언가를 하는 것이 제이쿼리의 기본적인 작동 원리입니다. 제이쿼리를 보면 항상 $ 표시가 등장하는데요.... 2017. 5. 6. DOM-querySelector 오늘은 querySelector에 대해서 알아볼텐데요~ querySelector는 객체를 조회하는 메소드라고 볼 수 있습니다. 그럼 바로 코딩을 통해 알아보도록 하겠습니다. 결과화면은 다음과 같게 나오게 됩니다. 더 나아가서 querySelectorAll의 메소드에 대해 알아보겠습니다. querySelectorAll은 특정속성의 값을 전부 선택하는 메소드라고 보면 되겠습니다. for(var name in li) 는 for문의 다른 형태 인데요 name=0 부터 li의 마지막 까지 반복문을 실행한다고 보시면 될것 같아요. for(name=0; name< li.length ; name++) 과 같은 의미라고 보시면 될것 같아요! 그럼 오늘 포스팅은 여기까지 하도록 하겠습니다~ 감사합니다! 2017. 5. 5. DOM-getElementById 클래스 이름으로 선택하는것을 해보았으니 이번엔 ID로 요소 선택하는 방법을 알아보도록 하겠습니다. 메소드는 document.getElentById 입니다. 앞선 메소드와는 다른점이 있죠??ㅎㅎ 이번엔 메소드에 Element만 들어간다는 점입니다. s가 빠졌죠. class는 같은 이름으로 여러가지를 쓸 수 있지만 ID는 한가지 만을 써야 된다는 점을 알 수 있습니다. 그럼 마찬가지로 코딩을 통해 알아보도록 하겠습니다. 결과화면은 다음과 같습니다. 감사합니다~ 2017. 5. 5. 이전 1 2 다음
