자바스크립트
웹을 움직이는 언어, 자바스크립트! ES6+, Vue, React, Node.js 등 모던 JS 생태계를 깊이 있게 탐구하는 공간입니다.
2025.02.22 02:54
jQuery .find() 메서드
jQuery .find() 메서드는 선택한 요소의 자손 요소를 찾는 데 사용됩니다. 자손 요소는 선택한 요소의 하위 요소입니다.
예제
자바스크립트 소스코드
jQuery .find() 메서드는 jQuery의 소스코드에서 다음과 같이 정의됩니다.
소스코드 설명
jQuery .find() 메서드는 다음과 같은 과정을 거칩니다.
1. 선택한 요소의 자손 요소를 찾기 위해 `selector` 변수에 선택한 요소를 할당합니다.
2. `selector` 변수를 처리하여 선택한 요소의 자손 요소를 찾습니다.
3. 찾은 자손 요소의 집합을 반환합니다.
소스코드의 주요 부분
* `selector.nodeType` : 선택한 요소의 타입을 확인합니다.
* `selector.replace()` : 선택한 요소를 처리하여 선택한 요소의 자손 요소를 찾습니다.
* `for` 루프 : 선택한 요소의 자손 요소를 찾습니다.
* `jQuery.unique()` : 찾은 자손 요소의 집합을 중복을 제거합니다.
소스코드의 예제
소스코드의 설명
* `$(\"#container\").find(\"p\")` : 선택한 요소의 자손 요소를 찾습니다.
* `console.log(자손요소.text())` : 찾은 자손 요소의 텍스트를 출력합니다.
[PHP] rtrim - 문자열 끝에서 공백(또는 다른 문자) 제거
[PHP] pi - pi 값 가져오기
[PHP] min - 가장 낮은 값 찾기
[PHP] log - 자연로그
jQuery .find(): DOM 요소 찾기와 선택자 사용
- 나우호스팅 21일 전 2025.02.22 02:54
-
14
0
jquery .find() jQuery .find() 메서드
jQuery .find() 메서드는 선택한 요소의 자손 요소를 찾는 데 사용됩니다. 자손 요소는 선택한 요소의 하위 요소입니다.
예제
#hostingforum.kr
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery .find() 예제</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="container">
<p>이것은 자손 요소입니다.</p>
<ul>
<li>리스트 1</li>
<li>리스트 2</li>
<li>리스트 3</li>
</ul>
</div>
<script>
// 선택한 요소의 자손 요소를 찾습니다.
var 자손요소 = $("#container").find("p");
// 결과를 출력합니다.
console.log(자손요소.text()); // "이것은 자손 요소입니다."
</script>
</body>
</html>
자바스크립트 소스코드
jQuery .find() 메서드는 jQuery의 소스코드에서 다음과 같이 정의됩니다.
#hostingforum.kr
javascript
find: function( selector ) {
var elem,
i,
len,
match,
set = [],
cur = this;
if ( selector.nodeType ) {
selector = selector;
} else if ( typeof selector !== "string" ) {
return this;
}
selector = selector.replace( rtrim( selector, "*" ), "" );
selector = selector.replace( /^([s*[#.]s*ws*])/, "$1*" );
selector = selector.replace( /s*[~>^$]s*/, " " );
for ( i = 0, len = cur.length; i < len; i++ ) {
elem = cur[i];
if ( elem.nodeType === 1 || elem.nodeType === 9 ) {
match = jQuery( selector, elem, false, jQuery( elem ).find( selector ) );
if ( match.length ) {
set.push( match );
}
}
}
return this.pushStack( jQuery.unique( set ) );
},
소스코드 설명
jQuery .find() 메서드는 다음과 같은 과정을 거칩니다.
1. 선택한 요소의 자손 요소를 찾기 위해 `selector` 변수에 선택한 요소를 할당합니다.
2. `selector` 변수를 처리하여 선택한 요소의 자손 요소를 찾습니다.
3. 찾은 자손 요소의 집합을 반환합니다.
소스코드의 주요 부분
* `selector.nodeType` : 선택한 요소의 타입을 확인합니다.
* `selector.replace()` : 선택한 요소를 처리하여 선택한 요소의 자손 요소를 찾습니다.
* `for` 루프 : 선택한 요소의 자손 요소를 찾습니다.
* `jQuery.unique()` : 찾은 자손 요소의 집합을 중복을 제거합니다.
소스코드의 예제
#hostingforum.kr
javascript
var 자손요소 = $("#container").find("p");
console.log(자손요소.text()); // "이것은 자손 요소입니다."
소스코드의 설명
* `$(\"#container\").find(\"p\")` : 선택한 요소의 자손 요소를 찾습니다.
* `console.log(자손요소.text())` : 찾은 자손 요소의 텍스트를 출력합니다.
이 게시물에 포함된 라이브러리
[PHP] trim - 문자열의 시작과 끝에서 공백(또는 다른 문자)을 제거합니다.[PHP] rtrim - 문자열 끝에서 공백(또는 다른 문자) 제거
[PHP] pi - pi 값 가져오기
[PHP] min - 가장 낮은 값 찾기
[PHP] log - 자연로그
댓글목록
등록된 댓글이 없습니다.