jQueryフィルタセレクタ
4339 ワード
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"/>
<script type="text/javascript">
$(document).ready(function(){
</code></pre>
<p> </p>
<h4>last </h4>
<pre><code> var $div = $('#div1 div:last');
console.log($div);
</code></pre>
<h4>not(selector) </h4>
<pre><code> var $div = $(':not(#div1 div:last)');
console.log($div);
</code></pre>
<h4>:odd ( 0 )</h4>
<pre><code> var $div = $('#div1 div:odd');
console.log($div);
</code></pre>
<h4>:eq(index) index ( 0 )</h4>
<pre><code> var $div = $('div:eq(2)');
console.log($div);
</code></pre>
<h4>:header </h4>
<pre><code> var $div = $('#div1 *:header');
console.log($div)
</code></pre>
<h4>:focus input ：autofocus</h4>
<pre><code> var $div = $('input:focus');
console.log($div);
$div.css('background-color','red')
</code></pre>
<h4>:contains(text) </h4>
<pre><code> var $div = $('p:contains( )');
console.log($div);
</code></pre>
<h4>:empty </h4>
<pre><code> var $div = $('div:empty');
console.log($div);
</code></pre>
<h4>:parent </h4>
<pre><code> var $div = $('div:parent');
console.log($div);
</code></pre>
<h4>:nth-child(xn) 1 index </h4>
<pre><code> var $div = $('div:nth-child(3)');
console.log($div);
</code></pre>
<h4>:nth- child(xn+1) 0 </h4>
<pre><code> var $div = $('div:nth-child(3n+1)');
console.log($div);
</code></pre>
<h4>:nth-child(even) 0 </h4>
<pre><code> var $div = $('div:nth-child(even)');
console.log($div);
</code></pre>
<h4>:nth-child(odd) 0 </h4>
<pre><code> var $div = $('div:nth-child(odd)');
console.log($div);
</code></pre>
<h4>:has(selector) </h4>
<pre><code> var $div = $('div:has(div)');
console.log($div);
</code></pre>
<h4>:hidden </h4>
<pre><code> ： <input type="hidden" />
<div style="display: none;"></div>
<div style="visibility: hidden;"></div>
var $div = $('input:hidden');
console.log($div)
</code></pre>
<pre><code> })
</script>
<div id="div1">
<div id="div6"/>
<div class="a"/>
<div class="b"/>
<div class="c"/>
<div class="d"/>
<h1 class="h1"/>
</div>
<div id="div2"/>
<div id="div3"/>
<div id="div4"/>
<div id="div5"/>
<input type="text" name="name" id="name" value="" autofocus="autofocus"/>
<input type="hidden" name="" id="" value=""/>
<p> </p>
<p> </p>
</code></pre>
</article>
</div>
</div>