jQuery 선택기 사용법에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:25:181395검색
이 기사의 예에서는 jQuery 선택기의 사용법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
jQuery는 두 가지 방법을 사용하여 html 요소를 선택합니다. 첫 번째 방법은 CSS와 Xpath 선택기를 결합하여 jQuery 생성자에 전송되는 문자열을 형성합니다(예: $("div > ul a")). 메소드는 jQuery 객체의 여러 메소드를 사용하는 것입니다. 이 두 가지 방법을 조합하여 사용할 수도 있습니다.
CSS 및 XPath 선택기를 사용하여 선택하는 방법에는 여러 가지가 있습니다. 자세한 CSS 선택기에 대해서는 이 사이트의 관련 기사를 참조하세요.
먼저 ID $( "#id" )를 통해 요소를 가져오는 방법을 살펴보겠습니다. 이름 앞에 #을 추가하여 따옴표를 잃지 않도록 주의하세요.
페이지에 ID가 msg인 스팬 요소를 추가하고 스팬 요소에 helloworld를 표시합니다.
<html>
<head>
<title>Hello</title>
<script src="jquery-1.2.5.js" type="text/javascript"></script>
<script type="text/javascript">
$( function() {
$("#msg").html("Hello, world."); } );
</script>
</head>
<body>
<span id="msg"/>
</body>
</html>
참고: #id는 따옴표로 묶어야 하며 매개변수가 있는 html 함수는 요소의 innerHTML에 값을 할당하는 데 사용됩니다.
다음 예:
예를 들어 ID가 orderlist인 목록이 있고 이 목록의 참조를 가져오는 jQuery는 $("#orderedlist")이며 값이 있는 $("#orderedlist") 클래스 속성을 추가합니다. red.addClass("red"), addClass 함수는 요소에 CSS 설정을 추가하는 데 사용됩니다. 목록의 마지막 li 참조 $( "#orderedlist li:last" )를 가져옵니다.
다음 예에서는 마지막 li의 내용을 hello, world로 변경합니다.
<html>
<head>
<title>Hello</title>
<script src="jquery-1.2.5.js" type="text/javascript"></script>
<script type="text/javascript">
$( function() {
alert("wait");
$( "#orderedlist li:last" ).html("hello, world.");
} );
</script>
</head>
<body>
<ol id="orderedlist">
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ol>
</body>
</html>
이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.