제이쿼리 주요 메서드 요소 정리

요소의 문서에서의 위치

$('요소').offset().top
함수는()사용 offset 메서드가 return값(객체)이 들어온다. 객체가 리턴되어 속성값 .top 지정
스크롤 위치를 찾을떄 

 

---

요소의 기준에서의 위치

$('요소').position().left
바 에니메이션을 만들때 

---

요소의 크기를 구할떄 

$('요소').outerWidth() - width + padding + border

 

$('요소').outerWidth() - width + padding + border 포함한 요소의 크기를 구한다.

$('요소').innerWidth() - width + padding / 안쪽크기만 구한다. border을 제외

$('요소').width() - width 요소의 순수 크기만 구할때

$(window).outerWidth - 화면크기 + 스크롤바(17px)를 포함한 크기 (1920창기준으로 스크롤 17을 뺀 1,903 일때 1920을 구한다.)

(window 변수키워드이기 때문에 '' 사용안함 )

---

요소의 갯수판단(요소의 존재여부)

js commen은 문서 전체를 읽기 때문에 서브페이지에서 요소를 읽지 못하면 작동안됨. 조건처리

 

$('요소').lenth - 0 없다. 1 이상이면 있음 ( lenth 가 있을때만 실행시킨다는 조건문 )

 

---

요소에 클래스 유무판단 (특정 페이지만 코드를 실행시킬때)

$('요소').hasClass('클래스명')

 

 

---

요소가 보이는지 판단 (디스플레이 none 판단)

기본방법 css 

if ($('요소').css('display') === 'none' )

if (if ($('요소').is(':visible')) / 요소가 보이면 true , 안보이면 false 값을 리턴함

 

---

클릭한 요소의 순서값 판단

$(this).index() -해당 클릭된 요소가 형제요소중 몇번째인지 숫자로 판단 (첫번째 0 )

 

---

 

스크롤바 위치

$(window).scrollTop() - 스크롤바 위치를 가져옴 / get

$(window).scrollTop(500) - 500px 값으로 스크롤함 / set

$('요소').scrollLeft (25) - 요소자체로 바로 적용가능

 

()값을 쓰면 바로사용 가능 , 값을 가져올수있다.

 

---

 

탐색 클릭한 요소의 다음요소를 선택 

next() (css 인접형제 선택자와 동일)

nextAll() 형제가 여러개일때 형제 모든 요소를 선택

 

 

---

공식문서 활용

https://api.jquery.com/css/#css-propertyName