jQuery는 클래스 속성과 CSS 스타일을 수정합니다.

클래스 속성 수정

클래스 속성은 클래스 이름을 지정하는 클래스 속성입니다.
스타일을 지정하기 위해 클래스 선택기를 사용할 때 요소의 클래스 이름, 즉 클래스 속성의 값을 지정해야 합니다. 각 HTML 요소에는 하나의 클래스 속성만 있습니다. 그러나 클래스 속성의 값은 여러 이름이 될 수 있습니다. 즉, 공백으로 구분된 단어 목록이 포함될 수 있습니다. 구체적인 사용 방법은 다음을 참조하세요: http://www.w3school.com.cn/css/css_selector_class.asp

jQuery로 클래스 이름을 수정하려면 attr() 메서드를 사용하여 "class" 속성을 수정하거나 addClass(), RemoveClass(),ggleClass() 및 기타 메서드를 사용할 수 있습니다
.

addClass()

API:

http://api.jquery.com/addClass/

addClass() 메소드는 지정된 클래스 이름(하나 이상)을 일치하는 요소에 추가합니다. 요소의 경우 클래스 속성은 여러 값을 가질 수 있습니다. 이 방법은 기존 값을 제거하지 않고 하나 이상의 클래스 속성을 원래 값에 추가합니다. 클래스 속성을 설정하기 위해 attr() 메소드를 사용하는 것은 덮어쓰기 프로세스인 반면, addClass()는 추가 프로세스입니다. 클래스는 궁극적으로 공백으로 구분됩니다.
여러 클래스를 추가해야 하는 경우 클래스 이름을 공백으로 구분하세요.
1.4부터 이 메소드의 매개변수를 함수에 전달할 수도 있습니다.


removeClass()

API: http://api.jquery.com/removeClass/

RemoveClass() 메서드는 선택한 요소에서 하나 이상의 클래스를 제거합니다. 여러 클래스를 제거해야 하는 경우 클래스 이름을 공백으로 구분합니다. 매개변수가 전달되지 않으면 이 메소드는 선택한 요소의 모든 클래스를 제거합니다.

toggleClass()

API:

http://api.jquery.com/toggleClass/ ToggleClass() 메소드는 선택한 요소의 하나 이상의 클래스를 전환(설정 또는 제거)합니다.

이 메소드는 각 요소에 지정된 클래스를 확인하여 존재하면 삭제하고 존재하지 않으면 추가합니다

. 매개변수를 추가하면 삭제만 설정하거나 추가 작업만 설정할 수 있습니다. 형식:$(selector).toggleClass(class,switch) 스위치 값이 true이면 추가만 되고, false이면 삭제만 됩니다.


hasClass()


API:

http://api.jquery.com/hasClass/

hasClass() 메소드는 선택한 요소에 지정된 클래스가 포함되어 있는지 확인합니다. is() 메소드를 사용하여 동일한 기능을 수행할 수도 있습니다. 메소드 매개변수는 ".className"과 같은 선택기 문자열에 전달됩니다.

CSS 스타일 수정


jQuery에는 요소의 CSS 속성을 직접 반환하거나 설정하는 몇 가지 메서드도 있습니다.

css()

API:

http://api.jquery.com/css/ 읽기 작업: 일치하는 요소 세트
에서 첫 번째 요소의 지정된 스타일 값(하나 이상)을 가져옵니다. 참고: 여러 스타일 값을 읽는 작업은 jQuery v1.9에서만 추가되었습니다.

쓰기 작업: 일치하는 요소 집합의 각 요소에 대해 하나 이상의 CSS 속성 값을 설정합니다.

전달되는 매개변수는 단일 키-값 쌍, PlainObject에서 지정한 여러 값 또는 함수(v1.4)일 수 있습니다. jQuery는 각 브라우저마다 다른 특정 상황을 처리합니다. 예를 들어, W3C의 cssFloat는 IE에서 styleFloat입니다. 그러면 jQuery는 이를 각 브라우저가 가져야 하는 이름으로 변환하는 데 도움을 줍니다. .
또한 jQuery는 처리할 수 있는 .css("Background-color") 및 .css("BackgroundColor")와 같은 CSS 및 DOM 형식의 다중 단어 속성을 합리적으로 해석합니다.


높이() 및 너비()


API:
http://api.jquery.com/height/

및

http://api.jquery.com/width/ 높이 및 너비 속성. 상자 크기 속성을 사용하지 않는 한 이 너비 및 높이 값에는 패딩, 테두리 및 여백이 포함되지 않습니다. 글을 작성할 때 설정되는 것은 상자 크기 부분을 제외한 내용의 너비와 높이입니다.

읽기 작업은 여전히 ​​컬렉션의 첫 번째 요소의 속성 값을 반환합니다. .css("width")와 .width()의 차이점은 전자는 400px와 같이 단위가 있는 값을 반환하고 후자는 단위가 없는 픽셀 값, 즉 400을 반환한다는 것입니다. 따라서 일부 계산에 값을 사용해야 하는 경우 .height() 및 .width()를 권장합니다 읽은 값은 반드시 정수일 필요는 없으며, 사용자가 페이지를 확대/축소하는 경우 브라우저에서 이러한 상황에 대한 API를 노출하지 않기 때문에 값이 올바르지 않을 수 있습니다. 또 다른 부정확성이 있습니다. 이 요소의 상위 요소가 숨겨져 있으면 요소의 크기가 정확하게 읽혀지지 않을 수 있습니다.

쓰기 작업에서 지원되는 값 유형은 문자열 또는 숫자입니다.
숫자인 경우 jQuery의 기본 단위는 px입니다.
문자열인 경우 숫자와 단위 외에 100%, 50%, 자동 등 합리적인 CSS 측정값을 사용할 수 있습니다.



위치()

API: http://api.jquery.com/position/
상위 요소(오프셋 상위)를 기준으로 첫 번째로 일치하는 요소의 위치를 ​​반환합니다.
읽기 작업만 수행합니다.

오프셋()

API: http://api.jquery.com/offset/
첫 번째로 일치하는 요소의 좌표를 반환하거나 일치하는 각 요소의 좌표를 설정합니다.

offsetParent()

API: http://api.jquery.com/offsetParent/
상위 클래스로 돌아가서 읽기 작업만 수행합니다.

scrollLeft() 및 scrollTop()

API: http://api.jquery.com/scrollLeft/ 및 http://api.jquery.com/scrollTop/