脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Jquery的选择器，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
1、选择器的使用：
基本选择器：
#id（根据给定的ID匹配一个元素）、element（根据给定的元素名匹配所有元素）、.class（根据给定的类匹配元素）、*（匹配所有的元素）、selector1,selectorN（将每个选择器匹配到的元素合并后一起返回）
例：
使用jquery：
$('#myp').css('background-color','red');
使用js:
document.getElementById(';myp').style.backgroundColor = 'red';
层次选择器：
ancestor descendant（根据祖先元素匹配需哦有的后台代元素）、parent>child（根据父元素匹配配所有的子元素）、prev+next（匹配所有紧接在PRev元素后的相邻元素）、prev~siblings（匹配prev元素之后的所有兄弟元素）
例：
$(function () {
$('#Button1').click(function () {
// $('#pFirst img').hide(2000);//获取的是id为pfirst的层中的所有tagname为img的元素，不管这些元素是否还嵌套在别的元素中:在本题当中指的是第一层的内容有变化
$('#pfirst span img').hide(2000); //获取的是id为pfirst的层中的所有span子元素中的img元素,需要注意的是这个span子元素可以是pFirst的儿子或者孙子:再加一个p在第二个span上面，也就是说用一个新的p把第二个span括起来，这种方法指出的是第一个p是第二个p的父类，也能获取第二个p内容，所以zilei和父类都能获得
//$('#pfirst>span img').hide(2000); //获取的是id为pFirst的层中的第一级span元素中的所有img元素：:在本题当中指的是第一层的内容有变化
//$('#pfirst+p img').hide(2000); //获取的是id为pFirst的层后面的同级的第一个p元素，且此p必须紧随其后，如果中间有别的元素隔开，则不能获取。:本题当中指的是id为img6的图片
//$('#pfirst+p img').hide(2000); //本题当中指的是id为img6的图片
//$('#pfirst').next().hide(2000);//获取的是id为di
vfirst的层后面的第一个同级元素，不管是什么类型:本题当中指的是id为img2的图片
//$('#pfirst~p img').hide(2000); //获取的pfirst后边所有同级别的，且类型为p里边的所有img元素:本题当中指的是id为img3的图片，也就是第二层里面的东西的改变
//$('#pfirst').nextAll().hide(2000);//获取的是pfirst后变的所有同级元素，不管是什么类型(类型不确定):本题 当中指的是除了第一层外，其它所有的层都有变化
})
})
<body><input id="Button1" tyPE="button" value="层次选择器" />
<p id="pfirst">
<span>风景 <a href="#"><img alt="" id="img1" src="images/1.jpg" class="imgclass" /></a></span>
<!--<p>-->
<!--第二种方法利用时，加上该p-->
<span><img alt="" id="img2" src="images/2.jpg" class="imgclass" /></span>
<!-- </p>-->
第一层
</p>
<!-- 如果添加 $('#pfirst+p img').hide(2000);这个属性，就要把id为img6的图片隐藏-->
<img alt="" id="img6" src="images/3.jpg" class="imgclass" />
<p>第二层<img alt="" id="img3" src="images/4.jpg" class="imgclass" /></p>
<p>第三层<img alt="" id="img4" src="images/5.jpg" class="imgclass" /></p><img alt="" id="img5" src="images/1.jpg" class="imgclass" />
</body>
过滤选择器：
(简单过滤选择器)：first()或:first（获取死一个元素）、last()或:last（获取最后一个元素）、:not(selector)（获取除给定选择器外的所有元素）、:even（获取所有索引值为偶数的元素，索引号从0开始）、:odd（获取所有索引值为奇数的元素，索引号从0开始）、:eq(index)（获取指定索引值的元素，索引号从0开始）、:gt(index)（获取所有大于给定索引值的元素，索引号从0开始）、:lt(index)（获取所有小于给定索引值的元素，索引号从0开始）、:header（获取所有标题类型的元素，如h1、h2...）、:aniMATEd（获取正在执行动画效果的元素）
（内容过滤选择器）：:contains(text)（获取包含给定文本的元素）、:empty（获取所有不包含子元素或者文本的空元素）、:has(selector)（获取含有选择器所匹配的元素的元素）、:parent（获取含有子元素或者文本的元素）
（可见性过滤选择器）：:hidden（获取所有不可见元素，或者type为hidden的元素）、:visible（获取所有的可见元素）
（属性过滤选择器）：[attribute]（获取包含给定属性的元素）、[attribute=value]（获取等于给定的属性是某个特定值的元素）、[attribute!=value]（获取不等于给定的属性是某个特定值的元素）、[attribute^=value]（获取给定的属性是以某些特定值开始的元素）、[attribute$=value]（获取给定的属性是某个特定值结束的元素）、[attribute*=value]（获取给定的属性是以包含某些值的元素）、[selector1][selector2][selectorN]（获取满足多个条件的复合属性的元素）
（子元素顾虑选择器）：:nth-child(eq|even|odd|index)（获取每个父元素下的特定位置元素，所以闹从1开始）、:first-child（获取每个父元素下的第一个子元素）、:last-child（获取每个父元素下的最后一个子元素）、:only-child（获取每个父元素下的仅有一个子元素）
（表单对象属性过滤器）：:enable（获取表单中所有属性为可用的元素）、:disabled（获取表单中所有属性为不可用的元素）、:checked（获取表单中所有被选中的元素）、:selected（获取表单中所有被选中option的元素）
表单选择器：
:input（获取所有input、textarea、select）、:text（获取所有单行文本框）、:password（获取所有密码框）、:radio（获取所有单选按钮）、:checkbox（获取所有复选框）、:submIT（获取所有提交按钮）、:image（获取所有图像域）、:reset（获取所有重置按钮）、:button（获取所有按钮）、:file（获取所有文件域）
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-Jquery的选择器全部内容，希望文章能够帮你解决javascript代码实例教程-Jquery的选择器所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。