jQuery选择器
2013-04-22 07:55
190 查看
---------基本选择器--------------
<!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>
<style type="text/css">
.imgclass
{
width:200px; height:200px;
}
.imgclass1
{
width:210px; height:210px;
}
table tr td
{
width:300px; height:300px;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
//获取的是所有类型(tagname)为img的元素
//$('img').hide(3000);
//$('img').show(3000);
//获取的是所有class属性的值为“imgclass”的元素
//$('.imgclass').hide(3000);
//$('.imgclass').show(3000);
//获取文档中的所有元素
//$('*').hide(2000);
//$('*').css('background-color', 'Blue');
//$('#img1,#img3,#Button2').hide(2000);
//$("#img1,#img3,#Button2").show(2000);//一定是将所有id用一对''括起来，而不能每个id分别用引号括起来
//多个选择器既可以是id，也可以是id，tagname和classname的混合体
//$('#img1,#img3,input').hide(2000);
//$("#img1,#img3,input").show(2000);
})
//改变图片样式
$('#Button2').click(function () {
$('#img2').removeClass();
$('#img2').addClass('imgclass1');
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
<img id="img1" src="images/1.jpg" class="imgclass" />
</td>
<td>
<img id="img2" src="images/2.jpg" class="imgclass" />
</td>
</tr>
<tr>
<td>
<img id="img3" src="images/3.jpg" class="imgclass" />
</td>
<td>
<img id="img4" src="images/4.jpg" class="imgclass" />
</td>
</tr>
</table>
<input id="Button1" type="button" value="玩儿" /><br />
<input id="Button2" type="button" value="改变控件样式" /><br />
</body>
</html>
----层次选择器--------
<!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>
<style type="text/css">
.imgclass
{
width: 100px;
height: 100px;
}
div
{
width: 250px;
height: 250px;
background-color: #eee;
border: solid 2px Blue;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
//$('#divFirst img').hide(2000); //获取的是id为divfirst的层中的所有tagname为img的元素，不管这些元素是否还嵌套在别的元素中
//$('#divFirst span img').hide(2000); //获取的是id为divfirst的层中的所有span子元素中的img元素,需要注意的是这个span子元素可以是divFirst的儿子或者孙子
// $('#divFirst>span img').hide(2000); ////获取的是id为divFirst的层中的第一级span元素中的所有img元素
//$('#divFirst+div img').hide(2000); //获取的是id为divFirst的层后面的同级的第一个div元素，且此div必须紧随其后，如果中间有别的元素隔开，则不能获取。
//$('#divFirst').next().hide(2000); //获取的是id为divfirst的层后面的第一个同级元素，不管是什么类型
//$('#divFirst~div img').hide(2000); //获取的divfirst后边所有同级别的，且类型为div里边的所有img元素,即隐藏第二级的
$('#divFirst').nextAll().hide(2000); //获取的是divfirst后变的所有同级元素，不管是什么类型(类型不确定)
})
})
</script>
</head>
<body>
<input id="Button1" type="button" value="层次选择器" />
<div id="divFirst">
<span>第一层风景<a href="#">
<img alt="" src="images/1.jpg" class="imgclass" /></a> </span>
<div>
<span><img src="images/2.jpg" class="imgclass" /></span></div>
</div>
<img id="img6" src="images/5.jpg" class="imgclass" />
<div>
第二层<img id="img3" src="images/3.jpg" class="imgclass" />
</div>
<div>
第三层<img id="img4" src="images/4.jpg" class="imgclass" />
</div>
<img id="img5" src="images/6.jpg" class="imgclass" />
</body>
</html>
----表单选择器---
<!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>
<style type="text/css">
#Select1
{
width: 144px;
}
#TextArea1
{
height: 124px;
width: 250px;
}
.div{ border:solid 1px #eee; background-color:Aqua;}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//$('#form1 div').html($('#form1 :input').length);
//$('#form1 :password').css('background-color','red');
//$('#form1 :text').css('display','none');
//$('#form1 :input').css('display', 'none');
//$('#form1 :radio').css('display', 'none');
//$('#form1 :checkbox').css('display', 'none');
//$('#form1 :submit').css('display','none');
//$('#form1 :reset').css('display', 'none');
//$('#form1 :image').css('display', 'none');
// $('#form1 :file').css('display', 'none');
})
</script>
</head>
<body>
<form id="form1" action="简单过滤.aspx">
<h1>
注册用户</h1>
<p>
用户名<input id="Text1" type="text" /></p>
<p>
密码<input id="Password1" type="password" /></p>
<p>
技术<select id="Select1" name="D1" multiple="multiple">
<option value="0">javascript</option>
<option value="1">sql server</option>
<option value="2">c#</option>
</select></p>
<p>
学历:<input id="Radio1" checked="checked" name="R1" type="radio" value="V1" />大专<input
id="Radio2" checked="checked" name="R1" type="radio" value="V1" />本科<input id="Radio3"
checked="checked" name="R1" type="radio" value="V1" />研究生</p>
<p>
爱好:<input id="Checkbox1" type="checkbox" />爬山<input id="Checkbox2" type="checkbox" />游泳<input
id="Checkbox3" type="checkbox" />踢球<input id="Checkbox4" type="checkbox" />玩</p>
<p>
验证码:<input type="image" src="images/1.jpg" style="width:80px; height:80px" />
<p>
个人简介:</p>
<p>
<textarea id="TextArea1" name="S1" rows="3"></textarea></p>
<p>
上传头像:<input id="File1" type="file" /><input id="Button1" type="button" value="上传" /></p>
<p>
<input id="Submit1" type="submit" value="注册" /><input id="Reset1" type="reset" value="重置" /></p>
<div id="divShow">
</div>
</form>
</body>
</html>
-------简单过滤选择器----------
<!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>
<style type="text/css">
.imgclass
{
width: 200px;
height: 200px;
}
.imgclass1
{
width: 220px;
height: 220px;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
//$('#img1').next().next().next().hide(2000);//虽然很弱智，但是能用。
//$('img:eq(1)').hide(2000);//获取img集合中的第二个元素，即下表为1的元素
//$('img:gt(0)').hide(2000); //获取img集合中下表大于0的所有元素，即下表为1的元素
//$('img:lt(3)').hide(2000);
//$('img:even').hide(2000); //获取img集合中所有下表为偶数的元素
//$('img:odd').hide(2000); //获取img集合中所有下表为偶数的元素
/*$('img:eq(0)').hide(2000);
$('img:first').hide(2000);
$('img').first().hide(2000);*/
//获取img元素集合中的第一个元素的三种方式
/*$('img:not(#img1)').hide(2000);
$('img:not(.imgclass1)').hide(2000);*/
//not后边的元素不能使索引，可以是元素id或者classname
$('p,a,input,img:not(.imgclass1)').hide(2000); //not前面的类型可以不止一个，但是要排除的元素的类型一定要和:not紧挨着
})
})
</script>
</head>
<body>
<img id="img1" src="images/1.jpg" class="imgclass1" />
<img src="images/2.jpg" class="imgclass" />
<img src="images/3.jpg" class="imgclass" />
<img src="images/4.jpg" class="imgclass" />
<br />
<a href="#">百度</a>
<p>大家演讲不要念稿，请说普通话</p>
<input id="Button1" type="button" value="玩儿" /><br />
</body>
</html>
------内容过滤选择器---------
<!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>
<style type="text/css">
div{ float:left; border:solid 1px #ccc; width:65px; height:65px; }
span{ float:left; border:solid 1px #ccc; width:45px; height:45px; background-color:#eee;}
.classadd{ background-color:Red;}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () {
$('#btn').click(function () {
//为div元素中所有文本包括A的元素添加样式，包括嵌套元素
//$('div:contains(A)').addClass('classadd');
//为div元素中所有不包括子元素或者文本的元素添加样式
//$('div:empty').addClass('classadd');
//为div元素中所有包含span元素的元素设置样式，不包含span元素
//$('div:has(span)').addClass('classadd');
//为所有包含子元素或者文本的元素设置样式
$('div:parent').addClass('classadd');
})
})
</script>
</head>
<body>
<form id="form1" >
<div>ABCD</div>
<div><span></span></div>
<div>EACH</div>
<div></div>
<div><div>CAD</div></div>
<div><span></span></div>
<input type="button" id="btn" value="点我" />
</form>
</body>
</html>
----属性过滤选择器----
<!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>
<style type="text/css">
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
//为所有具有id属性的元素设置样式,动画效果
//$('div[title]').hide(3000);
//$('div[title=t1]').hide(3000);
//$('div[title!=t1]').hide(3000);
// //属性值以t开头
//$('div[title^=t]').hide(3000
//$('div[title$=1]').hide(3000);
//$('div[title*=t]').hide(3000);
// //id值以d开始，title值以3结束
$('div[id^=d][title$=4]').hide(3000);
})
})
</script>
</head>
<body>
<div title="t1">第一层
</div>
<div id="div2" title="t2">第二层
</div>
<div id="div3" title="t3">第三层
</div>
<div id="div4" title="t4">第四层
</div>
<input id="Button1" type="button" value="click" />
</body>
</html>
-----子元素过滤选择器------
<!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>
<style type="text/css">
ul{ list-style-type:none; padding:0px;}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//$('li:eq(0)').css('background-color','Blue');
//$('li:first-child').css('background-color', 'Blue')
//$('li:last-child').css('background-color', 'Blue')
$('li:nth-child(2)').css('background-color', 'Blue')//从1开始，不是0
// $('li:only-child').css('background-color', 'Blue')
})
})
</script>
</head>
<body>
<ul>
<li>大师兄，师傅让妖怪抓走了</li>
<li>二师兄，师傅让妖怪抓走了</li>
<li>大师兄，二师兄，师傅让妖怪抓走了</li>
<li>师傅，大师兄回来救我们的</li>
</ul>
<ul>
<li>大师兄，咱们把家当分了吧</li>
<li>沙师弟，咱们把家当分了吧</li>
<li>大师兄，二师兄，咱们把家当分了吧</li>
<li>师傅，大师兄，二师兄把家当分了</li>
</ul>
<ul>
<li>悟空，去弄些斋饭来</li>
<li>沙僧，去弄些斋饭来</li>
<li>八戒，去弄些斋饭来</li>
</ul>
<ul>
<li>沙僧语录:大师兄，师傅让妖怪抓走了;</li></ul>
<input type="button" id="btn" value="click" />
</body>
</html>
------选择器综合练习 导航条-------
<!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>
<style type="text/css">
body{ font-size:13px;}
#divFrame{ border:1px solid #666; width:300px; overflow:hidden}
#divFrame .divHead{ background-color:#eee; padding:8px; height:18px; cursor:hand;}
#divFrame .divHead h3{ padding:0px; margin:0px; float:left}
#divFrame .divHead span{ float:right; margin-top:3px;}
#divFrame .divContent{ padding:8px}
#divFrame .divContent ul{ list-style-type:none; margin:0px; padding:0px}
#divFrame .divContent ul li{ float:left; width:95px; height:23px; line-height:23px}
#divFrame .divBot{ float:right; padding-top:5px; padding-bottom:5px}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.divHead').click(function () {
if ($('.divContent').is(':visible')) {
$('.divHead span').html('展开');
$('.divContent').hide(3000);
}
else {
$('.divHead span').html('挂起');
$('.divContent').show(3000);
}
});
$('.divBot>a').click(function () {
if ($('.divBot>a').text() == '简化') {
$('ul li:gt(4):not(:last)').hide(3000);
$('.divBot>a').text('更多');
}
else {
$('ul li:gt(4):not(:last)').show(3000).css('background-color', '#eee');
$('.divBot>a').text('简化');
}
});
});
</script>
</head>
<body>
<div id="divFrame">
<div class="divHead"><h3>图书分类</h3>
<span>挂起</span>
</div>
<div class="divContent">
<ul>
<li><a href="#">小说（1100）</a></li>
<li><a href="#">文艺（230）</a></li>
<li><a href="#">青春（1430）</a></li>
<li><a href="#">少儿（1560）</a></li>
<li><a href="#">生活（870）</a></li>
<li><a href="#">社科（1460）</a></li>
<li><a href="#">管理（1450）</a></li>
<li><a href="#">计算机（1780）</a></li>
<li><a href="#">教育（930）</a></li>
<li><a href="#">工具书（3450）</a></li>
<li><a href="#">引进版（980）</a></li>
<li><a href="#">其他类（3230）</a></li>
</ul>
</div>
<div class="divBot">
<a href="#">简化</a>
</div>
</div>
</body>
</html>
<!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>
<style type="text/css">
.imgclass
{
width:200px; height:200px;
}
.imgclass1
{
width:210px; height:210px;
}
table tr td
{
width:300px; height:300px;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
//获取的是所有类型(tagname)为img的元素
//$('img').hide(3000);
//$('img').show(3000);
//获取的是所有class属性的值为“imgclass”的元素
//$('.imgclass').hide(3000);
//$('.imgclass').show(3000);
//获取文档中的所有元素
//$('*').hide(2000);
//$('*').css('background-color', 'Blue');
//$('#img1,#img3,#Button2').hide(2000);
//$("#img1,#img3,#Button2").show(2000);//一定是将所有id用一对''括起来，而不能每个id分别用引号括起来
//多个选择器既可以是id，也可以是id，tagname和classname的混合体
//$('#img1,#img3,input').hide(2000);
//$("#img1,#img3,input").show(2000);
})
//改变图片样式
$('#Button2').click(function () {
$('#img2').removeClass();
$('#img2').addClass('imgclass1');
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
<img id="img1" src="images/1.jpg" class="imgclass" />
</td>
<td>
<img id="img2" src="images/2.jpg" class="imgclass" />
</td>
</tr>
<tr>
<td>
<img id="img3" src="images/3.jpg" class="imgclass" />
</td>
<td>
<img id="img4" src="images/4.jpg" class="imgclass" />
</td>
</tr>
</table>
<input id="Button1" type="button" value="玩儿" /><br />
<input id="Button2" type="button" value="改变控件样式" /><br />
</body>
</html>
----层次选择器--------
<!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>
<style type="text/css">
.imgclass
{
width: 100px;
height: 100px;
}
div
{
width: 250px;
height: 250px;
background-color: #eee;
border: solid 2px Blue;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
//$('#divFirst img').hide(2000); //获取的是id为divfirst的层中的所有tagname为img的元素，不管这些元素是否还嵌套在别的元素中
//$('#divFirst span img').hide(2000); //获取的是id为divfirst的层中的所有span子元素中的img元素,需要注意的是这个span子元素可以是divFirst的儿子或者孙子
// $('#divFirst>span img').hide(2000); ////获取的是id为divFirst的层中的第一级span元素中的所有img元素
//$('#divFirst+div img').hide(2000); //获取的是id为divFirst的层后面的同级的第一个div元素，且此div必须紧随其后，如果中间有别的元素隔开，则不能获取。
//$('#divFirst').next().hide(2000); //获取的是id为divfirst的层后面的第一个同级元素，不管是什么类型
//$('#divFirst~div img').hide(2000); //获取的divfirst后边所有同级别的，且类型为div里边的所有img元素,即隐藏第二级的
$('#divFirst').nextAll().hide(2000); //获取的是divfirst后变的所有同级元素，不管是什么类型(类型不确定)
})
})
</script>
</head>
<body>
<input id="Button1" type="button" value="层次选择器" />
<div id="divFirst">
<span>第一层风景<a href="#">
<img alt="" src="images/1.jpg" class="imgclass" /></a> </span>
<div>
<span><img src="images/2.jpg" class="imgclass" /></span></div>
</div>
<img id="img6" src="images/5.jpg" class="imgclass" />
<div>
第二层<img id="img3" src="images/3.jpg" class="imgclass" />
</div>
<div>
第三层<img id="img4" src="images/4.jpg" class="imgclass" />
</div>
<img id="img5" src="images/6.jpg" class="imgclass" />
</body>
</html>
----表单选择器---
<!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>
<style type="text/css">
#Select1
{
width: 144px;
}
#TextArea1
{
height: 124px;
width: 250px;
}
.div{ border:solid 1px #eee; background-color:Aqua;}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//$('#form1 div').html($('#form1 :input').length);
//$('#form1 :password').css('background-color','red');
//$('#form1 :text').css('display','none');
//$('#form1 :input').css('display', 'none');
//$('#form1 :radio').css('display', 'none');
//$('#form1 :checkbox').css('display', 'none');
//$('#form1 :submit').css('display','none');
//$('#form1 :reset').css('display', 'none');
//$('#form1 :image').css('display', 'none');
// $('#form1 :file').css('display', 'none');
})
</script>
</head>
<body>
<form id="form1" action="简单过滤.aspx">
<h1>
注册用户</h1>
<p>
用户名<input id="Text1" type="text" /></p>
<p>
密码<input id="Password1" type="password" /></p>
<p>
技术<select id="Select1" name="D1" multiple="multiple">
<option value="0">javascript</option>
<option value="1">sql server</option>
<option value="2">c#</option>
</select></p>
<p>
学历:<input id="Radio1" checked="checked" name="R1" type="radio" value="V1" />大专<input
id="Radio2" checked="checked" name="R1" type="radio" value="V1" />本科<input id="Radio3"
checked="checked" name="R1" type="radio" value="V1" />研究生</p>
<p>
爱好:<input id="Checkbox1" type="checkbox" />爬山<input id="Checkbox2" type="checkbox" />游泳<input
id="Checkbox3" type="checkbox" />踢球<input id="Checkbox4" type="checkbox" />玩</p>
<p>
验证码:<input type="image" src="images/1.jpg" style="width:80px; height:80px" />
<p>
个人简介:</p>
<p>
<textarea id="TextArea1" name="S1" rows="3"></textarea></p>
<p>
上传头像:<input id="File1" type="file" /><input id="Button1" type="button" value="上传" /></p>
<p>
<input id="Submit1" type="submit" value="注册" /><input id="Reset1" type="reset" value="重置" /></p>
<div id="divShow">
</div>
</form>
</body>
</html>
-------简单过滤选择器----------
<!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>
<style type="text/css">
.imgclass
{
width: 200px;
height: 200px;
}
.imgclass1
{
width: 220px;
height: 220px;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
//$('#img1').next().next().next().hide(2000);//虽然很弱智，但是能用。
//$('img:eq(1)').hide(2000);//获取img集合中的第二个元素，即下表为1的元素
//$('img:gt(0)').hide(2000); //获取img集合中下表大于0的所有元素，即下表为1的元素
//$('img:lt(3)').hide(2000);
//$('img:even').hide(2000); //获取img集合中所有下表为偶数的元素
//$('img:odd').hide(2000); //获取img集合中所有下表为偶数的元素
/*$('img:eq(0)').hide(2000);
$('img:first').hide(2000);
$('img').first().hide(2000);*/
//获取img元素集合中的第一个元素的三种方式
/*$('img:not(#img1)').hide(2000);
$('img:not(.imgclass1)').hide(2000);*/
//not后边的元素不能使索引，可以是元素id或者classname
$('p,a,input,img:not(.imgclass1)').hide(2000); //not前面的类型可以不止一个，但是要排除的元素的类型一定要和:not紧挨着
})
})
</script>
</head>
<body>
<img id="img1" src="images/1.jpg" class="imgclass1" />
<img src="images/2.jpg" class="imgclass" />
<img src="images/3.jpg" class="imgclass" />
<img src="images/4.jpg" class="imgclass" />
<br />
<a href="#">百度</a>
<p>大家演讲不要念稿，请说普通话</p>
<input id="Button1" type="button" value="玩儿" /><br />
</body>
</html>
------内容过滤选择器---------
<!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>
<style type="text/css">
div{ float:left; border:solid 1px #ccc; width:65px; height:65px; }
span{ float:left; border:solid 1px #ccc; width:45px; height:45px; background-color:#eee;}
.classadd{ background-color:Red;}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () {
$('#btn').click(function () {
//为div元素中所有文本包括A的元素添加样式，包括嵌套元素
//$('div:contains(A)').addClass('classadd');
//为div元素中所有不包括子元素或者文本的元素添加样式
//$('div:empty').addClass('classadd');
//为div元素中所有包含span元素的元素设置样式，不包含span元素
//$('div:has(span)').addClass('classadd');
//为所有包含子元素或者文本的元素设置样式
$('div:parent').addClass('classadd');
})
})
</script>
</head>
<body>
<form id="form1" >
<div>ABCD</div>
<div><span></span></div>
<div>EACH</div>
<div></div>
<div><div>CAD</div></div>
<div><span></span></div>
<input type="button" id="btn" value="点我" />
</form>
</body>
</html>
----属性过滤选择器----
<!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>
<style type="text/css">
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
//为所有具有id属性的元素设置样式,动画效果
//$('div[title]').hide(3000);
//$('div[title=t1]').hide(3000);
//$('div[title!=t1]').hide(3000);
// //属性值以t开头
//$('div[title^=t]').hide(3000
//$('div[title$=1]').hide(3000);
//$('div[title*=t]').hide(3000);
// //id值以d开始，title值以3结束
$('div[id^=d][title$=4]').hide(3000);
})
})
</script>
</head>
<body>
<div title="t1">第一层
</div>
<div id="div2" title="t2">第二层
</div>
<div id="div3" title="t3">第三层
</div>
<div id="div4" title="t4">第四层
</div>
<input id="Button1" type="button" value="click" />
</body>
</html>
-----子元素过滤选择器------
<!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>
<style type="text/css">
ul{ list-style-type:none; padding:0px;}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//$('li:eq(0)').css('background-color','Blue');
//$('li:first-child').css('background-color', 'Blue')
//$('li:last-child').css('background-color', 'Blue')
$('li:nth-child(2)').css('background-color', 'Blue')//从1开始，不是0
// $('li:only-child').css('background-color', 'Blue')
})
})
</script>
</head>
<body>
<ul>
<li>大师兄，师傅让妖怪抓走了</li>
<li>二师兄，师傅让妖怪抓走了</li>
<li>大师兄，二师兄，师傅让妖怪抓走了</li>
<li>师傅，大师兄回来救我们的</li>
</ul>
<ul>
<li>大师兄，咱们把家当分了吧</li>
<li>沙师弟，咱们把家当分了吧</li>
<li>大师兄，二师兄，咱们把家当分了吧</li>
<li>师傅，大师兄，二师兄把家当分了</li>
</ul>
<ul>
<li>悟空，去弄些斋饭来</li>
<li>沙僧，去弄些斋饭来</li>
<li>八戒，去弄些斋饭来</li>
</ul>
<ul>
<li>沙僧语录:大师兄，师傅让妖怪抓走了;</li></ul>
<input type="button" id="btn" value="click" />
</body>
</html>
------选择器综合练习 导航条-------
<!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>
<style type="text/css">
body{ font-size:13px;}
#divFrame{ border:1px solid #666; width:300px; overflow:hidden}
#divFrame .divHead{ background-color:#eee; padding:8px; height:18px; cursor:hand;}
#divFrame .divHead h3{ padding:0px; margin:0px; float:left}
#divFrame .divHead span{ float:right; margin-top:3px;}
#divFrame .divContent{ padding:8px}
#divFrame .divContent ul{ list-style-type:none; margin:0px; padding:0px}
#divFrame .divContent ul li{ float:left; width:95px; height:23px; line-height:23px}
#divFrame .divBot{ float:right; padding-top:5px; padding-bottom:5px}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.divHead').click(function () {
if ($('.divContent').is(':visible')) {
$('.divHead span').html('展开');
$('.divContent').hide(3000);
}
else {
$('.divHead span').html('挂起');
$('.divContent').show(3000);
}
});
$('.divBot>a').click(function () {
if ($('.divBot>a').text() == '简化') {
$('ul li:gt(4):not(:last)').hide(3000);
$('.divBot>a').text('更多');
}
else {
$('ul li:gt(4):not(:last)').show(3000).css('background-color', '#eee');
$('.divBot>a').text('简化');
}
});
});
</script>
</head>
<body>
<div id="divFrame">
<div class="divHead"><h3>图书分类</h3>
<span>挂起</span>
</div>
<div class="divContent">
<ul>
<li><a href="#">小说（1100）</a></li>
<li><a href="#">文艺（230）</a></li>
<li><a href="#">青春（1430）</a></li>
<li><a href="#">少儿（1560）</a></li>
<li><a href="#">生活（870）</a></li>
<li><a href="#">社科（1460）</a></li>
<li><a href="#">管理（1450）</a></li>
<li><a href="#">计算机（1780）</a></li>
<li><a href="#">教育（930）</a></li>
<li><a href="#">工具书（3450）</a></li>
<li><a href="#">引进版（980）</a></li>
<li><a href="#">其他类（3230）</a></li>
</ul>
</div>
<div class="divBot">
<a href="#">简化</a>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery选择器实现传入变量
- jquery简单选择器
- jQuery选择器大全(48个代码片段+21幅图演示)
- jQuery 选择器和过滤器
- jQuery选择器之表单对象属性过滤选择器Demo
- Java乔晓松-jQuery过滤选择器
- jQuery选择器
- jQuery 选择器实例
- 【JQuery】:hidden过滤选择器
- jQuery 选择器
- jquery选择器属性和方法的操作
- jQuery中:last选择器用法实例
- boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
- jquery样式之选择器
- jQuery 组合选择器
- jQuery选择器的一些使用心得
- 2018/2/16 jquery 基本选择器
- jQuery 选择器
- Jquery选择器的基本筛选选择器
- jQuery选择器