$("#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. 2019/12/11学习内容摘要(Linux系统用户与用户组管理①)

    一,认识/etc/passwd和/etc/shadow 1. /etc/passwd :文件中保存系统中所有的用户和用户的主要信息. 在命令行输入 cat /etc/passwd  | head  ( ...

  2. Eclipse——关联源代码

    Eclipse——关联源代码 摘要:本文主要说明了如何在Eclipse里关联源代码. 下载源码包 首先去想要关联的jar包的官网下载对应jar包的源代码,拿Tomcat的类库举例,先去官网下载源码包: ...

  3. mysql的锁机制详解

    这段时间一直在学习mysql数据库.项目组一直用的是oracle,所以对mysql的了解也不深.本文主要是对mysql锁的总结. Mysql的锁主要分为3大类: 表级锁:存储引擎为Myisam.锁住整 ...

  4. jquery 常用选择器基础语法学习

    siblings方法的常用应用场景:选中高亮 实现代码 <!DOCTYPE html> <html> <head> <meta charset="U ...

  5. k8s的yaml说明

    理解k8s里的几个概念 Kubernetes 通过各种 Controller 来管理 Pod 的生命周期.为了满足不同业务场景,Kubernetes 开发了 Deployment.ReplicaSet ...

  6. maven 解决jar包冲突及简单使用

    maven 解决jar包冲突 1.jar包冲突原因 maven中使用坐标导入jar包时会把与之相关的依赖jar包导入(导入spring-context的jar时就会把spring的整个主体导入) ,而 ...

  7. (草稿)如何判断一名UiPath开发人员是否合格?

    一名合格的UiPath开发人员究竟需要具备什么核心技能?业务梳理?沟通技巧?VB.net吗?VBA吗?Python?还是SQL?出于多种原因,关于这一点总是众说纷纭,莫衷一是.尽管这些技术都算沾边,但 ...

  8. 基于Moya、RxSwift和ObjectMapper优雅实现REST API请求

    在Android开发中有非常强大的 Retrofit 请求,结合RxJava可以非常方便实现 RESTful API 网络请求.在 iOS开发中也有非常强大的网络请求库 Moya ,Moya是一个基于 ...

  9. Redis和MongoDB区别

    MongoDB 更类似 MySQL,支持字段索引.游标操作,其优势在于查询功能比较强大,擅长查询 JSON 数据,能存储海量数据,但是不支持事务.Redis 是一个开源(BSD许可)的,内存中的数据结 ...

  10. 重启宝塔面板后提示-ModuleNotFoundError: No module named 'geventwebsocket'

    背景: 因服务器部署了flask项目,安装了python3,故重启宝塔面板报错 [Traceback (most recent call last): File , in load_class mod ...