jQuery_jquery의 요소 속성 및 관련 작업에 대한 자세한 설명

요소 속성

요소의 속성에는 유용한 정보가 많이 포함될 수 있으므로 속성의 값을 설정하거나 가져오는 방법이 매우 중요합니다.

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(''));