脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQuery学习(2)选择器(1)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
通过标签名，属性名或内容对DOM元素进行选择，没有浏览器的兼容问题
选择器类型：
基本选择器
层次选择器
过滤选择器
表单选择器
基本选择器：jquery中使用最频繁的选择器
使用JQuery：
$('#myp').css('background-color','red');
使用js:
document.getElementById(';myp').style.backgroundColor = 'red';
按照JQuery的习惯，下面的代码应该改成第二种方式
element:根据给定的元素名称匹配所有元素，也就是<后边的元素名称
$(function () {
$('#but').click(function () {
//$('#a1').css('background-color', 'blue');
$('a').css('background-color','red');
})
})
根据类型匹配元素：若多个元素使用的类型相同，则选择多个元素
层次选择器
$('#pMid').css('display', 'block')：设置id为'pMid'的层可见
$('p span').css('display', 'block')：设置id为'pMid'的层里面的所有span元素可见，无论有几级嵌套
$('p>span').css('display', 'block')：设置id为'pMid'的层里面的第一级span元素可见，此span元素里面的span元素不可见
$('#pMid+p').css('display','block')：设置id为'pMid'的层后面的第一个p可见
$('#pMid+span').css('display', 'block')：设置id为'pMid'的层后面的第一个span可见
$('#pMid').next().css('display','block'):设置id为'pMid'的层后面的第一个元素可见,无论是什么元素
$('#pMid').nextAll().css('display', 'block')：设置id为'pMid'的层后面的所有元素可见，无论是什么元素，必须与pMid平级，平级元素里面的嵌套元素不可见
$('#pMid~p').css('display', 'block')：设置id为'pMid'的层后面的所有p元素可见，必须是平级的。
$('#pMid~span').css('display','block');：设置id为'pMid'的层后面的所有span元素可见，必须是平级的。
例:
[javascript]
<script src="jquery/jquery-1.9.1.js" tyPE="text/javascript"></script>
<script type="text/javascript">
//层次选择器
$(document).ready(function () {
$('#Button1').click(function () {
//$('#pFirst span img').hide(2000); //找到id为pfirst里的span元素下的img元素
//$('#pfirst img').hide(2000); //找到id为pfirst里所有的img元素
$('#pfirst>span img').hide(3000) //找到id为pfirst里第一级span元素里得img元素 注意！ 这个第一级是指所有pfirst下一级span元素
//$('#pfirst+p img').hide(3000) //找到和id为pfirst的元素同级的第一个紧邻他的p元素 的img元素
//$('#pfirst~p img').hide(3000) //找到和id为pfirst的元素同级的所有p元素 的img元素
//$('#pfirst').next().hide(3000); //找到和id为pfirst的元素后面的同级的第一个元素
//$('#pfirst').nextAll().hide(3000); //找到和id为pfirst的元素后面的同级的所有元素
})
})
</script>
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
//层次选择器
$(document).ready(function () {
$('#Button1').click(function () {
//$('#pfirst span img').hide(2000); //找到id为pfirst里的span元素下的img元素
//$('#pfirst img').hide(2000); //找到id为pfirst里所有的img元素
$('#pfirst>span img').hide(3000) //找到id为pfirst里第一级span元素里得img元素 注意！ 这个第一级是指所有pfirst下一级span元素
//$('#pfirst+p img').hide(3000) //找到和id为pfirst的元素同级的第一个紧邻他的p元素 的img元素
//$('#pfirst~p img').hide(3000) //找到和id为pfirst的元素同级的所有p元素 的img元素
//$('#pfirst').next().hide(3000); //找到和id为pfirst的元素后面的同级的第一个元素
//$('#pfirst').nextAll().hide(3000); //找到和id为pfirst的元素后面的同级的所有元素
})
})
</script>
[htML]
<body>
<input id="Button1" type="button" value="button " />
<p id="pfirst">
<span>第一层<img src="风景/91fe451f6e8081fe492c6ae617a50274.jpg" /></span>
<span><img src="风景/cda8a8f5b72e165c153fd396db02ab64.jpg" /></span>
</p>
<p>
<img src="风景/d159717ab855f729066b333d439f630e.jpg" />
第二层
</p>
<p>
<img src="风景/f6b31d9bca975794bd23fDF71295e1c4.jpg" />
第三层
</p>
<p>
<img src="风景/f856bd37b432eb532098fa170dfbafd4.jpg" />
第四层
</p>
</body>
<body>
<input id="Button1" type="button" value="button " />
<p id="pfirst">
<span>第一层<img src="风景/91fe451f6e8081fe492c6ae617a50274.jpg" /></span>
<span><img src="风景/cda8a8f5b72e165c153fd396db02ab64.jpg" /></span>
</p>
<p>
<img src="风景/d159717ab855f729066b333d439f630e.jpg" />
第二层
</p>
<p>
<img src="风景/f6b31d9bca975794bd23fdf71295e1c4.jpg" />
第三层
</p>
<p>
<img src="风景/f856bd37b432eb532098fa170dfbafd4.jpg" />
第四层
</p>
</body>
过滤选择器
根据某类过滤规则进行元素的匹配
例
[javascript]
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//$('img:eq(1)').hide(3000); //第几个
//$('img:gt(0)').hide(3000); //大于
//$('img:lt(2)').hide(3000); //小于
//$('img:even').hide(3000); //偶数下标
//$('img:odd').hide(3000); //奇数下标
//$('img:not(#img1)').hide(3000) //除了ID为img1
//$('img:not(.imgclass1)').hide(3000)//除了样式为imgclass1
})
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//$('img:eq(1)').hide(3000); //第几个
//$('img:gt(0)').hide(3000); //大于
//$('img:lt(2)').hide(3000); //小于
//$('img:even').hide(3000); //偶数下标
//$('img:odd').hide(3000); //奇数下标
//$('img:not(#img1)').hide(3000) //除了ID为img1
//$('img:not(.imgclass1)').hide(3000)//除了样式为imgclass1
})
[html]
<body>
<img src="风景/29b56eF1ecac0a2e23fe73abb8457ed9.jpg" id="img1" class="imgclass1" />
<img src="风景/3615bd55e6db2d3eb2a45a8369653f12(1).jpg" class="imgclass" />
<img src="风景/3615bd55e6db2d3eb2a45a8369653f12.jpg" class="imgclass" />
<img src="风景/837adad119910d349f05149ad4a02ef0.jpg" class="imgclass" />
</body>
<body>
<img src="风景/29b56ef1ecac0a2e23fe73abb8457ed9.jpg" id="img1" class="imgclass1" />
<img src="风景/3615bd55e6db2d3eb2a45a8369653f12(1).jpg" class="imgclass" />
<img src="风景/3615bd55e6db2d3eb2a45a8369653f12.jpg" class="imgclass" />
<img src="风景/837adad119910d349f05149ad4a02ef0.jpg" class="imgclass" />
</body>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JQuery学习(2)选择器(1)全部内容，希望文章能够帮你解决javascript代码实例教程-JQuery学习(2)选择器(1)所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。