Jquery common functions and functions

1. Execute the function after the file is loaded
$ (Document). Ready (function (){
Alert ("started ");
});

 

2. Add/delete CSS classes
$ ("# Some-ID"). addclass ("newclassname ");
$ ("# Some-ID"). removeclass ("classnametoberemoved ");

3. the selector utilizes the CSS and XML Path Language selector capabilities, as well as the unique selector of jquery.
3.1 Common:
1. Select all paragraphs in the document based on the Tag Name: $ ('P ')
2. Based on ID: $ ("# Some-ID ")
3. Class: $ ('. Some-class ')
3.2 use the CSS selector:
$ ("# Some-ID> li") select all sub-Li elements under a specific ID
$ ("# Some-ID Li: Not (. Horizontal)") pseudo-class selection. All Li elements without the. Horizontal class under a specific ID
3.3 Use the XPath selector:
Attribute Selection: $ ("A [@ title]") select all links with the title attribute
$ ("Div [Ol]") Select All DIV elements that contain an ol Element
$ ('A [@ href ^ = "mailto: % 22] ') select all attributes with href [@ href] and the attribute value starts with mailto ^ = "mailto" (^ starts with the string, $ ends with the string, and * indicates any position in the string)
$ ('A [@ href $ = ". pdf"] ') select all links with href and the token value ends with a token.
$ ('A [@ href * = "mysite.com"] ') select all links from which mysite.com appears in any location (including mysite.com) of href.
3.4jquery custom selector (filter: filters all elements that meet a certain condition from the selected result set). Similar to the pseudo-class selector of CSS, it starts ":".
1. $ ('div. Horizontal: eq (1) ') Select the 2nd items in the DIV set with the horizontal class
$ ('Div: Nth-Child (1) ') Select All divs as parent element 1st child elements
2. Custom Selection Characters: Odd and: Even
$ ('Tr: odd'). addclass ('odd'); // filter the odd elements in the selected result set.
$ ('Tr: even'). addclass ('even'); // filter the even elements in the selected result set.
3. Custom selector: Contains ()
$ ('Td: Contains ("Henry") ') select all tables containing the Henry string
3.5jquery Selection Function
1. $ ('# Some-id'). Parent () Select the parent element of a specific element
2. $ ('# Some-id'). Next () Select the next same level element closest to a specific element.
3. $ ('# Some-id'). siblings () Select All sibling elements of a specific element
4. $ ('# Some-id'). Find ('. Some-class') select all elements containing a specific class under a specific element
5. $ ('# Some-id '). find ('td '). not (': INS ins ("Henry")') select all elements in the table that do not contain Henry under a specific element.
5. $ ('# Some-id '). find ('td '). not (': Contains ("Henry ")'). end (). end () indicates returning to the last time. find () Element
3.6 access the DOM element and use the get () method to obtain it from the selected jquery object. Remove the jquery packaging.
VaR mytag = $ ('# Some-id'). Get (0). tagname;
VaR mytag = $ ('# Some-id') [0]. tagname; // equivalent to the preceding

4. Events (all events are bound to a certain element)
4.1 bind events
$ ("# Some-ID"). BIND ("click", function (){})
$ ("# Some-ID"). Unbind ("click", bindedfunctionname); // remove the Bound event, provided that the bound function has a name (not an anonymous function)
$ ("# Some-ID"). Click (function (){})
4.2 Composite Function binding event
$ ("# Some-ID"). Toggle (function () {}, function () {}); // execute Alternately
$ ("# Some-ID"). toggleclass ("hidden"); // Add/delete classes Alternately
$ ("# Some-ID "). hover (function () {}, function () {}); // when the mouse enters the element, the first function is executed, and the second function is executed when the element is left.
$ ("# Some-ID"). One ("click", functionname); // you only need to trigger it once, and then immediately unbind it.
4.3 simulate a user to trigger an event
$ ("# Some-ID"). Trigger ("click"); // triggers the Click Event of a specific element

 

5. Add effects to elements
5.1 read or set CSS style attributes
$ ("# Some-ID" ).css ("property") // read the style Value
(('{Some-id'}.css ('properties', 'value') // you can specify a style value.
(('{Some-id'}.css ({property1: 'value1', property2: 'value2'}) // you can specify multiple style attributes.
5.2 change font size
$ (Document). Ready ({
$ ('# Button-id'). Click (function (){
VaR currentsize = ('{text-id'{.css ('fontsize'); // obtain the font size, such as 30px.
VaR num = parsefloat (currentsize, 10); // convert the value to a floating point number. parsefloat (,) is a javascript built-in function. Here it is converted to a 10-digit floating point number.
VaR unit = currentsize. slice (-2); // obtain the unit name, such as PX ,. slice () is a javascript built-in function. Obtaining a string refers to a substring starting from a specified position.-2 indicates the last two characters.
Num * = 1.5;
(('Text-id'0000.css ('fontsize', num + Unit); // you can specify the font size and style.
});
});
5.3 hide and display
$ ('# Some-id'). Show (); // No effect. The original display attribute values (such as block and inline) are automatically recorded, and the display value is returned.
$ ('# Some-id'). Hide (); // no effect, equivalent to: Response ('{some-id'}.css ('display', 'None'); hide elements without retaining physical locations
Display or hide of gradually changing size and transparency
$ ('# Some-id '). show ('low'); // specify the display speed. The height, width, and opacity of the element are gradually increased to the attribute value within the specified time. The value of "slow" is 0.6 seconds, normal is 0.4 seconds, fast is 0.2 seconds, or fill in the number of milliseconds directly
$ ('# Some-id'). Hide (800); // same as the Speed Display specified by. Show (), the height, width, and opacity of the specified time are gradually reduced to 0.
Fade in and out
$ ('Some-id'). fadein ('low'); // The opacity attribute value increases from 0 to 1 in the specified time.
$ ('Some-id'). fadeout ('low'); // The opacity value decreases from 1 to 0 in the specified time.
5.4 create an animated show
It mainly calls the. animate () method, which has four parameters: ing of style attributes and values; optional speed parameters; optional easing types; optional callback functions;
1. Concurrent display of multiple effects
$ ('# Some-id '). animate ({Height: 'Show ', width: 'Show', opacity: 'Show '}, 'low', function () {alert ('animation element ');});
$ ('Div. button '). animate ({left: 600, height: 44}, 'slow'); // the horizontal position is increased from 0 to 600, and the height is increased from 0 to 44.
2. Multiple effects are displayed in the queue, and multiple. animate () are cascaded. After one effect is displayed, the next effect is displayed.
$ ('# Some-id'). animate ({left: 600}, 'low'). animate ({Height: 44}, 'low ');

6 Dom operations
6.1 attribute operations
$ ('# Some-id'). ATTR ('properties'); // get attributes
$ ('# Some-id'). ATTR ('properties', 'value'); // you can specify attributes.
$ ('# Some-id'). ATTR ({'property1': 'value1', 'property2': 'value2'}); // you can specify multiple attributes.
Modify all links in a paragraph and add a new ID to each link.
$ ('Div P. Content A'). Each (function (INDEX ){
$ (This). ATTR ({
'Rel ': 'External ',
'Id': 'link _ '+ Index
});
});
// ********* Jquery's. Each () is similar to an iterator, and the index parameter passed to it is similar to a counter *********
6.2 insert new elements
1. Insert the element to the front of other elements:. insertbefore () and. Before ()
2. Insert the element to the end of other elements:. insertafter () and after ()
3. insert an element into or after another element (equivalent to append an element): appendto () and append ()
4. insert an element into or before another element (equivalent to appending an element): prependto () and prepend ()
6.3. Wrap the elements into other elements. Wrap ();
$ ('# Some-id '). wrap ('<li> </LI>'); // wrap a specific element to Li, that is, add an element to the periphery of a specific element.
6.4 copy element. Clone ()
1. $ ('# Some-id'). Clone (). appendto ($ ('body '));
2. Replication depth. When the "false" parameter is input, only the matching elements are copied, and other internal elements are not copied.
$ ('# Some-id'). Clone (false)
Note: The. Clone () method does not copy events in the element.
6.5 remove elements from matching elements, similar to clearing Elements
$ ('# Some-id'). Empty ();
6.6 remove matching elements from the Dom and Their descendant Elements
$ ('# Some-id'). Remove ();