码迷,mamicode.com
首页 > Web开发 > 详细

Jquery选择器汇总

时间:2016-04-18 22:21:49      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:

一.基本选择器
1.id选择器
$("#id").css("background","#fffff");
2.class选择器,选中class=mini的元素
$(".mini").css("background","#fffff");
3.标签选择器,选中div标签的元素
$("div").css("background","#fffff");
4.所有选择器,选中所有选择元素
$("*").css("background","#fffff");
5.并列选择器,选中id=id和class=mini的两个元素
$("#id,.mini")("background","#fffff");
 
二.基本过滤选择器
1.获取table下面所有tr中的第一个子元素
$("table tr:first").css("background","#fffff");
2.获取table下面所有tr中的最后一个子元素
$("table tr:last").css("background","#fffff");
3.获取table下所有的tr索引大于3的子元素
$("table tr:gt(3)").css("background","#fffff");
4.获取table下所有的tr索引小于3的子元素
$("table tr:lt(3)").css("background","#fffff");
5.获取table下所有的tr索引等于于3的子元素
$("table tr:eq(3)").css("background","#fffff");
6.获取table下所有的tr索引等于偶数的子元素
$("table tr:even").css("background","#fffff");
7.获取table下所有的tr索引等于奇数的子元素
$("table tr:odd").css("background","#fffff");
8.获取table下所有的tr并且class!=one的所有子元素
$("table tr:not(.one)").css("background","#fffff");
9.获取标题标签的元素例如:h1,h2,h3
$(":header").css("background","#fffff");
10.获取当前正在执行动画的所有元素
$(":animalted").css("background","#fffff");
11.获取当前获取焦点的元素
$(":focus").css("background","#fffff");
 
三.层次选择器 siblings  prve  prveall  next nextAll  closet
1.获取body下所有的div元素
$("body div").css("background","#fffff");
2.获取body下第一代子节点
$("body > div").css("background","#fffff");
3.获取所有class=one紧挨的第一个div元素(同辈和子节点,选哪一个?)
$(".one + div").css("background","#fffff");
4.获取所有class=one后所有的div兄弟元素(包不包括子节点?)
$(".one ~ div").css("background","#fffff");
 
四.内容过滤选择器
1.所有div元素中标签内文本包含di的所有div元素
$("div:contains(di)").css("background","#fffff");
2.没有子元素的所有div元素
$("div:empty").css("background","#fffff");
3.class=mini的所有div元素
$("div:has(.mini)").css("background","#fffff");
4.所有包含子元素的div元素
$("div:parent").css("background","#fffff");
 
五.子元素过滤选择器
1.获取class=one的div的 第二个子元素
$("div.one :nth-child(2)").css("background","#fffff");
2.获取class=one的div的 第一个子元素
$("div.one :first-child").css("background","#fffff");
3.获取class=one的div的 最后一个子元素
$("div.one :last-child").css("background","#fffff");
3.获取class=one的div的 唯一一个子元素
$("div.one :only-child").css("background","#fffff");
 
六.属性过滤选择器
1.包含title属性的所有div元素
$("div[title]").css("background","#fffff");
2.id=one的所有div元素
$("div[id=one]").css("background","#fffff");
3.id!=one的所有div元素
$("div[id!=one]").css("background","#fffff");
4.id以one开头的所有div元素例如:id=oneCall
$("div[id^=one]").css("background","#fffff");
5.id以one结束的所有div元素例如:id=Callone
$("div[id$=one]").css("background","#fffff");
6.title中用空格分开的值当中包含uk的所有div元素 例如title=‘one uk‘
$("div[title~=uk]").css("background","#fffff");
7.id属性中包含one的所有div元素
$("div[id*=one]").css("background","#fffff");
8.id属性以en为前缀(后面以‘-‘分开)的所有div元素 例如:id=‘en-uk‘
$("div[id|=en]").css("background","#fffff");
9.组合选择器 包含id属性且title中包含one的所有div元素
$("div[id][title*=one]").css("background","#fffff");
 
 
七.可见性过滤选择器
1.所有可见的div元素
$("div:visible").css("background","#fffff");
2.所有隐藏的div元素
$("div:hidden").css("background","#fffff");
 
八.表单选择器
1.
$("form :image")  <img src=‘/11.png‘ />
$("form :button") <button ></button>和 <input type="button" /> 都可以被选择
$("form :riado")  <input type=‘radio‘/>
$("form :reset")  <input type=‘reset‘/>
$("form :hidden") <input type="hidden"/> 和 <div  style="display:none"></div> 都可以被选择
$("form :text")  <input type=‘text‘/>
$("form :file")  <input type=‘file‘/>
$("form select") <select><option></option></select>
$("form textera") <textera></textera>
 
九.表单属性过滤选择器
1.所有被选中的input元素
$("input:checked")
2.所有被禁用的input元素
$("input:disabled")
3.所有可用的input元素
$("input:enabled")
4.所有被选中的selected元素
$("select :selected")

Jquery选择器汇总

标签:

原文地址:http://www.cnblogs.com/CrazyShun/p/5406034.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!