子元素选择器、属性选择器、表单选择器
2017-03-14 19:55
369 查看
子元素过滤选择器
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
//选取子元素, 需要在选择器前添加一个空格.
//选取每个class为one的div父元素下的第2个子元素
$("div.one :nth-child(2)").css("background", "#ffbbaa");
});
//选取每个class为one的div父元素下的第一个子元素.
$("#btn2").click(function(){
$("div.one :first-child").css("background", "#ffbbaa");
});
//选取每个class为one的div父元素下的最后一个子元
$("#btn3").click(function(){
$("div.one :last-child").css("background", "#ffbbaa");
});
//如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$("#btn4").click(function(){
$("div.one :only-child").css("background", "#ffbbaa");
});
});
</script><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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery选择器之表单选择\表单对象属性
- 黑马程序员_学习日记63_710jQuery2（属性选择器、表单选择器、操作Dom节点、事件、动画）
- jquery选择器 【radio checkbox】选择 【查找div下的表单具有某种属性的控件 ：注意是div下】
- JQuery 表单快速选择器，表单属性选择器
- css学习3——子元素选择器，交集选择器，并集选择器，兄弟选择器，序选择器
- 属性选择器设置表单样式
- （3）选择元素——（10）表单选择器（form selector）
- [第五季]13.后代选择器和属性选择器
- 表单对象属性过滤选择器
- CSS选择器的组合选择器之后代选择器和子元素选择器
- JQUERY1.9学习笔记 之属性选择器(一) 前缀选择器
- css学习3——子元素选择器，交集选择器，并集选择器，兄弟选择器，序选择器
- jquery表单对象属性过滤选择器
- CSS学习（二）-结构伪类选择器、属性选择器
- jQuery选择器之过滤选择器之表单对象属性过滤选择器
- JQUERY1.9学习笔记 之属性选择器(二) 包含选择器
- CSS3 选择器——属性选择器
- 测试css2.1选择器IE6/7/8支持情况,属性选择器/子元素/相邻
- CSS3的新增选择器示例-属性选择器
- jQuery选择器之属性选择器Demo