Common jquery methods and examples _ jquery-js tutorial

This article provides a detailed summary of commonly used jquery methods, compares them, and provides examples. It is a very good article and I hope to help you. Mouseover ()/mouserout ()

The mouseover/mouseout event is triggered when the mouse enters/leaves an element or its descendant element.
A mouseover event is usually used with a mouseout event.

The mouseover/mouserout event is triggered accidentally when it is not needed due to the bubbling mechanism, which leads to some script problems.

Mouseenter ()/mouseleave ()

Mouseenter/mouseleave is triggered only when the mouse enters the selected element. It is not triggered when the mouse passes through any child element. It does not care whether the target element has child elements.

Focusin () and focusout ()

. Focusin (): this event is triggered when an element or its child element gets the focus.
. Focusout (): this event is triggered when an element or its child element loses focus.

Unlike the focus () method, the focusin () method is also triggered when any child element obtains the focus.

The Code is as follows:

Focusin fire

Focusin fire

Script
$ ("P"). focusin (function (){
$ (This). find ("span" ).css ("display", "inline"). fadeOut (1000 );
});
Script

Eq () and get ()

. Get (): get a corresponding DOM element through the jQuery object.
. Eq (): constructs a new jQuery object from an element of the set.

Eq returns a jQuery object and get returns a DOM object. For example:

$ ("Li"). get (0 ).css ("color", "red"); // Error
$ ("Li"). eq (0 ).css ("color", "red"); // correct
So What Are DOM objects and jQuery objects?

DOM objects are obtained using js, while juqery objects are obtained using the selector of the jQuery class library.

For example, var $ obj = $ ("p"); // jQuery object

In essence, the get method converts a jQuery object to a DOM object, but css belongs to the jQuery constructor. DOM does not exist. To use the jQuery method, we must write it like this:

The Code is as follows:

Var li = $ ("li"). get (0 );
((Liyun.css ("color", "black"); // wrap with $

Filter ()

Filter (): filter the set of elements that match the specified expression.
This method is used to narrow the matching range. Multiple Expressions are separated by commas.

Filter (expression): (string | function) if the parameter is a string, A jQuery selector is created to delete all elements that do not match the selector from the package, and then leave the elements that match the selector; if the parameter is a function, it is used to determine the filtering conditions. Each time this function is called for every element in the package, any element whose function call return value is false will be deleted from the package.

Run the following code to reserve the first element and element with the select class:

HTML code:

The Code is as follows:

Hello

Hello Again

And Again

JQuery code:

The Code is as follows:

$ ("P"). filter (". selected,: first ")

Result:

The Code is as follows:

Hello

,

And Again

Let's look at a function example. A function is used as a set of test elements. It accepts an index parameter, which is the index of the element in the jQuery set. In a function, this indicates the current DOM element.

HTML code:

The Code is as follows:

1. Hello

How are you?

JQuery code:

The Code is as follows:

$ ("P"). filter (function (index ){
Return $ ("ol", this). length = 0;
});

Result:

The Code is as follows:

How are you?

. Bind (),. live (), and. delegate () Methods

. Bind (): the most basic way to bind an event handler is to use the. bind () method. Like the live () method, it accepts two parameters:

. Bind (event type, event handler)
Two Methods for binding event processing functions:

The Code is as follows:

$ (Document). ready (function (){
$ ('. Myp'). bind ('click', test );

Function test (){
Alert ("Hello World! ");
}
});

The event handler function can also use an anonymous function, as shown below:

The Code is as follows:

$ (Document). ready (function (){
$ ("# Myp"). bind ("click", function (){
Alert ("Hello World! ");
})
});

. Live (): the only difference between the live method and the bind method is that. live () not only applies to existing elements in the DOM, but also to elements that may exist (dynamically generated) in the future.

The Code is as follows:

$ (Document). ready (function (){
$ ('. Box'). live ('click', function (){
$ (This). clone (). appendTo ('. iner ');
});
});

The disadvantage of using the live method to bind events is that it cannot use chained calls. Is there a way to bind events as the live method and support chained calls? The answer is the following delegate method.

Delegate () method: adds one or more event handlers to the specified element (a child element of the selected element,
And specify the function to run when these events occur. Since jQuery 1.7,. delegate () has been replaced by the. on () method.
Syntax:

$ (Selector). delegate (childSelector, event type, function)
Parameter description:

ChildSelector is required. Specifies one or more child elements of the event handler to be appended.

Event is required. Specifies one or more events to be appended to an element. Multiple event values are separated by spaces. Must be a valid event.

Required. Specifies the function that runs when an event occurs.

The Code is as follows:

$ (Document). ready (function (){
$ ('. Iner'). delegate ('. box', 'click', function (){
$ (This). clone (). appendTo ('. iner ');
});
});

Delegate () is used in the following two scenarios:

1. If you have a parent element and want to add events to its child elements, you can use delegate (). The Code is as follows:

The Code is as follows:

$ ("Ul"). delegate ("li", "click", function (){

$ (This). hide ();

});

2. When an element is unavailable on the current page, you can use delegate ()

End () method

End () method: called in the jquery command chain to return to the previous package set.
Each filtering method is pushed into the stack. When we need to return to the previous status, we can use end () to perform an out-of-stack operation to return the previous status in the stack.

The end () method ends the most recent filtering operation in the current chain and restores the Matching Element Set to the previous state.

The Code is as follows:

• Item 1


• Item 2


• Item 3