작업 요구 사항으로 인해 요소를 추가, 삭제, 변경 및 검색해야 하는 경우가 많습니다. 이 글에서는 jQuery 요소를 추가하고 삭제하는 방법을 설명합니다. 도움이 필요한 친구들이 참고할 수 있으니 도움이 되길 바랍니다.
DOM은 Document Object Module의 약어입니다. 일반적으로 DOM 작업은 세 가지 측면으로 나뉩니다.
1. DOM Core
DOM Core는 DOM을 지원하는 모든 프로그래밍 언어에서 사용할 수 있으며, 그 용도는 웹 페이지에만 국한되지 않습니다. 태그. XML과 같은 언어로 작성된 문서.
예: document,getElementsByTagName("form"); //DOM Core를 사용하여 양식 개체를 가져옵니다.
2. HTML-DOM
Javascript와 DOM을 사용하여 HTML 파일용 스크립트를 작성할 때 HTML-DOM에 속하는 속성이 DOM Core보다 더 일찍 나타났습니다. 다양한 HTML 요소의 속성을 설명합니다.
예: document.forms //HTML-DOM은 양식 개체를 제공합니다.
PS: 객체 및 속성 획득은 DOM Core 또는 HTML-DOM을 사용하여 구현할 수 있음을 알 수 있습니다.
3. CSS-DOM
CSS-DOM은 CSS에 대한 작업으로, CSS-DOM의 주요 기능은 스타일 객체의 다양한 속성을 획득하고 설정하여 웹 페이지가 다양한 것을 표현할 수 있도록 하는 것입니다. 다른 효과.
예: element.style.color="red";//요소의 글꼴 색상을 설정하는 방법입니다.
일반적인 방법
1. 요소 노드 찾기
var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”);
2. 요소 속성 찾기
jquery의 attr() 메서드를 사용하여 요소의 다양한 속성 값과 매개변수를 가져옵니다. attr() 메소드 1개 또는 2개일 수 있습니다.
파라미터가 1인 경우 쿼리할 속성의 이름입니다.
파라미터가 2개인 경우 속성값을 설정할 수 있습니다.
alert($(“#id”).attr(“title”)); //输出元素的title属性.一个参数 $(“#id”).attr(“title”,”改变title值”); //改变元素的title属性值.二个参数
3. 요소 노드 추가
$(html) 간단히 설명하면 $(html) 메서드는 들어오는 html 태그 문자열을 기반으로 dom 객체를 생성하고 dom 객체를 jquery 객체로 래핑하여 반환합니다. , 즉, 마크의 모든 html 코드를 $() 팩토리에 넣으면 됩니다!
예:
var $htmlLi = $(” <li title=’香蕉’>香蕉</li>”); //创建DOM对象 var $ul = $(“ul”); //获取UL对象 $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表
4. 요소 노드 삭제
DOM 요소를 자주 동적으로 변경해야 하기 때문에 Jquery는 노드를 삭제하는 두 가지 메서드, 즉 제거()와 비어 있음()을 제공합니다.
4.1 제거() method
$("p").remove();// 삭제할 요소를 가져온 다음 제거() 메서드를 호출할 수 있습니다
$("ul li:eq(0)").remove ( ).appendTo(“ul”);//ul 아래의 첫 번째 li 태그를 삭제한 다음 삭제된 li 태그를 ul에 다시 추가합니다. 이때 삭제된 요소의 참조를 반환하는 작업을 계속할 수 있습니다.
$("ul li").remove("li[title!=ABC]"); //remove는 매개변수를 허용하여 자격을 갖춘 요소를 선택적으로 삭제할 수 있습니다.
4.2empty() 메소드
empty() 메소드는 요소를 삭제하지 않고 지웁니다.예:
HTML代码 <ul> <li title=”AAA”>AAA</li> </ul> JQuery代码 $(“ul li:eq(0)”).empty();Result
<ul> <li title=”AAA”></li> </ul>내용만 지워지고 속성은 비어 있지 않습니다.
위 내용은 jQuery 요소를 추가하고 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!