井井客

搜索

JQ选择器分类整理

众所周知JQ选择器的写法和CSS选择器的写法很大一定程度上来说是”差不多“的,对CSS选择器相当熟悉的童鞋对下面说的内容应该也会接收的更快。

JQ选择器分类整理

内容基本上是从网上东拼西凑得来,算是比较全的整理了。下面贴有w3school关于JQ选择器参考的链接(部分有应用实例),有不懂的可以看看~

1、基本选择器

$(#div)				选取 id为intro 的元素
$('.intro')			选取所有 class为intro 的元素
$('p')				选取所有的 p标签 元素
$('div,span,p.intro')		选取所有 div标签,span标签和拥有 class="inro" 的p标签  的一组元素

2、层次选择器

$('div span')		选取div标签下所有的span标签元素(至最后一代)
$('div>span')		选取div标签下所有的span标签元素(仅一代)
$('.one+div')		选取 class="one" 元素的下一个div标签元素(兄弟、一个)
$('.one~div')		选取 class="one" 元素接下来所有的div标签元素(兄弟、N个)

3、过滤选择器

[1]基本过滤

$('li:first')			选取所有li标签元素中的第一个元素
$('li:last')			选取所有li标签元素中的个元素
$('li:even')			选取所有li标签中索引是偶数的元素(索引从0开始)
$('li:odd')			选取所有li标签中索引是奇数的元素(同上)
$('li:eq(1)')			选取所有li标签中索引等于1的元素(同上)
$('li:gt(1)')			选取所有li标签中索引大于1的元素(同上)
$('li:lt(1)')			选取所有li标签中索引小于1的元素(同上)
$('li:not(.one)')		选取所有class不包含one的li标签元素
$(':header')			选取所有的h1-h6标题标签元素
$(':animated')			选择页面中所有动画元素

[2]内容过滤

$("div:contains('井井客')")	选取含有文本"井井客"的div标签元素(所有父亲)
$("div:empty")			选取不包含子元素或文本元素的div空元素
$("div:has(p)")			选取含有p标签的DIV元素
$("div:parent")			选取含有子元素或文本的DIV元素

[3]可见性过滤

$(":hidden")			选取所有不可见的元素
$("div:visible")		选取所有可见的DIV元素

[4]属性过滤

$("a[href]")			选取所有带有 href 属性的a元素
$("[href='#']")			选取所有 href 属性的值等于 "#" 的元素
$("[href!='#']")		所有 href 属性的值不等于 "#" 的元素
$("[href^='http']")		选取所有 href 属性的值包含以 "http" 开头的元素
$("[href$='.jpg']")		选取所有 href 属性的值包含以 ".jpg" 结尾的元素
$("[href*='jingjingke']")	选取所有 href 属性的值包含 jingjingke" 的元素
$("[id][href*='jingjingke']")	选取拥有属性id和href,且 href 属性的值包含 jingjingke" 的元素

[5]子元素过滤

$("ul li:only-child")		选择ul中的li元素并且li无任何兄弟元素

4、表单选择器

$('.form :input')	选取 class="form" 元素下所有input标签元素
$(':text')		选取所有 type="text" 的input标签元素
$(':password')		选取所有 type="password" 的input标签元素
$(':radio')		选取所有 type="radio" 的input标签元素
$(':checkbox')		选取所有 type="checkbox" 的input标签元素
$(':submit')		选取所有 type="submit" 的input标签元素
$(':reset')		选取所有 type="reset" 的input标签元素
$(':button')		选取所有 type="button" 的input标签元素
$(':image')		选取所有 type="image" 的input标签元素
$(':file')		选取所有 type="file" 的input标签元素

$(':enabled')		选取所有激活的input标签元素
$(':disabled')		选取所有禁用的input标签元素
$(':selected')		选取所有被选取的input标签元素
$(':checked')		选取所有被选中的input标签元素
带有实例的JQ选择器可访问:http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

文章TAG:JQ

作者:井井客整理来源:互联网
本文标题:JQ选择器分类整理
本文链接:http://www.jingjingke.com/c/13104.html

上一篇:[转载]国外十个顶级的CSS3代码生成器
下一篇:我所遇到的Ie6绝对浮动时上边框消失的问题

文章分类

相关阅读

随便看看