[ codeit ] jQuery - jQuery 활용하기(1)

 jQuery I 

1강. DOM pt.1

HTML의 트리구조 = 문서 객체 모델(Document Object Model), DOM 구조, 텍스트가 아닌 Object로 생성된 구조

 

2강. DOM pt.2

document - html - head - title / meta

                       - body - form - input

typeof document = "object"

document.getElementById('submin-btn');
//document라는 최상위 객체에서 불러옴

jQuery를 이용해서 DOM트리 다루기

- 다양한 방식으로 DOM객체 선택하기

- DOM 트리에 요소 추가하고 빼기

- DOM트리의 요소 변형시키기

 

3강. jQuery 사용해보기

<button id="hello">Hello Codeit!</button>
    <ul id="todo-list">
        <li class="item">청소</li>
        <li class="item">코딩</li>
        <li class="item">숙제</li>
        <li class="item">영화</li>
    </ul>

    $("#hello").on('click', sayHello);

    function sayHello(){
       alert($('#hello').text());
        $('#hello').css('background', '#7f8ff4');
    }

 

요소를 선택하는 부분 + 동작을 명령하는 부분

 

4강. jQuery = '선택'+'동작'

   //선택    //동작  
$('#hello').on('click', sayHello);
$('#hello').text();
$('#hello').css('background', '#7f8ff4');

 

5강. CSS로 '선택'하기

CSS 써먹기 : jQuery는 CSS문법을 그대로 사용

CSS 선택자 복습하기 1) 태그이름 ex) h1, h2.. 2) 클래스/아이디 #, . 3) 자식선택자 4) 직속자식 5) 복수선택 6) 여러조건

                           7) 가상클래스 ex) n번째 자식( :last-child, :not(:last-child) ), 마우스오버(hover)

CSS명시도 : !important > id[100] > class[10] > tag[1] > *[0]

 

6강. jQuery 내부 살펴보기

jQuery는 프로그래밍언어x 자바스크립트 라이브러리(여러 함수, 변수가 정의된 js 파일)

//jquery로 css 꾸미기
$('li').css('border', '1px solid red')

//attr: 선택요소의 속성을 받아오는 함수
$('button').attr('id')  //hello

//class추가
$('button').addClass('new-class')

 

7강. jQuery의 '동작'

클래스 관련

//item에 header라는 클래스 추가
$('#item').addClass('header');

//item에 header라는 클래스 제거
$('#item').removeClass('header');

//item에 header라는 클래스가 없으면 추가, 있으면 제거
$('#item').toggleClass('header');

//item에 header라는 클래스가 있으면 true, 없으면 false 리턴
$('#item').hasClass('header');

 

속성 관련

//이미지 태그의 src속성 받아오기
$('img').attr('src');

//이미지 태그의 src속성 지정하기
$('img').attr('src', 'images/logo.png');

//h1 태그의 텍스트 받아오기
$('h1').text();

//h1 태그의 텍스트 지정하기
$('h1').text('Hello World!');

//h1 태그의 HTML 텍스트 지정하기
$('h1').html('<b>Hello World!</b>');

 

스타일 관련

//item의 font-weight를 bold로 지정하기
$("#item").css('font-weight','bold');

//item의 background-color 가져오기
$("#item").css('background-color');

 

8강. 청기백기 I

9강. 청기백기 II

//someFunction 함수가 1초 후 실행
setTimeout(someFunction, 1000);

 

10강. 요소 추가하기

//모든 li요소 뒤에 li.item 추가
$('li').after('<li class="item">새로운 아이템</li>');

//마지막 li요소 뒤에 li.item추가
$('li:last-child').after('<li class="item">새로운 아이템</li>');
//마지막 li요소 앞에 li.item추가
$('li:last-child').before('<li class="item">새로운 아이템</li>');

//ul에 li.item를 마지막 자식요소로 추가
$('ul').append('<li class="item">새로운 아이템</li>');
//ul에 li.item를 첫번째 자식요소로 추가
$('ul').prepend('<li class="item">새로운 아이템</li>');

 

11강. 따옴표 주의사항

' 와 " 구분해서 문자열이 끊기지 않도록 쓰기 -> 중복되는 따옴표앞에 역슬래쉬로 구분(\)

 

12강. 깨깨오톡

$('#send').on('click', sendText);

function sendText(){
  var newMessage = $('#new-message').val();
  //console.log($('#new-message').val());
  
  //$('.chatbox').append('<div class="friend-bubble bubble">' + 잘지내? + '</div>');
  //$('.chatbox').append('<div class="my-bubble bubble">' + 응 + '</div>');
  if(newMessage != ''){
  $('.chatbox').append('<div class="my-bubble bubble">' + newMessage + '</div>');
  }
  
  $('#new-message').val(''); //전송 후 빈문자열 넘기기
  
}

 

13강. 요소 이동과 삭제

<button id="hello">Hello Codeit!</button>
    <ul id="todo-list">
        <li id="cleaning" class="item">청소</li>
        <li id="coding"  class="item important">코딩</li>
        <li id="homework"  class="item important">숙제</li>
        <li id="movie"  class="item">영화</li>
    </ul>
    
$('#claning').before('<li class="item".피아노</li>'); //청소앞에 피아노 추가

$('#claning').before($('#movie')); //영화가 청소앞으로 이동
$('#claning').after($('#movie')); //영화가 청소뒤로 이동

$('#todo-list').append($('#movie')); //todo-list의 마지막요소로 이동
$('#todo-list').prepend($('.important')); //important들이 todo-list의 첫요소로 이동

$('.movie').remove(); //영화요소 삭제 

 

14강. 더 '선택'하기

filter

$('button').filter('.color-3').text('SELECTED!');
//button 태그 중 color-3를 가진 요소만 text를 바꿈

filter()는 ()안의 조건으로 선택된 요소를 한번 더 걸러줌

 

not

$('button').not('.color-3').text('SELECTED!');
//button태그 중 color-3를 가진 요소만 제외하고 text를 바꿈

not()은 ()안의 조건을 제외한 요소에만 적용

 

eq

$('button').eq(1).text('SELECTED!');
//button태그의 두번째(eq(1))요소에 text를 바꿔줌

eq는 선택된 요소중 n번째 요소 하나만 골라냄

 

parent

$('#btn-1').parent().css('background-color','black');
//btn-1의 부모요소에 css적용

선택된 요소의 부모요소에 적용됨

 

children

$('#box-1').children().css('background-color', 'black');
//box-1의 모든 직속 자식요소에 css적용

선택된 요소의 모든 직속 자식요소에 적용됨

children()에 조건이 있을 경우 filter의 역할도 함

 

find

$('#box-1').find().css('background-color', 'black');
//box-1의 모든 자식요소, 손자요소..에 css적용

선택된 요소의 자식, 손자, 증손자 요소까지 모두 적용됨

 

siblings

$('#btn-1').siblings().text('SELECTED!');
//btn-1의 이웃요소에 적용됨

선택된 요소의 이웃(형제)요소에 적용됨

siblings()에 조건이 있을 경우 filter의 역할도 함