🧩

【脱jQuery】JavaScriptへの書き換え Selectors編

に公開
JavaScript
jQuery
tech

モダンJavaScriptの進化によって、jQueryが担っていた多くの役割は標準APIで代替可能になりました。本記事では特に需要の高いセレクタに焦点を当て、jQueryの記法をネイティブJavaScriptへどのように移行するかを網羅的にまとめています。

$('*')

全ての要素を選択します。

jQuery
$('*')
JavaScript
document.querySelectorAll('*')
動作を確認する

$(':root')

ドキュメントのルート要素を選択します。

jQuery
$(':root')
JavaScript
document.querySelector(':root')
動作を確認する

$('div')

指定された要素名と一致する全ての要素を選択します。

jQuery
$('div')
JavaScript
document.querySelectorAll('div')
動作を確認する
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery
$('div')
// =>
// [
//   <div>DIV1</div>,
//   <div>DIV2</div>,
// ]
JavaScript
document.querySelectorAll('div')

$('#id')

指定されたid属性値と一致する要素を選択します。

jQuery
$('#myDiv')
JavaScript
document.querySelector('#myDiv')
動作を確認する
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery
$('#myDiv')
// => <div id="myDiv">id="myDiv"</div>
JavaScript
document.querySelector('#myDiv')

$('.class')

指定されたクラス名と一致する全ての要素を取得します。

jQuery
$('.myClass')
JavaScript
document.querySelectorAll('.myClass')
動作を確認する
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery
$('.myClass')
// =>
// [
//   <div class="myClass">div class="myClass"</div>,
//   <span class="myClass">span class="myClass"</span>,
// ]
JavaScript
document.querySelectorAll('.myClass')

$('prev + next')

直前に兄弟要素prevをもつnextに一致する全ての要素を選択します。

jQuery
$('label + input')
JavaScript
document.querySelectorAll('label + input')
動作を確認する
<form>
  <label for="name">Name:</label>
  <input name="name" id="name">
  <fieldset>
    <label for="newsletter">Newsletter:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
<input name="none">
jQuery
$('label + input')
// =>
// [
//   <input name="name" id="name">,
//   <input name="newsletter" id="newsletter">,
// ]
JavaScript
document.querySelectorAll('label + input')

$('prev ~ siblings')

prev要素に続く全ての兄弟要素のうち、siblingsに一致する全ての要素を選択します。

jQuery
$('#prev ~ div')
JavaScript
document.querySelectorAll('#prev ~ div')
動作を確認する
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
jQuery
$('#prev ~ div')
// =>
// [
//   <div>div sibling</div>,
//   <div>div sibling <div id="small">div niece</div></div>,
//   <div>div sibling</div>,
// ]
JavaScript
document.querySelectorAll('#prev ~ div')

$('parent child')

指定された親要素のうち、全ての子孫要素を選択します。

jQuery
$('form input')
JavaScript
document.querySelectorAll('form input')
動作を確認する
<form>
  <div>Form is surrounded by the green border.</div>
 
  <label for="name">Child of form:</label>
  <input name="name" id="name">
 
  <fieldset>
    <label for="newsletter">Grandchild of form, child of fieldset:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
jQuery
$('form input')
// =>
// [
//   <input name="name" id="name">,
//   <input name="newsletter" id="newsletter">,
// ]
JavaScript
document.querySelectorAll('form input')

$('parent > child')

親要素の子孫要素のうち、直接の子要素を全て選択します。

jQuery
$('ul.topnav > li')
JavaScript
document.querySelectorAll('ul.topnav > li')
動作を確認する
<ul class="topnav">
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Nested item 1</li>
      <li>Nested item 2</li>
      <li>Nested item 3</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>
jQuery
$('ul.topnav > li')
// =>
// [
//   <li>Item 1</li>,
//   <li>Item 2
//     <ul>
//       <li>Nested item 1</li>
//       <li>Nested item 2</li>
//       <li>Nested item 3</li>
//     </ul>
//   </li>,
//   <li>Item 3</li>,
// ]
JavaScript
document.querySelectorAll('ul.topnav > li')

$('[name]')

指定された属性と一致する全ての要素を選択します。

jQuery
$('div[id]')
JavaScript
document.querySelectorAll('div[id]')
動作を確認する
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
jQuery
$('div[id]')
// =>
// [
//   <div id="hey">with id</div>,
//   <div id="there">has an id</div>,
// ]
JavaScript
document.querySelectorAll('div[id]')

$('[name="value"]')

指定された属性値と完全に一致する全ての要素を選択します。

jQuery
$('input[value="Hot Fuzz"]')
JavaScript
document.querySelectorAll('input[value="Hot Fuzz"]')
動作を確認する
<div>
  <label>
    <input type="radio" name="newsletter" value="Hot Fuzz">
    <span>name?</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" name="newsletter" value="Cold Fusion">
    <span>value?</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" name="newsletter" value="Evil Plans">
    <span>value?</span>
  </label>
</div>
jQuery
$('input[value="Hot Fuzz"]')
// =>
// [
//   <input type="radio" name="newsletter" value="Hot Fuzz">,
// ]
JavaScript
document.querySelectorAll('input[value="Hot Fuzz"]')

$('[name!="name"]')

指定された属性をもたないか、その属性値と一致しない全ての要素を選択します。

jQuery
$('input[name!="newsletter"]')
JavaScript
document.querySelectorAll('input:not([name="newsletter"])')
動作を確認する
<div>
  <input type="radio" name="newsletter" value="Hot Fuzz">
  <span>name is newsletter</span>
</div>
<div>
  <input type="radio" value="Cold Fusion">
  <span>no name</span>
</div>
<div>
  <input type="radio" name="accept" value="Evil Plans">
  <span>name is accept</span>
</div>
jQuery
$('input[name!="newsletter"]')
// =>
// [
//   <input type="radio" value="Cold Fusion">,
//   <input type="radio" name="accept" value="Evil Plans">,
// ]
JavaScript
document.querySelectorAll('input:not([name="newsletter"])')

$('[name~="value"]')

指定された属性値がスペースで区切られた全ての要素を選択します。

jQuery
$('input[name~="man"]')
JavaScript
document.querySelectorAll('input[name~="man"]')
動作を確認する
<input name="man-news">
<input name="milk man">
<input name="letterman2">
<input name="newmilk">
jQuery
$('input[name~="man"]')
// =>
// [
//   <input name="milk man">,
// ]
JavaScript
document.querySelectorAll('input[name~="man"]')

$('[name|="value"]')

指定された属性値と一致するか、その属性値にハイフンが続く全ての要素を選択します。

jQuery
$('a[hreflang|="en"]')
JavaScript
document.querySelectorAll('a[hreflang|="en"]')
動作を確認する
<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>
jQuery
$('a[hreflang|="en"]')
// =>
// [
//   <a href="example.html" hreflang="en">Some text</a>,
//   <a href="example.html" hreflang="en-UK">Some other text</a>,
// ]
JavaScript
document.querySelectorAll('a[hreflang|="en"]')

$('[name^="value"]')

指定された属性値で始まる全ての要素を選択します。

jQuery
$('input[name^="news"]')
JavaScript
document.querySelectorAll('input[name^="news"]')
動作を確認する
<input name="newsletter">
<input name="milkman">
<input name="newsboy">
jQuery
$('input[name^="news"]')
// =>
// [
//   <input name="newsletter">,
//   <input name="newsboy">,
// ]
JavaScript
document.querySelectorAll('input[name^="news"]')

$('[name$="value"]')

指定された属性値で終わる全ての要素を選択します。

jQuery
$('input[name$="letter"]')
JavaScript
document.querySelectorAll('input[name$="letter"]')
動作を確認する
<input name="newsletter">
<input name="milkman">
<input name="jobletter">
jQuery
$('input[name$="letter"]')
// =>
// [
//   <input name="newsletter">,
//   <input name="jobletter">,
// ]
JavaScript
document.querySelectorAll('input[name$="letter"]')

$('[name*="value"]')

指定された属性値を部分的に含む全ての要素を選択します。

jQuery
$('input[name*="man"]')
JavaScript
document.querySelectorAll('input[name*="man"]')
動作を確認する
<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">
jQuery
$('input[name*="man"]')
// =>
// [
//   <input name="man-news">,
//   <input name="milkman">,
//   <input name="letterman2">,
// ]
JavaScript
document.querySelectorAll('input[name*="man"]')

$('[name1="value1"][name2="value2"]')

指定された属性フィルターの全てに一致する全ての要素を選択します。

jQuery
$('input[id][name$="man"]')
JavaScript
document.querySelectorAll('input[id][name$="man"]')
動作を確認する
<input id="man-news" name="man-news">
<input name="milkman">
<input id="letterman" name="new-letterman">
<input name="newmilk">
jQuery
$('input[id][name$="man"]')
// =>
// [
//   <input id="letterman" name="new-letterman">,
// ]
JavaScript
document.querySelectorAll('input[id][name$="man"]')

$('selector1, selector2, selectorN')

指定された全てのセレクタの組み合わせを選択します。

jQuery
$('div, span, p.myClass')
JavaScript
document.querySelectorAll('div, span, p.myClass')
動作を確認する
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
jQuery
$('div, span, p.myClass')
// =>
// [
//   <div>div</div>,
//   <p class="myClass">p class="myClass"</p>,
//   <span>span</span>,
// ]
JavaScript
document.querySelectorAll('div, span, p.myClass')

$(':first-child')

兄弟要素のうち、全ての最初の要素を選択します。

jQuery
$('div span:first-child')
JavaScript
document.querySelectorAll('div span:first-child')
動作を確認する
<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph</span>
</div>
jQuery
$('div span:first-child')
// =>
// [
//   <span>John,</span>,
//   <span>Glen,</span>,
// ]
JavaScript
document.querySelectorAll('div span:first-child')

$(':last-child')

兄弟要素のうち、全ての最後の要素を選択します。

jQuery
$('div span:last-child')
JavaScript
document.querySelectorAll('div span:last-child')
動作を確認する
<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon,</span>
  <span>Sam</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph,</span>
  <span>David</span>
</div>
jQuery
$('div span:last-child')
// =>
// [
//   <span>Sam</span>,
//   <span>David</span>,
// ]
JavaScript
document.querySelectorAll('div span:last-child')

$(':only-child')

全ての親要素の唯一の子要素を選択します。

jQuery
$('div button:only-child')
JavaScript
document.querySelectorAll('div button:only-child')
動作を確認する
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
 
<div>
  None
</div>
 
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
jQuery
$('div button:only-child')
// =>
// [
//   <button>Sibling!</button>,
//   <button>Sibling!</button>,
// ]
JavaScript
document.querySelectorAll('div button:only-child')

$(':nth-child(n)')

兄弟要素のうち、全てのn番目の要素を選択します。

jQuery
$('ul li:nth-child(2)')
JavaScript
document.querySelectorAll('ul li:nth-child(2)')
動作を確認する
<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul>
</div>
<div>
  <ul>
    <li>Sam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul>
</div>
jQuery
$('ul li:nth-child(2)')
// =>
// [
//   <li>Karl</li>,
//   <li>Tane</li>,
// ]
JavaScript
document.querySelectorAll('ul li:nth-child(2)')

$(':nth-last-child(n)')

兄弟要素のうち、末尾から数えて全てのn番目の要素を選択します。

jQuery
$('ul li:nth-last-child(2)')
JavaScript
document.querySelectorAll('ul li:nth-last-child(2)')
動作を確認する
<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Adam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dan</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dave</li>
    <li>Rick</li>
    <li>Timmy</li>
    <li>Gibson</li>
  </ul>
</div>
jQuery
$('ul li:nth-last-child(2)')
// =>
// [
//   <li>Karl</li>,
//   <li>Timmy</li>,
// ]
JavaScript
document.querySelectorAll('ul li:nth-last-child(2)')

$(':first-of-type')

同じ要素名の兄弟要素のうち、全ての最初の要素を選択します。

jQuery
$('span:first-of-type')
JavaScript
document.querySelectorAll('span:first-of-type')
動作を確認する
<div>
  <span>Corey,</span>
  <span>Yehuda,</span>
  <span>Adam,</span>
  <span>Todd</span>
</div>
<div>
  <b>Nobody,</b>
  <span>Jörn,</span>
  <span>Scott,</span>
  <span>Timo</span>
</div>
jQuery
$('span:first-of-type')
// =>
// [
//   <span>Corey,</span>,
//   <span>Jörn,</span>,
// ]
JavaScript
document.querySelectorAll('span:first-of-type')

$(':last-of-type')

同じ要素名の兄弟要素のうち、全ての最後の要素を選択します。

jQuery
$('span:last-of-type')
JavaScript
document.querySelectorAll('span:last-of-type')
動作を確認する
<div>
  <span>Corey,</span>
  <span>Yehuda,</span>
  <span>Adam,</span>
  <span>Todd</span>
</div>
<div>
  <span>Jörn,</span>
  <span>Scott,</span>
  <span>Timo,</span>
  <b>Nobody</b>
</div>
jQuery
$('span:last-of-type')
// =>
// [
//   <span>Todd</span>,
//   <span>Timo,</span>,
// ]
JavaScript
document.querySelectorAll('span:last-of-type')

$(':only-of-type')

同じ要素名の兄弟要素のうち、全ての親要素の唯一の子要素を選択します。

jQuery
$('button:only-of-type')
JavaScript
document.querySelectorAll('button:only-of-type')
動作を確認する
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
<div>
  None
</div>
 
<div>
  <button>Sibling!</button>
  <span>Sibling!</span>
  <span>Sibling!</span>
</div>
 
<div>
  <button>Sibling!</button>
</div>
jQuery
$('button:only-of-type')
// =>
// [
//   <button>Sibling!</button>,
//   <button>Sibling!</button>,
//   <button>Sibling!</button>,
// ]
JavaScript
document.querySelectorAll('button:only-of-type')

$(':nth-of-type(n)')

同じ要素名の兄弟要素のうち、全てのn番目の要素を選択します。

jQuery
$('span:nth-of-type(2)')
JavaScript
document.querySelectorAll('span:nth-of-type(2)')
動作を確認する
<div>
  <span>John</span>,
  <b>Kim</b>,
  <span>Adam</span>,
  <b>Rafael</b>,
  <span>Oleg</span>
</div>
<div>
  <b>Dave</b>,
  <span>Ann</span>
</div>
<div>
  <i><span>Maurice</span></i>,
  <span>Richard</span>,
  <span>Ralph</span>,
  <span>Jason</span>
</div>
jQuery
$('span:nth-of-type(2)')
// =>
// [
//   <span>Adam</span>,
//   <span>Ralph</span>,
// ]
JavaScript
document.querySelectorAll('span:nth-of-type(2)')

$(':nth-last-of-type(n)')

同じ要素名の兄弟要素のうち、末尾から数えて全てのn番目の要素を選択します。

jQuery
$('ul li:nth-last-of-type(2)')
JavaScript
document.querySelectorAll('ul li:nth-last-of-type(2)')
動作を確認する
<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Adam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dan</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dave</li>
    <li>Rick</li>
    <li>Timmy</li>
    <li>Gibson</li>
  </ul>
</div>
jQuery
$('ul li:nth-last-of-type(2)')
// =>
// [
//   <li>Karl</li>,
//   <li>Timmy</li>,
// ]
JavaScript
document.querySelectorAll('ul li:nth-last-of-type(2)')

$(':not()')

指定されたセレクタに一致しない全ての要素を選択します。

jQuery
$('input:not(:checked) + span')
JavaScript
document.querySelectorAll('input:not(:checked) + span')
動作を確認する
<div>
  <input type="checkbox" name="a">
  <span>Mary</span>
</div>
<div>
  <input type="checkbox" name="b">
  <span>lcm</span>
</div>
<div>
  <input type="checkbox" name="c" checked="checked">
  <span>Peter</span>
</div>
jQuery
$('input:not(:checked) + span')
// =>
// [
//   <span>Mary</span>,
//   <span>lcm</span>,
// ]
JavaScript
document.querySelectorAll('input:not(:checked) + span')

$(':has()')

指定されたセレクタと一致する要素を少なくとも1つ含む全ての要素を選択します。

jQuery
$('div:has(p)')
JavaScript
document.querySelectorAll('div:has(p)')
動作を確認する
<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>
jQuery
$('div:has(p)')
// =>
// [
//   <div><p>Hello in a paragraph</p></div>,
// ]
JavaScript
document.querySelectorAll('div:has(p)')

$(':lang()')

指定された言語の全ての子孫要素を選択します。

jQuery
$('div:lang(es-es)')
JavaScript
document.querySelectorAll('div:lang(es-es)')
動作を確認する
<h3>USA</h3>
<div lang="en-us">red
  <div>white
    <div>and blue</div>
  </div>
</div>
<h3>España</h3>
<div lang="es-es">rojo
  <div>amarillo
    <div>y rojo</div>
  </div>
</div>
jQuery
$('div:lang(es-es)')
// =>
// [
//   <div lang="es-es">rojo
//     <div>amarillo
//       <div>y rojo</div>
//     </div>
//   </div>,
//   <div>amarillo
//     <div>y rojo</div>
//   </div>,
//   <div>y rojo</div>,
// ]
JavaScript
document.querySelectorAll('div:lang(es-es)')

$(':contains()')

指定された文字列を含む全ての要素を取得します。

jQuery
$('div:contains(John)')
JavaScript
Array.from(document.querySelectorAll('div')).filter(div => {
  return div.textContent.includes('John')
})
動作を確認する
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
jQuery
$('div:contains(John)')
// =>
// [
//   <div>John Resig</div>,
//   <div>Malcom John Sinclair</div>,
// ]
JavaScript
Array.from(document.querySelectorAll('div')).filter(div => {
  return div.textContent.includes('John')
})

$(':empty')

子要素（テキストノードを含む）をもたない全ての要素を選択します。

jQuery
$('td:empty')
JavaScript
Array.from(document.querySelectorAll('td')).filter(td => {
  return !Array.from(td.childNodes).some(node => node.nodeType < 6)
})
動作を確認する
<table border="1">
  <tr><td>TD #0</td><td></td></tr>
  <tr><td>TD #2</td><td></td></tr>
  <tr><td></td><td>TD#5</td></tr>
</table>
jQuery
$('td:empty')
// =>
// [
//   <td></td>,
//   <td></td>,
//   <td></td>,
// ]
JavaScript
Array.from(document.querySelectorAll('td')).filter(td => {
  return !Array.from(td.childNodes).some(node => node.nodeType < 6)
})

$(':parent')

子要素（テキストノードを含む）をもつ全ての要素を選択します。

jQuery
$('td:parent')
JavaScript
Array.from(document.querySelectorAll('td')).filter(td => {
  return td.childNodes.length > 0
})
動作を確認する
<table border="1">
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
jQuery
$('td:parent')
// =>
// [
//   <td>Value 1</td>,
//   <td>Value 2</td>,
// ]
JavaScript
Array.from(document.querySelectorAll('td')).filter(td => {
  return td.childNodes.length > 0
})

$(':header')

全ての見出し要素を選択します。

jQuery
$(':header')
JavaScript
document.querySelectorAll('h1, h2, h3, h4, h5, h6')
動作を確認する
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
jQuery
$(':header')
// =>
// [
//   <h1>Header 1</h1>,
//   <h2>Header 2</h2>,
// ]
JavaScript
document.querySelectorAll('h1, h2, h3, h4, h5, h6')

$(':button')

全ての<button>要素を選択します。

jQuery
$(':button')
JavaScript
document.querySelectorAll('button, input[type="button"]')
動作を確認する
<form>
  <fieldset>
    <input type="button" value="Input Button">
    <input type="checkbox">
 
    <input type="file">
    <input type="hidden">
    <input type="image">
 
    <input type="password">
    <input type="radio">
    <input type="reset">
 
    <input type="submit">
    <input type="text">
    <select>
      <option>Option</option>
    </select>
 
    <textarea></textarea>
    <button>Button</button>
  </fieldset>
</form>
jQuery
$(':button')
// =>
// [
//   <input type="button" value="Input Button">,
//   <button>Button</button>,
// ]
JavaScript
document.querySelectorAll('button, input[type="button"]')

$(':text')

type属性の値がtext、またはtype属性が指定されていない全ての<input>要素を選択します。

jQuery
$(':text')
JavaScript
Array.from(document.querySelectorAll('input')).filter(input => {
  return (input.getAttribute('type') ?? 'text').toLowerCase() === 'text'
})
動作を確認する
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <input type>
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
jQuery
$(':text')
// =>
// [
//   <input type="text">,
// ]
JavaScript
Array.from(document.querySelectorAll('input')).filter(input => {
  return (input.getAttribute('type') ?? 'text').toLowerCase() === 'text'
})

$(':checkbox')

type属性の値がcheckboxの全ての<input>要素を選択します。

jQuery
$(':checkbox')
JavaScript
document.querySelectorAll('[type="checkbox"]')
動作を確認する
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
 
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
 
  <input type="image">
  <input type="password">
  <input type="radio">
 
  <input type="reset">
  <input type="submit">
  <input type="text">
 
  <select>
    <option>Option</option>
  </select>
 
  <textarea></textarea>
  <button>Button</button>
</form>
jQuery
$(':checkbox')
// =>
// [
//   <input type="checkbox">,
//   <input type="checkbox">,
// ]
JavaScript
document.querySelectorAll('[type="checkbox"]')

$(':radio')

type属性の値がradioの全ての<input>要素を選択します。

jQuery
$('form input:radio')
JavaScript
document.querySelectorAll('form input[type="radio"]')
動作を確認する
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio" name="asdf">
  <input type="radio" name="asdf">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
jQuery
$('form input:radio')
// =>
// [
//   <input type="radio" name="asdf">,
//   <input type="radio" name="asdf">,
// ]
JavaScript
document.querySelectorAll('form input[type="radio"]')

$(':password')

type属性の値がpasswordの全ての<input>要素を選択します。

jQuery
$('input:password')
JavaScript
document.querySelectorAll('input[type="password"]')
動作を確認する
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
jQuery
$('input:password')
// =>
// [
//   <input type="password">,
// ]
JavaScript
document.querySelectorAll('input[type="password"]')

$(':image')

type属性の値がimageの全ての<input>要素を選択します。

jQuery
$(':image')
JavaScript
document.querySelectorAll('[type="image"]')
動作を確認する
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
jQuery
$(':image')
// =>
// [
//   <input type="image">,
// ]
JavaScript
document.querySelectorAll('[type="image"]')

$(':file')

type属性の値がfileの全ての<input>要素を選択します。

jQuery
$('input:file')
JavaScript
document.querySelectorAll('input[type="file"]')
動作を確認する
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select><option>Option</option></select>
  <textarea></textarea>
  <button>Button</button>
</form>
jQuery
$('input:file')
// =>
// [
//   <input type="file">,
// ]
JavaScript
document.querySelectorAll('input[type="file"]')

$(':input')

全ての<input>, <select>, <textarea>, <button>要素を選択します。

jQuery
$(':input')
JavaScript
document.querySelectorAll('input, select, textarea, button')
動作を確認する
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
jQuery
$(':input')
// =>
// [
//   <input type="button" value="Input Button">,
//   <input type="checkbox">,
//   <input type="file">,
//   <input type="hidden">,
//   <input type="image">,
//   <input type="password">,
//   <input type="radio">,
//   <input type="reset">,
//   <input type="submit">,
//   <input type="text">,
//   <select>
//     <option>Option</option>
//   </select>,
//   <textarea></textarea>,
//   <button>Button</button>,
// ]
JavaScript
document.querySelectorAll('input, select, textarea, button')

$(':submit')

type属性の値がsubmit、または<form>要素内の<button>要素のうち明示的にtype属性の値にbuttonが指定されていない全ての要素を選択します。

jQuery
$(':submit')
JavaScript
document.querySelectorAll('[type="submit"], form button:not([type="button"])')
動作を確認する
<form>
<table id="exampleTable" border="1" cellpadding="10" align="center">
  <tr>
    <th>
      Element Type
    </th>
    <th>
      Element
    </th>
  </tr>
  <tr>
    <td>
      <input type="button" value="Input Button">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
  </tr>
  <tr>
    <td>
      <input type="file">
    </td>
  </tr>
  <tr>
    <td>
      <input type="hidden">
    </td>
  </tr>
  <tr>
    <td>
      <input type="image">
    </td>
  </tr>
  <tr>
    <td>
      <input type="password">
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio">
    </td>
  </tr>
  <tr>
    <td>
      <input type="reset">
    </td>
  </tr>
  <tr>
    <td>
      <input type="submit">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text">
    </td>
  </tr>
  <tr>
    <td>
      <select><option>Option</option></select>
    </td>
  </tr>
  <tr>
    <td>
      <textarea></textarea>
    </td>
  </tr>
  <tr>
    <td>
      <button type>Button</button>
      <button>Button</button>
    </td>
  </tr>
  <tr>
    <td>
      <button type="submit">Button type="submit"</button>
    </td>
  </tr>
</table>
</form>
jQuery
$(':submit')
// =>
// [
//   <input type="submit">,
//   <button type>Button</button>,
//   <button>Button</button>,
//   <button type="submit">Button type="submit"</button>,
// ]
JavaScript
document.querySelectorAll('[type="submit"], form button:not([type="button"])')

$(':reset')

type属性の値がresetの全ての<input>要素を選択します。

jQuery
$('input:reset')
JavaScript
document.querySelectorAll('input[type="reset"]')
動作を確認する
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
jQuery
$('input:reset')
// =>
// [
//   <input type="reset">,
// ]
JavaScript
document.querySelectorAll('input[type="reset"]')

$(':hidden')

全ての非表示になっている要素を選択します。

jQuery
$('body :hidden')
JavaScript
Array.from(document.querySelectorAll('body *')).filter(node => {
  return node.offsetParent === null && node.getClientRects().length === 0
})
動作を確認する
<span style="position: fixed;"></span>
<div></div>
<div style="display: none;">Hider!</div>
<div></div>
<div></div>
<form>
  <input type="hidden">
  <input type="hidden">
  <input type="hidden">
</form>
jQuery
$('body :hidden')
// =>
// [
//   <div style="display: none;">Hider!</div>,
//   <input type="hidden">,
//   <input type="hidden">,
//   <input type="hidden">,
// ]
JavaScript
Array.from(document.querySelectorAll('body *')).filter(node => {
  return node.offsetParent === null && node.getClientRects().length === 0
})

$(':visible')

全ての表示されている要素を選択します。

jQuery
$('div:visible')
JavaScript
Array.from(document.querySelectorAll('div')).filter(div => {
  return div.getClientRects().length > 0
})
動作を確認する
<div style="position: fixed;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
jQuery
$('div:visible')
// =>
// [
//   <div style="position: fixed;"></div>,
//   <div></div>,
//   <div></div>,
// ]
JavaScript
Array.from(document.querySelectorAll('div')).filter(div => {
  return div.getClientRects().length > 0
})

$(':animated')

$(':focus')

現在フォーカスされている要素を選択します。

jQuery
$(':focus')

$('input:focus')
JavaScript
document.activeElement

document.querySelector('input:focus')
動作を確認する
<div id="content">
  <input tabIndex="1">
  <input tabIndex="2">
  <select tabIndex="3">
    <option>select menu</option>
  </select>
  <div tabIndex="4">
    a div
  </div>
</div>
jQuery
$(':focus')

$('input:focus')
JavaScript
document.activeElement

document.querySelector('input:focus')

$(':enabled')

全ての有効な要素を選択します。

jQuery
$('input:enabled')
JavaScript
document.querySelectorAll('input:enabled')
動作を確認する
<form>
  <input name="email" disabled="disabled">
  <input name="id">
</form>
jQuery
$('input:enabled')
// =>
// [
//   <input name="id">,
// ]
JavaScript
document.querySelectorAll('input:enabled')

$(':disabled')

全ての無効な要素を選択します。

jQuery
$('input:disabled')
JavaScript
document.querySelectorAll('input:disabled')
動作を確認する
<form>
  <input name="email" disabled="disabled">
  <input name="id">
</form>
jQuery
$('input:disabled')
// =>
// [
//   <input name="email" disabled="disabled">,
// ]
JavaScript
document.querySelectorAll('input:disabled')

$(':checked')

チェックまたはセレクトされた全ての要素を選択します。

jQuery
$(':checked')
JavaScript
document.querySelectorAll(':checked')
動作を確認する
<form>
  <p>
    <input type="checkbox" name="newsletter" value="Hourly" checked="checked">
 
    <input type="checkbox" name="newsletter" value="Daily">
    <input type="checkbox" name="newsletter" value="Weekly">
 
    <input type="checkbox" name="newsletter" value="Monthly" checked>
    <input type="checkbox" name="newsletter" value="Yearly">
  </p>
</form>
jQuery
$(':checked')
// =>
// [
//   <input type="checkbox" name="newsletter" value="Hourly" checked="checked">,
//   <input type="checkbox" name="newsletter" value="Monthly" checked>,
// ]
JavaScript
document.querySelectorAll(':checked')

$(':selected')

セレクトされている全ての要素を選択します。

jQuery
$('select option:selected')
JavaScript
document.querySelectorAll('select option:checked')
動作を確認する
<select name="garden" multiple="multiple">
  <option>Flowers</option>
  <option selected="selected">Shrubs</option>
  <option>Trees</option>
  <option selected="selected">Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>
jQuery
$('select option:selected')
// =>
// [
//   <option selected="selected">Shrubs</option>,
//   <option selected="selected">Bushes</option>,
// ]
JavaScript
document.querySelectorAll('select option:checked')

Discussion