jQuery 기본문법

jQuery

• jQuery(제이쿼리)는 자바스크립트를 더 쉽고, 단순하게 조작할 수 있도록 설계된 자바스크립트 라이브러리다.
• jQuery는 MIT 라이선스를 가진 자유 오픈 소프트웨어이다.
• jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다.
• $ 문법. $ 대신 jQuery 사용 가능

 

https://jquery.com/

jQuery

 

jQuery 기본 문법

$(document).ready(function(){
  var a = '홍길동';
  alert(a);
});

＊body 가장 아래 (html보다 아래)에 위치한다면 생략 가능

 

약식 표현

$(function(){
  var a = '홍길동';
  alert(a);
});

 

기본형식

$('선택자').메소드('속성','값');

$('선택자').css('속성','값');

 

---

 

다양한 jQuery 선택자

 

CSS method

＊ CSS에서 사용하는 거의 모든 선택자를 사용할 수 있다.
＊ jQuery의 모든 메소드는 체이닝 기법을 사용할 수 있다.
＊ jQuery의 모든 메소드는 객체로 만들어 사용할 수 있다.

$('선택자').css('css속성', '값');

 

기본 문법

$(document).ready(function(){
  $('*').css('color','red').css('background','blue'); // 전체 선택
  $('h2').css('color','red').css('background','blue'); // 태그명 사용 가능
  $('.box > p').css('color','red').css('background','blue'); // 태그명 여러개 선택 가능
  $('#title3').css('color','red').css('background','blue'); // id 사용 가능
  $('.box').css('color','red').css('background','blue'); // class 사용 가능
});

 

체이닝 기법

$(document).ready(function(){
  // 체이닝 기법
  $('h2, .p1').css('color','red').css('font-size','30px').css('background','green');
});

 

객체 사용기법

$(document).ready(function(){
  // 객체 사용 기법
  $('h2, .p1').css({
    'color':'red',
    'font-size':'30px'
  });
});

<div class="box">
  <h2>타이틀 제목1</h2>
  <p class="p1">단락 내용1 입니다.</p>
  <ul>
    <li>목록 내용 1부분</li>
    <li>목록 내용 1부분</li>
    <li>목록 내용 1부분</li>
  </ul>

  <div>
  	<p>단락 내용 2 입니다.</p>
  </div>

  <h2 id="title3">타이틀 제목3</h2>
  <p>단락 내용3 입니다.</p>
</div>

 

 

CSS 필터 선택자

CSS filter 선택자를 사용할 수 있다.

$(document).ready(function () {
  $('tr:odd').css('background', 'green');  //홀수
  $('tr:even').css('background', 'yellow');  // 짝수
  
  $('tr:first').css('background', '#000000').css('color', '#FFFFFF');  // first-child
  $('tr:last').css('background', 'rgba(255,0,0,.8)').css('color','#fff'); // last-child
 
  
  // 함수 필터 선택자, 1부터 시작
  $('td:nth-child(4n+1)').css('background', '#565656');
  
  // eq(n) : n 번째 선택, 0부터 시작
  $('tr:eq(0)').css('background', '#000000').css('color', 'White');
  
});

<table summary="주소록">
  <tr><th>이름</th><th>혈액형</th><th>지역</th><th>연락처</th></tr> <!-- 0번이라 짝수 -->
  <tr><td>강민수</td><td>AB형</td><td>서울특별시 송파구</td><td>000-0000</td></tr>
  <tr><td>구지연</td><td>B형</td><td>미국 캘리포니아</td><td>000-0000</td></tr>
  <tr><td>김미화</td><td>AB형</td><td>미국 메사추세츠</td><td>000-0000</td></tr>
  <tr><td>김선화</td><td>O형</td><td>서울 강서구</td><td>000-0000</td></tr>
  <tr><td>남기주</td><td>A형</td><td>서울 노량진구</td><td>000-0000</td></tr>
  <tr><td>윤하린</td><td>B형</td><td>서울 용산구</td><td>000-0000</td></tr>
</table>

 

 

CSS 필터 선택자 2

＊ filter()을 사용하면 문서 객체의 범위를 좁혀 선택할 수 있다.

// 필터 선택자
$('h3').filter(':even').css({
  backgroundColor:'black',
  color:'White'
});

// 응용
$('h3').css('background', 'Orange').filter(':even').css('color', 'Red');

<h3>Header-0</h3>
<h3>Header-1</h3>
<h3>Header-2</h3>
<h3>Header-3</h3>
<h3>Header-4</h3>
<h3>Header-5</h3>

 

 

end() method

＊ 문서 객체 선택을 한 단계 뒤로 돌린다. (과거로)

end()

$(document).ready(function () {
	$('h2').css('background', 'Orange').filter(':even').css('color', 'White').end().filter(':odd').css('color', 'Red');
});

 

 

addClass(), removeClass()

＊ 클래스를 추가, 삭제 할 수 있다.

$('선택자').addClass('클래스명');
$('선택자').removeClass('클래스명');

$(document).ready(function () {
  $('li').addClass('back1'); // 클래스 추가
  $('li').addClass('back2'); // 클래스 삭제
  
  $('li').removeClass('back1').addClass('back2'); // 동시 사용 가능
});

<ul>
  <li>첫번째 리스트 내용</li>
  <li>두번째 리스트 내용</li>
  <li>세번째 리스트 내용</li>
  <li>네번째 리스트 내용</li>
  <li>다섯번째 리스트 내용</li>
</ul>

 

 

each();

＊ 태그의 반복문이다. (for문처럼 반복해서 순차적으로 실행된다.)
＊ 매개변수로 index를 사용하면 자동으로 0부터 시작하는 index 번호를 얻을 수 있다.

$('선택자').each(function(index){
     //처리코드
});

$(document).ready(function () {
    $('h2').each(function (index) {
        $(this).addClass('high_light_' + index);
    });
});

<h2>item - 0</h2>  <!-- index 0 -->
<h2>item - 1</h2>
<h2>item - 2</h2>
<h2>item - 3</h2>
<h2>item - 4</h2>

 

 

index()

＊ 인덱스 순서를 뽑아낼 수 있다.

$(document).ready(function(){

  $('.btn a').click(function(){
    var ind = $(this).index();
    //var ind = $(this).index('.btn a'); // 이렇게 하면 인덱스값을 제대로 찾을 수 있다.
    console.log(ind);
  });

});

<div class="gallery">
  <ul>
    <li><img src="./images/img1.jpg" alt=""></li>
    <li><img src="./images/img2.jpg" alt=""></li>
    <li><img src="./images/img3.jpg" alt=""></li>
    <li><img src="./images/img4.jpg" alt=""></li>
  </ul>

  <ul class="btn">
    <li><a href="#">이미지1</a></li>  <!-- 0 -->
    <li><a href="#">이미지2</a></li>  <!-- 1 -->
    <li><a href="#">이미지3</a></li>  <!-- 2 -->
    <li><a href="#">이미지4</a></li>  <!-- 3 -->
  </ul>
</div>

 

 

is();

＊ 문서 객체의 특징을 판별하여 true/false 반환한다
＊ 조건문에서 사용한다

if($(this).is('.select')){
     $(this).css('background','orange');
};

$('p').each(function(index){
  if ($(this).is('.select')) {
  	$(this).css('background', 'Orange');
  };
});

 

 

html()/text()

＊ 문서 객체의 내부 추가
＊ JavaScript의 innerHTML과 동일하다.

$(document).ready(function () {
    $('div.d1').html('<h1>div 박스안에 내용</h1>');
    $('p.p1').text('p 박스안에 내용');
});

$(document).ready(function () {
    var a = '';
    a += '<ul>';
    a += '<li>리스트1</li>';
    a += '<li>리스트2</li>';
    a += '</ul>';

    $('div.d1').html(a);
    $('p.p1').text('p 박스안에 내용');
});

<div class="d1"></div>
<p class='p1'></p>

 

 

remove(), empty()

＊ 문서 객체의 제거
＊ 살인마와 휴지통비우기

$(document).ready(function () {
    $('h2').first().remove();   //특정 문서 객체를 제거
    $('div.d1').empty();  //특정 문서 객체의 후손을 모두 제거
});

<div>
    <h2>Header-0</h2> <!-- h2:first 제거됨 -->
    <h2>Header-1</h2>
</div>
<div class="d1">
    <h2>Header-2</h2>  <!-- dl 자식 제거 -->
    <h2>Header-3</h2>  <!-- dl 자식 제거 -->
</div>

 

 

appendTo(), prependTo()

＊ A(자식)를 B(부모) 태그의 자식으로 순서대로 추가, 이동시킨다.

$('자식').appendTo('부모')  // 순서대로 추가 or 자식을 맨 끝으로 이동
$('자식').prependTo('부모')  // 역순으로 추가 or 자식을 맨 위로 이동

＊ A영역에 태그를 부를 때에는 appendTo는 해당 태그를 맨 끝으로, prependTo는 맨 위로 이동시킨다.

 

$(document).ready(function () {
    $('<h1>Hello World .. !</h1>').appendTo('.box');
    $('<p>Hello World content</p>').appendTo('.box');
    $('<img src="images/img1.jpg" alt="">').appendTo('.box');
});

<div class="box"></div>

 

 

append(), prepend(), after(), before()

$(document).ready(function () {
    $(A).append(B)  // B(자식)를 A(부모)의 뒷 부분에 추가
    $(A).prepend(B)  // B(자식)를 A(부모)의 앞 부분에 추가
    $(A).after(B)  // B(자식)를 A(부모)의 뒷 부분에 추가
    $(A).before(B)  // B(자식)를 A(부모)의 뒷 부분에 추가
});

 

 

setInterval();

 

$(document).ready(function () {
    $('img').css('width', 200);  // .image의 크기를 조정합니다.

    setInterval(function () { // 함수를 2초마다 실행합니다.
        // 첫 번째 이미지를 마지막으로 보냅니다.
        $('img').first().appendTo('.gallery');
    }, 2000);
});

<div class="gallery">
    <img src="images/Chrysanthemum.jpg"/>
    <img src="images/Desert.jpg"/>
    <img src="images/Hydrangeas.jpg"/>
    <img src="images/Jellyfish.jpg"/>
    <img src="images/Koala.jpg"/>
</div>

 

 

clone()

＊ 복제

$(document).ready(function () {
    $('div').append($('p').clone());
});

<p>복제될 단락 부분</p>
<hr>
<div>내용부분</div>
<hr>