Document ready function
$(document).ready(function(){
--- jQuery functions go here ----
});
this This is to prevent jQuery code from running before the document is fully loaded (ready).
If you run the function before the document is fully loaded, the operation may fail. (Trying to hide a non-existent element; getting the size of an image that was not fully loaded)
Place all jQuery code in event handlers
Place all event handlers in document ready event handlers
hide/show/toogle
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector ).toggle(speed,callback);
The optional speed parameter specifies the speed of hiding/showing, and can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function to be executed after hiding or showing or switching is completed.
jQuery Events
Event 函数 | 绑定函数至 |
---|---|
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
jQuery Fading method:
With jQuery, you can achieve the fade effect of elements.
jQuery has the following four fade methods:
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is the name of the function to be executed after fading is completed.
The jQuery fadeTo() method allows a gradient to a given opacity (a value between 0 and 1).
$(selector).fadeTo(speed,opacity,callback);
Required The speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
Required The opacity parameter sets the fade effect to the given opacity (a value between 0 and 1).
The optional callback parameter is the name of the function to be executed after the function completes.
Since JavaScript statements (instructions) are executed one by one, according to the order, the statements after the animation may generate errors or page conflicts because the animation has not yet completed.
To avoid this situation, you can add the Callback function as a parameter. If you want to execute statements after a function involving animation, use the callback function.