이번에는 JQuery 요소를 빠르게 조작하는 방법과 JQuery 요소를 조작할 때 주의사항이 무엇인지 알려드리겠습니다. 실제 사례를 살펴보겠습니다.
먼저 jquery에서 원하는 노드를 찾는 방법을 살펴보겠습니다.
1단계: 시즐 선택기
"찾기"(또는 선택) HTML 요소는 요소의 ID, 클래스, 유형, 속성, 속성 값 등을 기준으로 합니다. 간단히 말하면 을 기반으로 합니다. 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() - 앞에 내용 삽입 선택한 요소
第八步：删除元素
remove()可接受一个参数，允许你对被删元素进行过滤，empty()不可以
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)
