jQuery Lesson 3 Code to Modify Element Attributes and Content_jquery

1. Operation attributes
The above describes how to filter out the required elements. After getting the element, you need to operate on it. A common requirement is to iterate through the obtained set of elements and perform an operation on each element. The function provided by jQuery is
each(iterator), where iterator is a function that accepts an integer as a parameter, indicating the number of elements. Let's look at a simple example.

Copy code The code is as follows:

Image Gallery
March 13th,2010

Check the results using Firebug:

In the above example, the native JavaScript method is used to access attributes. jQuery provides a more general method to access attributes, attr:

attr(name), if name is a string, get the value of name of the attribute of the first element; if name is an object, the attributes of the object are copied to all elements of the packaging set as attributes of the element .

attr(name,value), when name is a string, set the value of attribute name to value. When value is a function, call this function for each element in the packaging set to set it The value of name is set to the return value of the function.

Look at a simple example, the html code still uses the above:

Copy the code The code is as follows:

$(function() {
$('body').children().attr('title', function(n) {
return"This is " n "th element";
});
$('img').attr('alt', 'A photo taken by YinZixin');
alert($ ('h1').attr('title'));
});

The result is:

To delete an attribute, use the removeAttr(name) method.
Please note that there is a special attribute class among the attributes. The class attribute is very commonly used, and it happens to be a keyword in JavaScript. To access the class attribute, use className instead of class. For example:
$('img').attr('className', 'photo'); class is different from other attributes. An element can have multiple classes, separated by spaces, for example class='big strong ', because class is special and commonly used, jQuery has a special method to handle class attributes.
addClass(names), add a class;
removeClass(names), delete a class;
toggleClass(names), if the element has the class, delete it, otherwise add it.
The names is a string, which can be composed of multiple class names separated by spaces. addClass and removeClass are easy to use without giving examples. toggleClass is particularly simple and practical. Let’s look at an example below. The html code still uses the above:

Copy code The code is as follows:

$(function() {
$('td:odd').append($('span'));
$('div:first').append($( 'p')).append('sub title');
});

Hello JQuery

Title

The final result is as follows:

There is also appendTo(target), which is the opposite direction of the append method. append adds parameters to the caller, and appendTo The caller adds the parameters internally. There are several pairs of methods similar to append and appendTo:

prepend, prependTo:append method. When there are other elements inside the target element, the added element is at the end of the original element, and prepend is at the front. .

before, insertBefore: Insert before the destination element, not inside.

after, insertAfter: Insert after the destination element.

To delete elements, you can use the remove or empty method. Note that remove will delete the selected elements from the page and return these elements as return values. These elements will not be garbage collected. They can be further operated on or redisplayed on the page using methods such as append. The empty method completely deletes the element.

3. Manipulating the values ​​of form elements
Manipulating the values ​​of form elements is very common, but it is not easy. jQuery provides a val method to simplify operations. The val() method without parameters returns the value of the current element. The val(values) method is used to set the value of the current element to values. If values ​​is an array, it is more interesting. It is used to match the values ​​in the select element. The values ​​included in values ​​will become selected. .

Statement：

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

Previous article：javascript solves the problem that the form is still submitted even if the listening handler function returns false_javascript tipsNext article：javascript solves the problem that the form is still submitted even if the listening handler function returns false_javascript tips

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved

1
2