jQuery 요소를 추가하고 삭제하는 방법-JS 튜토리얼-php.cn

jQuery 요소를 추가하고 삭제하는 방법

yulia

풀어 주다： 2018-09-17 15:43:40

원래의

1185명이 탐색했습니다.

작업 요구 사항으로 인해 요소를 추가, 삭제, 변경 및 검색해야 하는 경우가 많습니다. 이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!