首先介绍几个简单的:

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. sqlite的源代码加密,以及其它一些文章

    一.       给数据库加密 前面所说的内容网上已经有很多资料,虽然比较零散,但是花点时间也还是可以找到的.现在要说的这个——数据库加密,资料就很难找.也可能是我操作水平不够,找不到对应资料.但不管 ...

  2. 【Node】package.json

    npm的package.json中文文档https://github.com/ericdum/mujiang.info/issues/6

  3. easyui datagrid pagesize设置无效

  4. HDU-1495 非常可乐(BFS)

    广搜的灵活应用题: 非常可乐 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  5. HDU-2561 第二小整数

    http://acm.hdu.edu.cn/showproblem.php?pid=2561 第二小整数 Time Limit: 3000/1000 MS (Java/Others)    Memor ...

  6. [转]ESCAPE()、ENCODEURI()、ENCODEURICOMPONENT()区别详解

    escape().encodeURI().encodeURIComponent()区别详解 JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encode ...

  7. TFS2010中文版安装

    VS2010的中文版出来一段时间了,对TFS2010的了解,也有一段时间了,只不过中文版还是首次见到.于是把第一次安装的图片分享出来,公供参数. TFS2010安装环境是操作系统为Windows Se ...

  8. bzoj 3226 [Sdoi2008]校门外的区间(线段树)

    3226: [Sdoi2008]校门外的区间 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 615  Solved: 227[Submit][Stat ...

  9. HDU 4788 Hard Disk Drive (2013成都H,水题) 进位换算

    #include <stdio.h> #include <algorithm> #include <string.h> #include<cmath> ...

  10. c语言的label后面不能直接跟变量申明

    ; goto JUMP; printf("x is : %d\n",x); JUMP: ; <=== 错误,lable后面不能申明变量,只能是表达式语句(statement) ...