jquery common operations organized basic introduction_jquery

jQuery was created by American John Resig and has attracted many javascript experts from all over the world to join its team, including Jörn Zaefferer from Germany, Stefan Petre from Romania, etc.
jQuery is another excellent Javascript framework after prototype. Its purpose is - WRITE LESS, DO MORE, write less code and do more things.
It is a lightweight js library (only 21k after compression), which is beyond the reach of other js libraries. It is compatible with CSS3 and various browsers (IE 6.0, FF 1.5, Safari 2.0, Opera 9.0 ).
jQuery is a fast, concise javaScript library that allows users to more easily process HTML documents and events, achieve animation effects, and easily provide AJAX interactions for websites.
Another big advantage of jQuery is that its documentation is very complete and its various applications are explained in detail. There are also many mature plug-ins to choose from.
jQuery can keep the code and html content of the user's html page separated. That is to say, there is no need to insert a bunch of js in the html to call commands, just define the id.
Jquery 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!
Still 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

Copy code The code is as follows:

var someElement = $("#myId");

It seems that there is one more # than the other two frameworks. Okay, let’s take a look at the following usage:
　Code

Copy code The code is as follows:

　$("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 the P elements under all tags. 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 label. The fourth line of code gets all the connection elements in the table whose context is context.
If you are familiar with CSS, 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 that the object you use is a Jquery object. Making a Dom object a Jquery object is very simple, through some of the following methods (just part of it):
Code

Copy code The code is as follows:

var a = $("#cid");
var b = $("hello");
var c = document.createElement("table") ;
　var tb = $©;

Third, replace the onload
of the body tag. This convention may be the most used besides $(). place. The following piece of code:
Code

Copy code The code is as follows:

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

The above two pieces of code are equivalent. But the advantage of code 1 is to separate performance and logic. And the same operation can be done in different js files, that is, $(document).ready (fn) can appear repeatedly in a page without conflict. Basically, many plugins of Jqeury take advantage of this feature. Because of this feature, multiple plugins can be used together without conflict during initialization.
Anyway, this convention can separate javascript and HTML. Recommended.
Fourth, event mechanism
The event I use a lot is probably the onclick of the button. 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

Copy code The code is as follows:

　$(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
Code

Copy code The code is as follows:

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

　The above two lines of code call the same function. But the results vary widely.
The first line returns the HTML value of the specified element, and the second line sets the string of characters hello to the specified element. Most of jquery's functions have this feature.
Six, ajax
This is an era where ajax is rampant. How many people, even those who don’t know ajax, have started using it. Oh. Using jquery to implement ajax is equally simple and abnormal
Code

Copy code The code is as follows:

　$ .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 the more commonly used methods, 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

Copy code The code is as follows:

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

That’s right, 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 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.
Very badly 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/ Do you know about lightBox? Take a look at how Jquery implements the same thing
　http://jquery.com/plugins/ There are many awesome plug-ins.
　http://15daysofjquery.com/jquery’s 15-day tutorial
　http://jquery.org.cn/visual/cn/index.xml //Good JQUERY Chinese learning recommendation
　jquery source
jQuery was created by American John Resig. It has attracted many javascript experts from all over the world to join its team, including Jörn Zaefferer from Germany, Stefan Petre from Romania, etc.
jQuery is another excellent Javascript framework after prototype. Its purpose is - WRITE LESS, DO MORE, write less code and do more things.
It is a lightweight js library (only 21k after compression), which is beyond the reach of other js libraries. It is compatible with CSS3 and various browsers (IE 6.0, FF 1.5, Safari 2.0, Opera 9.0 ).
jQuery is a fast, concise javaScript library that allows users to more easily process HTML documents and events, achieve animation effects, and easily provide AJAX interactions for websites.
Another big advantage of jQuery is that its documentation is very complete and its various applications are explained in detail. There are also many mature plug-ins to choose from.
jQuery can keep the code and html content of the user's html page separated. That is to say, there is no need to insert a bunch of js in the html to call commands, just define the id.
The latest release version of jQuery is 1.3.2.
The official download address is: http://code.google.com/p/jqueryjs/downloads/list
Microsoft’s visual studio 2008 sp1 supports dynamic prompts for jquery, as long as it is in the code Just import the corresponding vsdoc script into the page