Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 15:44:57
Original
1247 people have browsed it

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

Copy after login

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

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

Copy after login

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

Copy after login

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

Copy after login

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 after login

Copy an element

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

Copy after login

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

Copy after login

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 了哦

Copy after login

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

Copy after login

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

Copy after login

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template