$("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素  
$("div")           选择所有的div标签元素,返回div元素数组  
$(".myClass")      选择使用myClass类的css的所有元素  
$("*")             选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")  
 
层叠选择器:  
$("form input")         选择所有的form元素中的input元素  
$("#main > *")          选择id值为main的所有的子元素  
$("label + input")     选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素  
$("#prev ~ div")       同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签  
 
基本过滤选择器:  
$("tr:first")               选择所有tr元素的第一个  
$("tr:last")                选择所有tr元素的最后一个  
$("input:not(:checked) + span")    
 
过滤掉:checked的选择器的所有的input元素  
 
$("tr:even")               选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)  
 
$("tr:odd")                选择所有的tr元素的第1,3,5... ...个元素  
$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素  
$("td:gt(4)")             选择td元素中序号大于4的所有td元素  
$("td:ll(4)")              选择td元素中序号小于4的所有的td元素  
$(":header")  
$("div:animated")  
内容过滤选择器:  
 
$("div:contains('John')") 选择所有div中含有John文本的元素  
$("td:empty")           选择所有的为空(也不包括文本节点)的td元素的数组  
$("div:has(p)")        选择所有含有p标签的div元素  
$("td:parent")          选择所有的以td为父节点的元素数组  
可视化过滤选择器:  
 
$("div:hidden")        选择所有的被hidden的div元素  
$("div:visible")        选择所有的可视化的div元素  
属性过滤选择器:  
 
$("div[id]")              选择所有含有id属性的div元素  
$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素  
 
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素  
 
$("input[name^='news']")         选择所有的name属性以'news'开头的input元素  
$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素  
$("input[name*='man']")          选择所有的name属性包含'news'的input元素  
 
$("input[id][name$='man']")    可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素  
 
子元素过滤选择器:  
 
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")  
 
$("div span:first-child")          返回所有的div元素的第一个子节点的数组  
$("div span:last-child")           返回所有的div元素的最后一个节点的数组  
$("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组  
 
表单元素选择器:  
 
$(":input")                  选择所有的表单输入元素,包括input, textarea, select 和 button  
 
$(":text")                     选择所有的text input元素  
$(":password")           选择所有的password input元素  
$(":radio")                   选择所有的radio input元素  
$(":checkbox")            选择所有的checkbox input元素  
$(":submit")               选择所有的submit input元素  
$(":image")                 选择所有的image input元素  
$(":reset")                   选择所有的reset input元素  
$(":button")                选择所有的button input元素  
$(":file")                     选择所有的file input元素  
$(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域  
 
表单元素过滤选择器:  
 
$(":enabled")             选择所有的可操作的表单元素  
$(":disabled")            选择所有的不可操作的表单元素  
$(":checked")            选择所有的被checked的表单元素  
$("select option:selected") 选择所有的select 的子元素中被selected的元素  
 
   
 
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()  
 
名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)  
 
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();  
 
   
 
   
 
$("A B") 查找A元素下面的所有子节点,包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点  
 
1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点  
 
例子:找到表单中所有的 input 元素  
 
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" /> ]  
 
2. $("A>B") 查找A元素下面的直接子节点  
例子:匹配表单中所有的子级input元素。  
 
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" /> ]  
 
3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点  
例子:匹配所有跟在 label 后面的 input 元素  
 
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" /> ]  
 
 
4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点  
例子:找到所有与表单同辈的 input 元素  
 
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" /> ]

一、获取父级元素

1、 parent([expr]):

获取指定元素的所有父级元素
<div id="par_div"><a id="href_fir" href="#">href_fir</a>
<a id="href_sec" href="#">href_sec</a>
<a id="href_thr" href="#">href_thr</a></div>
<span id="par_span">
<a id="href_fiv" href="#">href_fiv</a>
</span>
$(document).ready(function(){
$("a").parent().addClass('a_par');
});

firebug查看jquery parent效果
二、获取同级元素:
1、next([expr]):

获取指定元素的下一个同级元素(注意是下一个同级元素哦)

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

<script>
$('li.third-item').next().css('background-color', 'red');
</script>

</body>
</html>

这个例子的结果是,只有list item 4背景色变为红色

2、nextAll([expr]):

获取指定元素后边的所有同级元素
Hello

Hello Again
<div><span>And Again</span></div>
var p_nex = $("p").nextAll();
p_nex.addClass('p_next_all');

firebug_jq_nextall
注意看最后一个”<p&gt”标签哦,也被加上了’p_next_all’这个类名哦~~

3、andSelf():

获取指定元素后边的所有同级元素,之后加上指定的元素

我感觉这个函数是最有意思的一个函数了,什么意思?直译过来就是”还有我“,”还有自己”,没错,还有自己。
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
var p_nex = $("p").nextAll().andSelf();
p_nex.addClass('p_next_all');

注意看第一个“<p>”标签啊,这句话的意思是选择p标签后面的所有同级标签,以及自己。。。
firebug_jq_andself

以下这两个不举具体的例子了,实际上就是next()和nextAll()的相反喽

4、prev():获取指定元素的上一个同级元素(是上一个哦)。

5、prevAll():获取指定元素的前边所有的同级元素。

三、获取子元素

1、查找子元素方式1:>

例如:var aNods = $("ul > a");查找ul下的所有a标签

2、查找子元素方式2:children()

3、查找子元素方式3:find()

这里再简单介绍以下children()和find()的异同:

1> children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样。
2> children方法获得的仅仅是元素一下级的子元素,即:immediate children。
3> find方法获得所有下级元素,即:descendants of these elements in the DOM tree
4> children方法的参数selector 是可选的(optionally),用来过滤子元素,

但find方法的参数selector方法是必选的。
5> find方法事实上可以通过使用 jQuery( selector, context )来实现。即$('li.item-ii').find('li')等同于$('li', 'li.item-ii').

你以为的Jquery选择器是什么样子的?的更多相关文章

  1. CSS选择器和jQuery选择器的区别与联系之一

    到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...

  2. JQuery 选择器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. P1983 车站分级 思维+拓扑排序

    很久以前的一道暑假集训的题,忘了补. 感觉就是思维建图,加拓扑排序. 未停靠的火车站,必然比停靠的火车站等级低,就可以以此来建边,此处注意用vis来维护一下,一个起点和终点只建立一条边,因为不这样的话 ...

  2. Python中的测试工具

      当我们在写程序的时候,我们需要通过测试来验证程序是否出错或者存在问题,但是,编写大量的测试来确保程序的每个细节都没问题会显得很繁琐.在Python中,我们可以借助一些标准模块来帮助我们自动完成测试 ...

  3. Mvc导入

    [HttpPost] public void Import() { //获取文件 HttpPostedFileBase fileBase = Request.Files["file" ...

  4. Java 基础复习 -- Enum 类

    一.枚举类基本语法 在 Java SE5 中添加了一个看似很小的特性,即 enum 关键字,它使得我们在需要群组并使用枚举类型集时,可以很方便的处理. 所有的 enum 都继承自 java.lang. ...

  5. epub.js的使用

    epub.js的使用 npm安装 npm install epubjs epub阅读器开发 ePub电子书解析和渲染 生成Book对象 this.book = new Epub(DOWNLOAD_UR ...

  6. JSON字符串转Map的几种方法

    String json = "{"status":0,"result":{"location":{"lng": ...

  7. COUNT(*)、COUNT(主键)、COUNT(1)

    MyISAM引擎,记录数是结构的一部分,已存cache在内存中; InnoDB引擎,需要重新计算,id是主键的话,会加快扫描速度: 所以select count(*)  MyISAM完胜! MyISA ...

  8. JMeter系列教程

    认识JMeter工具 JMeter常用元件功能介绍 JMeter线程组 JMeter脚本三种录制方法 Jmeter组件介绍及其作用域和执行顺序 JMeter参数化 JMeter集合点 JMeter关联 ...

  9. MVC(实战一)

    一.创建MVC项目 二.界面分布 Content:是存放css文件等,暂时先不考虑. Controllers:重要, 控制层,控制界面显示和界面逻辑的,其实真正业务逻辑层,建议分层出去. Models ...

  10. MAC地址表(交换机)、ARP缓存表以及路由表(路由器)