이번에는 JQuery 요소를 어떻게 조작하는지, JQuery 요소를 조작할 때 주의사항은 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다.
먼저 jquery에서 원하는 노드를 찾는 방법을 살펴보겠습니다.
1단계: 시즐 선택기
요소의 ID, 클래스, 유형, 속성, 속성 값 등을 기반으로 HTML 요소를 "찾기"(또는 선택)합니다. 간단히 말하면 CSS 선택기를 기반으로 합니다. 무엇보다도 몇 가지 특정 선택자가 있습니다.
2단계: 조상 쿼리
parent()
선택한 요소의 직접 상위 요소를 반환합니다. 이 메서드는 한 수준 높은 DOM 트리만 순회합니다.
parents()
선택적 매개변수를 사용하여 다음을 수행할 수 있습니다. 상위 요소에 대한 검색을 필터링합니다.
선택한 요소의 모든 상위 요소를 반환하며 문서의 루트 요소까지 갑니다.
parentsUntil()
주어진 두 요소 사이의 모든 상위 요소를 반환합니다. 예는 다음과 같습니다.
$(document).ready(function(){
//会返回span开始到p为止的祖先元素
$("span").parentsUntil("p");
});3단계: 자손 쿼리
children()
선택적 매개변수를 사용하여 하위 요소 검색을 필터링할 수 있습니다.
선택한 요소의 모든 직접 하위 요소를 반환합니다. 이 메서드는 아래로만 이동합니다. DOM 탐색 트리 레벨별
find()
선택적 매개변수를 사용하여 요소 검색을 필터링할 수 있습니다
선택한 요소의 하위 요소를 마지막 하위 요소까지 반환합니다.
4단계: 형제 쿼리
siblings()
선택한 요소의 모든 형제 요소를 반환
next()
선택한 요소의 다음 형제 요소를 반환
nextAll()
선택한 요소 뒤의 모든 형제 요소를 반환
nextUntil( )
주어진 두 매개변수 사이에 있는 다음 형제 요소를 모두 반환합니다.
$(document).ready(function(){
//返回介于 <h2>与<h6>元素之间的所有同胞元素
$("h2").nextUntil("h6");
});prev(), prevAll() 및 prevUntil()
prev(), prevAll() 및 prevUntil() 메서드는 위 메서드와 비슷한 방식으로 작동합니다. , 그러나 반대 방향입니다. 즉, 이전 형제 요소를 반환합니다(DOM 트리에서 형제 요소 뒤의 요소를 따르지 않고 앞의 요소를 따라 순회).
5단계: 쿼리 시 필터링 추가
first()
선택한 요소 중 첫 번째 요소를 반환합니다.
last()
선택한 요소 중 마지막 요소를 반환합니다
eq()
예를 들어 $(element[flag])는 element.eq(flag)
filter()
와 동일한 결과를 갖습니다. 아래의 not()과 비슷하지만 반대 효과가 있습니다
not()
표준과 일치하지 않는 모든 요소를 반환합니다
$(document).ready(function(){
//返回不带有类名"target"的所有p元素
$("p").not(".target");
});요소를 찾은 후 요구 사항에 따라 찾은 노드에서 작업을 수행해야 합니다.
6단계: text(), html(), val() 및 attr()
text(), html(), val() 및 attr()에는 콜백 함수가 있습니다. 콜백 함수는 선택한 요소 목록에 있는 현재 요소의 인덱스와 원래(이전) 값이라는 두 가지 매개변수를 사용합니다. 그런 다음 함수의 새 값으로 사용하려는 문자열을 반환합니다.
1.text() - 선택한 요소의 텍스트 내용을 설정하거나 반환합니다.
2.html() - 선택한 요소의 내용을 설정하거나 반환합니다. (HTML 태그 포함)
3.val() - 양식 필드 값 설정 또는 반환
4.attr() - 속성 값 설정 또는 반환
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: index: " + i;
});
});7단계: 요소 추가
append( ) - 선택한 요소 내부 끝 부분에 내용 삽입
prepend() - 선택한 요소 내부 시작 부분에 내용 삽입
after() - 선택한 요소 뒤에 내용 삽입
before() - 선택한 요소 앞에 내용 삽입 선택한 요소
8단계: 요소 삭제
remove()는 매개변수를 허용하여 삭제된 요소를 필터링할 수 있습니다. 비어 있음()은 불가능합니다.
remove() - 선택한 요소(및 하위 요소) 삭제
empty() - 선택한 요소에서 하위 요소 제거
//等同于$("p.target").remove();
$("p").remove(".target");第九步：替换元素
replaceAll()和replaceWith()功能类似，但是目标和源相反
replaceWith() - 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
replaceAll() - 用集合的匹配元素替换每个目标元素
第十步：class操作
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
hasClass() - 判断一个元素是否存在该class
第十一步：css()方法
设置或返回被选元素的一个或多个样式属性
css("propertyname"); - 返回propertyname属性的值
css("propertyname","value"); - 设置propertyname属性的值
css({"propertyname":"value","propertyname":"value",...}); - 设置多个值
第十二步：元素尺寸
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() 方法返回元素的宽度（包括内边距）
innerHeight() 方法返回元素的高度（包括内边距）
outerWidth() 方法返回元素的宽度（包括内边距和边框）
outerHeight() 方法返回元素的高度（包括内边距和边框）
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 JQuery 요소를 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
