$("#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. ts--泛型

    //泛型:软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性,组件不仅要能支持当前的数据类型,同时也能支持未来的数据类型 //泛型就是解决 类  接口  方法的复用性 以及对不特定 ...

  2. weblogic启动节点服务java.lang.ClassCastException:com.octestring.vde.backend.BackendRoot cannot be cast to com.octestring.vde.backend.standard.BackendStandard类型转换异常

    weblogic启动节点服务器报错,java.lang.ClassCastException:com.octestring.vde.backend.BackendRoot cannot be cast ...

  3. python批量插入数据到es和读取es数据

    一.插入数据 1.首先准备类似如下数据 {"_type": "type1", "_id": 1, "_index": & ...

  4. node.js安装本地模块遇到的目录锁定问题【新手问题】

    昨天发过文字版的,后来以为问题没解决就删除,今天偷个懒,直接上图. 被书中的介绍给误导了,虽然和书中不一样,但实际上自己练习写的模块已经是可用了.也犯了个常识性的错误:Warn一般不会有太大的影响.

  5. AssemblyBuilder以及Activator双剑合璧

    AssemblyBuilder和Activator两个类是DispatchProxy类实现动态代理以及AOP的根本,示例demo可参考 DispatchProxy实现动态代理及AOP .Assembl ...

  6. bootstrap-table 常用总结-1

    两种表格工具,今天都用到了,一种是我前几篇写到过的jqgrid,(传送门)另一个就是bootstrap-table了.用过之后会发现,两种表格的方式大同小异,但是为什么这次要换成bootstrap-t ...

  7. c#实现两个窗体相互传值

    本文转自:https://mp.csdn.net/postedit/100058721 1.功能展示 有时需要将子界面的内容传递到父界面,方法有好几种.经常用的是通过委托实现.具体的效果如下: ​   ...

  8. spring为类的静态属性实现注入

    我们知道,正常情况下,spring的一个bean要依赖其他资源,如properties或其他bean,直接利用@Value或@Autowired就可以了.这两个注解就相当于spring applica ...

  9. mysql从5.6升级到5.7后出现 Expression #1 of ORDER BY clause is not in SELECT list,this is incompatible with DISTINCT

    [问题]mysql从5.6升级到5.7后出现:插入数据和修改数据时出错Caused by: com.ibatis.common.jdbc.exception.NestedSQLException: - ...

  10. Centos手动安装PHP

    下载PHP的源码,我下的是7.2版本,看了一下安装的参数太多了,也没有时间依次了解每个参数的意思,直接从网上复制了一个,先尝试安装起来.并记录一下步骤,基本的步骤就是解压.配置.编译.运行.1.下载P ...