will be JS please bypass, this article is too stupid for you; no HTML and CSS please bypass, you may not understand the following content. (English is better also a little, otherwise it will be troublesome)
What is jquery?
jquery is a JavaScript library, the idiot explanation is a JavaScript toolbox, a lot of ready-made tools, take whatever you want. Save yourself the trouble of rewriting code, for like Me js idiot, is easy to start.
What can jquery do?
He can make your page have a lot of surprising dynamic effects, simply to make your site more beautiful, there are many different effects, click View >>>
How do you use jquery?
Simply said: In the page call jquery library (a JS file), you can easily use the tools in the (use of another JS calls to the tool in jquery), so as to achieve the desired effect.
The first step: looking for the desired effect
The results of this site are from two places: Sonichtml,jquery tools. There are more effects on the web, and if you are willing to take the time, you can look elsewhere.
Step Two: Chop code
First of all recommend the chop Code sharp Firefox+firebug. If not, hurry up! In the PA code is to be very careful two places!
1. html and CSS in static pages
Use Firebug to pick up the HTML and CSS code that you want in the page, and the ID and class of the section don't move, keep the original!
At the same time, before you want HTML elements, there may be an empty <div> such as this effect >>>, don't miss!
JS in the 2.
⑴ in the call of JS, there will be a JS file name with "JQuery", directly to the file copy of the code, into your own files.
⑵ in
$ (document). Ready (function () {
Middle for other code
});
This JS may be an external file called, or it may be in the head (the body is also possible, but low probability) in the form of <script></script>. This section will certainly appear in the previous HTML ID or class. Must be consistent, if you want to use other names, be sure to remember the HTML and JS in sync, not the same failed
Step three: Test locally and modify errors
Local new HTML,CSS,JS, put the code into the file, the call of the files are called good. It's an exciting time! Open the static page in a browser to see if it works. If it's out, congratulations! Go to the next step and change your own stuff! If not, start a careful examination:
Possible errors in the ⑴html:
① you modified the ID or class "Workaround in HTML: Change back to the original"
② omitted the empty <div> "solution: Check the HTML you've stripped down to see if there's any empty <div> before and after, and then try again.
Possible errors in the ⑵JS:
① Call Path Error "Workaround: Modify to valid call path, put JS and HTML together most convenient"
② omitted ready (with detailed code above) this JS (possibly an external file, possibly the code in head) "Workaround: Look for this code in the original static page that has ready, copy and add"
ID in ③ready or inconsistency in class and HTML "workaround: Find the corresponding relationship in the original HTML and JS and change to consistent"
Fourth step: Modify HTML and CSS, become your own things
This step has no fixed method, you want to modify how to modify, but pay attention to the HTML ID in the class to and JS corresponding!
Fifth step: Add to your own page
This basically nothing to say, but still want to give WP users to say: External file calls in the theme folder in the header.php (I have been looking for half a day ~ ~ ~ ~ ~ ~)
Report:
1. a very complete tutorial in the jquery website (in detail, look carefully at the recommendations you want to learn) >>>
2.Introduction Manual for JQuery tools (dapper, strong recommendation for quick start) >>>
3.sonichtml (Greader subscribe to the blog, often have cases and demo, very practical) >>>
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