1. Selector
(1) Wildcard:
$("input[id^='code']");//All input tags whose id attribute starts with code
$("input[id$='code']");//All input tags whose id attribute ends with code input tag
$("input[id*='code']");//All input tags whose id attribute contains code
$("input[name^='code']");//name attribute starts with code All input tags
$("input[name$='code']");//All input tags whose name attribute ends with code
$("input[name*='code']");//The name attribute contains code All input tags
$("input[name*='code']").each(fuction(){
var sum=0;
if($(this).val()!=""){
sum=parseInt( sum)+parseInt($(this).val());
}
$("#").text(sum);
})
(2)Select based on index
$("tbody tr:even"); //Select all tr tags with even indexes
$("tbody tr:odd"); //Select all tr tags with odd indexes
(3) Obtain the number of inputs of the next-level node of jqueryObj
jqueryObj.children("input").length;
(4) Obtain all labels under the child nodes of the label with class main
$(".main > a");
(5)Select the label next to it
jqueryObj.next("div");//Get a div immediately behind the jqueryObj tag, nextAll gets all
2. Filter
//not
$("#code input:not([id^='code'])");//The id is the code tag and does not contain all input tags whose id starts with code
3.Event
//Handle keyboard operations on the text box
jqueryObj.keyup(function(event){
var keyCode = event.which;//Get the key value of the currently pressed keyboard, the Enter key is 13
}
4. Tool functions
$('#someField').val($.trim($('#someField').val()));//Eliminate spaces, syntax: $.trim(value)
ps: jQuery selector summary
jQuery's selectors are extremely powerful. Here is a brief summary of commonly used element search methods.
$("#myELement") selects the element whose id value is equal to myElement. The id value cannot be repeated. There can only be one id value myElement in the document, so what you get is the only element.
$("div") selects all div tag elements and returns an array of div elements
$(".myClass") selects all elements using css of myClass class
$("*") selects all elements in the document. You can use a variety of selection methods for joint selection: for example $("#myELement,div,.myclass")
Cascading selectors:
$("form input") Selects the input elements in all form elements
$("#main > *") Selects all sub-elements with the id value of main
$("label + input") Selects the bottom of all label elements An input element node. After testing, the selector returns all input label elements that are directly followed by an input label.
$("#prev ~ div"). Sibling selector. This selector returns the label element with the id of prev. All div tags belonging to the same parent element
Basic filter selector:
$("tr:first") selects the first of all tr elements
$("tr:last") selects the last of all tr elements
$("input:not(:checked) + span")
Filter out: all input elements of the checked selector
$("tr:even") selects the 0th, 2nd, 4th... elements of all tr elements (note: because the selected multiple elements are arrays, the serial number starts from 0)
$ ("tr:odd") Selects the 1st, 3rd, 5th... element of all tr elements
$("td:eq(2)") Selects the td with serial number 2 among all td elements Element
$("td:gt(4)") selects all td elements with serial numbers greater than 4 in td elements
$("td:ll(4)") selects all td elements with serial numbers less than 4 in td elements
$(": header")
$("div:animated")
Content filter selector:
$("div:contains('John')") selects all div elements containing John text
$("td:empty") selects all arrays of td elements that are empty (not including text nodes)
$(" div:has(p)") selects all div elements containing p tags
$("td:parent") selects all element arrays with td as the parent node
Visual filter selector:
$("div:hidden") selects all hidden div elements
$("div:visible") selects all visible div elements
Attribute filter selector:
$("div[id]") Selects all div elements with id attribute
$("input[name='newsletter']") Selects all input elements with name attribute equal to 'newsletter'
$("input[name!= 'newsletter']") Select all input elements whose name attribute is not equal to 'newsletter'
$("input[name^='news']") Select all input elements whose name attribute starts with 'news'
$("input [name$='news']") Select all input elements whose name attribute ends with 'news'
$("input[name*='man']") Select all input elements whose name attribute contains 'news'
$ ("input[id][name$='man']") You can use multiple attributes for joint selection. This selector gets all the elements that contain the id attribute and the attribute ends with man.
Child element filter selector:
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") $("
div span:first-child") Returns the array of the first child nodes of all div elements
$("div span:last-child") Returns the array of the last node of all div elements
$("div button:only- child") returns an array of all child nodes that have only one child node in all divs
Form element selector:
$(":input") selects all form input elements, including input, textarea, select and button
$(":text") selects all text input elements
$(":password") selects all password input elements
$(":radio") selects all radio input elements
$(":checkbox") selects all checkboxes input element
$(":submit") selects all submit input elements
$(":image") selects all image input elements
$(":reset") selects all reset input elements
$(":button") selects all The button input element
$(":file") selects all file input elements
$(":hidden") selects all input elements of type hidden or hidden fields of the form
Form element filter selector:
$(":enabled") Select all operable form elements
$(":disabled") Select all inoperable form elements
$(":checked") Select all checked form elements
$("select option :selected") selects the selected elements among all select child elements
Select the text value of the previous td of the input text box named "S_03_22"
$(”input[@ name =S_03_22]“).parent().prev().text()
Name starts with "S_" and does not end with "_R"
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)
The selected value of a radio named radio_01
$(”input[@ name =radio_01][@checked]“).val();
$("A B") Find all child nodes under the A element, including indirect child nodes
$("A>B") Find the direct child nodes under the A element
$("A+B") Find the brothers behind the A element Node, including indirect child nodes
$("A~B") Find the sibling nodes behind the A element, excluding indirect child nodes
1. $("A B") finds all child nodes under the A element, including indirect child nodes
Example: Find all input elements in the form
HTML code:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery code:
$("form input")
result:
[ <input name="name" />, <input name="newsletter" /> ]
2. $("A>B") finds the direct child nodes under the A element
Example: Match all child input elements in the form.
HTML code:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery code:
$("form > input")
result:
[ <input name="name" /> ]
3. $("A+B") finds the sibling nodes behind the A element, including indirect child nodes
Example: Match all input elements following label
HTML code:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery code:
$("label + input")
result:
[ <input name="name" />, <input name="newsletter" /> ]
4. $("A~B") finds the sibling nodes behind the A element, excluding indirect child nodes.
Example: Find all input elements that are siblings of the form
HTML code:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery code:
$("form ~ input")
result:
[ <input name="none" /> ]