jQuery 선택기

jQuery 선택기란 무엇인가요?

jQuery 선택기는 jQuery 라이브러리의 매우 중요한 부분 중 하나입니다. 웹 개발자에게 잘 알려진 CSS 구문을 지원하여 페이지를 빠르고 쉽게 설정할 수 있습니다. jQuery 선택기를 이해하는 것은 효율적인 jQuery 개발의 문을 여는 열쇠입니다. 일반적인 jQuery 선택기 구문 형식:
$(selector).methodName();
selector는 DOM의 요소를 식별한 다음 jQuery에서 제공하는 메서드 세트를 사용하여 설정하는 데 사용되는 문자열 표현식입니다.
대부분의 경우 jQuery는 다음과 같은 작업을 지원합니다.
$(selector).method1().method2().method3();
이 예는 암시적 DOM에서 id="goAway"인 요소를 나타냅니다. class="incognito" 속성을 추가합니다.
$('#goAway').hide().addClass('incognito');
팁: 선택기 표현식이 여러 요소와 일치하는 경우 배열 포인터를 사용하여 JavaScript 배열 작업처럼 편리하고 유연하게 선택할 수 있습니다. 예는 다음과 같습니다.
var element = $('img')[0];
일치하는 표현식이 나타내는 요소 중 첫 번째 요소 개체가 변수 요소에 할당됩니다.

기본 선택기

1. 요소 선택기

jQuery 요소 선택기는 이름을 기준으로 요소를 선택합니다.

<!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").hide();
  });
});
</script>
</head>
<body>
<h2>标题</h2>
<p>段落。</p>
<p>另一个段落。</p>
<button>点击隐藏P标签内容</button>
</body>
</html>

2. #id 선택기

<!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>
<p>段落</p>
<p id="test">另一个段落</p>
<button>点击隐藏id</button>
</body>
</html>

3.class 선택기

<!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 class="test">标题</h2>
<p class="test">段落。</p>
<button>点击隐藏所有class</button>
</body>
</html>

4.element 선택기

p 요소의 텍스트 크기를 12px로 설정합니다.

$(document).ready(function () {
>
5. * 선택기 $ $ (문서) .Ready (함수 () { // 양식 아래의 모든 요소를 탐색하고 글꼴 색상을 빨간색으로 설정합니다.

$ ('form *') .css('color', '#FF0000');

});

6.

$(document).ready(function () { } // p 요소를 다음과 결합합니다. div 요소의 여백을 0로 설정합니다. $('p, div').css('margin', ' 0');

});

다른 레벨 선택기와 필터 선택기는 이후 장에서 단계별로 소개됩니다.

별도의 파일에서 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"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(document).ready(function () { $('.cube').css('background', 'pink'); }); </script> <p class="cube" style="width: 50%;">选择器是jQuery最基础的东西</p> <p>选择器是jQuery最基础的东西</p> </body> </html>

제출하다 코드 재설정

자동운전