The properties and styles of jquery

1jQuery properties and styles of. attr () and. Removeattr ()

Each element has one or more attributes that are used to give additional information about the element or its contents. For example: In an IMG element, SRC is the attribute of the element that is used to mark the address of the image.

There are 3 main DOM methods of operation characteristics, getattribute method, setattribute method and RemoveAttribute method, even if there are still many problems in actual operation, we will not say it first. With a attr () and removeattr () in jquery, it's all done, including compatibility issues.

jquery uses the attr () method to get and set element properties, attr is an abbreviation for attribute (attribute), which is often used in jquery DOM operations attr ()

attr () has 4 expressions

1. attr (incoming property name): Gets the value of the property
2. Attr (property name, property value): Sets the value of the property
3. Attr (property name, function value): Sets the function value of the property
4. attr (attributes): Sets multiple attribute values for the specified element: {attribute name one: attribute value one, property name two: ' Property value two ', ...}

Removeattr () Delete method

. Removeattr (AttributeName): Removes an attribute (attribute) for each element in the matching element collection

Advantages:

attr and Removeattr are jquery. For attribute manipulation encapsulation, call the method directly on a JQuery object, it is easy to manipulate the property, and do not need to deliberately understand the browser's property name of the different problems

Note the issue:

There is a conceptual distinction in DOM:attribute and property are translated as "attributes", and "JS Advanced Programming" is translated into "attributes" and "attributes". Simply understood, attribute is the property of the DOM node's own

For example: The usual ID, class, title, align, etc. in HTML:

<div id= "Immooc" title= "mu class net" ></div>

While property is this DOM element as an object, its additional content, such as TagName, NodeName, NodeType, defaultchecked, and defaultselected use. Prop () method for value or assignment, etc.

To get attribute, you need to use attr to get the property you need to use prop

2jQuery attributes and styles of HTML () and. Text ()

Reading, modifying the HTML structure of an element, or the textual content of an element is a common DOM operation, and jquery provides 2 convenient ways to handle this. html () with . Text ()

. HTML () method

Gets the HTML content of the first matching element in the collection or sets the HTML content of each matching element, in 3 ways:

1. . HTML () does not pass in a value, which is the HTML content that gets the first matching element in the collection
2. . HTML (htmlstring) sets the HTML content of each matching element
3. . HTML (function (index, oldhtml)) is used to return a function that sets HTML content

Precautions:

The. HTML () method is used internally by the DOM's innerHTML property to handle, so one of the most important issues to be aware of in terms of Setup and acquisition  is the entire HTML content (not just text content) 

The. Text () method

Gets the text content of each element in the matching element collection, including their descendants, or sets the text content of each element in the matching element collection to the specified text content. , there are 3 ways to use it:

1. . Text () Gets the merged text of each element in the matching element collection, including their descendants
2. . Text (TextString) used to set the content of matching elements
3. . text (function (index, text)) is used to return a function that sets the text content

Precautions:

The. Text () result returns a string containing the merged text for all matching elements

The similarities and differences between HTML and. Text:

1. The. Html method operation is the same as the. text, except that it is specific to the processing object
2. . HTML handles the content of elements,. Text handles textual content
3. . HTML can only be used in HTML documents, and. Text can be used in both XML and HTML documents
4. If the object you are working with has only one child text node, the result of HTML processing is the same as text.
5. Firefox does not support the InnerText property, using a similar textcontent property, the. Text () method combines support for 2 properties, so it can be compatible with all browsers

The properties and styles of the 3jQuery. Val ()

One of the. Val () methods in jquery is primarily used to manipulate the values of form elements, such as input, select, and textarea.

The. Val () method

1. . val () No parameter, gets the current value of the first element in the matching element collection
2. . val (value), sets the value of each element in the matching element collection
3. . val (functions), a function to return the set value

Precautions:

1. The select element is processed through. Val (), and when no selection is selected, it returns null
2. The. Val () method is used to set the value of the form's field
3. If the select element has a multiple (multiple-selection) attribute, and at least one selection is selected, the. Val () method returns an array that contains the value of each selected selection

summary of differences between. html (),. Text (), and. Val ():

1. . HTML (),. Text (),. Val () Three methods are used to read the contents of the selected element; HTML () is used to read the elements of the HTML content (including HTML tags),. Text () is used to read the plain text content of the element, including its descendant elements,. Val () Is the "value" value that is used to read form elements. where the. html () and. Text () methods cannot be used on form elements, whereas. val () can only be used on form elements, and the. html () method only reads the first element when used on more than one element; the. val () method is the same as. html () If it is applied on more than one element. Only the value of the first FORM element can be read, but. Text () is different from theirs, and if. Text () is applied on more than one element, the textual content of all the selected elements is read.
2. . HTML (htmlstring),. Text (TextString), and. Val (value) Three methods are used to replace the contents of the selected element, and if three methods are applied on more than one element at the same time, the contents of all the selected elements will be replaced.
3. . HTML (),. Text (),. Val () can use the return value of the callback function to dynamically change the contents of multiple elements.

The style and style of the 4jQuery properties are added. addclass ()

By dynamically changing the class name, you can make its modified elements render different effects. In the HTML structure, multiple classes are separated by spaces, and when a node (or a label) contains more than one class, the ClassName property of the DOM element response gets an array that is not a class name, but a string containing spaces. This makes multi-class operations cumbersome. The same jquery developer also takes this into account, adding a. addclass () method for dynamically increasing class names

. AddClass (ClassName) method

1. . addclass (ClassName): One or more style names to add for each matching element
2. . addclass (function (index, currentclass)): This function returns one or more style names to be added separated by spaces

Precautions:

The. AddClass () method does not replace a style class name. It simply adds a style class name to the element

Simple description: Add a newclass style to the P element

<p class= "Orgclass" >$ ("P"). addclass ("Newclass")

Then the class of P element is actually class= "Orgclass Newclass" style will only continue to increase on the original class, separated by a space

The deletion style of the attributes and styles of the 5jQuery. Removeclass ()

jquery's adoption of the. addclass () method makes it easy to add styles. If you need to switch between styles, jquery also provides a handy. Removeclass (), which is the function of removing all or the specified class from the matching element

. removeclass () method

1. . Removeclass ([ClassName]): One or more space-delimited style names removed by each matching element
2. . Removeclass (Function (Index, Class)): A function that returns one or more style names that will be removed

Precautions

If a style class is a parameter, only such a class is removed from the collection of matching elements. If no style name is used as a parameter, all style classes will be removed

The toggle style of the properties and styles of the 6jQuery. Toggleclass ()

When doing certain effects, it is possible to constantly switch to one style of the same node, that is, the mutual exclusion between addclass and removeclass, such as interlaced color change effect.

jquery provides a Toggleclass method for simplifying this mutually exclusive logic, dynamically adding the delete class through the Toggleclass method, executing the equivalent of AddClass once, and performing again the equivalent of Removeclass

. Toggleclass () Method: Adds or removes one or more style classes on each element of the matching element collection, depending on whether the style class exists or the value toggle property. That is, delete (add) A class if it exists (does not exist)

1. . Toggleclass (ClassName): one or more (separated by spaces) style class names that are used to toggle on each element in the matching element collection
2. . Toggleclass (className, switch): A Boolean value that determines whether a style should be added or removed
3. . Toggleclass ([switch]): A Boolean value that is used to determine whether a style class is added or removed
4. . Toggleclass (Function (Index, class, switch) [, switch]): A function that returns the name of the style class used to toggle on each element in the matching element collection. Receives the index position of the element and the element's old style class as a parameter

Precautions:

1. Toggleclass is a mutually exclusive logic, that is, by determining the corresponding element on the existence of the specified class name, if any, delete, if not, add
2. Toggleclass will retain the original class name and add it, separated by a space

The properties of the 7jQuery are styled with style actions. CSS ()

By using JavaScript to get the style property on the DOM element, we can dynamically assign the style property to the element. In jquery we want to dynamically modify the style property so that we can do it with the CSS () method.

. CSS () method: Gets the calculated value of the element style property or sets the CSS property of the element

Get:

1. . CSS (PropertyName): Gets the computed value of the style property of the first element in the matching element collection
2. . CSS (propertynames): Passing a set of arrays, returning an object result

Set up:

1. . CSS (propertyname, value): Set CSS
2. . CSS (propertyname, function): You can pass in a callback function and return to the corresponding value for processing
3. . CSS (properties): You can pass an object and set multiple styles at the same time

Precautions:

1. Browser properties are obtained in different ways, when you get some values, jquery uses a unified processing, such as color using RBG, size using px
2. The. css () method supports the writing of camel-hump and case-mix, and the internal fault-tolerant processing
3. When a number is only used as a value, jquery converts it to a string and adds PX at the end of the string, such as. css ("width", 50}) as with. CSS ("width", "50px"})

The difference between the properties of 8jQuery and the style of the. css () and the. addclass () Setting style

For styling, we've learned AddClass and CSS methods, so what's the difference between the two?

Maintainability:

The essence of the. addclass () is to add one or more classes to an element by defining a style rule for the class. CSS methods are styles that change elements through a lot of JavaScript code

Through. AddClass () We can batch to the same elements set uniform rules, change is more convenient, can be unified to modify the deletion. If you pass the. css () method, you need to specify that each element is a one by one modification, and later maintenance will have to be modified one by one, rather troublesome

Flexibility:

Using the. CSS () method makes it easy to dynamically change the properties of a style without having to go through the tedious definition of a class-class rule. In general, in the uncertain start layout rules, through the dynamically generated HTML code structure, are handled by the. CSS () method.

Style values:

The. addclass () essence is simply an addition to the class of classes that cannot get the value of the property to the specified style, and the. css () can get to the specified style value.

Priority of the style:

CSS styles are prioritized, with the same style rules applied to the same element as the external style, inner style, and inline style, with the following precedence

External style < Inner style < inline style

1. The. AddClass () method is done by adding the class name, so the style is defined in the external file or internal style, and is appended to the element when needed
2. Inline styles are handled through the. CSS () method, which is appended directly to the element's style property.

Style attributes that are set by the. CSS method are prioritized higher than the. AddClass method

Summarize:

. AddClass and. CSS methods have pros and cons, generally static structure, have determined the layout of the rules, you can use the AddClass method to increase the uniform class rules if it is a dynamic HTML structure, in the case of uncertain rules, or often change, generally consider more. CSS () mode

Data storage for 9jQuery attributes and elements of styles

The HTML5 dataset is the new HTML5 standard that allows you to embed similar data-*-like attributes in a common element tag to enable access to some simple data. It is unlimited in number and can be modified dynamically by JavaScript, and CSS selectors are also supported for styling. This makes the data property particularly flexible and very powerful. With this property, we are able to make data presets or storage more orderly and intuitively.  So how do we implement data access in browsers that don't support the HTML5 standard? jquery provides a method of. Data () to handle this problem

Beginners using jquery are generally not very concerned with the data approach, which is used internally by jquery and can be used for performance optimizations such as sizzle selection that can be used to cache partial result sets and so on. Of course this is a very important API, often used for us to store some temporary data, because it is directly with the DOM element object bound together

The storage interface provided by jquery

Jquery.data (element, key, value)   //static interface, storage data jquery.data (element, key)  //static interface, FETCH data   . (key, value)//instance Connection Data (key)//instance interface, storage data

2 methods used on the access are all through an interface, passing elements, key value data. In the official jquery documentation, the. Data () method is recommended instead.

We can think of Dom as an object, then we can have a primitive type on the object, reference the type of data, but here will raise a problem, there may be a circular reference to the memory leak risk

The data interface provided by jquery is a good deal of the problem, and we don't need to worry about how it is implemented at the bottom, just use the corresponding method

The same also provides 2 corresponding delete interface, the use of the data method is actually consistent, but one is to add a delete it

Jquery.removedata (element [, name]). Removedata ([name])

Referring to the code area on the right, 2 code snippets describe the use of static and instance data, respectively

<! DOCTYPE html>

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<style>
. Left,
. Right {
width:300px;
height:120px;
}

. Left Div,
. Right Div {
width:100px;
height:90px;
padding:5px;
margin:5px;
Float:left;
border:1px solid #ccc;
}

. Left Div {
Background: #bbffaa;
}

. Right Div {
Background:yellow;
}
</style>
<script src= "Http://libs.baidu.com/jquery/1.9.1/jquery.js" ></script>

<body>
<div class= "Left" >
<div class= "Aaron" >
<p> Click to see results </p>
<p>jQuery.data</p>
</div>
<div><span></span></div>
</div>
<div class= "Right" >
<div class= "Aaron" >
<p> Click to see results </p>
<p>.data</p>
</div>
<div><span></span></div>
</div>
<script type= "Text/javascript" >
$ ('. Left '). Click (function () {
var ele = $ (this);
Setting up data by using the $.data method
$.data (Ele, "a", "Data Test")
$.data (Ele, "B", {
Name: "Mu-Class Network"
})
Extracting data by $.data method
var reset = $.data (Ele, "a") + "</br>" + $.data (ele, "B"). Name
Ele.find (' span '). Append (reset)
})
</script>
<script type= "Text/javascript" >
$ ('. Right '). Click (function () {
var ele = $ (this);
Setting up data by. Data mode
Ele.data ("A", "Data Test")
Ele.data ("B", {
Name: "Mu-Class Network"
})
Data extraction via.
var reset = Ele.data ("a") + "</br>" + ele.data ("B"). Name
Ele.find (' span '). Append (reset)
})
</script>
</body>

The properties and styles of jquery