子元素選擇器、屬性選擇器、表單選擇器
阿新 • • 發佈：2018-12-25
子元素過濾選擇器
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
//選取子元素, 需要在選擇器前新增一個空格.
//選取每個class為one的div父元素下的第2個子元素
$("div.one :nth-child(2)").css("background" <body>
<input type="button" value="選取每個class為one的div父元素下的第2個子元素." id="btn1"/>
<input type="button" value="選取每個class為one的div父元素下的第一個子元素." id="btn2"/>
<input type="button" value="選取每個class為one的div父元素下的最後一個子元素." id="btn3"/>
<input type="button" value="如果class為one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素." id="btn4"/>
<br><br>
<div class="one" id="one">
id 為 one,class 為 one 的div
<div class="mini">class為mini</div>
</div>
<div class="one" id="two" title="test">
id為two,class為one,title為test的div
<div class="mini" title="other">class為mini,title為other</div>
<div class="mini" title="test">class為mini,title為test</div>
</div>
<div class="one">
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini" title="tesst">class為mini,title為tesst</div>
</div>
<div style="display:none;" class="none">style的display為"none"的div</div>
<div class="hide">class為"hide"的div</div>
<div>
包含input的type為"hidden"的div<input type="hidden" value="123456789" size="8">
</div>
<div id="mover">正在執行動畫的div元素.</div>
</body>
屬性過濾選擇器
<script type="text/javascript">
$(function(){
//選取含有 屬性title 的div元素.
$("#btn1").click(function(){
$("div[title]").css("background", "#ffbbaa");
});
//選取 屬性title值等於'test'的div元素
$("#btn2").click(function(){
$("div[title='test']").css("background", "#ffbbaa");
});
$("#btn3").click(function(){
//選取的元素中包含沒有 title 的 div 元素.
$("div[title!='test']").css("background", "#ffbbaa");
});
//選取 屬性title值 以'te'開始 的div元素
$("#btn4").click(function(){
$("div[title^='te']").css("background", "#ffbbaa");
});
//選取 屬性title值 以'est'結束 的div元素
$("#btn5").click(function(){
$("div[title$='est']").css("background", "#ffbbaa");
});
//選取 屬性title值 含有'es'的div元素
$("#btn6").click(function(){
$("div[title*='es']").css("background", "#ffbbaa");
});
//組合屬性選擇器,首先選取有屬性id的div元素，
//然後在結果中 選取屬性title值 含有'es'的 div 元素.
$("#btn7").click(function(){
$("div[id][title*='es']").css("background", "#ffbbaa");
});
//選取 含有 title 屬性值, 且title 屬性值不等於 test 的 div 元素
$("#btn8").click(function(){
$("div[title][title!='test']").css("background", "#ffbbaa");
});
$("#btn8").click(function(){
//val() 方法可以返回某一個表單元素的 value 屬性值.
alert($("input:hidden").val());
});
})
</script><body>
<input type="button" value="選取含有 屬性title 的div元素." id="btn1"/>
<input type="button" value="選取 屬性title值等於'test'的div元素." id="btn2"/>
<input type="button" value="選取 屬性title值不等於'test'的div元素(沒有屬性title的也將被選中)." id="btn3"/>
<input type="button" value="選取 屬性title值 以'te'開始 的div元素." id="btn4"/>
<input type="button" value="選取 屬性title值 以'est'結束 的div元素." id="btn5"/>
<input type="button" value="選取 屬性title值 含有'es'的div元素." id="btn6"/>
<input type="button" value="組合屬性選擇器,首先選取有屬性id的div元素，然後在結果中 選取屬性title值 含有'es'的 div 元素." id="btn7"/>
<input type="button" value="選取 含有 title 屬性值, 且title 屬性值不等於 test 的 div 元素." id="btn8"/>
<br><br>
<div class="one" id="one">
id 為 one,class 為 one 的div
<div class="mini">class為mini</div>
</div>
<div class="one" id="two" title="test">
id為two,class為one,title為test的div
<div class="mini" title="other">class為mini,title為other</div>
<div class="mini" title="test">class為mini,title為test</div>
</div>
<div class="one">
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini" title="tesst">class為mini,title為tesst</div>
</div>
<div style="display:none;" class="none">style的display為"none"的div</div>
<div class="hide">class為"hide"的div</div>
<div>
包含input的type為"hidden"的div<input type="hidden" value="123456789" size="8">
</div>
<div id="mover">正在執行動畫的div元素.</div>
</body>表單過濾選擇器
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//使所有的可用的單行文字框的 value 值變為 尚矽谷
alert($(":text:enabled").val());
$(":text:enabled").val("尚矽谷");
});
$("#btn2").click(function(){
$(":text:disabled").val("www.atguigu.com");
});
//獲取多選框選中的個數
$("#btn3").click(function(){
var num =
$(":checkbox[name='newsletter']:checked").length;
alert(num);
});
$("#btn4").click(function(){
$(":checkbox[name='newsletter']:checked").each(function(){
alert(this.value);
});
});
$("#btn5").click(function(){
//實際被選擇的不是 select, 而是 select 的 option 子節點
//所以要加一個 空格.
var len = $("select :selected").length
alert(len);
//因為 $("select :selected") 選擇的是一個數組
//當該陣列中有多個元素時, 通過 .val() 方法就只能獲取第一個被選擇的值了.
alert($("select :selected").val());
//jQuery 物件遍歷的方式使 each, 在 each 內部的 this 是正在
//得到的 DOM 物件, 而不是一個 jQuery 物件
$("select :selected").each(function(){
alert(this.value);
});
});
})
</script><body>
<h3>表單物件屬性過濾選擇器</h3>
<button id="btn1">對錶單內 可用input 賦值操作.</button>
<button id="btn2">對錶單內 不可用input 賦值操作.</button><br /><br />
<button id="btn3">獲取多選框選中的個數.</button>
<button id="btn4">獲取多選框選中的內容.</button><br /><br />
<button id="btn5">獲取下拉框選中的內容.</button><br /><br />
<form id="form1" action="#">
可用元素: <input name="add" value="可用文字框1"/><br>
不可用元素: <input name="email" disabled="true" value="不可用文字框"/><br>
可用元素: <input name="che" value="可用文字框2"/><br>
不可用元素: <input name="name" disabled="true" value="不可用文字框"/><br>
<br>
多選框: <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
下拉列表1: <br>
<select name="test" multiple="multiple" style="height: 100px">
<option>浙江</option>
<option selected="selected">遼寧</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br><br>
下拉列表2: <br>
<select name="test2">
<option>浙江</option>
<option>遼寧</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<textarea rows="" cols=""></textarea>
</form>
</body>