首先介绍几个简单的:

id选择器

$('#p1').html('<font color='red'>nihao</font>);

类选择器:表示页面上所有应用了a样式的标签

$('.a').css('color','green');

层次选择器:div下的所有p标签
$('div p')
组合选择器:选择id为btn以及p1和span标签
$('#btn,#p1,span').css('color','red')
标签+类选择器:表示p标签下应用a样式的标签
$('p.a')
层次选择器:div下的所有p标签
$('div p')
只选取div下的子元素p和后代元素p
$('div p')
只选取div下的直接子元素p
$('div>p')
表示div后的所有p兄弟
$('div~p') 等价$('div').nextAll('p')
表示div后的所有兄弟
$('div~*')
表示div后只找紧挨着的的第一个元素,并且这个元素必须是p
$('div+p') 等价$('div').next('p')
 表示选择div前面的所有兄弟p元素
$('div').preAll('p')
表示div前只找紧挨着的的第一个元素,并且这个元素必须是p
$('div').pre('p')
当前元素的所有兄弟元素
siblings();
 
写过滤选择器的时候我们要注意jquery中的另一个特性:链式编程
例如:既可以设置p元素的边框,又可以添加其事件
s('p').text('我们都是p!').css('border','1px').click(function(){

})

但是,类似于prevAll()、nextAll()、prev()、next()、sibings()等这些函数都会破坏链,所以这种情况下不能直接进行链式编程。

例如:

$(this).prevAll().css('backgroundColor', 'yellow').nextAll().css('backgroundColor', 'blue'); //不能链式编程,链已经被破坏了。
end()回到最近的一个"破坏性"操作之前。
基本选择过滤器
$('p:eq(2)');选择出来的索引是2的标签
$('p:even')偶数个
$('p:odd')奇数个
first 选取第一个元素。$("div:first")选取第一个<div>
:last 选取最后一个元素。$("div:last")选取最后一个<div>
:not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>
:even、:odd,选取索引是偶数、奇数的元素:$("input:even")选取索引是奇数的<input>
:eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>
$(":header")选取所有的h1……h6元素
$("div:animated")选取正在执行动画的<div>元素。
属性选择器
$('input[type=text]').css('clolr',black);
$('input[name^=a]')属性name以a开头的
$('input[name$=a]')属性name以a结尾的
$('input[name*=a]')属性name以包含a的

$('input[name^=a][value] [id]')属性name以a开头的并且包含value和id属性的
$("div[title!=test]")选取title属性不为“test”的<div>
表单对象属性选择器红色竖线是空格
$("#form1.:enabled")选取id为form1的表单所有启用的元素  
$("#form1.:disabled")选取id为form1的表单所有禁用的元素
$(“input:checked”)选取所有选中的元素(Radio、CheckBox),这个中间不能加空格.
$("select.:selected")选取所有选中的选项元素(下拉列表)
$("input[name=names]:checked");获取所有name为names的选中的元素
 
表单选择器
$(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样, $("input")只获得<input>
$(":text")选取所有单行文本框,等价于$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);
$(“:password”)选取所有密码框。
同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。
代替了$(‘input[type=***]’);
 
input[type=radio]→:radio
input[type=checkbox] → :checkbox
input[type=text] → :text
可见性选择器
 
:hidden
选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)
1.表单元素type=“hidden”
2.设置css的display:none
3.高度和宽度明确设置为0的元素。
4.父元素时隐藏的,所以子元素也是隐藏的
visibility: hidden 与opacity为0不算,因为还占位所以不认为是hidden.(与之前版本jQuery不太一样,1.3.2之前)
:visible
选取所有可见元素
注意:$(‘.cls :hidden’);与$(‘.cls:hidden’);是不一样的。
内容过滤器:
:contains(text),过滤出包含给定文本的元素。(innerText中包含。)
:empty,过滤出所有不包含子元素或者文本的空元素。
:has(selector),过滤出元素中包含(即子元素中)selector选择器能选择到的元素。
:parent,过滤出可以当做父元素的元素(即该元素有子元素或者元素中包含文本。
 
内容过滤选择器
 
     :contains(text),过滤出包含给定文本的元素。(innerText中包含。)
     :empty,过滤出所有不包含子元素或者文本的空元素
     :has(selector),过滤出元素中包含(即子元素中)selector选择器能选择到的元素。
     :parent,过滤出可以当做父元素的元素(即该元素有子元素或者元素中包含文本。
 
子元素过滤器:
取出所有ul下li的第一个li
    :first-child,与:fisrt的区别,:first只能选取第一个,而:first-child,则能选取每个子元素的第一个元素。
    $(‘ul li:first-child’);  //为每个父元素(ul)都返回一个li。
    $(‘ul li:first’);只返回一个li元素。
 
后续还会补充,有不足希望大家及时纠正,谢谢!

jQuery各种选择器总结的更多相关文章

  1. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  2. HTML 学习笔记 JQuery(选择器)

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  3. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  4. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  5. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  6. jquery相对选择器,又叫context选择器,上下文选择器;find()与children()区别

    jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...

  7. jQuery之选择器

    jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...

  8. 关于jquery ID选择器的一点看法

    最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $( ...

  9. jQuery的选择器中的通配符[id^='code'] 【转】

    JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...

  10. jquery下 选择器整理

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

随机推荐

  1. ☀【CSS3】icon

    Navicon Transformicons: Animated Navigation Icons with CSS Transformshttp://sarasoueidan.com/blog/na ...

  2. VM Depot 新功能:直接通过 Windows Azure 管理门户部署虚拟机

     发布于 2014-05-09 作者 陈 忠岳 想要尝试 VM Depot 上数以百计的各类开源虚拟机,却因为复杂的命令行操作而感到烦恼?微软开放技术想您所想,及时推出 VM Depot 最新功能 ...

  3. XSS跨站脚本攻击在Java开发中防范的方法

    1. 防堵跨站漏洞,阻止攻击者利用在被攻击网站上发布跨站攻击语句不可以信任用户提交的任何内容,首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过 ...

  4. ASP.NET之JSONHelper操作

    转自:http://www.cnblogs.com/PEPE/archive/2012/02/13/Pepe_Yu.html 之前说到了Ext.Net中GridPanel行取值的问题(Ext.Net开 ...

  5. 转载--C++中struct与class

    转自:http://www.cnblogs.com/york-hust/archive/2012/05/29/2524658.html 1. C++中的struct对C中的struct进行了扩充,它已 ...

  6. 推荐一款自己的软件作品[豆约翰博客备份专家],新浪博客,QQ空间,CSDN,cnblogs博客备份,导出CHM,PDF(转载)

    推荐一款自己的软件作品[豆约翰博客备份专 豆约翰博客备份专家是完全免费,功能强大的博客备份工具,博客电子书(PDF,CHM和TXT)生成工具,博文离线浏览工具,软件界面美观大方,支持多个主流博客网站( ...

  7. ASPNETMVC多语言方案

    ASPNETMVC多语言方案 前言: 好多年没写文章了,工作很忙,天天加班, 每天都相信不用多久,就会升职加薪,当上总经理,出任CEO,迎娶白富美,走上人生巅峰,想想还有点小激动~~~~ 直到后来发生 ...

  8. 5 approach to load UIView from Xib

    After the past few years I found that the only manageable way for creating/maintaining view (or any ...

  9. NTP DDOS攻击

    客户端系统会ping到NTP服务器来发起时间请求更换,同步通常每隔10分钟发生: 从NTP服务器发回到客户端的数据包可能比初始请求大几百倍.相比之下,通常用于放大攻击中的DNS响应被限制仅为8倍的带宽 ...

  10. yii 权限分级式访问控制的实现(非RBAC法)——已验证

    验证和授权——官方文档: http://www.yiichina.com/guide/topics.auth http://www.yiiframework.com/doc/guide/1.1/zh_ ...