Home > Developer > JavaScript
Use JQ to write the most basic fade-in and fade-out effects.
JQuery is a JavaScript library, which is an extension of JavaScript to meet various increasing special effects. The essence is JavaScript.
Next we will compile a basic JQ program to illustrate JQ.
I. Basic Objectives
There are three buttons in the webpage. One button can only hide text, and the other can only show text. The other button can hide and show text at the same time. Click Show and click hide to show the text without limit.
Ii. Production Process
1. First, you need to download a JQ support file from the JQ official website and put it in your site folder. The Supported file is jQuery1.11. You can download jQuery1.11 compatible with the old browser IE6 from the official jQuery website, instead of jQuery2 compatible with the old browser ie6.
2. The entire webpage code is as follows, which is further described in parts:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Script type = "text/javascript" src = "js/jquery-1.11.1.js"> </script> <Script> $ (Document). ready (function (){ $ ("# Hide"). click (function (){ $ ("# Text"). hide (); }); $ ("# Show"). click (function (){ $ ("# Text"). show (); }); $ ("# Toggle"). click (function (){ $ ("# Text"). toggle (); }); }); </Script> <! -- <Style type = "text/css"> # Text { Display: none } </Style> --> <Title> fade out and display JQ </title> </Head> <Body> <P id = "text"> Tossed text </P> <Button id = "hide"> Hide </Button> <Button id = "show"> Display </Button> <Button id = "toggle"> Hide/show </Button> </Body> </Html> |
(1) <body> Part
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
The <Body> <! -- This is the text that defines a text segment with the ID as text to facilitate script control --> <P id = "text"> Tossed text </P> <! -- Set the buttons with ID as hide, show, and toggle respectively --> <Button id = "hide"> Hide </Button> <Button id = "show"> Display </Button> <Button id = "toggle"> Hide/show </Button> </Body> |
(2)
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<Head> <! -- Code the webpage and declare to use JQ --> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Script type = "text/javascript" src = "js/jquery-1.11.1.js"> </script> <Script> <! -- JQ code must first use $ (document). ready (function () {}); to define a total function. Something cannot be executed after the framework provided by this function is missing --> $ (Document). ready (function (){ <! -- Then write the required function in this function --> <! -- Call the function for the click action of the button whose ID is hide. The subsequent actions are still placed in this function. --> $ ("# Hide"). click (function (){ <! -- Hide text whose ID is text --> $ ("# Text"). hide (); }); $ ("# Show"). click (function (){ <! -- Display text whose ID is text --> $ ("# Text"). show (); }); $ ("# Toggle"). click (function (){ <! -- Switch the text with the ID between hide and display --> $ ("# Text"). toggle (); }); }); </Script> Lt ;! -- Whether to display or not by default. <Style type = "text/css"> # Text { Display: none } </Style> -> <Title> fade out and display JQ </title> </Head> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
