page. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]

26일차 jQuery 기초

1. jQuery 기초 이해하기

• html
• CSS
• JS

1) js query 를 사용하지 않을 때 이해하기(이해만 하면 됨)

• html을 작성하고 button 을 만든 후 onclick=”hello();” ⇒ 버튼을 눌렀을 때 hello 함수를 작동 시키라는 말
• hello 함수 작성 → jquery 없이 작성한다면

  • var els = document.getElementsByTagName();

    • els 라는 변수를 만들고
    • document.get ⇒ 점 (.) 으로 주어와 동사를 구분할 수 있음
      • document 한테 가져와바(get) 하고 명령 하는 것임
    • document.getElements ⇒ 엘리먼트를 가져와 보라고 함
      • Elements → 단수와 복수 구분을 확실하게 해야함 엘리먼트들이니까 복수
    • document.getElementsByTagName(’div’)
      • document.getElements 라고만 하면 어떤 엘리먼트를 가져와야 하는지 알 수가 없기 때문에 추가적으로 더 조건을 주는 것임
      • 엘리먼트들 중 태그 이름이 div 인 것을 가져오라는 의미
    • div 들 싹다 데려와서 els에 들어가는 것임

    console.clear();
    
    function hello(){
    	var els = document.getElementsByTagName('div');
    	}
    

    • 하지만 변수는 공간이 적어서 하나의 값만 들어갈 수 잇음
    • 그래서 불러온 div 가 전부 들어가는 것이 아니라, div 들을 관리하는 교장을 만들어서 약간 대표격, 그거 하나만 els 에 들어감
    • 그 후 불러온 div 중 하나를 red 로 변경하면 버튼 누를 때 마다 하나가 빨간색이 됨

    console.clear();
    
    function hello(){
    	var els = document.getElementsByTagName('div');
    	els[0].style.backgroundColor = 'red';
    	// 여기서 0은 첫번째 div 라는 의미
    	// 관리하는 div 중 첫번째에게 style(css) red 값 줌
    	}
    

  • 하지만 CSS 에서 변경 하는 것 보다 너무 어렵기 때문에 이렇게 안 함

• jquery = javascript 를 좀 더 쉽게 작성할 수 있도록 도와주는 도서관 느낌

jQuery

jQuery 는 도서관 같은 것, 내가 직접 코드를 짤 수도 있지만, 다른 누군가가 발명한 코드를 가져와서 사용방법만 알면 편하게 쓸 수 있는거 같은 느낌이다.

<div></div>
<div></div>
<div></div>
<button onclick="hello();">버튼</button>

body{
   display:flex;
}
body>div{
   width:100px;
   height : 100px;
   border: 10px solid black;
}