jQuery选择器--总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script src="javsscript/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// jQuery 本身的扩展方法
jQuery.extend({
Mesg: function(message) {
alert(message);
},
mesgto: function(messge) {
alert(messge);
}
});
jQuery.Mesg("hellow world");
// jQuery 所选对象扩展方法
jQuery.fn.extend({
ShowHtml: function(showhtml) {
jQuery(this).html(showhtml);
}
});
jQuery("#div1").ShowHtml("你好");
//--------基本选择器
$("#div1").css({ background: 'red'});//id选择器
$(".cub").css({background:'blue'}); //类选择器
$("div").css({background:'gray'});//元素选择器
$("form *").css({background:'red'});//*选择器
$("div,p").css({ background: 'gray' }); //并列选择器
//--------层次选择器
$("div>span").css("color", "red"); //选取div下的第一代span元素
$("div>p").next("span").css({ color: "red" }); //选取下一个span兄弟元素
$(".cub").nextAll("span").css("color", "red"); //选取class为cub之后的所有span兄弟元素
//--------过滤选择器
$("span:first").css("color", "red");
$("span:last").css("color", "red");
$("span:not(.cub)").css("color", "red");//选取span元素中没有使用cub类的元素
$("tr:even").css("color", "red");//偶数行
$("tr:odd").css("color", "blue");//奇数行
$("tr:eq(2)").css("color", "blue");//等于2
$('ul li:gt(2)').css('color', '#FF0000');//大于2
$('ul li:lt(2)').css('color', '#0000FF');//小于2
$(':header').css('background', '#EFEFEF'); //取H1~H6标题元素
//----------属性过滤
$('a[title]').css('text-decoration', 'none'); //取拥有attribute属性的元素
$('a[class=item]').css('color', '#FF99CC'); //取attribute属性值等于value的元素
$('a[class!=item]').css('color', '#FF6600'); //取attribute属性值不等于value的元素
var len1 = $('div:first-child').length;
var len2 = $('div:last-child').length;
$('div:only-child').css('border', '1px solid #FF0000').css('width', '200px');
// 偶数行背景红色
$('tr:nth-child(even)').css('background', '#FF0000');
// 奇数行背景蓝色
$('tr:nth-child(odd)').css('background', '#0000FF');
//--------表单对象属性过滤选择器
$(':enabled').css('border', '1px solid #FF0000');
$(':disabled').css('border', '1px solid #0000FF');
$(':checked').css('background', '#FF0000').each(function() {
alert($(this).val());
});
alert($(':selected').val()); //取下拉列表被选中的元素
//--------表单选择器
//取单行文本框元素）和:password（取密码框元素）
$(':text').css('border', '1px solid #FF0000');
$(':password').css('border', '1px solid #0000FF');
$(':radio').each(function() {
alert($(this).val());
});
$(':checkbox').each(function() {
alert($(this).val());
});
:submit选择器和属性选择器$('input[type=submit]')等同
6. :reset（取重置按钮元素）
:reset选择器和属性选择器$('input[type=reset]')等同
7. :button（取按钮元素）
:button选择器和属性选择器$('input[type=button]')等同
8. :file（取上传域元素）
:file选择器和属性选择器$('input[type=file]')等同
9. :hidden（取不可见元素）
:hidden选择器和属性选择器$('input[type=hidden]')等同
$(":radio").each(function() {
if ($(this).attr("checked")) {
alert($(this).val());
}
});
// $(":checkbox").each(function() {
// alert($(this).val());
// });
//-------全选
$("#selectall").click(function() {
$(":checkbox").each(function() {
$(this).attr({ checked: "checked" });
});
});
//-----------获取选中的值
$("#get").click(function() {
$(":checkbox").each(function() {
if ($(this).attr("checked")) {
alert($(this).val());
}
});
});
//---------------------------反选
$("#fanxuan").click(function() {
$(":checkbox").each(function() {
if ($(this).attr("checked")) {
$(this).attr({ checked: false });
} else {
$(this).attr({ checked: true });
}
});
});
})
</script>
<style type="text/css">
.cub
{
height:100px;
margin-top:10px;
}
</style>
</head>
<body>
<form action="" method="get">
<input type="radio" name="radio" checked="checked" value="外企"/>外企
<input type="radio" name="radio" value="国企"/>国企
<input type="radio" name="radio" value="民企"/>民企
您的兴趣爱好：
<input type="checkbox" value="游戏"/>游泳
<input type="checkbox" value="看书"/>看书
<input type="checkbox" value="打篮球"/>打篮球
<input type="checkbox" value="电脑游戏"/>电脑游戏
<input type="button" />
</form>
</body>
</html>