jQuery is a JavaScript library, that is, an extension to JavaScript, used to meet various increasing special effects needs. It's JavaScript
Let’s write a basic JQ program to illustrate JQ.
1. Basic Objectives
There are three buttons in the web page, one can only hide text, one can only display text, and the other can hide and display text at the same time. Click to show, then click to hide, and loop infinitely.
2. Production process
1. First, you need to download a JQ support file from the JQ official website and put it into your site folder. This support file is jQuery1.11. You can download jQuery1.11, which is compatible with the old browser IE6, from the jQuery official website, instead of jQuery2, which is incompatible with the old browser IE6.
2. The entire web page code is as follows, and then explained in fragments:
<!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>JQ fade out and display</title> </head> <body> <p id="text"> tossed text</p> <button id="hide"> Hide</button> <button id="show"> Show</button> <button id="toggle"> Hide/Show</button> </body> </html>(1) <body> part
The <head> part mainly implements the core code part. Let's talk about it later. Let's talk about the <body> part<body> <!--This is a text with an ID as text for easy script control --> <p id="text"> tossed text</p> <!--Set the buttons with IDs to hide, show, toggle respectively--> <button id="hide"> Hide</button> <button id="show"> Show</button> <button id="toggle"> Hide/Show</button> </body>
(2) <head> part
<head> <!--Encoding of web pages, declaring that you should 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> <!--The first thing you need to do is to write a total function with $(document).ready(function() {});. If you don't have to execute the framework provided by this function, you can't execute --> $(document).ready(function() { <!--Then write the required function in this function--> <!--Call the function call for the click action with the button with the ID hide, and the subsequent actions are still placed in this function--> $("#hide").click(function() { <!--Hide text with text with ID--> $("#text").hide(); }); $("#show").click(function() { <!--Switch text with ID--> $("#text").toggle(); }); </script> lt;!--This control is displayed by default or not <style type="text/css"> #text{ display:none } </style> -> <title>JQ fade out and display</title> </head>