jQuery-CSS 선택기 메서드

jQuery 라이브러리는 World Wide Web Consortium 사이트에 설명 된대로 CSS (Cascading Style Sheet) 사양 1 ~ 3에 포함 된 거의 모든 선택기를 지원합니다.

JQuery 라이브러리를 사용하는 개발자는 브라우저에 JavaScript가 활성화되어있는 한 브라우저와 버전에 대한 걱정없이 웹 사이트를 향상시킬 수 있습니다.

대부분의 JQuery CSS 메소드는 jQuery 객체의 내용을 수정하지 않으며 DOM 요소에 CSS 속성을 적용하는 데 사용됩니다.

CSS 속성 적용

JQuery 메서드를 사용하여 CSS 속성을 적용하는 것은 매우 간단합니다. css( PropertyName, PropertyValue ).

방법의 구문은 다음과 같습니다.

selector.css( PropertyName, PropertyValue );

여기에서 PropertyName 을 자바 스크립트 문자열로 전달할 수 있으며 해당 값에 따라 PropertyValue 는 문자열 또는 정수일 수 있습니다.

다음은 두 번째 목록 항목에 글꼴 색상을 추가하는 예입니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

여러 CSS 속성 적용

단일 JQuery 메서드를 사용하여 여러 CSS 속성을 적용 할 수 있습니다. CSS( {key1:val1, key2:val2....). 단일 호출에서 원하는만큼 속성을 적용 할 수 있습니다.

방법의 구문은 다음과 같습니다.

selector.css( {key1:val1, key2:val2....keyN:valN})

여기에서 위에서 설명한대로 key를 property로, val을 값으로 전달할 수 있습니다.

다음은 두 번째 목록 항목에 글꼴 색상과 배경색을 추가하는 예제입니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

요소 너비 및 높이 설정

그만큼 width( val )height( val ) 메서드를 사용하여 요소의 너비와 높이를 각각 설정할 수 있습니다.

다음은 첫 번째 분할 요소의 너비를 설정하는 간단한 예제입니다. 나머지 요소는 스타일 시트에 의해 설정된 너비를 갖습니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100);
            $("div:first").css("background-color", "blue");
         });
      </script>
		
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

JQuery CSS 메서드

다음 표에는 CSS 속성을 사용하는 데 사용할 수있는 모든 방법이 나열되어 있습니다.

Sr. 아니. 방법 및 설명
1 css (이름)

일치하는 첫 번째 요소에 대한 스타일 속성을 반환합니다.

2 css (이름, 값)

일치하는 모든 요소의 값으로 단일 스타일 속성을 설정합니다.

css (속성)

일치하는 모든 요소에 대한 스타일 속성으로 키 / 값 개체를 설정합니다.

4 높이 (발)

일치하는 모든 요소의 CSS 높이를 설정합니다.

5 높이 ()

첫 번째 일치 요소의 현재 계산 된 픽셀, 높이를 가져옵니다.

6 innerHeight ()

첫 번째로 일치하는 요소의 내부 높이 (테두리 제외 및 패딩 포함)를 가져옵니다.

7 innerWidth ()

첫 번째로 일치하는 요소의 내부 너비 (테두리 제외 및 패딩 포함)를 가져옵니다.

8 오프셋 ()

문서를 기준으로 일치하는 첫 번째 요소의 현재 오프셋 (픽셀)을 가져옵니다.

9 offsetParent ()

일치하는 첫 번째 요소의 위치가 지정된 부모가있는 jQuery 컬렉션을 반환합니다.

10 outerHeight ([여백])

일치하는 첫 번째 요소의 외부 높이 (기본적으로 테두리 및 안쪽 여백 포함)를 가져옵니다.

11 outerWidth ([여백])

일치하는 첫 번째 요소의 외부 너비 (기본적으로 테두리 및 패딩 포함)를 가져옵니다.

12 위치 ()

오프셋 부모를 기준으로 요소의 위쪽 및 왼쪽 위치를 가져옵니다.

13 scrollLeft (val)

값이 전달되면 스크롤 왼쪽 오프셋이 일치하는 모든 요소의 해당 값으로 설정됩니다.

14 scrollLeft ()

첫 번째로 일치하는 요소의 스크롤 왼쪽 오프셋을 가져옵니다.

15 scrollTop (발)

값이 전달되면 스크롤 상단 오프셋이 일치하는 모든 요소의 해당 값으로 설정됩니다.

16 scrollTop ()

첫 번째로 일치하는 요소의 스크롤 위쪽 오프셋을 가져옵니다.

17 너비 (val)

일치하는 모든 요소의 CSS 너비를 설정합니다.

18 너비 ()

첫 번째 일치 요소의 현재 계산 된 픽셀, 너비를 가져옵니다.