Detailed explanation of the attributes and related operations of elements in jQuery_jquery

Element attributes

The attributes of the

element can contain a lot of useful information, so how to set or get the value in the attribute is very important.

jQuery’s $.fn.attr method can be used as a setter and getter to set or get the value of an attribute. Similar to $.fn.css usage, $.fn.attr can accept either a single attribute at once or multiple attributes (objects):

$('a').attr('href', 'allMyHrefsAreTheSameNow.html');
$('a').attr({
  'title' : 'all titles are the same too!',
  'href' : 'somethingNew.html'
});

When writing objects in the above code, it is written in multiple lines, which is more readable.

$('a').attr('href'); // 返回选择其中第一个超链接的链接地址

Once there are elements in the selector's result set, these elements can be used as reference points to traverse other elements. For details on how jQuery traverses elements, see http://api.jquery.com/category/traversing/, such as:

$('h1').next('p');
$('div:visible').parent();
$('input[name=first_name]').closest('form');
$('#myList').children();
$('li.selected').siblings();

You can also use the $.fn.each method to process the elements in the result set one by one:

$('#myList li').each(function(idx, el) {
  console.log(
    'Element ' + idx +
    'has the following html: ' +
    $(el).html()
  );
});

Move, copy, delete elements

If you want to move the position of an element:

// 把第一个列表移至最后
var $li = $('#myList li:first').appendTo('#myList');

// 另外一种方法，也能达到同样效果
$('#myList').append($('#myList li:first'));

Copy an element

// 把第一个 li 做一份拷贝，然后放置列表的最后
$('#myList li:first').clone().appendTo('#myList');

If you want to copy the element's attributes, events and other information together when copying an element, just give the parameter true when calling $.fn.clone.

Let’s talk about deleting elements. There are two methods in jQuery to delete elements: $.fn.remove and $.fn.detach. Both methods can delete elements from the page, and the return values ​​of these two methods are They are all deleted elements. The difference is that the element returned by $.fn.remove no longer contains some ancillary information of the element, such as id and class information, nor does it include events bound to the element. $.fn.detach is different. The ancillary information and events in the deleted element are also saved. Which one to use depends on the actual needs.
Create new element

jQuery can quickly replace new elements:

$('<p>这是一个新段落</p>');
$('<li class="new">新列表元素</li>');

$('<a/>', {
  html : '这是一个 <strong>新</strong> 超链接',
  'class' : 'new',
  href : 'foo.html'
});

Note that in the JavaScript object passed above, the second attribute class inside is quoted. Because class is a reserved word of JavaScript, html and href are not, so there is no need to add quotes.

After creating a new element, the new element will not be automatically added to the page. To add it to the page, you can use the following method:

var $myNewElement = $('<p>New element</p>');
$myNewElement.appendTo('#content');

$myNewElement.insertAfter('ul:last'); // 此操作会把 p 元素从 #content 中移除
$('ul').last().after($myNewElement.clone()); // 当然也可以克隆一个出来，现在 #content 中有两个 p 了哦

Strictly speaking, it is not necessary to save the newly created element in a variable. It can be added directly to the page after creation. But many times the newly created element is used multiple times, so it needs to be cached in a variable so that it does not have to be created repeatedly.

You can even create it when adding an element to the page, but there is no way to get a reference to the newly created element in this case:

$('ul').append('<li>list item</li>');

Adding new elements to the page is very simple, but if you need to add many, many new elements to the page, there may be performance issues. Because every time an element is added to the page, the HTML of the entire page must be concatenated as a string, which is very performance-consuming. In this case, there are usually the following solutions:

var myItems = [], $myList = $('#myList');

for (var i=0; i<100; i++) {
  myItems.push('<li>item ' + i + '</li>');
}

$myList.append(myItems.join(''));