一：
代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>selectorDemo4.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//:hidden
//$("tr:hidden").show(3000).css({background:"red"});
//:visible
//$("tr:visible").css({background:"red"});
//得到隐藏的數量
alert($("input:hidden").length);
});
</script>
</head>
<body>
<table border="1px solid">
<tr style="display:none">
<td>value1</td>
</tr>
<tr>
<td>value2</td>
</tr>
<tr style="display:none">
<td>value3</td>
</tr>
</table>
<form>
input1<input type="text" name="id1">
<input type="hidden" name="id2">
<input type="hidden" name="id3">
<input type="hidden" name="id1">
</form>
</body>
</html> 二：
<!DOCTYPE html>
<html>
<head>
<title>selectorDemo6.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//[attribute]選取擁有此屬性的元素
//$("div[id]").css({background:"red"});
//[attrribute=value]選取指定屬性的值為value的元素
//$("input[name=newsletter]").attr("checked",true);
//[attribute!=value]選取指定屬性的值不為value的元素
//$("input[name!=newsletter]").attr("checked",true);
//[attribute^=value]選取指定屬性的值以value開頭的元素
//$("input[name^=new]").attr("checked",true);
//[attribute$=value]選取指定屬性的值以value結尾的元素
// $("input[name$=ter]").attr("checked",true);
//[attribute*=value]選取指定屬性的值含有value結束的元素
//$("input[name*=tt]").attr("checked",true);
//[selector1][selector2]找到所有含id屬性的，并且name屬性以ter結尾
$("input[id][name$=ter]").attr("checked",true);
});
</script>
</head>
<body>
<div>
<p>hello</p>
</div>
<div id="test2">HH</div>
1<input type="checkbox" name="newsletter" value="Hot Fuzz" id="inp1"></br>
2<input type="checkbox" name="letter" value="Cold Fusion"></br>
3<input type="checkbox" name="news" value="Evil Palns" id="inp3"></br>
</body>
</html> 三：
<!DOCTYPE html>
<html>
<head>
<title>selectorDemo7.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//:nth-child(index/even/odd/equation)
//選擇ul下面的第一個li
//$("ul li:nth-child(1)").css({background:"red"});
//first-child
//選擇第一個ul
//$("ul:first-child").css({background:"red"});
//:last-child
//選擇第二 個ul
//$("ul:last-child").css({background:"red"});
//only-child
//選擇隻有一個後代的 個ul
$("li:only-child").css({background:"red"});
});
</script>
</head>
<body>
<ul>
<li>111111111</li>
<li>222222222</li>
<li>333333333</li>
</ul>
<ul>
<li>444</li>
<li>555</li>
</ul>
<ul>
<li>666</li>
</ul>
</body>
</html> 四：
<!DOCTYPE html>
<html>
<head>
<title>selectorDemo8.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//:enabled選取所有可用元素
//$("input:enabled").css({background:"red"});
//:disabled選取所有不可用的元素
//$("input:disabled").css({background:"green"});
//:checked選取所有被選中的元素(隻有opera支援checked選擇器)
$("input:checked").css({background:"green"});
//:selected
$("select>option:selected").css({background:"red"});
});
</script>
</head>
<body>
input1:<input name="11" disabled="disabled" value="aaa">
input2:<input name="11" value="bbb"><br>
input3:<input type="checkbox" checked="checked" name="11" value="11"><br>
input4:<input type="checkbox" ><br>
input5:<input type="checkbox" checked="checked" ><br>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
</select>
</body>
</html>