1、#id根据给定的ID匹配一个元素。

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
$("#myDiv");

2、element根据给定的元素名匹配所有元素

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
$("div");

3、.class根据给定的类匹配元素。

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
$(".myClass");

4、*匹配所有元素

<div>DIV</div>
<span>SPAN</span>
<p>P</p>
$("*")

5、selector1,selector2,selectorN将每一个选择器匹配到的元素合并后一起返回。

HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery 代码:
$("div,span,p.myClass")
结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

6、ancestor descendant在给定的祖先元素下匹配所有的后代元素

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
7、parent > child在给定的父元素下匹配所有的子元素
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]

8、prev + next匹配所有紧接在 prev 元素后的 next 元素

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
9、prev ~ siblings匹配 prev 元素之后的所有 siblings 元素
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form ~ input")
结果:
[ <input name="none" /> ]
:first获取第一个元素$('li:first');
:last()获取最后个元素$('li:last')
:not(selector)去除所有与给定选择器匹配的元素$("input:not(:checked)")
:even匹配所有索引值为偶数的元素,从 0 开始计数$("tr:even")
:odd匹配所有索引值为奇数的元素,从 0 开始计数
:eq(index)匹配一个给定索引值的元素
:gt(index)匹配所有大于给定索引值的元素
:lt(index)匹配所有小于给定索引值的元素
:header匹配如 h1, h2, h3之类的标题元素
:animated匹配所有正在执行动画效果的元素
:focus匹配当前获取焦点的元素。
:contains(text)匹配包含给定文本的元素
:empty匹配所有不包含子元素或者文本的空元素
:has(selector)匹配含有选择器所匹配的元素的元素
:parent匹配含有子元素或者文本的元素
:hidden匹配所有不可见元素,或者type为hidden的元素
 

jQuery选择器(一)的更多相关文章

  1. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  2. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  3. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  4. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  5. 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...

  6. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  7. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  8. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  9. jQuery-1.9.1源码分析系列(二)jQuery选择器

    1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...

  10. jQuery-1.9.1源码分析系列(二)jQuery选择器续1

    在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...

随机推荐

  1. DATASNAP复杂中间件的一些处理方法

    1.中间件需要连接SQL SERVER\ORACLE\MYSQL多种数据库,怎么办? [解决]:可以搞多种数据模块池对应多种数据库,一种数据模块池对应一种数据库 2.中间件业务对象多,在一个单元里面定 ...

  2. linux命令之more

    转自:http://www.cnblogs.com/peida/archive/2012/11/02/2750588.html more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示 ...

  3. CCS样式表小结

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  4. An existing PostgreSql installation has been found... 的解决

    PostgreSql卸载之后,重新安装时跳出如下信息: Anexisting PostgreSql installation has been found atC:\ProgramFiles\Post ...

  5. 关于EF中ApplyCurrentValues和ApplyOriginalValues区别

    关于EF中ApplyCurrentValues和ApplyOriginalValues区别:两者都是编辑数据时使用. //        // 摘要:        //     将 System.D ...

  6. Android中FTP服务器、客户端搭建以及SwiFTP、ftp4j介绍

    本文主要内容: 1.FTP服务端部署---- 基于Android中SwiFTP开源软件介绍: 2.FTP客户端部署 --- 基于ftp4j开源jar包的客户端开发 : 3.使用步骤 --- 如何测试我 ...

  7. 【转】MyEclipse第一个Servlet程序

    转自:http://blog.csdn.net/wangdingqiaoit/article/details/7674367 前言 本文旨在帮助学习java web开发的人员,熟悉环境,在Win7系统 ...

  8. java 中的set方法和get方法的理解

    get的意思是获取,set的意思是设置. get方法和set方法是实现类的封装访问的很好的工具. 当类中的变量设为private 时,他的意思就是说,只能通过自身和子类的访问,但是对于别的其他的类来说 ...

  9. codeblocks 更改颜色主题

    Code::Blocks是一款优秀的C/C++编辑器,但默认的颜色为白底黑字,并且没有自带更多的主题配置.因此,各种颜色主题需要手动配置. 首先关闭codeblocks软件. 下载文件colour_t ...

  10. 练习PopupWindow弹出框之实现界面加载的时候显示弹出框到指定的view下面--两种延迟方法

    今天在练习PopupWindow弹出框的时候,打算在界面加载的时候将弹出框展现出来并显示在指定的view下面. 初步方法是直接在OnResume方法里面直接执行showPopupWindows方法. ...