간단하고 이해하기 쉬운 jQuery: jQuery 작업

HTML을 동적으로 생성, 조작 및 추가

원시 HTML 문자열을 jQuery 함수에 전달하여 HTML 마크업을 동적으로 생성할 수 있습니다.

으아악

JQuery 함수를 사용하여 DOM 구조를 생성할 때 구조의 루트 요소만 래퍼 세트에 추가된다는 점에 유의해야 합니다. 이전 코드 예제에서 <div> 요소는 래퍼 세트의 유일한 요소입니다. <p>HTML 구조의 요소가 생성되면 <code>find() 메서드를 사용하여 해당 요소를 조작할 수 있습니다.

으아악

새로 생성된 HTML을 조작한 후 jQuery의 조작 방법 중 하나를 사용하여 DOM에 추가할 수도 있습니다. 아래에서는 appendTo() 메서드를 사용하여 페이지에 마크업을 추가합니다.

으아악

참고: $('<div></div>') - 通过 document.createElement DOM 方法创建，而所有其他情况都依赖于 innerHTML 属性。事实上，您可以直接向 jQuery 函数传递使用 document.createElement -e.g 创建的元素。 $(document.createElement('div'))와 같은 속성을 포함하지 않는 단순 요소입니다.

jQuery에 전달된 HTML 문자열은 유효하지 않은 것으로 간주될 수 있는 <div> 요소 내에 포함될 수 없습니다. <p>jQuery 함수에 전달되는 HTML 문자열은 올바른 형식이어야 합니다. </p> <p>jQuery HTML을 전달할 때 모든 HTML 요소를 열고 닫아야 합니다. 그렇지 않으면 주로 Internet Explorer에서 오류가 발생할 수 있습니다. 안전을 위해 항상 HTML 요소를 닫고 <code>$(<div></div>).

와 같은 단축키 HTML을 작성하지 마세요.

---

index() 메소드 탐색

요소를 index() 메서드에 전달하여 래핑된 세트에 있는 요소의 인덱스를 결정할 수 있습니다. 예를 들어, 웹 페이지의 모든 index() 方法来确定包装集中元素的索引。例如，假设您有一个包含网页中所有 <div> 元素的包装集，并且您想知道最后一个 <code><div> 요소를 포함하는 래퍼 세트가 있고 마지막 요소의 인덱스를 알고 싶다고 가정해 보겠습니다. <p> 으아악 <code>index() 的使用并没有真正击中要害，直到我们考虑如何将它与事件一起使用。例如，通过点击下面代码中的 <div> 元素，我们可以将点击的 <code><div> 元素（使用关键字 <code>this）传递给 index() 方法来确定点击的 <div> <code>index() 사용은 이벤트와 함께 사용하는 방법을 고려할 때까지 실제로 이해하기 어렵습니다. 예를 들어, 아래 코드에서 요소를 클릭하면 클릭한

---

요소(this 키워드 사용)를 index() 메서드에 전달할 수 있습니다.

색인을 클릭했습니다.

으아악

text()text() 메소드 탐색

---

사람들은

메서드가 래퍼 세트에 있는 첫 번째 요소의 텍스트 노드만 반환한다고 잘못 생각할 수 있습니다. 그러나 실제로는 래퍼 세트에 포함된 모든 요소의 텍스트 노드를 연결하고 연결된 값을 단일 문자열로 반환합니다. 이 기능을 이해했는지 확인하세요. 그렇지 않으면 예상치 못한 결과가 발생할 수 있습니다.

으아악

replace()정규 표현식을 사용하여 문자 업데이트 또는 삭제

JavaScript html() 메소드를 일부 jQuery 기능과 결합하여 요소에 포함된 텍스트의 문자 패턴을 매우 쉽게 업데이트하거나 제거할 수 있습니다.

으아악

---

에서 반환된 문자열에 포함된 모든 문자를 업데이트할 수도 있습니다. 즉, 텍스트를 업데이트할 수 있을 뿐만 아니라 정규 표현식을 통해 DOM 요소를 업데이트하고 교체할 수도 있습니다.

.contents() 方法可用于查找所有子元素节点，包括元素内部包含的文本节点。然而，有一个问题。如果检索到的内容仅包含文本节点，则所选内容将作为单个文本节点放置在包装器集中。但是，如果您要检索的内容在文本节点中包含一个或多个元素节点，则 .contents().contents() 메소드 탐색

.get(0).nodeValue 提取值。 contents() 方法对于提取文本节点值很方便。可以使用 contents() 메소드에는 텍스트 노드와 요소 노드가 포함됩니다. 이 개념을 이해하려면 아래 코드를 확인하세요.

으아악

---

래퍼 세트의 항목이 텍스트 노드인 경우

를 사용하여 DOM 구조에서 텍스트 노드만 추출해야 합니다.

으아악

remove()remove()를 사용해도 래핑된 세트의 요소는 제거되지 않습니다

remove() 을 사용하면 DOM 조각이 제거된 DOM 구조에 포함된 요소가 여전히 래퍼 세트에 포함됩니다. 요소를 제거하고 해당 요소에 대한 작업을 수행한 다음 실제로 해당 요소를 단일 jQuery 체인 내에서 DOM에 다시 넣을 수 있습니다.

으아악 🎜여기서 요점은 🎜 요소가 jQuery 래퍼 세트에서 제거되었다는 의미는 아니라는 것입니다. 🎜