在线文档地址：http://tool.oschina.net/apidocs/apidoc?api=jquery

各种在线工具地址：http://www.ostools.net/

一、基本选择器

 $("#div1").html("hello world 1"); //根据id匹配元素（a）

 $(".c1").html("hello  world 2"); //根据Yclass匹配元素（b）

 $("span").html("hello world 3"); //根据元素名称匹配 （c）

 $("span,div.c1").html("hello world 4"); //匹配页面所有的span 和class=c1的div（b c）

 $("*").html("hello world 5"); //匹配页面所有元素,也包含body

二、层级选择器

 $("body span").html("hello world 1"); //选取body中所有的span（a b d）

 $("body>span").html("hello world 2"); //选取body元素的子span元素(a b)

 $("span.c1+div").html("hello world 3"); //选取class为c1的span的下一个div元素，注意是同级元素

 $("span.c1").next().html("hello world 3"); //跟上行效果相同 (c)

 $("span.c1~div").html("hello world 4"); //选取class为c1的span的后面的所有div

 $("span.c1").nextAll().html("hello world 4"); //跟上行效果相同(c e)

三、基本过滤选择器

 $("div:first").html("hello world 1"); //选取所有div中的第一个div

 $("span:last").html("hello world 2"); //选取所有span中的最后一个

 $("span:not(.c1)").html("hello world 3"); //选取除class为c1的span外的所有span

 $("span:even").html("hello world 4"); //选取索引为偶数的span，索引从0开始

 $("span:odd").html("hello world 5"); //选取索引为奇数的span，索引从0开始

 $("span:eq(2)").html("hello world 6"); //选取指定索引的span，索引从0开始

 $("span:gt(0)").html("hello world 7"); //选取大于指定索引的span，不包含指定索引

 $("span:lt(2)").html("hello world 8"); //选取小于指定索引的span，不包含指定索引

 $(":header").html("hello world 9"); //选取页面中所有的标题元素 h1 h2 h3...

四、内容过滤选择器

 $("span:contains(aa)").html("hello world 1"); //选取内容包含aa的span元素

 $("span:empty").html("hello world 2"); //选取空的span元素

 $("div:has(span)").html("hello world 3"); //选取包含span的div元素

 $("span:parent").html("hello world 4"); //选取包含子元素的span元素，包含文本

五、属性过滤选择器

 $("span[id]").html("hello world 1"); //选取有属性id的span元素

 $("span[id=span2]").html("hello world 2"); //选取属性id等于span2的span元素

 $("span[id!=span2]").html("hello world 3"); //选取属性id不等于为span2的span元素

 $("span[id^=span]").html("hello world 4"); //选取属性id以span开始的span元素

 $("span[id$=2]").html("hello world 5"); //选取属性id以2结尾的span元素

 $("span[id*=an]").html("hello world 6"); //选取属性id包含an的span元素

 $("span[id*=an][class$=2]").html("hello world 6"); //选取属性id包含an并且class以结尾的span元素

六、子元素过滤选择器

 $("div.c1 :nth-child(1)").html("hello world 1"); //选取class等于c1的div的指定索引子元素

 $("div.c1 :nth-child(even)").html("hello world 2"); //选取class等于c1的div的偶数子元素

 $("div.c1 :nth-child(odd)").html("hello world 3"); //选取class等于c1的div的奇数子元素

 $("div.c1 :first-child").html("hello world 4"); //选取class等于c1的div的第一个子元素

 $("div.c1 :last-child").html("hello world 5"); //选取class等于c1的div的最后一个子元素

 $("div.c1 :only-child").html("hello world 6"); //选取class等于c1的div只有一个子元素的子元素

七、表单对象属性过滤选择器

 $("#form1 input:enabled").val("hello world 1"); //选取form表单中没有禁用的文本框

     $("#form1 input:disabled").val("hello world 2"); //选取form表单中没有禁用的文本框

     $("#form1 input:checked").attr("checked",false); //选取form表单中选的复选框

     $("select option[selected]").each(function () {  //选取 下拉框 选中的 option

         alert($(this).val());

     });

八、选择器要注意的地方

 <body>

     <div id="div#1">aaaaaaaaaaa</div>

     <div class="c[1]">bbbbbbbbb</div>

     <div class="c1">

         <div name="div">ccccccccc</div>

         <div name="div">ddddddddd</div>

         <div name="div">eeeeeeeee</div>

         <div class="c1" name="div">fffffffff</div>

     </div>

     <div class="c1" name="div">gggggggg</div>

     <div class="c1" name="div">hhhhhhhh</div>

 </body>

 $(function () {

     //有时在id或是class中有一些特殊字符如 [ 等，需要用反斜杠进行转义

     $("#div\\#1").html("hello world 1");

     $(".c\\[1\\]").html("hello world 2");

     //有没有空格的区别

     //有空格是选取class等于c1的div里面的name等于div的div（c d e f）

     $(".c1 [name=div]").html("hello world 3");

     //没有空格是选取class等于c1并且name等于div的div (f g h)

     $(".c1[name=div]").html("hello world 4");

 });

Jquery 选择器 详解的更多相关文章

  1. Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串

    Jquery 选择器 详解   在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...

  2. jQuery选择器详解

    根据所获取页面中元素的不同.可以将jQuery选择器分为:四大类,其中过滤选择器在分为六小类 jQuery选择器 基本选择器   层次选择器   过滤选择器 简单过滤选择器 内容过滤选择器 可见性过滤 ...

  3. jQuery选择器详解及实例---《转载》

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

  4. jQuery-强大的jQuery选择器 (详解)[转]

      1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $(&quo ...

  5. [置顶] Jquery学习总结（二） jquery选择器详解

    1.基本选择器 l ID 根据元素ID选择 l Elementname 根据元素名称选择 l Classname 根据元素css类名选择 举例: <input type=”text” id=”I ...

  6. jQuery选择器 (详解)

    1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $(" ...

  7. [转]jQuery选择器 (详解)

    1).基本 #id 根据给定的ID匹配一个元素.例如:$("#id")element 根据给定的元素名匹配所有元素.例如:$("div").class 根据给定 ...

  8. [JQuery]选择器详解

      示例 说明 $(this) 当前元素 $("p") 所有<p>元素 $("input") 所有input元素 $(".intro&qu ...

  9. jQuery.validator 详解二

    前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...

随机推荐

  1. Android 时间维护服务 TimeService（针对于特殊定制设备）

    此方法针对于无法自动获取网络时间的特殊设备,正常 Android 设备直接调用 System.currentTimeMillis(); 方法获取当前时间即可. TimeService 集成于 Serv ...

  2. iis6|iis7|配置URLRewriter|64位操作系统下|.net2.0|.net4.0|配置URLRewriter|Web.config配置详情

    想必很多ASP.NET的码友们在IIS配置伪静态被严重纠结过不止一次两次,本园主经过多次站点伪静态配置,总结了一下,IIS版本:IIS 6.IIS 7,服务器:Windows Server 2003. ...

  3. PHPstudy 无法启动Apache

    今天打安装完phpstudy的时候,启动Apache发现端口被占用,这个端口也就是system端口.如果想要启动服务器必须关掉这个,但是会导致系统无法正常显示. 后来我就在网上搜各种办法,依然没成功. ...

  4. Django学习中的问题总结

    1. 在windows环境下,用pip安装Django后通过在python/Script目录下会生成django-admin.py文件,此时由于pip环境变量已经添加,diango-admin.py与 ...

  5. 数据库软件dbForge Studio for MySQL更新至v.6.1

    本文转自:慧都控件网 说到MariaDB,这个数据库算是MySQL的一个分支.现在非常的流行,很多地方都能看到它的身影.MariaDB作为一种新的数据库管理系统,在短时间内获得如此高的关注度.这也是D ...

  6. :尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行，将出现此问题。 ---> System.BadImageFormatException: 试图加载格式不正确的程序。

    iis有程序池有一个属性  是否启用32位应用程序默认是true的特别注意windows2008 服务器系统iis默认的是true 这样发布一下也是必须要做的

  7. java内存泄漏

    java内存泄漏主要分成两个方面: (1)堆中申请的空间没有被释放 (2)对象已不在被使用,但是仍然存在在内存当中 以下集中情况可能会导致内存泄漏 (1)静态集合的使用hashmap和vector,静 ...

  8. iOS开发-二维码的基本使用

    二维码在生活中出现的频率越来越多了,大街小巷各个角落,它的出现更大的作用是代替功能单一的传统条形码,但是通常很多人第一次见到这个都不清楚这是干嘛用的.最初第一次见到可能就是买到的商品上有一个数字的条形 ...

  9. <<数字是世界的>>读后感

    我对这本书的第一印象就是很多书评中提到的,这是一本无论是否有学习过计算机专业知识的人都可以读的书.我一开始不是很能理解这些评价,我是抱着对这个问题的疑惑进行通读的,以后我发现了,它全书中都很少出现计算 ...

  10. C语言字符串函数例子程序大全 – string相关

    关于字符串函数的应用细则,例子程序 – jerny 函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char *source) ...