jquery Starter Guide for beginners _jquery

What is jQuery, and what can it do for us? If you're a WEB developer and you've written JavaScript programs, you're probably using jquery, even if you haven't tried it, or at least you've heard that jquery is, in fact, the most popular JavaScript library at this stage. According to the department, about 28% of the sites on the global web site use jquery, a number that may be exaggerated, but it shows how popular jquery is. This article is just a brief introduction to how JQuery is used, and as an introductory tutorial.
Download the JQuery code and load it in the page

First of all, we need to download the latest jquery code from the jquery official website, the jquery official provides two versions, one is compressed, one is not compressed, if you do not intend to read or analyze the jquery source code, then it is recommended to download the compressed version, because it is smaller. When the download is complete, load it into your HTML code and load the method as follows:

Of course, in the current popularity of jquery, there are a number of Web sites that provide online jquery APIs, such as the Google API, so we can load jquery in the following ways:

Copy Code code as follows:

<script type= "Text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.1.4 "></script>

The address is followed by a parameter ver=1.1.4, it is necessary to note that the JavaScript code is certainly unable to receive any parameters, this parameter is added to the browser to the server to get the latest version, Because you might have jquery.min.js this file in your browser cache before, just to avoid caching.
How JQuery code executes

Learning to write jquery code, the first thing to touch is the document ready this event-handling mechanism, and almost all of your jquery code is written in this event. This thing has two main functions:

Make sure that the JQuery code is not executed until the page is fully loaded. Because if there are DOM elements in the Web page that are not fully loaded, then accessing or manipulating DOM elements in JQuery code can be an error.
To a certain extent, distinguish JQuery code from other code.

Code is generally as follows:

<script type= "Text/javascript" >
$ (document). Ready (function () {
 //All JQuery code is written here
});
</script>

Using the JQuery selector to select DOM elements

JQuery encapsulates a function $ ("") that lets us easily select DOM elements within an HTML document, and here are a few simple ways to use them.

$ ("div"); Selects all DIV elements
$ ("#myElement") in the current HTML document;//SELECT Element
$ (". MyClass") with ID "MyElement" in the current HTML document;//Select the current HTML document Class is "MyClass" element
$ ("p#myelement");//select paragraph p tag element
$ ("ul Li A.navigation") in the current HTML with ID "myelement";//Select column A hyperlink with class "Navigation" in the Table element

JQuery supports almost all CSS selector methods

$ ("p > a"); Select Hyperlink a element
$ ("Input[type=text]" in all P tags);//select element of type text in the INPUT element
$ ("A:first");//Select the first hyperlink a element in the current page
$ ("p:odd");//Select the ordinal numbered paragraph p element
$ ("Li:first-child") in the current page;//Select the first element in the list

JQuery itself defines some selector methods, and here are a few examples:

$ (": animated"); Select the element $ (": Button") for which the animation effect is being performed
;//Select All button elements (input or button)
$ (": Radio");//Select all the checkbox elements
$ (": checkbox");// Select all check box elements
$ (": Checked");//Select All selected states and check boxes
$ (": Header");//Select All header elements (H1, H2, H3, H4 ...). ）

Manipulating and accessing class names in CSS

Using JQuery, you can add and remove class names for DOM elements, and it's quite handy to use. Here are a few typical ways to use it:

$ ("div"). addclass ("content"); Add Class $ ("div") named "Content" to all <div> elements
. Removeclass ("content");//Remove class
named "Content" in all <div> elements $ ("div"). Toggleclass ("content"); Alternately, a class named "Content" in all <div> elements (if this class is not present in the element, it is added to it; if it exists, it is removed)

Of course, you can also use JQuery to check if a certain element is using a class, the code is as follows

if ($ ("#myElement"). Hasclass ("content")) {
 alert ("There is a class named Content!") ");
}
else {
 alert ("There is no class named Content!") ");
}

Use JQuery to manipulate styles in CSS

With JQuery you can easily add CSS styles to DOM elements, and here are a few examples:

$ ("P"). CSS ("width", "400px"); Add a width of
$ ("#myElement") to all paragraphs. CSS ("Color", "blue")//Convert text color to Blue $ ("ul") for all elements that have ID #myElement
. CSS ("Border", "" Solid 1px #ccc ")//Adds a solid border to all unordered lists with a border color of #ccc

Add, remove, and append DOM elements or content to a Web page

JQuery also provides a variety of ways to manipulate DOM elements, such as changing the text in an action label ... Several examples are as follows:

var myelementhtml = $ ("#myElement"). html ();
Gets all the content in the element with ID myelement, including text and HTML tags
//This approach is similar to the InnerHTML var myelementhtml in traditional JavaScript

= $ ("#myElemen T "). text ();
Gets the text in the element with ID myelement, excluding text only, except HTML tags

You can also change HTML or text in a DOM element, similar to the above two methods:

$ ("#myElement"). HTML ("<p>this is the new content.</p>");
The contents of the #myElement will be replaced by this paragraph

$ ("#myElement"). Text ("This is the new content.");
The contents of the #myElement will be replaced by this line of text

Append content within an element:

$ ("#myElement"). Append ("<p>this is the new content.</p>");
Keep the original contents of the label and append the new content at the end

JQuery has several other uses for appending content to elements, such as: Appendto (), prepend (), Prependto (), before (), InsertBefore (), after (), InsertAfter (), Each has its own characteristics, but the use of the method and append () similar.
jQuery Event Handling

Some specific event handlers can be implemented in the following ways:

$ ("a"). Click (function () {
 //can write some code here
 ///When the hyperlink is clicked the code here will be executed
});

When the hyperlink is clicked, the code inside the function () is executed. There are other events that also use the same methods, such as: Blur, focus, hover, KeyDown, load, MouseMove, resize, scroll, submit, select.
hide or show elements in JQuery

JQuery also makes it easy to show or hide DOM elements, and the sample code is as follows:

$ ("#myElement"). Hide ("Slow", function () {
 //) Here you can write some code, and when the element is hidden, the code here will be executed
};

$ ("#myElement"). Show ("Fast", function () {
 ///Here you can write some code, when the element is hidden, the code here will be executed
});

$ ("#myElement"). Toggle (1000, function () {
 //) Here you can write some code, when the element is hidden/displayed, the code here will be executed
};

You can see that when the element is shown or hidden, it is slowly changing, because it uses several speed parameters, such as slow,fast, plus normal, the number 1000 is the number of milliseconds, can be customized. If the speed parameter is not set, then the element will be displayed or hidden directly, flashing past without any animation effect. The second argument that follows is a function that, when displayed/hidden, executes some of the required code, omitting this parameter if not necessary.

There is also a "Fade Fade" method, but also animation effect, using the following methods:

$ ("#myElement"). Fadeout ("Slow", function () {
 //The code here executes after fade out
);

$ ("#myElement"). FadeIn ("Slow", function () {
 //The code here executes after fade in completion
});

To adjust the transparency of an element:

$ ("#myElement"). Fadeto (0.4, function () {
 //The code here is executed after the adjustment transparency is completed
});

The first parameter is still the speed parameter, the second parameter is transparency, but three parameters are an anonymous callback function that is executed when the gradient is complete.
jquery animation effect

jquery can add up and down sliding effects for DOM elements:

$ ("#myElement"). Slidedown ("Fast", function () {
 //.....
});

$ ("#myElement"). Slideup ("Slow", function () {
 //...
});

$ ("#myElement"). Slidetoggle (1000, function () {
 //...
});

The JQuery animation effect can also be applied when changing the style of the DOM element, making the process of changing the style smooth, and optionally requiring speed, as shown in the following example:

$ ("#myElement"). Animate ({
 opacity:0.3,
 width: "500px",
 Height: "700px"
 }, 
 1000, 
 function () {
 //...
});

In general, JQuery is a powerful animation, but it has its quirks (for example, if you want to change colors, you may need other specific plug-ins). JQuery also has many other animation effects that need to be continuously studied and dug.