Summary of the jquery tutorial

jquery Tutorials

Conclusion

Because JQuery is specifically designed to handle HTML events, your code is more appropriate and easier to maintain when you follow these guidelines:

• Put all jQuery code in the event handler
• Place all event handlers in the document-ready event handler
• Put the JQuery code in a separate. js file
• Rename the JQuery library if there is a name conflict

Document-Ready functions

You may have noticed that all jQuery functions in our instance are in a document ready function:

$ (document). Ready (function () {

---jQuery functions go here----

});

This is to prevent the document from running JQuery code before it is fully loaded (ready).

If you run the function before the document is fully loaded, the operation may fail. Here are two specific examples:

• Trying to hide an element that doesn't exist
• Get the size of an image that is not fully loaded

With JQuery, you can link actions/methods together.

Chaining allows us to allow multiple jQuery methods (on the same element) in one statement.

JQuery Method Link

Until now, we have written a jQuery statement one at a time (followed by another).

However, there is a technique called link (chaining) that allows us to run multiple jQuery commands on the same element, one after the other.

tip: In this case, the browser does not have to look for the same elements multiple times.

To link an action, you simply append the action to the previous action.

Example 1

The following example links CSS (), Slideup (), and Slidedown () together. The "P1" element first turns red, then slides up, then slides:

$ ("#p1"). CSS ("Color", "red"). Slideup (+). Slidedown (2000);

We can also add multiple method calls, if needed.

tip: When you make a link, the code line becomes very poor. However, JQuery is not syntactically rigorous; you can write in the format you want, including lines and indents.

Example 2

This can also be run:

$ ("#p1"). CSS ("Color", "red")
. Slideup (2000)
. Slidedown (2000);
JQuery will throw away the extra spaces and execute the lines of code as a line of code.

JQuery has a powerful way to manipulate HTML elements and attributes.

jQuery DOM Operation

A very important part of JQuery is the ability to manipulate the DOM.

JQuery provides a series of DOM-related methods that make it easy to access and manipulate elements and attributes.

Tips: DOM = Document Object model

The DOM defines the criteria for accessing HTML and XML documents:

The Document Object model is platform-and language-independent, allowing programs and scripts to dynamically access and update the content, structure, and style of the document. ”

Get Content-text (), HTML (), and Val ()

Three simple and practical jQuery methods for DOM manipulation:

• Text ()-Sets or returns the text content of the selected element
• HTML ()-Sets or returns the contents of the selected element (including HTML tags)
• Val ()-Sets or returns the value of a form field

The following example shows how to get the content using the JQuery text () and HTML () methods:

Instance

$ ("#btn1"). Click (function () {
Alert ("Text:" +$ ("#test"). Text ());
});
$ ("#btn2"). Click (function () {
Alert ("HTML:" +$ ("#test"). html ());
});

The following example shows how to get the value of an input field using the JQuery Val () method:

Instance

$ ("#btn1"). Click (function () {
Alert ("Value:" +$ ("#test"). Val ());
});

Get Property-attr ()

The JQuery attr () method is used to get the property value.

The following example shows how to get the value of the href attribute in the link:

Instance

$ ("button"). Click (function () {
Alert ($ ("#w3s"). attr ("href"));
});

Try it yourself.

The next chapter explains how to set (change) content and attribute values.

JQuery (selector, [context])

The syntax is used in the following ways:

usage 1 : Setting the selector environment

Grammar

JQuery (selector, [context])

By default, the selector searches the DOM from the root of the document. However, you can set the optional context parameter for $ ().

For example, if we want to search for an element in a callback, we can qualify the following search:

Instance

$ ("Div.foo"). Click (function () {
$ ("span", this). AddClass ("Bar");
});

Since we have limited the span selector to this environment, only the span of the clicked element will get the additional class.

Internally, the selector environment is implemented through the. Find () method, so $ ("span", this) is equivalent to $ (this). FIND ("span").

The core functionality of JQuery is achieved through this function. Everything in jquery is based on this function, or the function is used in some way. The most basic use of this function is to pass an expression (usually composed of a CSS selector) to it, and then find all the matching elements based on the expression.

By default, if you do not specify a context parameter, $ () looks for DOM elements in the current HTML document, and if you specify a context parameter, such as a DOM element set or JQuery object, it is found in this context. After jQuery1.3.2, the order of elements returned is identical to the order in which they appear in the context.

usage 2 : Using DOM Elements

Grammar

JQuery (element)

This function allows us to create jQuery objects by using DOM elements found in other ways. The usual use of this feature is to invoke jQuery on elements that have been passed to the callback function through the This keyword:

Instance

$ ("Div.foo"). Click (function () {
$ (this). Slideup ();
});

This regular session hides the element when it is clicked by using a slide animation. Because the clicked item in the This keyword that the handler accepts is a pure DOM element, you must wrap the element with a jquery object before calling jquery's method on it.

This function can also receive XML documents and Window objects (although they are not DOM elements) as valid parameters.

When XML data is returned from an Ajax call, we can use the $ () function to wrap the data through a jquery object. Once done, we can use. Find () and other DOM traversal methods to retrieve a single element in the XML structure.

usage 3 : Cloning JQuery Object

Grammar

JQuery (jqueryobject)

When a JQuery object is passed to the $ () function in the form of a parameter, a copy of the object is created. As with the original object, the new JQuery object references the same DOM element.

usage 4 : Returns an empty collection

Grammar

JQuery ()

For jquery 1.4, calling the No-parameter jquery () method returns an empty jquery collection. In previous versions of JQuery, this would return a collection containing the document node.

JQuery (HTML, [ownerdocument])

The syntax is used in the following ways:

usage 1 : Create a new element

Grammar

JQuery (html, [ownerdocument])

You can pass a handwritten HTML string, or a string created by some template engine or plug-in, or a string loaded over Ajax. However, there are limitations when you create the input element, and you can refer to the second example.

Of course, this string can contain a slash (such as an image address) and a backslash. When you create a single element, use either a closed tag or XHTML format. For example, create a span that can be used with $ ("<span/>") or $ ("<span></span>"), but not recommended $ ("<span>"). In JQuery, this syntax is equivalent to $ (document.createelement ("span")).

If you pass a string to $ () as a parameter, JQuery checks to see if the string is HTML (for example, there is a tag in some place of the string). If not, then interpret the string as a selector expression, see the above explanation. However, if the string is an HTML fragment, jquery attempts to create a DOM element that is described by the HTML fragment. A jquery object that references these DOM elements is then created and returned:

Instance

$ ("<pid=" test ">my <em>new</em>text</p>"). AppendTo ("body");

If HTML fragments are more complex than simple tags without attributes, as in the example above, the actual creation of elements is done by the browser's innerhtml mechanism. Specifically, jquery creates a new <div> element and then sets the innerHTML property of the element for the incoming HTML fragment. When a parameter is simply a label, such as $ ("</a>"), JQuery creates the element through the endogenous JavaScript createelement () function.

To ensure cross-platform compatibility, the fragment must have a good structure. Labels that can contain other elements must appear in pairs (with a close tag):

$ ("<ahref=" http://jquery.com "></a>");

However, JQuery also allows XML-like tag syntax:

$ ("<a/>");

Labels that cannot contain other elements can be closed or not closed:

$ ("$ ("<input>");

usage 2 : Setting properties and Events

Grammar

JQuery (html,props)

For JQuery 1.4, we can pass a property map to the second parameter. This parameter accepts a superset of the properties that can be passed to the. attr () method. In addition, you can pass arbitrary event types, and you can invoke the following jquery method: Val,css, HTML, text, data, width, height, or offset.

Note that Internet Explorer does not allow you to create input elements and change their types, and you must use the <input type= checkbox "/>" to specify the type.

Instance

Create a <input> element, setting the Type property, the property value, and some events.

$ ("<input>", {
Type: "Text",
Val: "Test",
Focusin:function () {
$ (this). AddClass ("active");
},
Focusout:function () {
$ (this). Removeclass ("active");
}
}). AppendTo ("form");

JQuery (callback)

Allows you to bind a function that executes after the DOM document is loaded.

The function behaves like $ (document). Ready () Just as with this function, you need to wrap all the other $ () operators in the page that need to be executed when the DOM is loaded. Although this function is technically a link, there is not much that is actually linked in this way.

Example

When the DOM loading is complete, execute the functions within it:

$ (function () {
Document ready
});

Summary of the jquery tutorial