jQuery 선택기

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>

지속적인 학습

새로운 파일

<!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 class="test">你马上就看不见我了</h2> <p class="test">你就要看不见我了</p> <p>为什么还能看见我</p> <button>点我</button> </body> </html>

제출하다 코드 재설정

자동운전