jQuery의 핵심 구성 요소는 CSS 구문을 상속받아 브라우저 호환성 걱정 없이 DOM 요소의 태그 이름, 속성 이름, 상태 등을 빠르고 정확하게 선택할 수 있는 선택기 엔진입니다.
따라서 대부분의 jQuery 선택기는 아래에서 소개하는 CSS 선택자는 앞서 배운 CSS 선택자와 유사합니다
CSS 선택자는 페이지에서 요소를 찾고 위치를 지정하고 요소에 스타일을 설정하는 데 사용됩니다
jQuery 선택자도 마찬가지입니다 요소를 찾는 데 사용됩니다 . 요소를 찾은 후 지정된 방법을 사용하여 요소를 수정, 삭제 또는 이동할 수도 있습니다
jQuery 선택기를 사용할 때 "$()" 함수를 사용하여 CSS 규칙이 jQuery 개체에 매개변수로 전달된 후 페이지의 해당 요소가 포함된 jQuery 개체가 반환됩니다. 그런 다음 얻은 DOM 노드에서 동작 작업을 수행할 수 있습니다.
Element Selector
jQuery 요소 선택기는 이름을 기준으로 요소를 선택합니다.
페이지의 모든 <p> 요소 선택:
$("p")
예
사용자가 버튼을 클릭하면 모든 <p> 색상이 변경됩니다.
Run 프로그램을 사용해 보세요#id selector
jQuery #id selector는 HTML 요소의 id 속성을 통해 지정된 요소를 선택합니다. 참고: ID는 페이지에 한 번만 표시될 수 있습니다. 일반적으로 개발자는 이 규칙을 준수하고 유지해야 합니다. 하지만 페이지에 세 번 나타나고 CSS 스타일을 사용하면 이 세 가지 요소가 여전히 효과를 수행합니다. 그러나 jQuery에서 이렇게 하면 문제가 발생하므로 하나의 ID를 만들어야 합니다. 페이지에서 하나의 ID만 사용하는 습관ID별로 요소를 선택하는 구문은 다음과 같습니다.$("#test")
Example
사용자가 버튼을 클릭하면 is id="test "속성이 있는 요소가 빨간색으로 변합니다:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css('color','red'); //添加一个行为
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>프로그램을 실행하고 시도해 보세요.class selector
jQuery 클래스 선택기는 지정된 클래스별로 요소를 찾을 수 있습니다.
구문은 다음과 같습니다:
$(".test")
Instance
사용자가 버튼을 클릭하면 class="test" 속성을 가진 모든 요소의 색상이 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").css('color','red');
});
});
</script>
</head>
<body>
<h2>标题</h2>
<p>段落</p>
<p id="test">我变颜色了</p>
<button>点我</button>
</body>
</html> 프로그램 실행해 보기
더 많은 선택기 예제
| Syntax | Description |
|---|---|
| $(this) | 현재 HTML 요소 |
| $("p") | 모든 <p> 요소 |
| $("p.intro") | class="intro"인 모든 <p> 요소 |
| $(".intro") | 모든 클래스= " 소개" 요소 |
| $("#intro") | id="intro" 요소 |
| $("ul li:first") | 각 <ul> 요소의 첫 번째< |
| $("[href$='.jpg']") | 속성 값이 ".jpg"로 끝나는 모든 href 속성 |
| $("div#intro . head") | id="intro" <div> 요소에 class="head"가 있는 모든 요소 |
