JavaScript (+) jQuery (JavaScript library)

Source: Internet
Author: User
Tags jquery library

JavaScript Framework (library)
JavaScript high-level programming, especially the complex processing of browser differences, is often very difficult and time-consuming. In response to these tweaks, many JavaScript libraries have emerged.


These JavaScript libraries are often referred to as JavaScript frameworks.

Jquery
JQuery is now the most popular JavaScript framework.

It uses CSS selectors to access and manipulate HTML elements (DOM objects) on the Web page. JQuery provides the companion UI (user interface) and plug-ins at the same time.
JQuery greatly simplifies JavaScript programming and is very easy to learn.

JQuery Library-Features
JQuery is a library of JavaScript functions. The JQuery library includes the following features:

    • HTML element Selection
    • HTML element manipulation
    • CSS actions
    • HTML Event functions
    • JavaScript Effects and animations
    • HTML DOM Traversal and changes
    • Ajax
    • Utilities

How to use it? Once useless, feel very dazed ah.

。 Slowly groping to find out ...

First, download
To the jquery website http://jquery.com/, download. I chose " download uncompressed, developing jquery 1.11.1".
Under Introduction:
Files that are not compressed. It is best to use during development or debugging, and compress files to save bandwidth and improve production performance for the actual site.


jquery's 2.x has the same API as jquery's 1.x. However, Internet Explorer 6,7,8 is not supported.

The download is:jquery-1.11.1.js(the jquery library is in a JavaScript file that includes all of the jquery functions.)


Assuming you're not willing to store the JQuery library on your computer, you can get anywhere from Google or Microsoft. Load the CDN jQuery core file.



Second, use
Now, for example. I want to achieve a hidden effect. For example, when I click on a piece of text, the text disappears. How to use jquery to achieve it?

First, I'd like to check out the jquery reference Manual. Website: http://www.w3school.com.cn/jquery/jquery_reference.asp
Here, there is an "effect" option. "Effect" inside, there is a hide () function, the function description is: Hide the selected element.
It seems that the hide () function can be used to achieve the function I want to implement. Click "Hide ()" To see how to use the function.

And then. See how to quote "jquery-1.11.1.js".
Place "Jquery-1.11.1.js" in the code's sibling folder. Use the following code to refer to "jquery-1.11.1.js":

<script src= "Jquery-1.11.1.js" ></script>

Assuming you don't want to download and store JQuery, you can also refer to it through a CDN (content distribution network).


Both Google and Microsoft have jQuery in their servers. To load a CDN jQuery core file from Google or Microsoft:

<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" >< /script>
<script type= "Text/javascript" src= "Http://ajax.microsoft.com/ajax/jquery/jquery-1.11.1.min.js" ></ Script>
Use Google or Microsoft's jQuery. There is a very big advantage:
Many users are visiting other websites. has been included in JQuery from Google or Microsoft. So the result is that when they visit your website, JQuery is loaded from the cache, which can reduce the load time. At the same time, most cdns ensure that when a user requests a file, they return a response from the user's recent server, which can also increase loading speed.


For Google. If you want to access the new version number (if you don't know the detailed version number of the new version number). Then the "1.11.1" can be changed to "1.11" or "1", Google will return the corresponding series of the latest available version number.

Next, learn about the jQuery syntax .
The jQuery syntax is for the selection of HTML elements and is capable of running certain operations on elements.

The underlying syntax is:$ (selector). Action ()
Dollar sign $ definition jQuery
Selector (selector) "Query" and "find" HTML elements
JQuery Action () runs on an element

Demo Sample:
$ (this). Hide ()-hides the current element
$ ("P"). Hide ()-Hides all paragraphs
$ (". Test"). Hide ()-hides all elements of class= "test"
$ ("#test"). Hide ()-Hides all id= "test" elements
Tip: The syntax used by JQuery is a combination of XPath and CSS selector syntax.

Attention:
The JQuery function should be in one of the document ready functions:

$ (document). Ready (function () {---jQuery functions go----});
This is to prevent the document from executing the JQuery code before it is fully loaded (ready). Assuming that the function executes before the document is fully loaded, the operation may fail.

The next step is the code:
<! DOCTYPE html>

</p><p> Click me and I'll disappear. </p><p> also want to click on me Oh. </p></body>


Well, practice a bit, feel good. I used it on my site and clicked on the link to open it.

JavaScript (+) jQuery (JavaScript library)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.