This is a basic guide that is designed to help you start using jquery. If you haven't set up a test page yet, create a new HTML page that contains the following:
<script type= "Text/javascript" src= "Path/to/jquery.js" ></script>
<script type= "Text/javascript" >
Your Code goes here
</script>
<body>
<a href= "http://jquery.com/" >jQuery</a>
</body>
Edit the SRC attribute in the label to point to your jquery.js copy. For example, if Jquery.js is in the same directory as your HTML file, you can write:
<script type= "Text/javascript" src= "Jquery.js" ></script>
You can download your own jquery from the downloading jquery page.
start code when the document is ready
The first thing most JavaScript developers need to do is add the following code to their program:
Window.onload = function () {...}
The code here gives you the processing you want to perform when the page is loaded. The problem is that the JavaScript code executes only when all the pictures on the page are loaded (including the banner ads on the head). The reason to put Window.onload at the top is that when you first run your code, HTML ' document ' hasn't been loaded yet.
To solve this problem, you can use jquery a simple program (confirmed with old song, statement is the meaning of the program body), called ReadyEvent
$ (document). Ready (function () {
Your code here
});
This code examines the document and takes no action until the document is determined to be used-this is exactly what we need. So paste this little piece of code into your test page.
let some things happen when you click
The first thing we have to do is when a link is clicked, something happens. In Ready's function, add the following code:
$ ("a"). Click (function () {
Alert ("for visiting!");
});
Save your HTML page and reload it in the browser. Click on the link on the page and a pop-up alert will appear before leaving the main jquery page.
For click and other events, you can avoid their default behavior-here, at the bottom of the jquery.com link, return false from the event handle:
$ ("a"). Click (function () {
Alert ("for visiting!");
return false;
});
Add a class
Another common task is to add (or remove) classes from objects, such as:
$ ("a"). AddClass ("test");
If you want to add some style information to the head of your code, look at the bottom:
<style type= "Text/css" >a.test {font-weight:bold;} </style>
Then add a call to the top addclass-all of your a tags will become bold. If you want to remove this class, you should use Removeclass.
special effects (effect)
In jquery, there are two very easy to get results, which can make your site more outstanding. Add this to your test page and the link will be changed:
$ ("a"). Click (function () {
$ (this). Hide ("slow");
return false;
});
Now, if you click on any of the links, the link will slowly disappear.
chainability (jquery Magic)
jquery uses an interesting concept to make its code snappy. Similar to object-oriented programming ideas, this concept can easily be understood by people.
In a nutshell: Each method in jquery returns the request object itself, allowing you to bind it (' chain ' upon it), for example:
$ ("a"). AddClass ("Test"). Show (). HTML ("foo");
Each of these independent methods (Addclass,show, and HTML) returns a JQuery object that allows you to continue using the method for the current element.
You can use this method further, by adding or removing elements from the selection, modifying the elements and then replying to the original selection, for example:
$ ("a"). Filter (". ClickMe"). Click (function () {
Alert ("click!");
). End (). Filter (". Hideme"). Click (function () {
$ (this). Hide ();
});
The methods that can modify the jquery selection and End () are:
Add ()
Children ()
EQ ()
Filter ()
Find ()
GT ()
LT ()
Next ()
Not ()
Parent ()
Parents ()
Siblings ()
See the API documentation more specifically
callback, method, and "This"
A callback is a method that is passed as a variable to another method and executed after his parent method has been executed. A big feature of the callback is that the method that appears behind the parent method can be executed before the callback executes.
The other thing to understand is how to get through the callback correctly. This is the attribute syntax that I often forget.
callback with no parameters
You can pass a callback with no parameters like this below:
$.get (' myhtmlpage.html ', mycallback);
Note that the second parameter is just a simple method name (not a string and no curly braces).
Callback with Parameters
"If you have parameters to pass, what should you do?" "You may ask yourself.
Error
Wrong method (does not work)
$.get (' myhtmlpage.html ', Mycallback (param1, param2));
This will not work because it calls Mycallback (param1, param2) and then returns the result as the second parameter of $.get ().
correct
The right way
$.get (' myhtmlpage.html ', function () {
Mycallback (param1, param2);
});
So by passing a nameless method (the part with ...).
function () {
/* Function calls inside*/
});
It will call your method with parameters, so you are successful.
This method works because it passes the Nameless method as the second argument to $.get () without first executing it.
Word Learning:
Concept N. Ideas, concepts
Tutorial N. Guide
Circumvent Vt. Surround, surround, outsmart
Statement N. Statement, statement, summary
Manipulate Vt. Operate (skillfully), use (a machine, etc), manipulate (a person or market), use, deal with, fake
Snippet N. Small pieces, fragments, extracts, < mouths > insignificant people, uppity young
Stick v. Stick, paste
Prevent v. Preventing, preventing
Handy adj. Handy, near, handy, handy, quick, easy to get
Straight-forward Direct, straightforward, simple
Chain Vt. Chained with a chain
Revert v. Reply
Syntax n.[language] grammar, orderly arrangement, sentence structure, syntax
Parentheses N. Parentheses, insert, episode
