jQuery의 사용법에 대해 알아보겠습니다.
우선 jQuery도 저번에 말했던 cdn이 필요합니다.
구글에서 w3schoolsj Querycdn을 검색합니다.
들어가서 아래와 같은 빨간 상자를 클릭합니다.
그러면 코드가 뜨는데 그 중에 이 부분만 복사해줘요.
그리고 주의할 점은 이렇게 url이 있는 script 태그에 내용을 쓰면 안 됩니다.
새 script를 열고 자바 스크립트를 사용해야 합니다.
지난번에는 태그에 document.getElementById로 태그에 접근했습니다.
이렇게 접근해서 출력을 보면
내가 원하는 사진과 태그 정보가 표시됩니다.
마찬가지로 jQuery에서도 태그에 액세스할 수 있습니다.
이렇게 $를 써주세요.
그러면 이렇게 엄청난 게 출력이 돼요.
이렇게 함수를 만들 수도 있습니다.
지난번에는 onclick() 이벤트로 속성을 변경한 경우 이번에는 그대로 click하고 click하면 안에 함수가 실행됩니다.
안의 함수는 image의 attr=>attribute라고 생각하는데 속성 중에 width를 100px로 바꿔라.
이렇게 실행 후에 사진을 눌러보니 이렇게 되네요.
사진이 100px가 되었네요.
그리고 우리가 계속 자바스크립트를 head 영역에 사용하지 않고 body 영역에 사용하는데, 이것은 html가 위에서 아래로 실행되기 때문에
저희가 적어놓은 img 태그는 만들어지기 전인데 위에 자바스크립트에서 img 태그를 찾고 있어서 오류가 납니다.
그러나 개발은 역할을 분담할수록 빨라지고 자바스크립트는 자바스크립트별로 css는 css별로 html는 html별로 분리해 두는 것이 좋기 때문에 head 영역에 모아두는 것이 좋습니다.
따라서 자바 스크립트를 위로 올리는 작업을 해야 합니다.
그때 쓰는게 순수한 자바스크립트에서는 onload를 사용하면 되고,
jQuery에서는 ready를 사용하면 됩니다.
둘 다 웹페이지가 로딩되면 실행하라는 뜻입니다.
저희가 아까 했던 예로 예를 들면
이렇게 자바스크립트를 위로 올리면 우리가 원하는 기능이 실행되지 않습니다.
이렇게 null 나오기도 해요 아직 img 태그를 만들기 전에 img 태그를 위에서 찾고 있어서요.
이렇게 onload를 쓰면 출력하고 싶은 img 태그가 나옵니다.
이렇게요.
이번에는 ready를 사용해 보겠습니다.
이렇게 사용하시면 됩니다.
이것에 의해, 마찬가지로 사진이 작아진 것을 볼 수 있습니다.
이렇게 써봤어요.
저도 익숙해질 때까지 연습을 많이 해봐야겠네요.
주말에 연습과 공부를 많이 하려고 했지만 컴퓨터 조립과 주변기기 장보기 때문에 바빴습니다.(´;ω; ))
컴퓨터를 조립하고 또 환경설정을 하면서 좋은 프로그램도 많이 알게 되었고 무엇보다 빠르고 좋네요.(웃음)
여기까지 하겠습니다.감사합니다。