Describes the attributes and related operations of elements in jQuery.

This article mainly introduces the attributes and related operations of elements in jQuery. jQuery is the most popular JavaScript library. For more information, see Element attributes

The attributes of an element can contain a lot of useful information. Therefore, it is very important to set or obtain the values in the attribute.

The $. fn. attr method of jQuery can be used as setter and getter to set or obtain attribute values. Similar to $.fn.css, $. fn. attr can accept a single attribute at a time or multiple attributes (objects ):

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

In the above Code, multiple lines are written when an object is written, which is more readable.

$ ('A'). attr ('href '); // return the URL of the first hyperlink selected.

Once there are elements in the selector result set, you can traverse other elements as the benchmark. For more information about jQuery element traversal methods, see http://api.jquery.com/category/traversing/, for example:

$('h1').next('p');$('p: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, and delete Elements

If you want to move the position of an element:

// Move the first list to the last var $ li =$ ('# myList li: first '). appendTo ('# mylist'); // another method can achieve the same effect $ (' # mylist '). append ($ ('# myList li: first '));

Copy an element

// Copy the first li and place it in the last $ ('# myList li: first') of the list. clone (). appendTo ('# mylist ');

If you want to copy the attributes, events, and other information of an element, you can call $. fn. clone to set the parameter to true.

Delete An element. jQuery has two ways to delete an element: $. fn. remove and $. fn. detach, both methods can delete elements from the page, and the return values of these two methods are all deleted elements, the difference is $. fn. the elements returned by remove do not contain any additional information of the element, such as id and class, or events bound to the element. $. Fn. detach is different. The affiliated information and events in the deleted element are also saved. The actual usage depends on the actual needs.
Create new elements

JQuery can quickly Replace new elements:

$ ('
This is a new paragraph
'); $ ('
New list element
'); $ ('', {Html:' This isNewHyperlink ', 'class': 'new', href: 'foo.html '});

Note that the second attribute class in the JavaScript Object passed in is enclosed by quotation marks. Because class is a reserved word of JavaScript, html and href are not supported, no quotation marks are required.

After a new element is created, the new element is not automatically added to the page. To join the page, you can use the following method:

Var $ myNewElement = $ ('
New element
'); $ MyNewElement. appendTo ('# content'); $ myNewElement. insertAfter ('ul: la'); // This operation removes the p element from # content $ ('ul '). last (). after ($ myNewElement. clone (); // Of course, you can also clone one. Now # There are two p in content.

Strictly speaking, you do not have to save the newly created elements in a variable. You can directly add them to the page after the creation. However, many times new elements are used multiple times, so they need to be cached in a variable so that they do not need to be created repeatedly.

You can even create an element when you add it to the page, but in this case, you cannot get a reference to the newly created element:

$('ul').append('
list item
');

Adding new elements to a page is very simple, but if you need to add many new elements to the page, there may be performance problems. Because every time an element is added to a 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('
item ' + i + '
');}$myList.append(myItems.join(''));