jQuery를 셀렉터는 jQuery 라이브러리의 가장 중요한 부분 중 하나입니다.
jQuery를 선택기
jQuery를 선택기를 선택하고 HTML 요소 (들)을 조작 할 수 있습니다.
jQuery를 선택기는 속성과 훨씬 더 자신의 이름, 아이디, 클래스, 유형, 속성 값을 기반으로 HTML 요소를 "발견"(또는 선택)하는 데 사용됩니다.It's based on the existing CSS Selectors , and in addition, it has some own custom selectors. 그것은 기존의 기반으로 CSS 셀렉터 , 그리고 또한, 일부 사용자 정의 셀렉터가 있습니다.
jQuery를 모든 선택기는 달러 기호와 괄호로 시작 : $를 ().
요소 선택기
JQuery와 요소 선택기는 요소 이름에 따라 요소를 선택합니다.
이 같은 페이지에있는 모든 <p> 요소를 선택할 수 있습니다 :
$("p")
예
사용자가 버튼을 클릭하면, 모든 <p> 요소는 표시되지 않습니다 :
#ID 선택기
JQuery와 #ID 선택기는 특정 요소를 찾기 위해 HTML 태그의 id 속성을 사용한다.
당신은 하나의 독특한 요소를 찾을 때 #ID 선택기를 사용해야 있도록 ID는, 페이지 내에서 고유해야합니다.
특정 ID를 갖는 요소를 찾기 위하여, HTML 엘리먼트의 id 다음 해시 문자를 쓰기 :
$("#test")
예
사용자가 버튼을 클릭하면, ID = "테스트"를 가진 요소가 표시되지 않습니다 :
예
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
»그것을 자신을 시도의 .class 선택기
JQuery와 클래스 선택기는 특정 클래스 요소를 찾습니다.
특정 클래스 요소를 찾으려면 클래스의 이름 다음에 마침표를 쓰기 :
$(".test")
예
사용자가 버튼을 클릭하면, 클래스 = "테스트"를 가진 요소가 표시되지 않습니다 :
예
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
»그것을 자신을 시도jQuery를 선택기의 더 예
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all <p> elements with class="intro" | Try it |
| $("p:first") | Selects the first <p> element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even <tr> elements | Try it |
| $("tr:odd") | Selects all odd <tr> elements | Try it |
우리의 사용 jQuery를 선택기 테스터를 다른 선택기를 보여주기 위해.
모두의 jQuery 셀렉터의 전체 참고로, 우리로 이동하시기 바랍니다 jQuery를 선택기 참조 .
별도의 파일에 함수
귀하의 웹 사이트 페이지를 많이 포함하고 당신이 당신의 jQuery 기능을 유지하기 쉽게하려면 별도의 .js 파일에 jQuery를 기능을 넣을 수 있습니다.
우리는이 튜토리얼에서 jQuery를 설명 할 때, 함수의 <head> 섹션에 직접 추가됩니다.However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file): 그러나 때로는이합니다 (의 .js 파일을 참조 src 속성을 사용)와 같은 별도의 파일에 배치하는 것이 바람직하다 :
예
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
연습으로 자신을 테스트!
연습 1» 운동 2» 운동 3» 운동 4» 운동 5» 운동 6»