15 common jquery methods and tips

This article mainly introduces 15 common jquery methods and tips. This article summarizes some commonly used methods in development, for example, you can obtain the row Mark and column mark of td, determine whether it is press enter, select all, and select Inverse. For more information, see 1. get the row and column labels of td

The code is as follows:

$ (This). prop ('cellindex ')

2. determine if press enter is used

The code is as follows:

Var myEvent = event | window. event;
Var key = myEvent. keyCode;
If (key = 13 ){
// Press Enter.
}

3. Select All and reselect

The code is as follows:

$ ("# Selectall"). click (function (){
If ($ ("input [name = 'Id [] ']"). is (": checked ")){
$ ("Input [name = 'Id [] ']"). prop ("checked", false );
} Else {
$ ("Input [name = 'Id [] ']"). prop ("checked", true );
}
});

4. double-click modify enter to save the td item in table double-click event

The code is as follows:

$ ("Td"). dblclick (function (){
Var tdIns = $ (this );
Var tdpar = $ (this). parents ("tr ");
Tdpar.css ("background-color", "yellow ");
If (tdIns. children ("input"). length> 0) {return false ;}
Var inputIns = $ (""); // The Code of the input box to be inserted
Var text = plain (this).html ();
InputIns. width (tdIns. width (); // you can specify the same width for input and td.
InputIns.val(tdIns.html (); // copy the td content of the current cell to the inserted text box input.
TdIns.html (""); // delete the td content of the original cell
InputIns. appendTo (tdIns). focus (). select (); // Insert the code of the input box to the dom node.
InputIns. click (function () {return false ;});
InputIns. keyup (function (event ){
// 1. determine whether to press enter
// The result is the difference in the time obtained by different browsers.
Var myEvent = event | window. event;
Var key = myEvent. keyCode;
If (key = 13 ){
Var inputNode = $ (this );
// 1. save the content of the current text box
Var inputText = inputNode. val ();
// 2. clear the content in td
InputNode.parent().html (inputText );
}
});
// Process the Enter and Esc events
InputIns. blur (function (){
Var inputText = $ (this). val ();
TdIns.html (inputText );
Tdpar.css ("background-color", "white ");
TdIns.html (text );
});
});

5. parent element $ (this). parent ();
6. specify the next sibling element of an element $ (this). next ();
7. specify all sibling elements of an element $ (this). nextAll ();
8. specify the element and all the same level elements $ (this). andSelf ();
9. prev (): Gets the previous same level element of the specified element (the previous one ).
10. prevAll (): gets all the same level elements in the front of a specified element.
11. obtain child elements

Method 1:>

The code is as follows:

Var aNods = $ ("ul> a"); // search for all a tags under ul

Method 2: children ()
Method 3: find ()

Note:

1> both the children and find methods are used to obtain the sub-elements of the element. neither of them returns the text node, just like most jQuery methods.
2> The children method obtains only child elements at the level of elements, namely, immediate children.
3> the find method obtains all lower-level elements, namely, descendants of these elements in the DOM tree.
4> The selector parameter of the children method is optional (optionally) and used to filter sub-elements. However, the selector method of the find method is required.
5> the find method can actually be implemented by using jQuery (selector, context. That is, $ ('li. item-II'). find ('Lil') is equivalent to $ ('Lil', 'li. item-II ').

12. obtain the first element:

The code is as follows:

$ ("# Getfirst"). find ("ul li: first-child ")
$ ("# Getfirst"). find ("ul li"). get (0)
$ ("# Getfirst"). find ("ul li"). first ()

13. datepicker common date selection plug-in datepicker

The code is as follows:

$ ("# Waybill_eta1"). datepicker ({dateFormat: 'YY-mm-DD '});

14. datetimepicker plug-in selected at the same time of date and time

The code is as follows:

$ ('# Declare_time'). datetimepicker ({
DateFormat: 'YY-mm-DD ',
TimeFormat: 'hh: mm ',
});

15. add verification methods for validate regular expressions

The code is as follows:

$. Validator. addMethod ("isCode", function (value, element ){
Var reg =/^ [^ \ u4e00-\ u9fa5] {1,} $ /;
Return this. optional (element) | (reg. test (value ));
}, "Only letters, numbers, and underscores can be entered ");