jQuery 선택기

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"가 있는 모든 요소

지속적인 학습

새로운 파일

<!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").hide(); }); }); </script> </head> <body> <h2>标题</h2> <p>段落</p> <p id="test">#id选择器，点击我会隐藏</p> <button>点我</button> </body> </html>

제출하다 코드 재설정

자동운전