JQuery 공식 학습 자료:운영 요소

요소 정보 획득 및 설정

기존 요소를 변경할 수 있는 방법은 여러 가지가 있는데 가장 흔히 볼 수 있는 것은 HTML 내용이나 요소의 속성을 바꾸는 것이다.JQuery는 요소 정보를 가져오고 설정하는 데 도움을 줄 수 있는 간단한 브라우저를 제공합니다.

.html(): HTML의 내용을 가져오거나 설정합니다.

.text (): 텍스트 내용을 가져오거나 설정합니다.

.attr(): 지정된 속성의 값을 가져오거나 설정합니다.

.width (): 선택기에서 첫 번째 요소의 폭을 가져오거나 설정합니다. 값은 정수이고 단위는 픽셀입니다.

.height (): 선택기에서 첫 번째 요소의 높이를 가져오거나 설정합니다. 값은 정수이고 단위는 픽셀입니다.

.position (): 선택기의 첫 번째 요소 대상의 위치 정보를 가져옵니다. 첫 번째 위치의 선조에 비해 읽기 전용입니다.

.val (): 폼 요소의 값을 가져오거나 설정합니다.

주의해야 할 것은 이러한 변화는 모든 선택된 요소에 영향을 미칠 수 있다는 것이다. 만약 그 중의 한 요소만 바꾸고 싶다면, 선택기가 당신이 바꾸고 싶은 요소만 지정했는지 확인해야 한다.// HTML $( "#myDiv p:first" ).html( "New <strong>first</strong> paragraph!" ); 

이동원소

다양한 방법으로 DOM의 요소를 이동할 수 있지만 일반적으로 두 가지 방식이 있다.

선택한 요소를 다른 요소를 기준으로 배치합니다.

선택한 요소를 기준으로 다른 요소를 배치합니다.

예를 들어 JQuery가 제공했다.insertAfter() 및.after () 두 가지 방법.insertAfter() 메서드는 메서드 매개변수로 선택된 요소의 뒤에 배치됩니다.그러나after () 방법은 선택한 요소 뒤에 메소드 매개변수로 요소를 배치합니다.유사한 방법도 있지만..insertBefore () 및.before(), .appendTo () 및.append(),.prependTo() 및.prepend().
어떤 방법을 사용하느냐는 선택한 요소가 어느 것인지, 페이지에 추가된 요소의 인용을 저장해야 하는지에 달려 있다.만약 이 인용을 저장할 필요가 있다면, 다른 원소에 비해 선택한 원소를 배치하는 첫 번째 방식을 취해야 한다. 이 인용이 되돌아오는 원소는 당신이 놓은 원소이다.// // var $li = $( "#myList li:first" ).appendTo( "#myList" ); // $( "#myList" ).append( $( "#myList li:first" ) ); 

클론 요소

이동원소를 필요로 하는 것 외에 때때로 원소를 복사하는 것도 필요하다. 원소를 복사하는 것은 우리가 사용할 수 있다.clone () 방법입니다.// $( "#myList li:first" ).clone().appendTo( "#myList" );만약 관련 데이터와 이벤트를 복사해야 한다면,true를 매개 변수로 전달해야 합니다.clone () 방법입니다.
 

요소 삭제

요소를 삭제하는 방법은 두 가지입니다.remove() 및.detach().
페이지에서 요소를 영구적으로 제거하려면 사용하십시오.remove () 방법, 그리고 이 방법의 반환 값은 삭제된 요소의 선택기입니다. 삭제된 요소는 더 이상 관련 데이터와 이벤트가 없습니다.
데이터와 이벤트가 보존되어야 한다면 사용하십시오.detach () 방법, 이 방법은 선택기를 되돌려줍니다. 그러나 이 선택기는 관련 데이터와 이벤트를 보존하고 있습니다. 삭제한 후에 삭제된 선택기를 복원해서 페이지로 돌아갈 수 있습니다.
원소의 내용만 삭제하고 싶으면 사용할 수 있습니다.empty () 방법으로 요소의 내용을 처리합니다.
 

새 요소 만들기

JQuery는 $() 방법을 사용하는 간단하고 우아한 방법을 제공합니다.// HTML 。 $( "<p>This is a new paragraph</p>" ); $( "<li class=\"new\">new list item</li>" ); // 。 $( "<a/>", { html: "This is a <strong>new</strong> link", "class": "new", href: "foo.html" });주의해야 할 것은 속성 대상은 방법의 두 번째 매개 변수에 있다. 속성 이름은 인용부호를 사용하는 문자열을 사용할 수도 있고 인용부호를 넣지 않을 수도 있다. 일반적으로 속성의 이름은 인용부호를 넣지 않는다.
우리가 새로운 요소를 만들면 페이지에 바로 추가되지 않습니다. 요소가 만들어질 때 페이지에 추가할 수 있는 방법이 있습니다.var $myNewElement = $( "<p>New element</p>" ); $myNewElement.appendTo( "#content" ); $myNewElement.insertAfter( "ul:last" ); // $myNewElement #content $( "ul" ).last().after( $myNewElement.clone() ); // ， 2 생성된 요소는 변수에 저장할 필요가 없습니다. $() 다음에 호출해서 페이지에 요소를 추가할 수 있습니다.그러나 대부분의 경우 이 추가된 원소의 인용이 필요하다.// $( "ul" ).append( "<li>list item</li>" );이렇게 새로운 요소를 첨가하는 문법은 매우 간단하기 때문에 사람들은 이런 조작을 반복하면 성능에 커다란 부정적인 영향을 미칠 수 있다는 것을 자주 잊어버린다.같은 용기에 요소를 추가하면, 모든 HTML을 문자열로 연결한 다음, 원소 하나하나가 아닌 용기에 한 번에 추가할 수 있습니다.var myItems = []; var $myList = $( "#myList" ); for ( var i = 0; i < 100; i++ ) { myItems.push( "<li>item " + i + "</li>" ); } $myList.append( myItems.join( "" ) ); 

운영 속성

JQuery의 속성 조작 능력은 매우 강하다. 기본적인 속성 변화를 제외하고는.attr () 방법도 더욱 복잡한 조작을 허용합니다.이것은 명확한 값을 설정하거나 함수의 반환 값을 설정할 수 있다. 함수를 사용할 때 함수에는 두 개의 매개 변수가 있는데, 첫 번째 매개 변수는 속성을 바꾼 요소의 번호이고, 두 번째 매개 변수는 속성을 바꾼 원래의 값이다.// $( "#myDiv a:first" ).attr( "href", "newDestination.html" ); // $( "#myDiv a:first" ).attr({ href: "newDestination.html", rel: "super-special" }); // $( "#myDiv a:first" ).attr({ rel: "super-special", href: function( idx, href ) { return "/new/" + href; } }); $( "#myDiv a:first" ).attr( "href", function( idx, href ) { return "/new/" + href; });