Jquery is another good JavaScript framework after prototype. I don't have much use for prototype, I know it easily. But after using jquery, she was immediately attracted by her elegance. Some people use this analogy to compare prototype and jquery:prototype like Java, and jquery is like Ruby. Actually, I prefer Java (less to touch ruby), but the simplicity and practicality of jquery really makes a big appeal. In the project I take jquery as my own unique framework class package. There is also a little bit of experience in the use of this experience, in the jquery document may also have said, but still write down, in case to forget.
One, I found you!
Remember the $ () this thing? Prototype or DWR use this function instead of document.getElementById (). Yes, jquery is a follower. For the purpose of achieving document.getElementById (), jquery is written like this:
- var someelement = $ ("#myId");
Looks a little more than the other two frames. #, OK, look at the following usage:
$ ("div p");(1)
$ ("Div.container") (2)
$ ("div #msg");(3)
$ ("Table A", context);(4)
Have you read this in prototype? The first line of code gets the <p> element under all <div> tags. The second line of code gets the <div> element with class container, and the third line gets the element with the ID msg below the <div> tag. The four lines of code get all the connection elements in the table with context.
If you are familiar with Css,xpath, you will find these wording familiar! That's right. Is. See the mystery. jquery is the way to find elements within a DOM object. Similar to the CSS selector.
Two, jquery object?
jquery provides a number of handy functions, such as each (FN), but the premise of using these functions is that the object you are using is a Jquer object. Making a DOM object a jquery object is simple, in some ways (only part):
var a = $ ("#cid");(1)
var B = $ ("<p>hello</p>");(2)
var c = document.createelement ("table"); var TB = $ (c);
Three, instead of the body label of the onload
This routine, perhaps, is the most used place except for $ (). The following section of code:
$ (document). Ready (function () {
alert ("Hello");
};( 1)
<body onload= "alert (' Hello ');" > (2)
The above two pieces of code are equivalent. But the benefit of code 1 is to do performance and logical separation. And you can do the same thing in different JS files, that is $ (document). Ready (FN) can appear repeatedly on one page without conflict. Basically, many plugin of Jqeury use this feature, and because of this feature, multiple plugin are used together, and there is no conflict during initialization.
In any case, this Convention can separate JavaScript from HTML. Recommended use.
Iv. the event mechanism
The event I use in large numbers may be the button's onclick. Used to write the onclick = "FN ()" On the input element, using jquery to separate the JavaScript code from the HTML code, keep the HTML clean, and easily bind the event, even if you don't know the term "event".
$ (document). Ready (function () {
$ ("#clear"). Click (function () {
alert ("I am about to clear the table");
$ ("form[0]"). Submit (validate);
function Validate () {
//do some form validation
}
Five, the same function realizes Set&get
$ ("#msg"). html ();
$ ("#msg"). html ("Hello");
The previous two lines of code call the same function. But the results are very different.
The first line returns the HTML value of the specified element, and the second line sets the Hello string character to the specified element. Most of the functions of jquery have this feature.
Six, Ajax
This is an era of Ajax rampant. How many people, do not understand Ajax are followed by the use of a. Oh. Using jquery to implement Ajax is also a simple exception
$.get ("Search.do", {id:1},rend);
function rend (XML) {
alert (XML);
} (1)
$.post ("Search.do", {id:1},rend);
function rend (XML) {
alert (XML);
} (2)
$ ("#msg"). Ajaxstart (function () {
this.html ("Loading .... ");
});( 3)
$ ("#msg"). Ajaxsuccess (function () {
this.html ("Load complete!"). ");
});( 4)
These are more commonly used methods, like get and post usages. The first parameter is the URL of the asynchronous request, the second is the argument, and the third callback method.
The 3,4 method is bound to a specified DOM object in response to an AJAX-executed event. Of course, jquery's AJAX-related functions are not only these, there is interest to be able to study more.
Seven, Fade out
$ ("#msg"). FadeIn ("fast");
$ ("#msg"). Fadeout ("slow");
Yes, the above two lines of code have implemented the fading and fading of a jquery object with ID msg respectively. Do a dynamic loading notification bar like Gmail, which is as simple as jquery. Two functions to accept the parameters in addition to speed, but also can receive the integer, as a gradual or fade out of the completion time, the unit for Ms.
Eight, plugin
This is also an era of plug-ins. The
jquery plugin gives me the feeling of exclusively clean and simple. Like Jtip, to use its function, simply add jtip to the class of your element and introduce Jtip.js and its style. Other things plug-in full pack. One of the important reasons I like jquery is that she has a lot of good, wonderful plug-ins.
is poorly written. Maybe you don't see the benefits of jquery. Well, it's useless to listen, try it. You'll find it interesting.
Let's pause for a moment. To share when new discoveries are to be found.
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
