The properties and contents of the JQuery action element

1. Operation "Element Properties"

We can use GetAttribute and setattribute in JavaScript to manipulate element attributes of elements.

In jquery, you are provided with a attr () wrapper set function that allows you to manipulate the attributes of all the elements in the wrapper set:

Name	Description	Example
attr (name)	Gets the property value of the first matching element. This method makes it easy to get the value of an attribute from the first matching element. Returns undefined if the element does not have a corresponding attribute.	Returns the SRC attribute value of the first image in a document: $ ("img"). attr ("src");
Attr (properties)	Sets an object in the form of a "name/value" as a property of all matching elements. This is the best way to set many properties in bulk in all matching elements. Note that if you want to set the class property of an object, you must use ' className ' as the property name. Or you can use. addclass (Class) and. Removeclass (Class) directly.	Set the SRC and ALT attributes for all images: $ ("img"). attr ({src: "test.jpg", alt: "Test Image"});
attr (key, value)	Sets a property value for all matching elements.	To set the SRC attribute for all images: $ ("img"). attr ("src", "test.jpg");
attr (Key, FN)	Sets a computed property value for all matching elements. Instead of providing a value, you provide a function that is evaluated by the function as the value of the property.	Set the value of the SRC attribute to the value of the title property: $ ("img"). attr ("title", function () {return this.src});
REMOVEATTR (name)	Remove an attribute from each matching element	Delete the src attribute of the image in the document: $ ("img"). Removeattr ("src");

2. Modifying CSS Classes

In jquery, you are provided with methods to modify CSS classes:

Name	Description	Instance
AddClass (classes)	Adds the specified class name for each matching element.	Add the ' selected ' class to the matched element: $ ("P"). AddClass ("selected");
Hasclass (Class)	Determines if at least one element in the wrapper set has applied the specified CSS class	$ ("P"). Hasclass ("selected");
Removeclass ([classes])	Removes all or the specified class from all matching elements.	Remove the ' selected ' class from the matching element: $ ("P"). Removeclass ("selected");
Toggleclass (Class)	Delete (add) A class if it exists (does not exist).	Toggle the ' selected ' class for the matching element: $ ("P"). Toggleclass ("selected");
Toggleclass (class, switch)	When switch is true, the class is added, Delete class when switch is False	Toggle Highlight Style Every three clicks: var count = 0; $ ("P"). Click (function () { $ (this). Toggleclass ("Highlight", count++% 3 = = 0); });

3. Modifying CSS Styles

jquery also provides methods when we want to modify an element's specific CSS style, that is, to modify the element property "style":

Name	Description	Instance
CSS (name)	Accesses the style properties of the first matching element.	Gets the value of the color style property of the first paragraph: $ ("P"). CSS ("color");
CSS (properties)	Sets a "name/value pair" object to the style attribute of all matching elements. This is the best way to set a large number of style attributes on all matching elements.	Sets the font color for all paragraphs to red and the background to blue: $ ("P"). CSS ({color: "#ff0011", Background: "Blue"});
CSS (name, value)	In all matching elements, set the value of a style property. Numbers are automatically converted to pixel values	Set all paragraph fonts to red: $ ("P"). CSS ("Color", "red");

4. Width and height related height and width

Name	Description	Example
Height ()	Gets the height value (px) that is currently computed for the first matching element.	Get the height of the first paragraph: $ ("P"). Height ();
Height (val)	Sets the value of the CSS height (hidth) property for each matching element. If no units are explicitly specified (for example: EM or%), use PX.	Set the height of all paragraphs to 20: $ ("P"). Height (20);
Width ()	Gets the width value (px) currently computed for the first matching element.	Get the width of the first paragraph: $ ("P"). width ();
Width (val)	Sets the value of the CSS width property for each matching element. If no units are explicitly specified (for example: EM or%), use PX.	Set the width of all paragraphs to 20: $ ("P"). Width (20);
Innerheight ()	Gets the inner area height of the first matched element (including padding, excluding borders). This method is valid for both visible and hidden elements.	See the last example
Innerwidth ()	Gets the inner area width of the first matched element (including padding, excluding borders). This method is valid for both visible and hidden elements.	See the last example
Outerheight ([margin])	Gets the outer height of the first matching element (including padding and borders by default). This method is valid for both visible and hidden elements.	See the last example
Outerwidth ([margin])	Gets the outer width of the first matching element, including padding and borders by default. This method is valid for both visible and hidden elements.	See the last example

5. Location-related positioning

In addition, in some scripts that design sets of popup objects, it is often necessary to dynamically get the popup coordinates and set the position of the elements.

But there are a lot of ways to calculate locations with browser compatibility issues, and jquery provides us with location-related functions:

Name	Description	Example
Offset ()	Gets the relative offset of the matching element in the current window. The returned object contains two shaping properties: Top and left. This method is valid only for visible elements.	Gets the offset of the second paragraph: var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );
Position ()	Gets the offset of the matching element relative to the parent element. The returned object contains two shaping properties: Top and left. To calculate the results accurately, use pixel units on the padding, border, and fill properties. This method is valid only for visible elements.	Gets the offset of the first paragraph: var p = $("p:first"); var position = p.position(); $("p:last").html( "left: " + position.left + ", top: " + position.top );
ScrollTop ()	Gets the offset of the match element at the top of the scroll bar. This method is valid for both visible and hidden elements.	Gets the offset from the top of the first paragraph relative to the scroll bar: var p = $("p:first"); $("p:last").text( "scrollTop:" + p.scrollTop() );
ScrollTop (Val)	When you pass a parameter value, set the top offset of the vertical scroll bar to that value. This method is valid for both visible and hidden elements.	To set the vertical scroll bar value: $("div.demo").scrollTop(300);
ScrollLeft ()	Gets the offset to the left of the matching element relative to the scrollbar. This method is valid for both visible and hidden elements.	Gets the offset to the left of the first paragraph relative to the scroll bar: var p = $("p:first"); $("p:last").text( "scrollLeft:" + p.scrollLeft() );
ScrollLeft (Val)	When you pass a parameter value, set the left offset of the horizontal scrollbar to that value. This method is valid for both visible and hidden elements.	Sets the offset to the left of the relative scroll bar: $("div.demo").scrollLeft(300);