jQuery选择器详解-优快云博客

jquery选择器有四种：

1：基本选择器：

$(function () {

$('#Button1').click(function () {
//2:根具类型('img')标签名
// $('img').hide(2000);
// $('img').show(2000);
//3:根据class获取('.classname')
// $('.imgclass').hide(2000);
// $('.imgclass').show(2000);
//4:('*')所有
// $('*').hide(2000);
// $('*').show(2000);
//5:多重匹配
$('input,#img1').hide(2000);
$('input,#img1').show(2000);

})
//改变2的样式
$('#Button2').click(function () {
//改变2的样式
// $('#img2').removeClass();
// $('#img2').addClass('imgclass1');
//给图片2加样式
$('#img2').addClass('imgclass1'); //这样img2就有了两个样式

})

})

</script>
</head>
<body>

2：多层次选择器：

$(function () {
$('#Button1').click(function () {
// $('#divfirst img').hide(2000); //1:两个条件一id为divfirst二：tagname为img.结果就是img1和div中的img2都变了
//只让divfirst中第一个span中的img变另一个div中的不变
// $('#divfirst span img').hide(2000);//这样和效果1一样
// $('#divfirst>span img').hide(2000); //这样‘>’代表id为divfirst下一集中的img也就是img1，然而img2不是divfirst下一集中的img
//获取后面与divfirst同级的第一个元素（+）中间不能间隔任何东西，限制为div类型
//$('#divfirst+div img').hide(2000); //
//获取后面与divfirst同级的第一个元素不限类型
//$('#divfirst').next().hide(2000);
//获取后面所有同级别
//$('#divfirst~div img').hide(1000);
// $('#divfirst~img').hide(1000);//同一级的不限定类型
//获取后面所有
//$('#divfirst').nextAll().hide(1000);
})

})

3：简单过滤选择器：

//增加最后一个元素的样式
//$('li:last').addClass('classadd');

//增加第二个元素的样式
//$('li:first').next().addClass('classadd');

//增加除指定类别外的所有选择器的类别，参数为样式名称
//$('li:not(.class2)').addClass('classadd');
//增加除指定类别外的所有选择器的类别，参数为元素id
//$('li:not(#myid)').addClass('classadd');

//增加所有索引为偶数的元素的样式,记住索引值从0开始哟
//$('li:even').addClass('classadd');

//增加所有索引为奇数的元素的样式,记住索引值从0开始哟
//$('li:odd').addClass('classadd');

//增加指定索引处的样式
//$('li:eq(1)').addClass('classadd');

//增加大于指定索引处的项目的值
//$('li:gt(1)').addClass('classadd');

//增加小于指定索引处的项目的值
//$('li:lt(3)').addClass('classadd');

//增加标题元素的样式
$(':header').addClass('classadd');
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>林氏名人</h1>
<ul>
<li class="class1">林心如</li>
<li class="class1" id="myid">林志玲</li>
<li class="class2">林志颖</li>
<li class="class1">林黛玉</li>
</ul>
</div>
<input type="button" id="btn" value="点我" />
</form>
</body>