jQuery 선택기
jQuery 선택기를 사용하면 HTML 요소 그룹이나 개별 요소에 대해 작업을 수행할 수 있습니다.
jQuery 선택기
jQuery 선택기를 사용하면 HTML 요소 그룹이나 개별 요소에 대해 작업을 수행할 수 있습니다.
jQuery 선택기는 요소의 ID, 클래스, 유형, 속성, 속성 값 등을 기반으로 HTML 요소를 "찾기"(또는 선택)합니다. 이는 일부 사용자 정의 선택기 외에 기존 CSS 선택기를 기반으로 합니다.
jQuery의 모든 선택자는 달러 기호($())로 시작합니다.
Element Selector
jQuery 요소 선택기는 이름을 기준으로 요소를 선택합니다.
페이지의 모든 <p> 요소 선택:
$("p")
Example
사용자가 버튼을 클릭하면 모든 <p> 요소가 숨겨집니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요#id selector
jQuery #id selector는 HTML 요소의 id 속성을 통해 지정된 요소를 선택합니다. 페이지에 있는 요소의 ID는 고유해야 하므로 페이지에 있는 고유한 요소를 선택하려면 #id 선택기를 사용해야 합니다. id로 요소를 선택하는 구문은 다음과 같습니다.
$("#test")
Example
사용자가 버튼을 클릭하면 id="test" 속성을 가진 요소는 다음과 같습니다. 숨겨진:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
</html>예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.class 선택기
jQuery 클래스 선택기는 지정된 클래스별로 요소를 찾을 수 있습니다. 구문은 다음과 같습니다:
$(".test")
Instance
사용자가 버튼을 클릭하면 class="test" 속성을 가진 모든 요소가 숨겨집니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html> 인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
추가 예제
| 语法 | 描述 | 实例 |
|---|---|---|
| $("*") | 选取所有元素 | 在线实例 |
| $(this) | 选取当前 HTML 元素 | 在线实例 |
| $("p.intro") | 选取 class 为 intro 的 <p> 元素 | 在线实例 |
| $("p:first") | 选取第一个 <p> 元素 | 在线实例 |
| $("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| $("[href]") | 选取带有 href 属性的元素 | 在线实例 |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 | 在线实例 |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 | 在线实例 |
| $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 | 在线实例 |
| $("tr:even") | 选取偶数位置的 <tr> 元素 | 在线实例 |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 | 在线实例 |
별도의 파일에서 jQuery 함수 사용
웹 사이트에 여러 페이지가 있고 jQuery 함수를 쉽게 유지 관리하려면 jQuery 함수를 별도의 .js 파일에 넣으세요.
튜토리얼에서 jQuery를 시연할 때 <head> 섹션에 함수를 직접 추가합니다. 그러나 다음과 같이 별도의 파일에 저장하는 것이 더 좋습니다(src 속성을 통해 파일 참조):
Example
<head>
<script src="http://libs.baidu .com/jquery/1.10.2/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
<script src="http://libs.baidu .com/jquery/1.10.2/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
