jquery simple experience_basic knowledge

Jquery simple experience
query is another excellent Javascrīpt framework after prototype. I don't use prototype much, I just have a brief understanding of it. But after using jquery, I was immediately attracted by its elegance. Some people use this metaphor to compare prototype and jquery: prototype is like Java, and jquery is like ruby. In fact, I prefer Java (less exposure to Ruby), but jquery's simple practicality does have considerable appeal! In the project, I use jquery as my only framework class package. I also have a little experience during the use. In fact, these experiences may also be mentioned in jquery's documentation, but I'd better write it down for reference.
One, I found you!
Remember the $() thing, right? Both prototype and DWR use this function instead of document.getElementById(). Yes, jquery has also followed suit. To achieve the purpose of document.getElementById(), jquery is written like this:


Code
var someElement = $("#myId");

looks better than others The two frames have an extra #, okay, let’s take a look at the following usage:
Code
$("div p");(1)
$("div.container")(2)
$("div #msg");(3)
$("table a",context);(4)

Have you ever seen such writing in prototype? The first line of code gets all

elements under the

tag. The second line of code gets the

element with class container, and the third line of code gets the element with id msg under the

tag. The fourth line of code gets all the connection elements in the table whose context is context.
If you are familiar with CSS and Xpath, you will find these writing methods very familiar! Right. Exactly. You can see the secret. This is how jquery finds the elements in the Dom object. Similar to CSS selectors.
Second, Jquery object?
jquery provides many convenient functions, such as each(fn), but the prerequisite for using these functions is: the object you use is a Jquer object. Making a Dom object a Jquery object is very simple, through the following methods (just part of it):

Code
var a = $("#cid");(1)
var b = $("

hello

");(2)
var c = document.createElement("table"); var tb = $(c);

Third, instead of the onload
convention of the body tag, maybe In addition to $(), the most used place is the following piece of code:

Code
$(document).ready(function(){
alert("hello");
});(1)

(2)

The above two pieces of code are equivalent, but the advantage of code 1 is that performance and logic can be separated. Do the same operation in different js files, that is, $(document).ready (fn) can appear repeatedly in a page without conflict. Basically, many plugins of Jqeury use this feature because of this feature. , multiple plugins can be used together, and there will be no conflict during initialization.
In any case, this convention can separate javascript and HTML.
Four, event mechanism
I use a lot of events. It's the button's onclick. I used to write onclick = "fn()" on the input element. Using jquery can separate the javascript code from the html code, keep the HTML clean, and bind events easily, even if you don't Know the term "event"

Code
$(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 implements set&get

code
$("#msg").html();
$ ("#msg").html("hello");

The above two lines of code call the same function, but the results are very different.
The first line returns the HTML of the specified element. value, the second line is to set the string of hello characters into the specified element.
Six, ajax
How many people are in this era. Anyone who knows ajax can use it. Oh. Using jquery to implement ajax is equally simple and abnormal

Code
$.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("Loading completed!");
});(4)

These are all It is a more commonly used method, and get and post are used the same way. The first parameter is the url of the asynchronous request, the second is the parameter, and the third is the callback method.
Methods 3 and 4 will bind events in response to ajax execution on the specified Dom object. Of course, there are more than just these AJAX-related functions of jquery. If you are interested, you can study more.
Seven, fade in and out

Code
$("#msg").fadeIn("fast");
$("#msg").fadeOut("slow") ;

Yes, the above two lines of code have respectively implemented the fade-in and fade-out of a jquery object with the ID of Msg. Making a dynamic loading notification bar like Gmail is as simple as using jquery. In addition to speed, etc., the parameters accepted by the two functions can also receive integers, which are used as the completion time of fade-in or fade-out, and the unit is MS.
Eight, plugin
This is also an era of plug-ins.
The jquery plug-in gives me a completely clean and simple feeling. Such as Jtip, to use its function, you only need to add Jtip to the class of your element, and introduce jtip.js and its style. All other plug-ins are included. An important reason why I like jquery is that she already has many good and wonderful plug-ins.
Poorly written. Maybe you don’t see the benefits of jquery. Well, just listening is useless, try it. You will find it interesting.
Let’s call it a day. Will share again when new discoveries are made.

Add some Jquery resources:
http://www.visualjquery.com/index.xml A good API query site
http:// jquery.com/demo/thickbox/ Know about lightBox and see how Jquery implements the same thing
http://www.codylindley.com/blogstuff/js/jtip/ Jtip , practical prompt tool
http://jquery.com/plugins/ Many awesome plug-ins.
http://15daysofjquery.com/jquery’s 15-day tutorial