Jquery (1)-style, jquery Style

Jquery (1)-style, jquery Style

Jquery (1)-style
1. $ (document). ready is used to execute subsequent code after all nodes in the document of the page are loaded,

Because when executing code, we may depend on an element of the page. We need to ensure that this element can be correctly used after it is actually loaded.

 

2. jQuery object and DOM object

DOM object: var p = document. getElementById ('imooc ');

JQuery object: var $ p = $ ('# imooc'); $ p is a class array object

 

3. convert a jQuery object to a DOM object (jQuery is a class array object, and DOM object is a separate DOM element)

Var $ div = $ ('div ') // jQuery object

Var div = $ div [0] // convert to DOM object (var div = $ div. get (0) // convert to DOM object through get method)

 

4. convert a DOM object to a jQuery object

Var div = document. getElementsByTagName ('div '); // dom object

Var $ div = $ (div); // jQuery object

Var $ first = $ div. first (); // locate the first div Element

(GetElementsByTagName is used to obtain the elements of all div nodes. The result is a dom collection object, but this object is an array collection (three div elements ).

Convert the $ (div) method to a jQuery object, and call the first and css methods in the jQuery object to find the first element and change its color .)

 

5. id selector of jQuery selector $ ("# id ")

The id selector is also a basic selector. jQuery internally uses the JavaScript function document. getElementById () to process the acquisition of IDs.

 

6. selector like jQuery $ (". class ")

If the native getElementsByClassName () function is implemented, a set is obtained and the style must be modified for each element in a loop.

To implement jQuery, you can select multiple elements and then modify the style.

 

7. element selector of jQuery selector $ ("element ")

The getElementsByTagName method is used to obtain that all <div> elements on the page are a set, and the <div> element in each collection is cyclically assigned a new style.

Jquery Selects all elements through the element selector and directly assigns the style through the css method.

 

8. jQuery selector-full selector (* selector) $ ("*")

Pass "*" in document. getElementsByTagName () to obtain

 

9. Hierarchical selector of jQuery selector (the hierarchical selector in the selector is used to deal with this relationship: child element descendant element sibling element adjacent element)

 

 

10. jQuery selector-Basic filter Selector

The usage of the filter selector is similar to that of the pseudo element in CSS. The selector starts with a colon ":".

 

(1): eq (),: lt (),: gt (),: even,: odd is used to filter the set elements of their matching expressions, further filtering is performed based on the previously matched elements. Note that jQuery collections are indexed from 0.

(2) gt is a paragraph filtering. Starting from the next of the specified index, gt (1) actually starts from 2.

 

11. Content Filtering selector of jQuery Selector

 

(1): contains and: has both have search meanings, but contains search for elements that contain "specified text" and has search for elements that contain "specified elements.

(2) If the text matched by contains is contained in the child element of the element, it is also considered to be qualified.

(3) parent and empty are the opposite. The child elements involved in the two include text nodes.

 

12. Visibility filtering selector of jQuery Selector

The element has a display and hidden state. jQuery expands the visibility filtering selector: visible and: hidden Based on the element state.

 

: Hidden selector not only contains elements whose style is display = "none", but also contains hidden forms and visibility.

 

There are several ways to hide an element:

If an element occupies a certain amount of space in the document, the element is considered visible.

The width or height of the visible element, which is greater than zero.

Element visibility: hidden or opacity: 0 is considered visible because they still occupy space layout.

Elements not in the document are considered invisible. If they are inserted into the document, jQuery cannot determine whether they are visible, because element visibility depends on applicable styles.

 

Attribute filter selector of jQuery Selector

The attribute selector allows you to locate an element based on the attribute. You can only specify an attribute of this element, so that all elements that use this attribute, regardless of its value, will be located, you can also define and locate the elements that use specific values on these attributes. This is where the attribute selector shows their power.

Description:

 

Browser support:

• [Att = val], [att], [att | = val], [att ~ = Val] is a CSS 2.1 Standard
• [Ns | attr], [att ^ = val], [att * = val], and [att $ = val] belong to the CSS3 specification.
• [Name! = "Value"] belongs to the jQuery extension Selector

CSS selector is supported by both CSS2.1 and CSS3, IE7 and IE8, as well as webkit, Gecko core, and Opera. It is not supported by browsers earlier than IE6.

[Attr = "value"] and [attr * = "value"] are the most practical attribute selectors.

[Attr = "value"] can help us locate different types of elements, especially the operations on form elements, such as input [type = "text"], input [type = "checkbox"] and so on

[Attr * = "value"] can help us match different types of files on the website

 

Subelement filter selector of jQuery Selector

The filtering rules of child elements are slightly more complex than those of other child element filters.

Child element filter selector description table:

 

Note:

 

Form element Selector Based on jQuery Selector

Whether it is submitting or passing data, form elements play an important role in Dynamic Interaction pages. JQuery adds a form selector to easily obtain a certain type of form element.

Description of the form selector:

 

Note:

In addition to the input filter selector, almost each form category filter corresponds to the type value of an input element. Most form category filters can be replaced by attribute filters. For example, $ (': password') =$ (' [type = password] ')

 

Form object attribute filtering selector using jQuery Selector

In addition to the form Element selector, the form object attribute filtering selector is also a special selector for form elements, which can be appended to other selectors. The main function is to filter selected form elements.

Description of the form filter selector:

 

Note:

Special selector of jQuery selector this

I believe that many people who are new to jQuery will be confused about the difference between $ (this) and this. What is the difference between the two?

This is a keyword in JavaScript and refers to the current context object. In short, it is the owner of the method/attribute.

In the following example, imooc is an object with the name attribute and the getName method. In getName, this points to the object imooc.

Var imooc = {

Name: "MOOC ",

GetName: function (){

// This is an imooc object

Return this. name;

}

}

Imooc. getName (); // MOOC

Of course, this is dynamic in JavaScript, that is to say, this context object can be dynamically changed (you can use call, apply, and other methods). For details, refer to relevant materials.

Similarly, in the DOM, this points to the html element object, because this is a reference of the DOM element.

Assume that an event is bound to a P element on the page:

P. addEventListener ('click', function (){

// This = p

// Both of the following modifications are equivalent.

This. style. color = "red ";

P. style. color = "red ";

}, False );

In the Event Callback bound through addEventListener, this points to the current dom object. to modify the style of such an object again, you only need to obtain the reference through this.

This. style. color = "red"

However, this operation is still very inconvenient. It involves a lot of style compatibility. It will be much simpler if it is processed using jQuery. We just need to process this into a jQuery object.

With jQuery:

$ ('P'). click (function (){

// Convert the p element into a jQuery object

Var $ this = $ (this)

Define this.css ('color', 'red ')

})

By passing the $ () method into the reference this of the current element object, and processing this into a jQuery object, we can use the shortcut provided by jQuery to directly process the style.

Overall:

This indicates that the current context object is an html object and can call the attributes and methods of the html object.

$ (This) indicates that the context object is a jquery context object. You can call jQuery methods and attribute values.

Attributes and styles of jQuery:. attr () and. removeAttr ()

Each element has one or more features. The purpose of these features is to provide additional information about the corresponding element or its content. For example, in an img element, src is a feature of the element used to mark the image address.

There are three DOM methods for operating features: getAttribute method, setAttribute method, and removeAttribute method. There are still many problems in actual operations. In jQuery, you can use an attr () and removeAttr (), including compatibility issues.

In jQuery, the attr () method is used to obtain and set element attributes. attr is the abbreviation of attribute. attr () is often used in jQuery DOM operations ()

Attr () has four expressions

RemoveAttr () deletion method

. RemoveAttr (attributeName): removes an attribute from each element in the matched element set)

Advantages:

Attr and removeAttr are all encapsulated by jQuery for Attribute operations. This method is called directly on a jQuery object and attributes can be operated easily, you do not need to understand the issue of different browser attribute names.

Notes:

There is a concept difference in dom: Attribute and Property are translated as "attributes", and js advanced programming is translated as "Features" and "attributes ". Simply put, Attribute is the built-in Attribute of the dom node.

For example, id, class, title, and align commonly used in html:

<Div id = "immooc" title = "MOOC"> </div>

And Property is the DOM element as the object, and its appended content, such as tagName, nodeName, nodeType, defaultChecked, and defaultSelected use. prop () method for value or value assignment.

To get Attribute, you need to use attr. To get Property, you need to use prop.

 

JQuery attributes and styles: html () and. text ()

Merge () and. text ()

. Html () method 

You can obtain the HTML content of the First Matching Element in a set or set the html content of each Matching Element in three ways:

Note:

The. html () method uses the innerHTML attribute of DOM for processing. Therefore, you must pay attention to one of the most important issues in setting and obtaining,This operation targets the entire HTML content (not just text content)

. Text () method

Get the text content combination of each element in the match Element Set, including their descendants, or set the text content of each element in the match element set to the specified text content ., There are three specific usage methods:

Note:

The. text () Result returns a string containing the merged text of all matching elements.

Similarities and differences between. html and. text:

JQuery attributes and styles. val ()

In jQuery, The. val () method is mainly used to process the values of form elements, such as input, select, and textarea.

. Val () method

Note:

 

Summary of differences between. html (),. text () and. val:  

Adding a style to jQuery attributes and styles. addClass ()

By dynamically changing the class name, you can make the modified elements show different effects. In the HTML structure, multiple classes are separated by spaces. When a node (or a label) contains multiple classes, the className attribute returned by DOM elements does not obtain an array of class names, but a string containing spaces, which makes multi-class operations very troublesome. JQuery developers also added a. addClass () method to dynamically add class names.

. AddClass (className) Method

Note:

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

A Simple Description: Add a newClass style to the p element.

<P class = "orgClass">

$ ("P"). addClass ("newClass ")

The class of the p element is actually a class = "orgClass newClass" style that will only be added to the original class and separated by spaces.

Delete style of attributes and styles of jQuery. removeClass ()

JQuery can easily add styles through the. addClass () method. If you need to switch between styles, jQuery also provides a very convenient. removeClass (), which is used to delete all or specified classes from matching elements.

.RemoveClass() Method

Notes

If a style class name is used as a parameter, only such a style class will be deleted from the matched element set. If no style name is used as a parameter, all style classes will be removed.

Switching style between attributes and styles of jQuery. toggleClass ()

When performing some operations, you may constantly switch between a style of the same node, that is, the mutually exclusive switching between addClass and removeClass, for example, changing the color of the line.

JQuery provides a toggleClass method to simplify this mutually exclusive logic. The toggleClass method is used to dynamically add and delete classes. One execution is equivalent to addClass, and another execution is equivalent to removeClass.

. ToggleClass () method:Adding or deleting one or more style classes on each element in the matched element set depends on whether the style class exists or the value switches to the attribute. That is, if there is (does not exist), delete (ADD) a class

Note:

Sample operations of jquery.css ()

You can use JavaScript to obtain the style attribute of the dom element. You can dynamically assign the style attribute to the element. In jQuery, We need to dynamically modify the style attribute. We only need to use the css () method.

. Css () method: Obtain the calculated value of the element style attribute or set the CSS attribute of the element.

Obtain:

Settings:

 

Note:

Differences between the. CSS () and. addClass () settings of jqueryexamples and Samples

We have learned the addClass and css methods for style settings. What is the difference between them?

Maintainability:

The essence of. addClass () is to add one or more classes to an element by defining style rules of a class. The css method uses JavaScript code to change the style of elements.

Through. addClass (), we can set unified rules for the same elements in batches, which is convenient to change and can be modified and deleted in a unified manner. If you use the. CSS () method, you need to specify that each element is modified one by one. In the future, maintenance must be modified one by one, which is troublesome.

Flexibility:

Through the. CSS () method, you can easily dynamically change the attributes of a style without the need to define the rules of a class. In general, the starting and ending rules are not fixed. All HTML code structures that are generated in a dynamic state are processed by the. CSS () method.

Style value:

. Addclass() only deletes the increment of class(, so you cannot get the value of the specified pattern. .css () can get the specified style value.

Style priority:

Css styles have priority. When the same style rules of external styles, internal styles, and inline styles are applied to the same element at the same time, the priority is as follows:

External style <internal style <inline Style

The priority of style attributes set by the. CSS method is higher than that set by the. addClass method.

Summary:

The .addclassand .css methods have their own advantages and disadvantages. Generally, they are static structures that determine the layout rules. You can use the addClass method to add unified class rules.

If it is a dynamic HTML structure, the regular structure is not fixed, and the regular changes are often changing. CSS () method is generally used.

 

Data storage of jQuery attributes and style elements

Html5 dataset is a new HTML5 standard that allows you to embed attributes similar to data-* in common element labels to achieve simple data access. The number of styles is unrestricted, and can also be dynamically modified by JavaScript. It also supports CSS selector for style setting. This makes data attributes extremely flexible and powerful. With this attribute, we can more orderly and intuitive data presets or storage. How can we achieve data access in browsers that do not support HTML5 standards? JQuery provides a. data () method to solve this problem.

JQuery beginners are generally not very concerned about the data method. This method is pre-used in jquery and can be used for performance optimization. For example, some result sets can be cached in sizzle selection. Of course, this is also a very important API, which is often used to store temporary data because it is directly bound with the DOM Element Object.

Storage interface provided by jQuery

JQuery. data (element, key, value) // static interface to store data

JQuery. data (element, key) // static interface to retrieve data

. Data (key, value) // instance interface, save data. data (key) // instance interface, save data

The two methods are used to access all elements and key-value data through one interface. We recommend that you use the. data () method in the official document of jQuery.

We can regard DOM as an object, so we can reference data of the basic type on the object, but this will cause a problem and may exist.Memory leakage risk of loop reference

Through the data interface provided by jQuery, this problem is well handled. We don't need to worry about how it is implemented at the underlying layer, just use it according to the corresponding data method.

In the same way, two corresponding deletion interfaces are provided, which are used in the same way as the data method, except that one is added and the other is deleted.

JQuery. removeData (element [, name])

. RemoveData ([name])

Refer to the code area on the right. The two code segments describe the usage of static data and instance data respectively.