A collection of js and jquery practical tips

Tip16: JS Timer

There are two timer types in JS: setTimeout ('fn ', t) and setInterval ('fn', t). 'fn 'refers to the method name for scheduled execution and string type.

 

SetTimeout ('fn ', t ):

It is executed only once and will be destroyed after the execution is complete.

SetInterval ('fn ', t): always run.

 

(Date: 2012-02-17)

 

-----------------------------------------------------------------

Tip15: Jquery triggers the carriage return event

        $(function () {
            $('#target').bind('keyup', function (event) {
if (event.keyCode == 13) {
                    alert("Hello~");
                }
            });
        }); 

(Date: 2011-10-28)

-----------------------------------------------------------------

 Tip14: Obtain the select Value

Jquery can obtain the select value like the textbox value: $ ('select'). val ();

(Date: 2011-10-19)

-----------------------------------------------------------------

Tip13: Copy text

Use window. clipboardData. setData ('text', text); you can place the text to the system clipboard to copy the text. However, this method is only supported by IE. Neither Google Chrome nor Foxfire is supported. Therefore, you should first determine whether the browser supports: if (window. clipboardData ){

Window. clipboardData. setData ('text', text );}

(Date: 2011-9-16)

-----------------------------------------------------------------

Tip12: select text

For text selection of input or textarea, jquery provides a simple function to complete: select (). When calling it, make sure that the text box is visible and the focus has been obtained.

 

$ ("# TxtSample"). focus (). select (); // spot focus, and then select text

(Date: 2011-9-16)

-----------------------------------------------------------------

Tip11: mouse events

Mouseover, mouseout,

Mouseenter and mouseleave; these two groups of events are triggered when the mouse moves in and out of elements. Their biggest difference is:

Mouseover and mouseout are bubbling. If you move the mouse over their child elements, this event is also triggered.

Mouseenter and mouseleave do not bubble up.

 

This difference is important!

(Date: 2011-9-14)

-----------------------------------------------------------------

Tip10: page Jump

Use js to directly assign a URL string value to window. location. href to redirect.

Window. location. href = 'a.html ';

(Date: 2011-6-18)

-----------------------------------------------------------------

Tip9: extension of jQuery objects

$. Extend (target, prop1, propN): expands an object with one or more other objects and returns the extended object. This is an inheritance method implemented by jquery. For example:
$. Extend (settings, options );
Merge settings and options, and return the Merged Results to settings, which is equivalent to inheriting setting and saving the inherited results in setting.
Var settings = $. extend ({}, defaults, options );
Merge ults and options, and return the Merged Results to setting without overwriting the default content. There can be multiple parameters (merging multiple parameters and returning them)

(Date: 2011-6-18)

-----------------------------------------------------------------

Tip8: jQuery deletes items in the array.

As mentioned in Tip7, use the $. grep () method to delete the elements in the array.

Var array = ['A', 'B', 'C'];
$. Grap (array, function (value, index) {return value = 'B' ;}, true );

The above code will delete the element 'B' in the array '.

(Date: 2011-6-18)

-----------------------------------------------------------------

Tip7: Processing jQuery Arrays

$. Each (obj, fn );

Obj is the array or object to be traversed. fn is the processing function. The optional parameters are indexes and content. For example, var fn = function (index, content ){}; if you need to end traversal, return false. Other returned values will be ignored.

This method can be used to process JSON data objects.

$. InArray (obj, array );

Determines whether the array contains the obj object. If yes, the corresponding subscript is returned. If no,-1 is returned;

$. Map (array, fn );

Convert the elements in one array to another. Array is the array to be converted, and fn is the processing function. The returned value of this method is a new array after processing.

$. Merge (array1, array2 );

Merge two arrays. Copy the contents of array array2 to array1 and return the result. The merge method does not remove duplicates. You need to use $. unique () to remove duplicates.

$. Unique (array );

Removes duplicates from the array.

$. Grep (array, fn, [invert]);

Filter elements in the array. This method calls the fn Method for every object in the array;

Invert is an optional parameter. If "invert" is false or not set, the function returns the elements in the array that are returned by the filter function to true. If "invert" is true, returns the Element Set of false in the filter function.

This method is often used to delete elements in an array.

(Date: 2011-6-18)

-----------------------------------------------------------------

Tip6: removes spaces at the beginning and end of a string.

Js does not provide the trim function for us to remove the null characters in the two string segments. jQuery extends this function:

$. Trim (str): removes spaces at both ends of a string.
For example: $. trim ("hello, how are you? "); // Return" hello, how are you? "

(Date: 2011-6-18)

-----------------------------------------------------------------

Tip5: add and remove events

Adding events to a jQuery object is convenient:

$ ('# Btn'). click (fn );

$ ('# Btn'). bind ('click', fn );

JQuery provides a mechanism to provide multiple handler functions for an object event. After we add a click event processing method, we can continue to add it without overwriting the previous processing method.

When the unbind method is called, The Bound event subscription is removed:

$ ('# Btn'). unbind (); // all event subscriptions will be removed.

$ ('# Btn'). unbind ('click') // the subscription of the click event will be removed.

(Date: 2011-6-18)

-----------------------------------------------------------------

Tip4: Extended Functions

JQuery provides the extend Method for us to expand the functions we need. For example:

$. Extend ({
Sum: function (num1, num2) {return num1 + num2 ;},
}); // The sum method is extended for jquery.

Use an extended method (called by "$. Method Name ):
Alert ($. sum (10, 20 ));

(Date: 2011-6-18)

-----------------------------------------------------------------

Tip3: Get an item in the jQuery object set

For the obtained element set, you can use the eq or get (n) method or index number to obtain one of the items (specified by the index). Note that the returned eq is a jquery object, get (n) and index return dom element objects. Jquery objects can only use jquery methods, while dom objects can only use dom methods. For example, you need to obtain the content of the third <div> element. There are two methods:
$ ("Div" ).eq(2).html (); // call the jquery object Method
$ ("Div"). get (2). innerHTML; // call the dom method attribute

(Date: 2011-6-18)

-----------------------------------------------------------------

Tip2: Conversion of jQuery objects and Dom

Dom objects can be converted to jQuery objects through $ (dom). For example:

$ (Document. getElementById ('# myDiv '))

The jQuery object itself is an index, and Dom objects can be obtained through subscript; Dom objects can also be obtained through get (); for example:

$ ("Div") [0]; // gets the first Dom object

$ ("Div"). get (0); // get the first Dom object

(Date: 2011-6-18)

-----------------------------------------------------------------

Tip1: Smart sensing in independent js files

Add at the beginning of the js file: // <reference path = "jquery-1.3.2-vsdoc2.js"/>

(Date: 2011-6-16)

-----------------------------------------------------------------

Reference Directory:

JQuery tutorials from scratch:

Learning jQuery (I) from scratch

Learning jQuery (2) omnipotent selector from scratch

Learning jQuery from scratch (3) Managing jQuery packaging Sets

Learning jQuery from scratch (4) using jQuery to operate on attributes and styles of Elements

Learning jQuery (5) Events and event objects from scratch

Learning Ajax in jQuery (6) from scratch

Learning jQuery (7) jQuery animation from scratch-let the page go!

Learning jQuery (8) Plug-in from scratch: jQuery implementation solution

Learning jQuery (9) jQuery tool functions from scratch

Learning jQuery (10) Common jQueryUI functions from scratch

Learning jQuery (11) practical form verification and Automatic completion prompt plug-in from scratch

JQuery tips:

Http://blog.csdn.net/gudanyehai/archive/2010/04/29/5541187.aspx