Dev log - 32, jQuery #8

제이쿼리 활용 기법

check value

• 속성 선택자를 활용해서, if 구문으로 결과 도출
  

file reader (자바스크립트 주로 사용)

• .mouseenter() 메서드는 .mouseover() 와 같이 작동하지만, 자식 요소에서는 작동하지 않는 다는 특징이 있음. (.mouseleave() 와 .mouseout() 도 같음)
  (참고 사이트 : https://api.jquery.com/mouseenter/)

• console.log($(this)) 는 제이쿼리에서만 사용 가능한 요소이지만,
  console.log(this) 는 자바스크립트 요소로써 DOM 요소로 받아옴

• 업로드 된 파일을 읽어올 때는 FileReader() 를 객체 형태로 불러온 뒤, .readAsDataURL() (FileReader 의 메서드, 컨텐츠를 불러옴)를 활용해서 this.files 를 통해 이미지의 코드를 불러올 수 있음 (src에 넣으면 이미지를 나타낼 수 있음)

  function readURL(input){
    if( input.files && input.files[0] ){
      let reader = new FileReader();
      reader.readAsDataURL(input.files[0]);
      reader.onload = function(e) {
        $('#image-section').attr('src', e.target.result)
      }
    }
  }
  readURL(this);

input disabled

• 어떤 옵션을 선택했을 때 input 요소를 비활성화 하는 방법, if구문 사용

• .removeAttr('속성') 메서드를 사용하여, 해당 속성을 제거할 수 있음
  

file load

• .load() 메서드를 활용하여 서버에서 데이터를 가져올 수 있음 (XAMPP 와 같은 프로그램으로 서버를 구동해야 사용할 수 있는 메서드)

• class 나 id 값을 같게 하여서 쉽게 불러올 수 있음
  

file load paging

• header.html 과 footer.html 파일을 따로 만들어서, .load() 메서드로 불러오면 각각 페이지마다 메뉴를 바꿀 필요가 없음

• .split() 메서드를 사용하여, 현재 파일의 정보를 인식해서 이를 색상 변경에 활용할 수 있음