Jquery (i)--style chapter (GO)

Jquery (i)--style chapter
1.$ (document). The role of ready is to wait until the nodes in the document of the page are loaded and then execute the subsequent code.

Because we may rely on an element of the page when we execute the code, we want to make sure that the element is actually loaded before it can be used correctly.

2.jQuery Objects and Dom objects

Dom object: var p = document.getElementById (' Imooc ');

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

The 3.jQuery object is transformed into a DOM object (jquery is a class array object, and the 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 by Get method)

Convert 4.DOM objects into jquery objects

var div = document.getelementsbytagname (' div '); Dom Object

var $div = $ (div); jquery Object

var $first = $div. First (); Find the first DIV element

(by getElementsByTagName the elements of all DIV nodes, the result is a DOM collection object, but this object is a set of number combinations (3 div elements).

The $ (div) method is used to convert the jquery object by invoking the first and CSS methods in the JQuery object to find and change its color. ）

5.jQuery Selector ID selector $ ("#id")

The ID selector is also the basic selector, and jquery internally uses the JavaScript function document.getElementById () to handle the acquisition of the ID.

Selectors such as the 6.jQuery selector $ (". Class")

Native Getelementsbyclassname () function to achieve, get a set, to go through the loop to each element to modify the style

If jquery is implemented, you can select multiple elements and then modify the style

Element selector for 7.jQuery selector $ ("element")

Using the getElementsByTagName method to get all the <div> elements of a page is a collection that gives a new style to each of the <div> elements in a collection by looping

jquery selects all elements through the element selector and directly assigns the style to the CSS method

Full selector of the 8.jQuery selector (* selector) $ ("*")

Passing "*" in document.getElementsByTagName () can also be obtained by

The level selector of the 9.jQuery selector (the hierarchy selector in the selector is used to handle this relationship: child element descendant element sibling element neighbor Element)

Basic Filter selector for the 10.jQuery selector

The usage of the filter selector is similar to the pseudo-element in CSS, with the selection beginning with the colon ":"

(1): eq (),: LT (),: GT (),: Even,: Odd the collection element used to filter the matching expressions in front of them, based on the previously matched elements in further filtering, noting that the jquery collection is indexed starting at 0.

(2) GT is a paragraph filter, from the next beginning of the specified index, the GT (1) actually starts from 2.

Content Filter selector for the 11.jQuery selector

(1): Contains and: Has all have a look-up meaning, but contains finds the element that contains the "specified text" and has found the element that contains the "specified element."

(2) If: Contains matched text is included in the element's child elements, it is also considered to be eligible.

(3):p arent with: Empty is the opposite, both of the child elements involved, including the text node

12.jQuery Selector Visibility Filter Selector

Element has a display state and a hidden state, jquery expands the visibility filter selector based on the state of the element: visible and: Hidden

: Hidden selector, not only the element with the style display= "None", but also the hidden form, visibility, etc.

There are several ways we can hide an element:

1. The value of CSS display is none.
2. Type= the form element for "hidden".
3. Both width and height are explicitly set to 0.
4. An ancestor element is hidden and the element is not displayed on the page
5. The value of CSS visibility is hidden
6. CSS opacity refers to the 0

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 is greater than 0.

Elements of the Visibility:hidden or opacity:0 are considered visible because they still occupy the spatial layout.

Elements that are not in the document are considered invisible, and if they are inserted into the document, jquery has no way of knowing whether they are visible, because element visibility depends on the applicable style

jquery Selector's attribute filter selector

The property selector allows you to position an element based on an attribute. You can specify only one of the attributes of the element, so that all use that property regardless of its value, this element will be positioned, or it can be more explicit and locate the elements that use specific values on those properties, which is where the property selector demonstrates their power.

The description is as follows:

Browser support:

• [Att=val], [ATT], [att|=val], [att~=val] belong to the CSS 2.1 specification
• [Ns|attr], [Att^=val], [Att*=val], [att$=val] belong to the CSS3 specification
• [name!= "Value"] is a selector for the jquery extension

CSS selectors, whether CSS2.1 or CSS3, are supported by IE7 and IE8, WebKit, Gecko Core, and opera are supported only IE6 the following browsers are not supported

In so many property selectors [attr= "value"] and [attr*= "value"] are the most practical

[attr= "value"] can help us to locate different types of elements, especially the form form elements, such as input[type= "text"],input[type= "checkbox", etc.

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

child element Filter selector for jquery selector

Child element Filter Selectors are infrequently used, and their filtering rules are slightly more complex than other selectors

child element Filter Selector Description Table:

Precautions:

1. : First matches only a single element, but: the First-child selector can match multiple: that is, each parent element is matched to a second child element. This is equivalent to: nth-child (1)
2. : Last matches only a single element: The Last-child selector can match multiple elements: that is, each parent element is matched to the final child element
3. If the child element has only one word: First-child and: Last-child is the same
4. : Only-child matches an element that is the only child element in the parent element, meaning that the current child element is the only element in the parent element, matching
5. jquery implementation: Nth-child (n) is strictly from the CSS specification, so the N value is "index", that is, counting starting from 1: Nth-child (Index) starting from 1, and EQ (index) starting from 0
6. The difference between Nth-child (n) and: Nth-last-child (n) is calculated from the former, the latter from the backward

the form element selector for the jquery selector

Whether you commit or pass data, the role of form elements in a dynamic interactive page is important. The form selector is specifically added to jquery, making it extremely easy to get form elements of a type

The specific method description of the form selector:

Precautions:

In addition to the input filter selector, almost every form category filter corresponds to the type value of an INPUT element. Most form category filters can be replaced with property filters. For example $ (':p assword ') = = $ (' [Type=password] ')

Form object property filter selector for jquery selector

In addition to the form element selector, the Form object property Filter Selector is also a selector for form elements that can be appended to other selectors, with the main function being to filter the selected form elements

Description of the form filter selector:

Precautions:

1. Selectors apply to check boxes and radio boxes, for drop-down box elements, using: Selected selector
2. In some browsers, selectors: checked may be incorrectly selected to the <option> element, so be sure to switch to the selector input:checked to ensure that only the <input> element is selected

Special selector of the jquery selector this

I believe many people who have just come into contact with jquery will have a vague distinction between $ (this) and this one, so what is the difference between the two?

This is a keyword in JavaScript that refers to the current context object, which is simply the owner of the method/property

In the following example, IMOOC is an object that has the Name property and the GetName method, in GetName this points to the owning object Imooc

var Imooc = {

Name: "Mu class Net",

Getname:function () {

This is the Imooc object

return this.name;

}

}

Imooc.getname (); Mu class net

Of course in JavaScript this is dynamic, that is, the context object can be dynamically changed (can be through call,apply, etc.), the specific people can check the relevant information

The same in the DOM this is pointing to this HTML element object, because this is a reference to the DOM element itself

If an event is bound to a P element of 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 an event callback that is bound by AddEventListener, this points to the current DOM object, so the style of such an object is modified again, just by retrieving the reference from this

This.style.color = "Red"

But this kind of operation is still very inconvenient, this involves a lot of style compatibility, if through jquery processing will be much easier, we only need to make this a jquery object

The practice of replacing jquery:

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

Convert p elements into jquery objects

var $this = $ (This)

$this. CSS (' Color ', ' red ')

})

By passing the $ () method to the reference of the current element object, this will be processed into a jquery object, and we can use the shortcut method provided by jquery to deal with the style directly.

Overall:

This indicates that the current context object is an HTML object that can invoke properties and methods owned by the HTML object.

$ (this), which represents the context object that is a jquery context object that can invoke the methods and property values of jquery.

the attributes and styles of jquery. 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

jquery 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 attributes and styles of jquery. 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 attributes and styles of jquery add style. 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 properties of jquery and the style of the delete style. 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 style and style of jquery properties. 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 and styles of jquery manipulate the style. 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 jquery 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 frequently changing circumstances, it is generally more considered. CSS () mode

data storage for jquery 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, fetching data

The. Data (key, value)//instance interface, which is stored. Data (key)//instance interface,

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])

Jquery (i)--style chapter (GO)