📌Today I Learned

jQuery

ex05_css

CSS 조작

1. css(속성) > 읽기
2. css(속성, 값) > 쓰기

jQuery를 쓰면 간단하다.

//JavaScript > CSS 조작 > inline style sheet

//값 읽기
alert($("#box").css("color")); //rgb(0, 0, 0)

$("#box").css("color", "blue"); // return #box 객체

// 객체 형태로 여러 css를 쓸 수 있다.
$("#box").css({
  color: "blue",
  backgroundColor: "gold",
  fontSize: "3rem",
});

클래스

// 추가
//BOM
// box.className='one';

//DOM
// box.classList.add('one');
// box.classList.remove('two');

//jQuery
$("#box").addClass("one");
$("#box").addClass("two");

//제거
$("#box").removeClass("two");

$("#box").toggleClass("two");

정리

1. obj.css('attr')

• 읽기

2. obj.css('attr', 'value')

• 쓰기

3. obj.css('attr', 'value')
   .css('attr', 'value')
   .css('attr', 'value')
4. obj.css({
   attr:value,
   attr:value,
   attr:value
   })
5. obj.addClass('class')
6. obj.removeClass('class')
7. obj.toggleClass('class')

ex06_box

jQuery + Box Model

1. CSS 속성

console.log("width", $("#box").css("width"));
console.log("width", $("#box").css("height"));
$("#box").css("width", "300px");

2. 전용 메소드(jQuery) > 숫자형(px)

console.log("width()", $("#box").width());
console.log("height()", $("#box").height());
$("#box").height(300);

3. width/height + padding

console.log("innerWidth()", $("#box").innerWidth());
      console.log("innerHeight()", $("#box").innerHeight());

4. width/height + padding = border = orange 영역 + 파란색 테두리 > 눈에 보이는 실제 사각형

console.log("outerWidth()", $("#box").outerWidth());
console.log("outerHeight()", $("#box").outerHeight());

5. width/height + padding = border + margin = orange 영역 + 파란색 테두리 > 실제 사각형

console.log("outerWidth(true)", $("#box").outerWidth(true));
console.log("outerHeight(true)", $("#box").outerHeight(true));

ex07_manipulation

jQuery 태그 조작

콘텐츠 조작

• innerText, textContext > text()
• innerHTML > html()
• value > val()

//text()
$("#box").text("홍길동"); // 쓰기
alert($("#box").text()); //읽기

//html()
$("#box").html("<b>안녕하세요.</b>");
alert($("#box").html());

//val()
$("#txt1").val("기본값");
alert($("#txt1").val());

HTML 속성 조작

//BOM
//- obj.prop          > 읽기
//- obj.prop = value; > 쓰기

//DOM
//- obj.getAttribute('prop');         > 읽기
//- obj.setAttribute('prop', value);  > 쓰기

//*** attr(), prop() > 마음대로 사용 > 문제 발생 > 서로 교체
//jQuery
//1. HTML의 속성을 제어
// $("#txt1").attr("size", 50);
// alert($("#txt1").attr("size"));

//2. JavaScript의 프로퍼티를 제어
$("#txt1").prop("size", 50);
alert($("#txt1").prop("size"));

ex08

ex09

ex10

스크롤 인디케이터 바 생성

$(document).scroll(function () {
  // console.log($(document).scrollTop());

  // 문서의 세로길이(스크롤바 최대 위치) : 100%
  // = 스크롤바 위치 : x

  let x =
      ($(document).scrollTop() * 100) /
      ($(document).outerHeight() - $(window).outerHeight());

  $("#bar").css("width", x + "%");
});

ex11

스크롤 인디케이터 바 모듈화하기