jQuery selector summary (selector + element filtering)

1. jQuery selector

1. Basic selector

• #ID Selector: Find label object based on id

• .class Selector: Find label objects according to class

• element Selector: Find the label object according to the label name

• * Selector: represents any, all elements

• selector1，selector2 Combination selector: merge the results of selector 1, selector 2 and return

• There is also one without commas, such as the $("div.one")selected class="one"<div>, and $("div,.one")the selected all <div> and all class="one"elements

Example:

$("#lastname")  //选取id="lastname" 的元素
$(".intro") //选取class="intro" 的所有元素
$("p") //选取所有 <p> 元素
$("*") //选取所有元素
$("h1,div,p") //选取所有 <h1>、<div> 和<p> 元素
$("div.one") //选取class="one"的<div>
$("div,.one") //选取所有<div>和所有class="one"的元素

2. Level selector

• ancestor descendant Descendant selector: match all descendant elements under a given ancestor element, including son elements, and other elements such as grandchildren
• parent > child Child element selector: match all child elements under a given parent element, including only son elements, excluding other elements such as grandchildren
• prev + next Adjacent element selector: match the next element immediately after the prev element, if the one immediately after prev is not next, the search fails, if it is next, only one next element immediately after the prev element is matched, and The relationship between prev and next is brotherhood.
• prev ~ sibings Sibling element selector after prev: Match all siblings elements after prev element, and only match elements that are siblings between prev element and siblings element

Example:

$("body div") //选择 body 内的所有 div 元素
$("body > div") //在 body 内, 选择为div的子元素
$("#one+div") //选择 id 为 one 的下一个 div 元素
$("#one~div") //选择 id 为 one 的元素后面的所有 div 兄弟元素

3. Filter selector

3.1 Basic filter selector

• :first Get the first element
• :last Get the last element
• :not(selector) Remove all elements that match the given selector
• :even Start counting from 0 and match all elements with an even index
• :odd Start counting from 0 to match all elements with odd index values
• :eq(index) Matches an element with a given index value
• :gt(index) Match all elements greater than the given index value
• :lt(index) Match all elements less than the given index value
• :header Match heading elements such as h1, h2, h3
• :animated Match all elements that are performing animation effects

Example:

$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$(":header")     //选择所有的标题元素
$(":animated")   //选择当前正在执行动画的所有元素

3.2 Content filtering selector

• :contains(text) Match elements containing the given text
• :empty Match all empty elements that do not contain child elements or text
• :parent Match elements that contain child elements or text
• :has(selector) Match contains the element matched by the selector

Example:

$("div:contains('Runob')")    // 包含 Runob文本的div元素
$("td:empty")                 //不包含子元素或者文本 的空td元素
$("td:parent")                //选择含有子元素或者文本 的td元素
$("div:has(.one)")        //选择含有 class 为 one 元素的 div 元素

3.3 attribute filter selector

• [attribute] Matches elements that contain the given attribute.
• [attribute=value] Matches elements whose given attribute is a certain value
• [attribute!=value] Match all elements whose attributes are not equal to a specific value, or elements that do not contain the attribute (the ones without the attribute will also be selected).
• [attribute^=value] Matching a given attribute is an element that starts with some value
• [attribute$=value] Match the given attribute is an element ending with some value
• [attribute*=value] Matching a given attribute is an element that contains certain values
• [attrSel1][attrSel2][attrSelN] Composite attribute selector, used when multiple conditions need to be met at the same time

Example:

$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div元素，或者不含有id属性的div元素
$("div[id^='aa']")        // id属性值以aa开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("div[id][title*='es']") //首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素

3.4 Visibility filter selector

• :hidden Match all invisible elements
• :visible Match all visible elements

Example:

$("li:hidden")       //匹配所有不可见的li
$("li:visible")      //匹配所有可见的li

3.5 Status filter selector

• :enabled Match all available elements
• :disabled Match all unavailable elements
• :checked Match all selected single-select, multiple-select, and option label objects selected in the drop-down list
• :selected Match all selected options

Example:

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

4. Form selector

• :input Match all input tag elements
• :text Match all text input boxes
• :password Match all password input boxes
• :radio Match all radio buttons
• :checkbox Match all checkboxes
• :submit Match all submit buttons
• :image Match all img tags
• :reset Match all reset buttons
• :button Match all input type=button <button> buttons
• :file Match all input type=file file upload

Example:

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":image") 	 //所有带有 type="image" 的 input 元素
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

2. Some methods used in jQuery element filtering

• eq()Gets the index of a given element; function with :eq()the same
• first()Get the first element; function with :firstthe same
• last()Gets the last element; function with :lastthe same
• filter(exp) Leave matching elements
• is(exp) Determine whether to match the given selector, return true as long as there is a match
• has(exp)Returns a selector element matching elements; function with :hasthe same
• not(exp)Delete matching selector element; function with :notthe same
• children(exp)Return match a given child element selector; function with parent>childthe same
• find(exp)Return match a given selector descendant elements; function with ancestor descendantthe same
• next()Returns the current element to the next sibling element; function with the prev + nextfunction as
• nextAll()Return all current siblings after the element; function with prev ~ siblingsthe same function
• nextUntil() Return the elements after the current element to the specified matched element
• parent() Return parent element
• prev(exp) Returns the previous sibling element of the current element
• prevAll() Returns all sibling elements before the current element
• prevUnit(exp) Returns the previous elements from the current element to the specified matched element
• siblings(exp) Return all sibling elements
• add() Add the elements of the selector matched by add to the current jquery object

Example:

$("div").eq(3) //选择索引值为等于 3 的 div 元素
$("div").first() //选择第一个 div 元素
$("div").last() //选择最后一个 div 元素
$("div").filter(":even") //在div中选择索引为偶数的
$("#one").is(":empty") //判断#one是否为:empty或:paren
$("div").has(".one") //选择div中包含.one的
$("div").not('.one') //选择div中class不为one的
$("body").children("div.one") //在body中选择所有class为one的div子元素
$("body").find("div.mini") //在body中选择所有class为mini的div元素
$("#one").next("div") //#one的下一个div
$("#one").nextAll("span") //#one后面所有的span元素
$("#one").nextUntil("span") //#one和span之间的元素 
$(".one").parent() //.one的父元素
$("#two").prev("div") //#two的上一个div
$("span").prevAll("div") //span前面所有的div
$("span").prevUntil("#one") //span向前直到#one的元素
$("#two").siblings() //#two的所有兄弟元素
$("span").add("#two").add("#one") //选择所有的 span 元素和id为two的元素