A summary of the jquery basics

jquery Animations and effects

The show () and Hide () methods can be used to show and hide elements, and the toggle () method is used to toggle display and hide.

$ (selector). Hide (Speed,[callback]); $ (selector). Show (Speed,[callback]);

$ (selector). Toggle (speed,callback);

Speend can be set to fast slow or number (ms), Cellback is a callback function

Slideup () and Slidedown () and Slidetoggle () for automatic switching, this is the up and down slide effect. The careful classmate may have discovered, toggle this word appears the time is generally used to switch. All the way back to see ***toggle () This method should soon be reflected. This is a click-to-switch method.

$ (selector). Slideup (Speed,[callback]); $ (selector). Slidedown (Speed,[callback]);

$ (selector). Slidetoggle (speed,callback);

FadeIn () FadeOut () FadeTo () Fadetoggle () This four method is used to do the fade effect

$ (selector). FadeIn (Speed,[callback]); $ (selector). FadeOut (Speed,[callback]);

$ (selector). FadeTo (speed,opacity,callback);

$( selector). Fadetoggle ( Speed,callback);

The value of the opacity is 0-1. 0 is transparent and 1 is opaque.

Animate () method is used to animate the effect,

$ (selector). Animate ({params},speed,callback);

The params is the parameter of the CSS and the CSS code is written in {}. Here's an example.

 <! DOCTYPE html> $ (document). Ready ( function   () {$ ( "button"). Click (function   () {$ ( "div"). Animate ({left: ' 250px ' }); });}); </script> default , all HTML elements has a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute !</p><div style= "background: #98bf21; height:100px;width:100px;position:absolute;" ></div></body>
Note: By default, all HTML elements have a static location and cannot be moved. To operate the location, remember to first set the element's CSS position property to relative, fixed, or absolute!
The Stop () method is used to stop the currently executing animation.
$ (selector). Stop (Stopall,gotoend);
Stop () has two parameters, which are false by default.
The first parameter is used to determine whether all animations are animated. In the case of false, stop stops only the current action, but subsequent actions do not stop, and if you set StopAll to True, all current and subsequent actions are stopped.
The second parameter is used to immediately complete the current animation. When all two parameters are true, the current animation is executed immediately and all subsequent animations are stopped. When StopAll is true for False,gotoend, the current animation is executed immediately, and subsequent animations are executed immediately after the animation is completed.
We recommend that you do your own hands-on practice, the effect of a look out.
The delay () method is used to set the latency, which is the delay in setting the next animation, that is, the delay is calculated from the time the current animation is completed. This method cannot set the delay of the current animation.
$ (selector). Delay (Speed,queuename)
jquery for AJAX Applications
The load () method loads the data from the server and puts the returned data into the selected element.
$ (selector). Load (url,data,callback);
The required URL parameter specifies the URL that you want to load.
The optional data parameter specifies the collection of query string key/value pairs that are sent with the request.
The optional callback parameter is the function name that is executed after the load () method completes.
When loading a file, you can select the elements in the file, such as loading the P1 in "Demo_test.txt"
$ ("#div1"). Load ("Demo_test.txt #p1");
The optional callback parameter specifies the callback function to be allowed after the load () method completes. The callback function can set different parameters:

 
 

  
  
 
   
responsetxt -Contains the contents of the result when the call succeeds
 
   
statustxt -Contains the state of the call
 
   
xhr -Contains XMLHttpRequest objects
 
  
 
 
Get () and post () methods
$.get (Url,callback); $.post (Url,data,callback);
Get: The required URL parameter specifies the URL that you want to request.
The optional callback parameter is the name of the function that executes after the request succeeds.
The following example uses the $.get () method to retrieve data from a file on the server:
$ ("button"). Click (function() {  $.get ("demo_test.html",function(data,status) {    alert ("data:" + Data + "Nstatus:" + status);  } );
Set: The required URL parameter specifies the URL that you want to request.
The optional data  parameter specifies the information to be sent along with the request.
The optional callback parameter is the name of the function that executes after the request succeeds.
The following example uses $.post () to send the data together with the request:
$ ("button"). Click (function() {  $.post ("demo_test_post.html",  {    name:" Donald Duck ", City    :" Duckburg "  },  function(data,status) {    Alert ("data:" + Data + "Nstatus:" + status);  } );
{name:"Donald Duck", City:"Duckburg" } This is a JSON object. Specific content Baidu JSON. 
This is the most basic three methods, more Ajax methods see http://www.w3cschool.cc/jquery/jquery-ref-ajax.html
jquery Common Plugins
Before using the plugin, remember to refer to it first.
Form Validation plugin-validate
The content of this plug-in is very much, the specific use of the time please refer to http://www.w3cschool.cc/jquery/jquery-plugin-validate.html
The Ajaxform () method is used to submit the table and can get the return value. $ (form). Ajaxform ({options}) Reference: Http://www.360doc.com/content/13/1001/17/1542811_318406421.shtml
LightBox () Picture Lightbox plugin
The plugin can be rounded to show the selection of pictures, use the button to view the top and bottom picture, when loading the picture with a progress bar, but also to automatically play the way to browse the picture, the call format is as follows:
$(linkimage).lightBox({options})
options的参数，参考http://code.ciaoca.com/jquery/lightbox/
jqzoom()放大镜
In the call Jqzoom Picture Magnifier plug-in, you need to prepare a small two of the same picture, display small pictures in the page, when the mouse in the small picture in the move, call the plug-in jqzoom() method, display the same large picture area with the small picture, so as to achieve the effect of the magnifying glass, the call format is as follows:
$(linkimage).jqzoom({options})
Where the Linkimage parameter is the <a> element name (that is, the large picture) that contains the picture, options is the configuration object for the plug-in method. Parameter and instance reference http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819887.html
The cookie plugin makes it easy to save, read, delete the user's information through the cookie object, and to save the user's browsing history through the cookie plugin, which is called $.cookie (name, value, [option]).
Specific content Reference http://www.cnblogs.com/kissdodog/archive/2012/12/14/2818827.html
AutoComplete () The function of the search plug-in is bound to the text box through the plug-in autocomplete() method, when the text box input character, the binding plug-in will return the string prompt selection similar to the character, the call format is as follows:
$(textbox).autocomplete(urlData,[options]);
Where the textbox parameter is the text box element name, Urldata is the similar string data returned by the plug-in, the optional parameter options are the configuration object when the plug-in method is called.
Options reference URL: http://www.jb51.net/article/24219.htm

 
 

  
  
 
   
Http://www.cnblogs.com/chengxiaohui/articles/1872882.html
 
  
 
 
ContextMenu () Right-click menu plug-in can bind any element of the page, after binding, select the element, right-click, then through the plug-in popup A shortcut menu, click the menu name to do the corresponding action, the calling code is as follows:
$(selector).contextMenu(menuId,{options});
The selector parameter is the element that binds the plug-in, Meunid is the shortcut menu element, and options is the configuration object.
Options reference URL: http://www.blogjava.net/supercrsky/articles/250091.html
http://fs20041242.iteye.com/blog/830889
Now there are many kinds of plug-ins on the Internet, in the specific project need to Baidu, should be able to learn more practical plug-ins. JQuery UI Plugin
Draggable ()
Drag the plugin draggable function is to drag the bound element, when the jquery UI plug-in and the element binding, you can invoke the draggable() method to achieve the effects of various drag elements, the call format is as follows:
$(selector). draggable({options})
The options parameter is the configuration object at the time of the method invocation, and depending on the object you can set various drag effects, such as the "containment" property to specify the drag area, and the Axis property to set the coordinate direction when dragging.
More Options Reference: http://www.w3cschool.cc/jeasyui/plugins-base-draggable.html
Http://www.cnblogs.com/tyxloveyfq/archive/2013/04/27/3046732.html
(not to be continued)
A summary of the jquery basics