1. Selector
(1) Wildcard: $("input[id^='code']");//All input tags whose id attribute starts with code $("input[id$='code']");//id attribute All input tags ending with code $("input[id*='code']");//All input tags whose id attribute contains code $("input[name^='code']");//name All input tags whose attribute starts with code $("input[name$='code']");//All input tags whose name attribute ends with code $("input[name*='code']");/ /name attribute contains all input tags of code $("input[name*='code']").each(function(){ var sum=0; if($(this).val()!="") { sum=parseInt(sum)+parseInt($(this).val()); } $("#").text(sum); }) (2) Select $("tbody tr:even") according to the index ; //Select all tr tags with an even index $("tbody tr:odd"); //Select all tr tags with an odd index (3) to get the number of inputs of the next level node of jqueryObj jqueryObj.children("input ").length; (4) Get all the labels under the child nodes of the label whose class is main $(".main > a"); (5) Select the next label jqueryObj.next("div");//Get a div immediately after 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 the keyboard operation 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 function $('#someField').val($.trim($('#someField').val()));//Eliminate spaces, syntax: $.trim(value) $("#myELement ") Select the element whose id value is equal to myElement. The id value cannot be repeated. There can only be one id value of myElement in the document, so the only element obtained is $("div") Select all div tag elements and return an array of div elements $ (".myClass") Select all elements using the css class of myClass $("*") Select 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 all input elements in the form element $("#main > *") Selects all sub-elements with the id value of main $("label + input") Selects all the lower elements of the label element An input element node, the tested selector returns all input label elements with an input label directly followed by the label label $("#prev ~ div") Sibling selector, the selector returns the label element with id prev All div tags that belong 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: checked All input elements of the selector
$("tr:even") Select the 0th, 2nd, 4th... elements of all tr elements (note: because the selected multiple elements are arrays, the sequence number starts from 0)
$ ("tr:odd") selects the 1st, 3rd, 5th... elements of all tr elements $("td:eq(2)") selects the td whose sequence number is 2 among all td elements Element $("td:gt(4)") Selects all td elements with sequence numbers greater than 4 in td elements $("td:ll(4)") Selects all td elements with sequence numbers less than 4 in td elements $(": header") $("div:animated")
Content filter selector: $("div:contains('John')") selects all elements in the div that contain John text $("td:empty") selects all td elements that are empty (not including text nodes) Array of $("div:has(p)") selects all div elements with p tag $("td:parent") selects all elements array with td as parent node
Visual filter selector:
$("div:hidden") selects all hidden div elements $("div:visible") selects all visible div elements
Attribute filter selector:
$("div[id]") Select all div elements with id attribute $("input[name='newsletter']") Select 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']") selects all input elements whose name attribute ends with 'news' $("input[name*='man']") selects all input elements whose name attribute contains 'news' $ ("input[id][name$='man']") You can use multiple attributes for joint selection. This selector is to get all elements with an 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 an array of the first child of all div elements $("div span:last-child") returns an array of the last node of all div elements $("div button:only- child") returns an array of all child nodes with only one child node in all divs
Form element selector: $(":input") selects all form input elements, including input, textarea, select and buttons $(":text") selects all text input elements $(":password") selects all password input element $(":radio") selects all radio input elements $(":checkbox") selects all checkbox input elements $(":submit") selects all submit input elements $(":image") selects All image input elements $(":reset") Select all reset input elements $(":button") Select all button input elements $(":file") Select all file input elements $(":hidden" ) selects all input elements of type hidden or hidden fields of the form
Form element filter selector: $(":enabled") selects all operable form elements $(":disabled") selects all inoperable form elements $(":checked") selects all checked forms Element $("select option:selected") selects the selected element in all the child elements of select
Select the text value 1 of the previous td of the input text box named "S_03_22" $("input[@name =S_03_22]").parent().prev().text() The name starts with "S_", and not ending with "R" $("input[@name ^='S ']").not("[@name $='_R']") a value selected by a radio named radio_01 $( "input[@name =radio_01][ @checked ]").val(); $("AB") Find all child nodes below the A element, including non-direct child nodes $("A>B") Find the A element The following direct child node $("A+B") finds the sibling node behind the A element, including the non-direct child node $("A~B") Finds the sibling node behind the A element, excluding the non-direct child node
ps: jQuery selector summary
- $("A B") finds all child nodes below the A element, including indirect children
Example: Find all input elements in a form
HTML code:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form input") 结果: [ <input name="name" />, <input name="newsletter" /> ]
- $("A>B") finds the immediate child nodes below 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 代码:
$("form > input") 结果: [ <input name="name" /> ]
- $("A+B") finds the sibling nodes behind the A element, including non-direct children
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 代码: $("label + input") 结果: [ <input name="name" />, <input name="newsletter" /> ]
- $("A~B") finds the sibling nodes behind the A element, excluding non-direct child nodes
Example: Find all input elements that are siblings of a form
HTML code:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码:
$("form ~ input") 结果: [ <input name="none" /> ]