Jquery 기초

jquery란?

• HTML 스크립팅을 간소화하기 위해 고안된 크로스 플랫폼 자바스크립트 라이브러리이다

---

설치방법

1. cdnjs 사이트 이용방법
1-1. cdnjs 사이트 이동
1-2. jquery 검색 → 주소 카피

1-3. html에서 script 태그에 src=주소 붙여넣기

---

2. 코드펜에서 이용방법

진행순서 : settings > js탭 > jquery검색 > save & close

---

기본문법

html의 div 가져오기

• 기존 javascript

  var divs = document.getElementsByTagName('div')

  • html의 div를 불러온다
  • 여기서 var divs는 html들의 div들을 값으로 넣어주는것이 아닌 컨트롤 할 수 있는 역할을 부여한 변수이다

• jqery가 적용된 javascript

  var divs = $(’div’);

---

html에서 가져온 div들에게 css속성 넣기

• 기존 javascript

  $(div).style.backgroundColor='red';

  • 여기서 자바스크립트의 고유언어인 background'C'olor를 사용한다

• jquery가 적용된 javascript
  $(div).css(’background-color’, red);

  css언어를 그대로 사용하면 된다

• jquery는 코드를 javascript의 코드를 단축시켜주고 css 언어를 적용할 수 있는 간편함을 제공한다

  추가) jqery가 적용된 함수 입력방법 : $(div).함수(함수명);

---

기본적인 구조 이해를 돕기위한 예시

function a() {
    
    var b = document.getElementsByTagName('div')`
	// html의 div를 컨트롤하는 b를 만든다
    // jqery : var b = $('div');
    
    for(var i = 0; i < b.length; i++) {
     
     b[i].style.backgroundColor='red'; 
     // b의 div들 중 i번째에 색을 칠한다
     // jqery : $b[i].css(’background-color’, red);
    
    }
}

a() //함수를 실행하면 모든 div의 배경색은 red로 변한다

---

class 추가 제거

javascript의 기본함수를 사용하여 html에 class를 추가하고 제거할 수 있다

1. .addClass : 클래스 추가하기
   $('html').addClass('클리스명');

2. .remove : 클래스 제거하기
   $('html').removeClass('클래스명');

• 추가로 css처럼 부모, 자식관계가 있는 클래스도 가져올 수 있다

$(".popup-1>.popup>.head").click(function() {
	//head클래스를 클릭하면, 여기서 .click은 javascript함수
  
    $('html').removeClass('popup-1-active');
     // html에 '.popup-1-active'클래스를 제거할거야
})

부모자식관계 사용예시

$('section > button:nth-child(2n+1)').click(blue);
// section의 botton의 홀수만 색을 blue
// nth-child는 button이란 태그를 가지면서 누군가의 자식이란 뜻

$('section > button:nth-child(2n)').click(red);
// 짝수만 색을 red

---

Today Comment :

위 내용과 그 동안 배운 html, css, javascript 내용들을 토대로 팝업을 만들어보았지만

html, css, javascript에서 함수의 값들이 서로 상호작용하는 부분에서 어려움이 있었다

다시 한번 만들며 정리해보자