jQuery idiot-level introductory tutorial_jquery

If you know JS, please avoid it, this article is too idiotic for you; if you don’t know HTML and CSS, please avoid it, you may not understand the following content. (It’s best to speak a little English, otherwise it will be very troublesome)

What is jQuery?
jQuery is a JavaScript library. The idiot’s explanation is that it is a JavaScript toolbox. There are many ready-made tools. You can use whatever you want. It saves you the trouble of rewriting the code yourself, and it is even easier for JS idiots like me to get started.

What can jQuery do?
It can produce many surprising dynamic effects on your page. Simply put, it makes your website more beautiful. There are many different effects here. Click to view >>>

How to use jQuery ?
To put it simply: by calling the jQuery library (a js file) on the page, you can easily use the tools in it (you need another js to call the tools in jQuery) to achieve the desired effect.

Step one: Find the desired effect
The effects on this site come from two places: sonicHTML and jQuery tools. There are more effects on the Internet, and if you are willing to spend time, you can look elsewhere.

Step 2: Code-stealing
First of all, we recommend Firefox firebug, a code-stealing tool. If not, go get it now! When skimming code, you need to be very careful about two things!

1. HTML and CSS in static pages

Use firebug to extract the HTML and CSS code of the part you want in the page. Do not move the id and class of this part, keep them as they are. !

At the same time, there may be an empty

such as this effect>>> before the HTML element you want, don’t miss it!

2. js in

⑴ Among the js called, there will definitely be a js with "jQuery" in the file name. Directly add the Copy the code and make it your own file.

⑵ There must be another js in . This js will have the following code:

$(document).ready(function() {

// There is other code in the middle

});
This js may be an external file called, or it may be in the head (it is also possible in the body, but the possibility is low) with
Form appears. The id or class in the previous HTML will definitely appear in this part. It must be consistent. If you want to use another name, you must remember to synchronize it in HTML and js. If it is different, it will fall short

Step 3: Test locally and correct errors
Create new HTML and CSS locally , JS, put all the code you picked up, and call all the files that should be called. The exciting time has arrived! Use a browser to open the static page and see if it works. If it comes out, congratulations! Take the next step and make it your own! If it doesn’t work, start checking carefully:

⑴Possible errors in HTML:

①You have modified the id or class in HTML [Solution: Change back to the original]

②The empty

is missing [Solution: Check the HTML you removed to see if there is an empty
before and after, add it and try again]

⑵JS Possible errors:

① Error in the calling path [Solution: Modify to a valid calling path, it is most convenient to put js and HTML together]

② Ready is missing (detailed code is above ) This js (may be an external file, may be the code in the head) [Solution: Find the ready code in the original static page, copy and add]

③The id or class in ready and Inconsistencies in HTML [Solution: Find the corresponding relationship in the original HTML and js, and modify it to be consistent]

Step 4: Modify the HTML and css to make it your own
There is no such thing in this step It’s a fixed method, you can modify it however you want, but be sure to note that the id and class in HTML must correspond to js!

Step 5: Add it to your own page
There is basically nothing to say about this, but I still want to say something to WP users: external file calls are all in header.php in the theme folder (I was looking for it for a long time~~~~)
Attachment:
1.A very complete tutorial on the jQuery official website (very detailed, I recommend reading it carefully if you want to learn)>> >

2.Introduction manual in jQuery tools (short and concise, highly recommended if you want to get started quickly) >>>

3.sonicHTML (a blog subscribed to in Greader, often with cases and demos, very practical) >>><script></script>