JQuery(二)
续...
选择器
一． 内容选择器:
1、:contains("") 匹配含有指定文本的元素对象集合
2、:empty 匹配空元素 没有子元素或没有文本的元素
3、:has(text) 匹配含有指定选择器所有匹配的元素的对象集合
$("#tbdy:has(.rdc)");获取tbdy中含有.rdc的tbdy的对象集合
4、:parent 匹配含有子元素或者文本的元素的对象集合
总结：在内容选择器中谁(A)匹配谁(B)那就是获取A对象的集合
案例演示：
<script>
$(function(){
/**获取td中含有10的td的对象集合*/
var $tds=$("td:contains('10')");
alert($tds.size()+"---------"+$tds.text());
/**获取tr中含有redarmy的tr对象的集合*/
var $trred=$("tr:contains('redarmy')");
alert($trred.size()+"---------"+$trred.text());
/**获取rdc中td的含有redarmy的td对象集合*/
var $rdctd=$(".rdc>td:contains('redarmy')");
alert($rdctd.size()+"---------"+$rdctd.text());
/**获取id为qw的tr对象中td的空元素*/
var $tdqw=$("#qw>td:empty");
alert($tdqw.size()+"---------"+$tdqw.text());
//获取tbody中含有rdc的tbody对象
var $tbdrdc=$("#tbdy:has(.rdc)");
alert($tbdrdc.size()+"---------"+$tbdrdc.text());
//获取tbody中含有rdc的tr对象集合
var $tbdtr=$("#tbdy>.rdc");
alert($tbdtr.size()+"---------"+$tbdtr.text());
//获取.rdc中含有子元素或者文本元素的(.rdc)tr的对象
var $rdc=$(".rdc:parent");
alert($rdc.size()+"---------"+$rdc.text()); //tr对象
});
</script>
二．其它选择器
结合案例介绍
:input 匹配textarea input select button 等的对象
:hidden 设置元素的不可见性
:visible 设置元素的可见性
:button 获取按钮的JQuery对象
:checkbox 获取复选框的JQuery对象
... ...
<script type="text/javascript">
$(function(){
/**不可见性的测试*/
var $hidden=$(":hidden");
/**可见性测试*/
var $vlis = $("div:visible");// 通过样式设计不可见！
/**表单选择器*/
// 1.button
var $buttons=$(":button");
/**遍历所有的button的value属性值*/
for(var i=0;i<$buttons.length;i++){
alert($($buttons[i]).attr("value")); /**注意DOM对象转换成Jquery对象 |Jquery对象转换成DOM对象*/
}
//获取btn的子元素为button按钮的input对象
var $inpbut=$("#btn>input:button");
//获取所有checkbox的复选框
var $chec=$(":checkbox");
//获取ckb中所有checkbox的复选框
var $ckbchbox=$("#ckb input:checkbox");
alert($ckbchbox.size()+"----"+$ckbchbox.text());
//获取所有的input select 的对象集合
var $inpselec=$("input:input");
alert($inpselec.size()+"----"+$inpselec.text());
//获取所有的checkedinput表单对象 不包含select中的option
//var $checinp=$("input:checked"); //方法一
var $checinp=$("input[checked='checked']");//利用[attribute value]
//获取所有复选框checkbox被选中的表单对象
var $checkedbox=$("input[type='checkbox']:checked");//根据获取input元素的type类型：状态
alert($checkedbox.size());
});
</script>