jquery lesson1 (학습 54일차 TIL)

210830 오늘은 자바스크립트 라이브러리의 일종인 jquery에 대해 학습했다. 제이쿼리는 계속해서 쇠퇴하고 있지만, 아직도 시장 점유율을 어느 정도는 차지하고 있으므로 배우지 않고는 넘어갈 수 없는 계륵같은 상황이라고 할 수 있겠다.

Jquery Method Basic

/* 제이쿼리 기본 문법 */
$(document).ready(function(){
  $('.obj5').parent().css('border', 'dashed 2px #0f0');
  $('.obj3').children('.theObj1').css('color', 'red');
  // 매우 직관적이고 쉬운 문법
  $('#wrap h3').css().css()
  // 체이닝 기법, 하나의 선택자에 같은 메서드를 여러 차례 이어서 작성할 수 있음.
  $(':text').css({'background':'#ccc', 'border':'solid 1px #000'});
  // 폼의 입력 요소를 선택할 때 (:종류) 형식의 선택자 사용
});

/* document 생략 가능 */
$(function(){
  $('#list1 li:odd').css('background', 'yellow');
  // index번호로 홀 수 선택 0부터 시작. 짝수는 :even
  // :first, last
  $('#list1 li').eq(1).css('font-style', 'italic');
  $('#list1 li:lt(3)').css('border', 'dotted 2px aqua');
  // index 3 미만 요소들
  $('#list1 li:gt(3)').css('border', 'dotted 2px green');
  // index 3 이상 요소들
  $('#list2 li:contains("리스트11")').css('background', 'aqua')
  $('#list2 li:has("span")').css('color', 'gray')
  $('#list2 li').find('a').css('background', 'red');
  $('#list2 li').not('.theObj').css('font-size', '14px');
  $('#list2 li').filter('.theObj').css('font-size', '24px');
  
  /* html 조작 */
  $('h2.theTitle').html('<a href="#">요소 객체 조작</a>');
      // 하위 요소를 삽입한다. 내용을 새로 변경
  $('.obj1').text('리스트2');
  // 텍스트를 새 텍스트로 변경
  $('#list3').append('<li>리스트6</li>');
  // 마지막 위치에 요소 추가
  $('#list3').prepend('<li>리스트1</li>');
  // 처음 위치에 요소 추가
  $('<li>이전 추가</li>').insertBefore($('#list3 li').eq(4));
  // 새요소를 선택요소의 앞에 추가
  $('<li>이후 추가</li>').insertAfter($('#list3 li').eq(5));
  // 새요소를 선택요소의 뒤에 추가
  $('.obj1').clone().appendTo('#list3');
  // 복제 후 맨 마지막에 추가
  $('#list3 li').eq(0).remove();
  $('#list3 li').eq(0).attr('class'); // class 값 반환
  $('#list3 li').eq(0).attr('class', 'obj2');
  // 클래스명이 obj2로 변경됨. attr('속성명', '속성값');
  // {'':'', '':''} 어러개의 속성과 값을 바꿀 수도 있다.

  $('#list3 li').eq(0).toggleClass('obj3');
  // class 추가 or 삭제
});