Fifteen new features of jQuery's latest 1.4 version

 

Article Source: http://www.weboffer.cn/index.php/html/628.html

 

1. Pass the parameter to jQuery (...)

 

Previously, jQuery could use the attr method to set the attributes of an element. It can either pass the attribute name and value, or it can be an object that contains several sets of specific attribute name and value pairs. In jQuery 1.4, you can pass a parameter object as the second parameter to the jQuery function itself and Create HTML elements.

 

For example, you want to create an anchor element with several attributes (<a> </a> ). In 1.4, everything is so simple:

 

Js Code

JQuery ('<a/> ',{

Id: 'foo ',

Href: 'http: // google.com ',

Title: 'become a Googler ',

Rel: 'external ',

Text: 'Go to Google! '

});

 

JQuery ('<a/> ',{

Id: 'foo ',

Href: 'http: // google.com ',

Title: 'become a Googler ',

Rel: 'external ',

Text: 'Go to Google! '

}); You can probably guess that the text attribute that this anchor element does not have will call jQuery's private method. text () and set the text in the element to "Go to Google !"

 

For this usage, the following is a more useful example:

 

Js Code

JQuery ('<div/> ',{

Id: 'foo ',

Css :{

FontWeight: 700,

Color: 'green'

},

Click: function (){

Alert ('foo has been clicked! ');

}

});

 

JQuery ('<div/> ',{

Id: 'foo ',

Css :{

FontWeight: 700,

Color: 'green'

},

Click: function (){

Alert ('foo has been clicked! ');

}

}); Id is a general attribute and is directly added, while css and click inspire the corresponding jQuery method. Before 1.4, the above Code should be written as follows:

 

Js Code

JQuery ('<div/> ')

. Attr ('id', 'foo ')

. Css ({

FontWeight: 700,

Color: 'green'

})

. Click (function (){

Alert ('foo has been clicked! ');

});

 

JQuery ('<div/> ')

. Attr ('id', 'foo ')

. Css ({

FontWeight: 700,

Color: 'green'

})

. Click (function (){

Alert ('foo has been clicked! ');

}); 2. Until you meet...

 

In the 1.4 DOM traversal toolkit, three new methods are added: nextUntil, prevUntil, and parentsUntil. These methods traverse the DOM in a specific direction until the elements that meet the specified selector are met. For example, we have a list of fruit names:

 

Html code

<Ul>

<Li> Apple </li>

<Li> Banana </li>

<Li> Grape </li>

<Li> Strawberry </li>

<Li> Pear </li>

<Li> Peach </li>

</Ul>

 

<Ul>

<Li> Apple </li>

<Li> Banana </li>

<Li> Grape </li>

<Li> Strawberry </li>

<Li> Pear </li>

<Li> Peach </li>

</Ul>

We want to select all entries before Apple and Pear. The code is very simple:

 

Js Code

JQuery ('ul li: contains (Apple) '). nextUntil (': contains (Pear )');

 

JQuery ('ul li: contains (Apple) '). nextUntil (': contains (Pear) '); 3. bind multiple event Processors

 

You no longer need to chain events together. Now you can bundle them into a pile, as shown below:

 

Js Code

JQuery ('# foo). bind ({

Click: function (){

// Do something

},

Mouseover: function (){

// Do something

},

Mouseout: function (){

// Do something

}

})

 

JQuery ('# foo). bind ({

Click: function (){

// Do something

},

Mouseover: function (){

// Do something

},

Mouseout: function (){

// Do something

}

}) This usage also applies to ". one ()".

 

 

 

4. Specify the easing Effect Based on the attribute

 

In the past, only one easing effect (easing) can be specified for an animation. JQuery native supports two easing effects: swing (default) and linear. To use other effects, you need to download them separately .), Now you can specify different easing effects for each attribute parameter of the animation:

 

Js Code

JQuery ('# foo'). animate ({

Left: 500,

Top: [500, 'easeoutbounce ']

},2000 );

 

JQuery ('# foo'). animate ({

Left: 500,

Top: [500, 'easeoutbounce ']

},2000 );

Click here to view the actual results

 

You can also set a series of name-value pairs for secialEasing in an optional animation option object to complete the above work:

 

Js Code

JQuery ('# foo'). animate ({

Left: 500,

Maximum: 500

},{

Duration: 2000,

SpecialEasing :{

Top: 'easeoutbounce'

}

});

 

JQuery ('# foo'). animate ({

Left: 500,

Maximum: 500

},{

Duration: 2000,

SpecialEasing :{

Top: 'easeoutbounce'

}

});

5. Updated Live events

 

JQuery 1.4 adds support for assigning submit, change, focus, and blur events. In jQuery, we use the ". live ()" method to assign events. This is useful when you want to register event processors for multiple elements. And even if the elements that meet the selection operator are new, these events will continue to work (using. live () is much easier than repeatedly binding ).

 

But be careful! When registering the focus and blur events, you must use focusin and focusout as event names.

 

Js Code

JQuery ('input'). live ('focusin ', function (){

// Do something with this

});

 

JQuery ('input'). live ('focusin ', function (){

// Do something with this

});

6. Control Function Context

 

JQuery 1.4 provides a new proxy function located in the jQuery namespace. This function accepts two parameters: scope or method, and intended scope ).

 

As we all know, this keyword in JavaScript is hard to grasp. Sometimes you don't want it to represent an element, but want it to represent an object you created earlier.

 

For example, here we create an app object, which has two attributes: clickHandler method and parameter configuration object.

 

Js Code

Var app = {

Config :{

ClickMessage: 'Hi! '

},

ClickHandler: function (){

Alert (this. config. clickMessage );

}

};

 

Var app = {

Config :{

ClickMessage: 'Hi! '

},

ClickHandler: function (){

Alert (this. config. clickMessage );

}

}; This clickHandler method, when called like app. clickHandler (), the app is its context, that is, the keyword this points to the app. If you just need to call it, there is no problem in writing this statement:

 

Js Code

App. clickHandler (); // "Hi !" Is alerted

 

App. clickHandler (); // "Hi !" Is alerted but if it is treated as an event processor:

 

Js Code

JQuery ('A'). bind ('click', app. clickHandler );

 

JQuery ('A'). bind ('click', app. clickHandler); when we click this anchor, it does not achieve the expected effect (nothing alert comes out ). This is because jQuery (and most rational event models) specifies the context of the processor as the target element by default. That is to say, this indicates the clicked link. What we think is that this should continue to represent the app. In jQuery 1.4, this goal is very simple:

 

Js Code

JQuery ('A'). bind (

'Click ',

JQuery. proxy (app, 'clickhandler ')

);

 

JQuery ('A'). bind (

'Click ',

JQuery. proxy (app, 'clickhandler ')

). Now, "Hi!" will pop up when you click all the anchors !" .

 

The proxy function wraps your function in a circle and sets this in the function to what you want. In other context application scenarios, such as passing callback functions to other jQuery methods or plug-ins, proxy functions can also be used.

 

7. animation queue delay

 

Now, you can add a delay to the animation queue. Although this function can be implemented in any queue, the most common function is to delay the "fx queue" ("fx" queue, jQuery's default animation queue ). It allows you to pause between two animation actions, instead of involving callback functions and setTimeout .. The first parameter of delay () is the number of milliseconds you need to set:

 

Js Code

JQuery ('# foo ')

. SlideDown () // Slide down

. Delay (200) // Do nothing for 200 MS

. FadeIn (); // Fade in

 

JQuery ('# foo ')

. SlideDown () // Slide down

. Delay (200) // Do nothing for 200 MS

. FadeIn (); // Fade in if you want to delay a queue other than fx, pass the queue name as the second parameter to. delay.

 

8. Check whether the element contains specific content.

 

JQuery 1.4 makes it easier to check whether an element (or set) contains something (. has. The mechanism behind it is the same as the selection filter: has. This method selects elements that meet any specified condition from the current set. JQuery ('div '). has ('ul ');

 

This statement Selects all DIV elements that contain UL. In this case, you may use the selection filter: has (), but the. has () method is very useful when you want to filter the selection set more programmatically.

 

JQuery 1.4 also adds a contains function in the jQuery namespace. This is a relatively underlying function that accepts two DOM nodes as parameters. Returns a Boolean value indicating whether the second element is contained in the first element. For example:

 

Js Code

JQuery.contains(document.doc umentElement, document. body );

// Return true-<body> indeed included in

 

JQuery.contains(document.doc umentElement, document. body );

// Return true-<body> indeed included in

 

JQuery has long been able to wrap an element with. wrap. Now, the. unwrap () method is added to jQuery 1.4 for skin peeling. See the following DOM structure:

 

Js Code

<Pre name = "code] <div>

<P> Foo </p>

</Div> [/code]

 

<Pre name = "code] <div>

<P> Foo </p>

</Div> [/code] removes a layer of skin (div) outside the p element:

 

Js Code

JQuery ('P'). unwrap ();

 

JQuery ('P'). unwrap (); DOM becomes:

 

Js Code

<P> Foo </p>

 

<P> Foo </p> In short, this method can remove the parent element of any element.

 

10. Remove elements without deleting data

 

In the past, A. remove () method was used to strip elements and discard them. The new. detach () method allows you to strip an element from the DOM without losing data. The jQuery object that includes this element will retain this element after the operation is complete. Data can be transmitted to the jQuery object through any event processor in the. data () or jQuery Event System.

 

This function is useful when you need to remove an element from the DOM and re-introduce it in a future scenario. The event handle of the element and all other data are retained.

 

Js Code

Var foo = jQuery ('# foo ');

// Bind an important event Processor

Foo. click (function (){

Alert ('foo! ');

});

Foo. detach (); // remove from DOM

//... Do stuff

Foo. appendTo ('body'); // re-add to DOM

Foo. click (); // The alert message is displayed: "Foo! "

 

Var foo = jQuery ('# foo ');

// Bind an important event Processor

Foo. click (function (){

Alert ('foo! ');

});

Foo. detach (); // remove from DOM

//... Do stuff

Foo. appendTo ('body'); // re-add to DOM

Foo. click (); // The alert message is displayed: "Foo! "11. index (...) Function enhancements

 

JQuery 1.4 provides two new methods for using. index. In the past, you had to pass the element as a parameter to it and then get a returned value, representing the index of the element in the current set. Now, if you do not pass the parameter, the returned value indicates that an element ranks the same among its peers. For example, the following DOM:

 

Html code

<Ul>

<Li> Apple </li>

<Li> Banana </li>

<Li> Grape </li>

<Li> Strawberry </li>

<Li> Pear </li>

<Li> Peach </li>

</Ul>

 

<Ul>

<Li> Apple </li>

<Li> Banana </li>

<Li> Grape </li>

<Li> Strawberry </li>

<Li> Pear </li>

<Li> Peach </li>

</Ul> you want to know the number of entries in the list after clicking an entry. The implementation code is very simple:

 

Js Code

JQuery ('lil'). click (function (){

Alert (jQuery (this). index ());

});

 

JQuery ('lil'). click (function (){

Alert (jQuery (this). index ());

});

JQuery 1.4 also allows you to use the selector as the first parameter of. index. In this case, the index value of the element set matched by the current element in the selected element is returned.

 

Note that this method returns a value. If the element of the specified condition cannot be found in the document, a value of-1 is returned.

 

12. DOM manipulation can receive callback Functions

 

Currently, most DOM manipulation methods support passing functions as a single component (.css () and. attr () as the second parameter ). This function will run every element in the selection set, providing a more "personalized" value for the corresponding manipulation method.

 

The following methods support this function:

 

After

 

Before

 

Append

 

Prepend

 

AddClass

 

ToggleClass

 

RemoveClass

 

Wrap

 

WrapAll

 

WrapInner

 

Val

 

Text

 

ReplaceWith

 

Css

 

Attr

 

Html

 

With the callback function, you can use the this keyword in the selection set to access the current element, and use the first parameter of the callback function to access its index value.

 

Js Code

Jquery('li'{.html (function (I ){

Return 'index of this list item: '+ I;

});

 

Jquery('li'{.html (function (I ){

Return 'index of this list item: '+ I;

}); Also, some methods above provide the second parameter for your use. If you are using a set of templates (such as .html () and. attr ('href...), you can obtain the current value. For example:

 

Js Code

JQuery ('A'). attr ('href ', function (I, currentHref ){

Return currentHref + '? Foo = bar ';

});

 

JQuery ('A'). attr ('href ', function (I, currentHref ){

Return currentHref + '? Foo = bar ';

}); As you can see, for the .css () and. attr () methods, the reason for passing the function as the second parameter is that the first parameter is used to specify which attribute we need to modify:

 

Js Code

Jquery('li'0000.css ('color', function (I, currentCssColor ){

Return I % 2? 'Red': 'blue ';

});

 

Jquery('li'0000.css ('color', function (I, currentCssColor ){

Return I % 2? 'Red': 'blue ';

});

13. Determine the object type

 

JQuery 1.4 adds two new auxiliary functions (both directly under the jQuery namespace) to help you identify the objects you are manipulating.

 

The first function is isEmptyObject, which returns a Boolean value to determine whether the object is empty (). The second is isPlainObject. The Boolean value returned by isPlainObject indicates whether the previous parameter is a JavaScript simple object (plain Object), that is, the object created with {} or new Object. Copy content to clipboard

 

Js Code

JQuery. isEmptyObject ({}); // true

JQuery. isEmptyObject ({foo: 1}); // false

JQuery. isPlainObject ({}); // true

JQuery. isPlainObject (window); // false

JQuery. isPlainObject (jQuery (); // false

 

JQuery. isEmptyObject ({}); // true

JQuery. isEmptyObject ({foo: 1}); // false

JQuery. isPlainObject ({}); // true

JQuery. isPlainObject (window); // false

JQuery. isPlainObject (jQuery (); // false

14. Closest (...) Function enhancements

 

JQuery's. closest () method can now accept a set of delimiters as parameters. This function can be used when you need to traverse all superiors of an element and find more than one closest element that matches a specific feature.

 

Now, it can accept the context as the second parameter, that is, you can control the depth or extensiveness of DOM traversal. Although you may rarely use these two new features, the results will be amazing!

 

15. New events! FocusIn and focusOut

 

As mentioned above, when deploying the focus and blur events, you need to use the focusin and focusout events. These two events help you to take actions when a specific element or its child element gets or loses focus.

 

Js Code

JQuery ('form ')

. Focusin (function (){

JQuery (this). addClass ('focused ');

});

. Focusout (function (){

JQuery (this). removeClass ('focused ');

});

 

JQuery ('form ')

. Focusin (function (){

JQuery (this). addClass ('focused ');

});

. Focusout (function (){

JQuery (this). removeClass ('focused ');

}); It is worth noting that these two events will not spread (that is, the so-called "bubble") and they will be captured. That is to say, the external element (parent) will be triggered before the "target" element.

 

 

 

Animation effects JS Library: http://gsgd.co.uk/sandbox/jquery/easing/