jQuery Selectors
jQuery 선택기를 사용하면 HTML 요소 그룹이나 개별 요소에 대해 작업을 수행할 수 있습니다.
jQuery 선택기
jQuery 선택기를 사용하면 HTML 요소 그룹이나 개별 요소에 대해 작업을 수행할 수 있습니다.
jQuery 선택기는 요소의 ID, 클래스, 유형, 속성, 속성 값 등을 기반으로 HTML 요소를 "찾기"(또는 선택)합니다. 이는 일부 사용자 정의 선택기 외에 기존 CSS 선택기를 기반으로 합니다.
jQuery의 모든 선택자는 달러 기호($())로 시작합니다.
Element Selector
jQuery 요소 선택기는 이름을 기준으로 요소를 선택합니다.
페이지의 모든 <p> 요소 선택:
$("p")
예
사용자가 버튼을 클릭하면 모든 <p> 요소가 숨겨집니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery示例</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 선택기
jQuery #id 선택기는 HTML 요소의 id 속성을 통해 지정된 요소를 선택합니다.
페이지에 있는 요소의 ID는 고유해야 하므로 페이지에 있는 고유한 요소를 선택하려면 #id 선택기를 사용해야 합니다.
id로 요소를 선택하는 구문은 다음과 같습니다.
$("#test")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">PHP测试</p>
<button>点我</button>
</body>
</html>.class 선택기
jQuery 클래스 선택기는 지정된 클래스별로 요소를 찾을 수 있습니다.
문법은 다음과 같습니다: ($ (". Test")
문법
설명("*") 모든 요소 선택
$ (this) 현재 HTML 요소 선택
$ ("" " p.intro") 수업 소개가 포함된 <p> 요소를 선택하세요.
$("p:first") 첫 번째 <p> 요소 선택 ~ ("ul li:first-child") 각 <ul> 요소의 첫 번째 <li> 요소를 선택합니다.
$("[href] ") href 속성이 있는 요소를 선택합니다.
$("a [target='_blank']") 대상 속성 값이 "_blank"와 동일한 모든 <a> 요소를 선택합니다.
$("a[target! ='_blank']") "_blank" & Lt; a & gt; 요소
와 같지 않은 모든 대상 속성 값 선택 $ (": Button") 모든 유형 선택 = "Button" & lt; 입력 & gt; 버튼 & gt; 요소
("tr: event") Tr & gt; $ ("tr: ODD")
jQuery 기능 사용웹 사이트에 많은 페이지가 포함되어 있고 jQuery 기능을 쉽게 유지 관리할 수 있기를 원한다면 jQuery 기능을 별도의 .js 파일에 저장하세요.
튜토리얼에서 jQuery를 시연할 때 <head> 섹션에 함수를 직접 추가합니다. 그러나 다음과 같이 별도의 파일에 저장하는 것이 더 좋습니다(src 속성을 통해 파일 참조): <head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
