Collection of Jquery common techniques and methods

[Javascript]
Tip15: Jquery triggers the carriage return event
$ (Function (){
$ ('# Target'). bind ('keyup', function (event ){
If (event. keyCode = 13 ){
Alert ("Hello ~ ");
}
});
}); Www.2cto.com
-----------------------------------------------------------------
Tip14: Obtain the select Value
Jquery can obtain the select value like the textbox value: $ ('select'). val ();
-----------------------------------------------------------------
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 );}
-----------------------------------------------------------------
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
-----------------------------------------------------------------
Tip11: mouse events
Mouseover and mouseout, mouseenter, and mouseleave; these two groups of events are triggered when the mouse is moved in and out of elements. The biggest difference is that mouseover and mouseout are bubbling, this event will also be triggered if you move the mouse over their child elements, while mouseenter and mouseleave will not bubble up. This difference is important!
-----------------------------------------------------------------
Tip10: page Jump
Use js to directly assign a URL string value to window. location. href to redirect.
Window. location. href = 'a.html ';
-----------------------------------------------------------------
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)
-----------------------------------------------------------------
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 '.
-----------------------------------------------------------------
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.
-----------------------------------------------------------------
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? "
-----------------------------------------------------------------
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.
-----------------------------------------------------------------
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 ));
-----------------------------------------------------------------
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
-----------------------------------------------------------------
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
-----------------------------------------------------------------
Tip1: Smart sensing in independent js files
Add at the beginning of the js file: // <reference path = "jquery-1.3.2-vsdoc2.js"/>
 
 
1) Check whether IE is version 6


If (jQuery. browser. msie) & (parseInt (jQuery. browser. version) <7 )){
$ ('Body '). prepend ('<div class = "warning"> You are using an old version of Internet Explorer which is not supported. please upgrade your browser in order to view this website. </div> ');
}
 
 
2) open a print window.


[Url = #] Print this page [/url]
$ ('A. print'). click (function (){
Window. print ();
Return false;
});
 
 
3. Disable the form from using the Enter key.


$ ("# Form"). keypress (function (e ){
If (e. which = 13 ){
Return false;
}
});
 
 
4. Select All and reverse checkbox


<Div class = "options">
[List]
[*] [Url = #] Select All [/url]

[*] [Url = #] Reset All [/url]

[/List]

<Input type = "checkbox" id = "option1"/> <label for = "option1"> Option 1 </label>
<Input type = "checkbox" id = "option2"/> <label for = "option2"> Option 2 </label>
<Input type = "checkbox" id = "option3"/> <label for = "option3"> Option 3 </label>
<Input type = "checkbox" id = "option4"/> <label for = "option4"> Option 4 </label>
</Div>
$ ('. Select-all'). live ('click', function (){
$ (This). closest ('. options'). find ('input [type = checkbox]'). attr ('checked', true );
Return false;
});

$ ('. Reset-all'). live ('click', function (){
$ (This). closest ('. options'). find ('input [type = checkbox]'). attr ('checked', false );
Return false;
});
 
 
5. evenly distribute all columns
Sometimes, you need to make the columns in the table equal points.

Var max_height = 0;
$ ("Div. col"). each (function (){
If ($ (this). height ()> max_height) {max_height = $ (this). height ();}
});
$ ("Div. col"). height (max_height );
 
 
6. Open all connections in the new window.


$ ('A [@ rel $ = 'external'] '). click (function (){
This.tar get = "_ blank ";
});

/*
Usage:
[Url = http://www.catswhocode.com] catswhocode.com [/url]
*/