요소 속성
요소의 속성에는 유용한 정보가 많이 포함될 수 있으므로 속성의 값을 설정하거나 가져오는 방법이 매우 중요합니다.
jQuery의 $.fn.attr 메소드는 속성 값을 설정하거나 가져오기 위한 setter 및 getter로 사용될 수 있습니다. $.fn.css 사용법과 유사하게 $.fn.attr은 단일 속성을 한 번에 허용하거나 여러 속성(객체)을 허용할 수 있습니다.
$('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ 'title' : 'all titles are the same too!', 'href' : 'somethingNew.html' });
위 코드에서 객체를 작성할 때 여러 줄로 작성하여 가독성이 더 좋습니다.
$('a').attr('href'); // 返回选择其中第一个超链接的链接地址
선택기의 결과 집합에 요소가 있으면 이러한 요소를 참조점으로 사용하여 다른 요소를 탐색할 수 있습니다. jQuery가 요소를 탐색하는 방법에 대한 자세한 내용은 다음과 같은 http://api.jquery.com/category/traversing/을 참조하세요.
$('h1').next('p'); $('div:visible').parent(); $('input[name=first_name]').closest('form'); $('#myList').children(); $('li.selected').siblings();
$.fn.each 메서드를 사용하여 결과 집합의 요소를 하나씩 처리할 수도 있습니다.
$('#myList li').each(function(idx, el) { console.log( 'Element ' + idx + 'has the following html: ' + $(el).html() ); });
요소 이동, 복사, 삭제
요소의 위치를 이동하려는 경우:
// 把第一个列表移至最后 var $li = $('#myList li:first').appendTo('#myList'); // 另外一种方法,也能达到同样效果 $('#myList').append($('#myList li:first'));
요소 복사
// 把第一个 li 做一份拷贝,然后放置列表的最后 $('#myList li:first').clone().appendTo('#myList');
요소 복사 시 해당 요소의 속성, 이벤트, 기타 정보를 함께 복사하고 싶다면 $.fn.clone 호출 시 매개변수를 true로 지정하면 됩니다.
요소 삭제에 대해 이야기해 보겠습니다. jQuery에는 $.fn.remove와 $.fn.detach라는 두 가지 방법이 있습니다. 두 가지 방법 모두 페이지에서 요소를 삭제할 수 있으며, 이 두 가지 방법의 반환 값은 다음과 같습니다. 모두 삭제된 요소입니다. 차이점은 $.fn.remove에서 반환된 요소에는 더 이상 ID 및 클래스 정보와 같은 요소의 일부 보조 정보가 포함되지 않으며 요소에 바인딩된 이벤트도 포함되지 않는다는 것입니다. $.fn.detach는 삭제된 요소의 보조 정보와 이벤트도 저장됩니다.
새 요소 만들기
jQuery는 새 요소를 빠르게 대체할 수 있습니다.
$('<p>这是一个新段落</p>'); $('<li class="new">新列表元素</li>'); $('<a/>', { html : '这是一个 <strong>新</strong> 超链接', 'class' : 'new', href : 'foo.html' });
위에서 전달한 JavaScript 객체에서 내부의 두 번째 속성 클래스가 인용되어 있습니다. class는 JavaScript의 예약어이므로 html 및 href는 인용문을 추가할 필요가 없습니다.
새 요소를 만든 후에는 새 요소가 페이지에 자동으로 추가되지 않습니다. 페이지에 추가하려면 다음 방법을 사용할 수 있습니다.
var $myNewElement = $('<p>New element</p>'); $myNewElement.appendTo('#content'); $myNewElement.insertAfter('ul:last'); // 此操作会把 p 元素从 #content 中移除 $('ul').last().after($myNewElement.clone()); // 当然也可以克隆一个出来,现在 #content 中有两个 p 了哦
엄밀히 말하면 새로 생성된 요소를 변수에 저장할 필요는 없으며 생성 후 페이지에 바로 추가할 수 있습니다. 하지만 새로 생성된 요소는 여러 번 사용되는 경우가 많기 때문에 반복적으로 생성할 필요가 없도록 변수에 캐시해야 합니다.
페이지에 요소를 추가할 때 이를 생성할 수도 있지만 이 경우 새로 생성된 요소에 대한 참조를 얻을 수 있는 방법은 없습니다.
$('ul').append('<li>list item</li>');
페이지에 새 요소를 추가하는 것은 매우 간단하지만 페이지에 새 요소를 너무 많이 추가해야 하는 경우 성능 문제가 발생할 수 있습니다. 페이지에 요소가 추가될 때마다 전체 페이지의 HTML을 문자열로 연결해야 하기 때문에 성능이 많이 소모됩니다. 이 경우 일반적으로 다음과 같은 해결 방법이 있습니다.
var myItems = [], $myList = $('#myList'); for (var i=0; i<100; i++) { myItems.push('<li>item ' + i + '</li>'); } $myList.append(myItems.join(''));