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 | 너비 () 첫 번째 일치 요소의 현재 계산 된 픽셀, 너비를 가져옵니다. |