Common jquery functions and methods

Common jquery functions and methods
1. delay (duration, [queueName])

Set a delay to postpone the project after the execution queue.
Added jQuery 1.4. Used to delay function execution in the queue. It can be used to delay the execution of the animation queue or customize the queue.

Duration: Delay Time, in milliseconds

QueueName: queue term. The default value is Fx. It is an animation queue.

Example:

Delayed loading of animation effects on the head and bottom

$(document).ready(function() {    $('#header') .css({ 'top':-50 }) .delay(1000).animate({'top': 0}, 800);    $('#footer') .css({ 'bottom':-15 }) .delay(1000).animate({'bottom': 0}, 800);  });

 

2. jQuery live (type, fn) delegate event implementation

The method added in Query 1.3. Bind an event handler (such as a click event) to all current and future matching elements ). You can also bind custom events.

CurrentlyClick, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, and keyup are supported.

AlsoBlur, focus, mouseenter, mouseleave, change, and submit are not supported.

Unlike bind (), live () can only bind one event at a time.

This method is similar to the traditional bind method. The difference is that using live to bind events will bind events to all current and future elements on the page (using the delegate method ). For example, if you bind a click event to all the likes on the page with live. When a new li is added to this page, the click event is still available for the newly added li. Instead of re-binding events to the newly added elements.

. Live () is similar to the popular liveQuery plug-in, but there are several major differences:

. Live currently only supports a subset of all events. For the list of supported events, see the preceding description.
. Live does not support callback functions in the "no event" style provided by liveQuery .. Live can only be bound to event handlers.
. Live does not have "setup" or "cleanup" processes. Because all events are delegate rather than directly bound to elements.
To remove an event bound with live, use the die method.

Usage example:

<div class=”myDiv”></div>

 

Jquery:

$(“.myDiv”).live(“click”, function(){alert(“clicked!”);});

 

If you use javascript to dynamically create an element whose class is mydiv, the click element will still pop up. Why is live available? This is because jqueryuses the false mechanism of the event and directly binds the event to the documentfile. Then, use event.tar get to find out the source of the event. This is different from the jquery. livequery plug-in. jquery. livequery performs a check every 20 milliseconds, and rebinds an event if any new generation occurs.

Of course, using live has the following advantages and disadvantages:
The advantage is that you do not need to define events repeatedly when updating elements.
The downside is that binding an event to a document calls every element on the page once. improper use may seriously affect performance. Blur, focus, mouseenter, mouseleave, change, and submit are not supported.

2. Remove live bound events

In Jquery, use live to bind an event. To remove this event, use the die method.

For example:

$(“.myDiv”).die("click");

 

In this way, the bound click event can be removed.

3. JQuery offset () and position () obtain the absolute and relative coordinates.

Obtain the absolute X and Y coordinates of an element on the page. You can use the offset () method: (set the body property to margin: 0; padding: 0 ;)

var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 

 

For example:

$(".produc a span").click(function(){ $('body, html').animate({scrollTop:$('#buy').offset().top }, 'slow'); });

 

Obtain the relative (parent element) Location:

var X = $('#DivID').position().top; var Y = $('#DivID').position().left; 

 

Var left = $ ("selector "). offset (). left; // the offset of the element to the left of the window var top = $ ("selector "). offset (). top; // offset of the element relative to the upper part of the window var pleft = $ ("selector "). scrollLeft (); // offset of the element relative to the left of the scroll bar var pTop = $ ("selector "). scrollTop (); // offset of the element relative to the top of the scroll bar

 

4. jquery obtains the mouse position

$ (Function () {// e is the event name; $ (document ). mousemove (function (e) {$ ("p "). text ("X:" + e. pageX + "Y:" + e. pageY );});});

 

5. jquery checks whether an element contains a class, whether some attributes exist, and how to remove some attributes.

In JQuery encoding, we will determine whether an element has a certain attribute. For example, whether it contains a class = "new" style. JQuery's judgment is very simple, because there is a hasClass method.$("input[name=new]").hasClass("new") You can determine.
Now there is no ready-made method. if an attribute $ ("# aid") exists "). attr ("rel") returns the rel value. If the rel attribute does not exist, "undefined" is returned"
Undefined is of the undefined type,if($("#aid").attr("rel")=="undefined")This judgment may not be true.
Because the types are different.
Recommended if(typeof($("#aid").attr("rel"))=="undefined")You can.

Jquery removes an attribute of a jquery object: $(".main").removeAttr("style");

6. Usage of jquery stop () (an effective method to clear animation accumulation)

1. The stop ([stopAll], [gotoEnd]) method has two parameters (of course, you can skip or directly upload one). stopAll indicates all the animation after being cleared. GotoEnd means that the current animation is executed.

2. When stopAll = true, all animations in the queue are stopped. When stopAll = false, only the current animation in the queue is stopped, and subsequent animations continue to be executed.

3. When gotoEnd = true, it immediately jumps to the end of the current animation, and when gotoEnd = false, it stops in the current state. And gotoEnd takes effect only when stopAll is set.

4. In a project, if you do not clean up the animation queue, the problem of animation accumulation occurs. Therefore, when writing an animation, it is best to clear the repeated animation in the queue first.

In a project, for example, to perform a drop-down second-level navigation effect, the slideDown () and slideUp () Methods of jquery are used. If the animation queue is not cleared after the mouse shakes rapidly, an animation accumulation occurs.
For example:

$(".nav li.has_list").hover(function(){    $(this).children("a").addClass("curr");    $(".nav li.has_list").children("div").stop(false,true);    $(this).children("div").slideDown(400).end();                            },function(){    $(this).children("a").removeClass("curr");    $(".nav li.has_list").children("div").stop(false,true);    $(this).children("div").slideUp(400).end();       });

 

It will be supplemented later.