[align=center]浅谈JQuery选择器(二)[/align]
/**
内容选择器
1、:contains("") 匹配含有指定文本的元素对象集合td:contains("aaa");获取含有aaa的td的对象集合
2、:empty 匹配空元素 没有子元素或没有文本的元素
3、:has(text) 匹配含有指定选择器所有匹配的元素的对象集合$("#tbdy:has(.rdc)");获取tbdy中含有.rdc的tbdy的对象集合
4、:parent 匹配含有子元素或者文本的元素的对象集合
总结:在内容选择器中谁(A)匹配谁(B)那就是获取A对象的集合
*/
/**页面载入事件处理*/
$(function(){
/**获取td中含有10的td的对象集合*/
var $tds = $("td:contains('redarmy')");
/**输出此集合的长度*/
alert($tds.size()+"=========="+$tds.text());
/**获取tr中含有redarmy的tr对象的集合*/
var $rtds = $(".rdc:contains('redarmy')");//tr对象
/**输出此集合的长度*/
alert($rtds.text()+"-------"+$rtds.size());
/**获取rdc中td的含有redarmy的td对象集合*/
var $rtds1 = $(".rdc>td:contains('redarmy')");//td对象
alert($rtds1.size()+"===="+$rtds1.text());
/**获取id为qw的tr对象中td的空元素*/
var $etd = $("#qw>td:empty");
alert($etd.size()+"==="+$etd.html()); //html没有打印<td></td>
//获取tbody中含有rdc的tbody对象
var $tbdys = $("#tbdy:has(.rdc)");
alert($tbdys.html()+"------------"+$tbdys.size());
//获取tbody中含有rdc的tr对象集合
var $trs = $("#tbdy>.rdc");
alert($trs.html()+"------------"+$trs.size());
//获取.rdc中含有子元素或者文本元素的.rdc的对象
var $tdps = $(".rdc:parent"); //tr对象
alert($tdps.html()+"--------"+$tdps.text());
});
</script>
<!-- 引入jquery的js文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>
<script>
function test() {
/**测试设置属性值
attr("key",fn)*/
$("#attr>input").attr("value", function() {
return "redarmy";
});
alert("-------中介线-------");
/**设置属性及属性值 attr(key,value);*/
$("#attr>input").attr("value", "m_j");
//获取值
var name = $("#attr>input").attr("name");
alert(name);
//匹配元素中批量设置很多属性的最佳方式
/**attr(properties) 名/值 {}*/
$("#attr>input").attr( {
value : "x_l",
disabled : "disabled"
});
/**移除某个属性*/
$("#attr>input").removeAttr("disabled");
/**添加类名*/
$("#attr>input").addClass("ipt");
/**移除类名*/
$("#attr>input").removeClass("ipt");
alert("---------------------------执行之前观察效果");
/**如果存在(不存在)就删除(添加)一个类。
*/
$("#attr>input").toggleClass("ipt")
alert("---------------------------执行之后观察效果");
$("#attr").html('邮箱:<input name="name" type="text" />');
$("#attr").text("<u>Some</u> new text");
alert($("#single").val("Single2"));
}
$(function() {
/*如果是type =checkbox,radio,select val值代表的是checked,selected
type="text" val("")代表的是value的值*/
$("#nam").val("HelloWorld");
});
</script>
<style>
.ipt {
border-color: red;
}
</style>
/**
内容选择器
1、:contains("") 匹配含有指定文本的元素对象集合td:contains("aaa");获取含有aaa的td的对象集合
2、:empty 匹配空元素 没有子元素或没有文本的元素
3、:has(text) 匹配含有指定选择器所有匹配的元素的对象集合$("#tbdy:has(.rdc)");获取tbdy中含有.rdc的tbdy的对象集合
4、:parent 匹配含有子元素或者文本的元素的对象集合
总结:在内容选择器中谁(A)匹配谁(B)那就是获取A对象的集合
*/
/**页面载入事件处理*/
$(function(){
/**获取td中含有10的td的对象集合*/
var $tds = $("td:contains('redarmy')");
/**输出此集合的长度*/
alert($tds.size()+"=========="+$tds.text());
/**获取tr中含有redarmy的tr对象的集合*/
var $rtds = $(".rdc:contains('redarmy')");//tr对象
/**输出此集合的长度*/
alert($rtds.text()+"-------"+$rtds.size());
/**获取rdc中td的含有redarmy的td对象集合*/
var $rtds1 = $(".rdc>td:contains('redarmy')");//td对象
alert($rtds1.size()+"===="+$rtds1.text());
/**获取id为qw的tr对象中td的空元素*/
var $etd = $("#qw>td:empty");
alert($etd.size()+"==="+$etd.html()); //html没有打印<td></td>
//获取tbody中含有rdc的tbody对象
var $tbdys = $("#tbdy:has(.rdc)");
alert($tbdys.html()+"------------"+$tbdys.size());
//获取tbody中含有rdc的tr对象集合
var $trs = $("#tbdy>.rdc");
alert($trs.html()+"------------"+$trs.size());
//获取.rdc中含有子元素或者文本元素的.rdc的对象
var $tdps = $(".rdc:parent"); //tr对象
alert($tdps.html()+"--------"+$tdps.text());
});
</script>
<!-- 引入jquery的js文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>
<script>
function test() {
/**测试设置属性值
attr("key",fn)*/
$("#attr>input").attr("value", function() {
return "redarmy";
});
alert("-------中介线-------");
/**设置属性及属性值 attr(key,value);*/
$("#attr>input").attr("value", "m_j");
//获取值
var name = $("#attr>input").attr("name");
alert(name);
//匹配元素中批量设置很多属性的最佳方式
/**attr(properties) 名/值 {}*/
$("#attr>input").attr( {
value : "x_l",
disabled : "disabled"
});
/**移除某个属性*/
$("#attr>input").removeAttr("disabled");
/**添加类名*/
$("#attr>input").addClass("ipt");
/**移除类名*/
$("#attr>input").removeClass("ipt");
alert("---------------------------执行之前观察效果");
/**如果存在(不存在)就删除(添加)一个类。
*/
$("#attr>input").toggleClass("ipt")
alert("---------------------------执行之后观察效果");
$("#attr").html('邮箱:<input name="name" type="text" />');
$("#attr").text("<u>Some</u> new text");
alert($("#single").val("Single2"));
}
$(function() {
/*如果是type =checkbox,radio,select val值代表的是checked,selected
type="text" val("")代表的是value的值*/
$("#nam").val("HelloWorld");
});
</script>
<style>
.ipt {
border-color: red;
}
</style>