<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
過濾選擇器
last 選取最后一個元素
var $div = $('#div1 div:last');
console.log($div);
not(selector)除去所有與給定元素的所有匹配的元素
var $div = $(':not(#div1 div:last)');
console.log($div);
:odd 選中下標是奇數的兄弟標簽(從0開始)
var $div = $('#div1 div:odd');
console.log($div);
:eq(index) 選取下標為index的元素(從0開始)
var $div = $('div:eq(2)');
console.log($div);
:header 選取所有的標題元素
var $div = $('#div1 *:header');
console.log($div)
:focus 選取當前獲取焦點的元素 input 標簽中 注意：autofocus
var $div = $('input:focus');
console.log($div);
$div.css('background-color','red')
:contains(text) 內容過濾選擇器
var $div = $('p:contains(只)');
console.log($div);
:empty 選取不包含子元素的或文本的空元素
var $div = $('div:empty');
console.log($div);
:parent 選取包含子元素的或文本的空元素
var $div = $('div:parent');
console.log($div);
:nth-child(xn) 從1開始計數 選取每個父元素下的下標為index的元素
var $div = $('div:nth-child(3)');
console.log($div);
:nth- child(xn+1) 從0開始計數
var $div = $('div:nth-child(3n+1)');
console.log($div);
:nth-child(even) 選取父元素下標為偶數的元素 從0開始
var $div = $('div:nth-child(even)');
console.log($div);
:nth-child(odd) 選取父元素下標為奇數的元素 從0開始
var $div = $('div:nth-child(odd)');
console.log($div);
:has(selector) 選取包含匹配選擇器的元素
var $div = $('div:has(div)');
console.log($div);
:hidden 選取所有不可見的元素
三種形式： <input type="hidden" />
<div style="display: none;"></div>
<div style="visibility: hidden;"></div>
var $div = $('input:hidden');
console.log($div)
})
</script>
</head>
<body>
<a href=""></a>
<div id="div1">
<div id="div6"></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<h1 class="h1"></h1>
</div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<input type="text" name="name" id="name" value=""
autofocus="autofocus"/>
<input type="hidden" name="" id="" value="" />
<p>一只烏鴉口渴了</p>
<p>到處找水喝</p>
</body>
</html>
