申明：初次学习Jquery的选择器时只记得几个和css选择器类似的几个，在这里列出书上写上的各路选择器方便以后的查询和现在的学习　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　所有例子都来自书上

测试画面：

一、基本选择器

#id,　　　　　　　　　　　　　　　　　　　　$("#test")选取id为test的元素（惟一）

.class　　　　　 　　　　　　　　　　　　　　$(".test")选取所有class为test的元素

element　　　　 　　　　　　　　　　　　　　$("p")选取所有的<P>元素

* 　　　　　　　 　　　　　　　　　　　　　　$("*")选取所有的元素

selector1,selector2,....,selectorN　　　　　　$("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素

demo1: 改变id为one的元素的背景色

demo2：改变class为mini的所有元素的背景色

demo3：改变元素名是<div>的所有元素的背景色

demo4：改变所有元素的背景色

demo5：改变所有的<span>元素和id为two的元素的背景色

 二、层次选择器

通过DOM元素之间的层次关系来获取特定元素，如：后代元素、子元素、相邻元素和同辈元素

$("ancestor descendant")　　　　　　　　　　$("div span")选取<div>里的所有的<span>元素

$("parent > child")                              　　  $("div > span")选取<div>元素下元素名是<span>的子元素

两者区别在于前者检索出所有后代，后者只是检索儿子

$("prev + next")　　　　　　　　　　　　　　 $(".one + div")选取class为one的下一个<div>同辈元素

$("prev~siblings")　　　　　　　　　　　　　  $("#two~div")选取id为two的元素后面的所有<div>同辈元素

demo1：改变<body>内所有<div>的背景色

demo2：改变<body>内<div>元素的背景色

demo3：改变class为one的下一个<div>同辈元素背景色

demo4：改变id为two的元素后面的所有<div>同辈元素的背景色

对于后面两个选择器有更方便的方法可以替代：

$(".one + div") == $(".one").next("div")          $("#prev~div")==$("#prev").nextAll("div");

$("prev~siblings")与siblings()方法的区别在于前者只能匹配"prev"元素后面的同辈<div>元素。而后者与位置无关只要是同辈的节点都可以。

三、过滤选择器

1)基本过滤选择器

:first 　　　　　　　　$("div:first")选取所有<div>元素中第一个<div>元素

:last　　　　　　　　  $("div:last")选取所有<div>元素中最后一个<div>元素

:not(selector)　　　　$("input:not(myClass)")选取class不是myClass的<input>元素

:even　　　　　　　　$("input:even")选取索引是偶数的<input>元素 0算偶数

:odd　　　　　　　　 $("input:odd")选取索引是奇数的<input>元素

:eq(index)　　　　　 $("input:eq(1)")选取索引等于1的<input>元素

:gt(indfex)　　　　　$("input:gt(1)")选取索引大于1的<input>元素

:lt(index)　　　　　  $("input:lt(1)")选取索引小于1的<input>元素

:header      　　　　 $(":header")选取网页中所有的<h1>,<h2>,<h3>...

:animated  　　　　  $("div:animated")选取正在执行动画的<div>元素

:focus　　　　　　　 $(":focus")选取当前获取焦点的元素

demo1: 改变第一个<div>元素的背景色

demo2: 改变最后一个<div>元素的背景色

demo3: 改变class不为one的<div>元素的背景色

demo4：改变索引值为偶数的<div>元素的背景色

demo5：改变索引值为奇数的<div>元素的背景色

demo5：改变索引值等于3的<div>元素的背景色

demo6：改变索引值大于3的<div>元素的背景色

demo7：改变索引值i小于3的<div>元素的背景色

2）内容过滤选择器

:contains(text)　　　　　　　　$("div:contains("我")") 选取含有文本”我“的<div>元素

:empty 　　　　　　　　　　　  $("div:empty")选取不包含子元素（包括文本元素）的<div>空元素

:has(selector)　　　　　　　　  $("div:has(p)")选取含有<p>元素的<div>元素

:parent　　　　　　　　　　　　$("div:parent")选取拥有子元素（包括文本元素）的<div>元素

demo1:改变含有文本"di"的<div元素的背景色

demo2:改变不包含子元素的<div>空元素的背景色

demo3:改变含有class为mini元素的<div>元素的背景色

demo4:改变含有子元素（包括文本元素）的<div>元素的背景色

3)可见性过滤选择器

:hidden　　　　　　$(":hidden")选取所有不可见的元素。包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">.如果只想选取　　　　　　　　　　　　　　　<input>元素，可以使用$("input:hidden");

:visible　　　　　　 $("div:visible")选取所有可见的<div>元素

demo1:改变所有可见的<div>元素的背景色

demo2:显示隐藏的<div>元素

4)属性过滤选择器

[attribute]　　　　　　　　　　$("div[id]")选取拥有属性id的元素

[attribute=value]　　　　　　  $("div[title=test]")选取属性title为”test“的<div>元素

[attribute!=value]　　　　　　 $("div[title!=test]")选取属性title不等于"test"的<div>元素（没有属性title的<div>元素也会被选取）

[attribute^=value]　　　　　　$("div[title^=test]")选取属性title以”test“开始的<div>元素

[attribute$=value]　　　　　　$("div[title$=test]")选取属性title以”test“结束的<div>元素

[attribute*=value]　　　　　　$("div[title*=test]")选取属性title含有”test“的<div>元素

[attribute|=value]　　　　　　 $("div[title|='en']")选取属性title等于en或以en为前缀（该字符串后跟一个连字符‘-’）的<div>元素

[attribute~=value]　　　　　　$("div[title~='uk']")选取属性title用空格分隔的值中包含字符uk的<div>元素

[attribute1][attribute2]...[attributeN]　　　　　　$("div[id][title$='test']")选取拥有属性id，并且属性title以"test"结束的<div>元素

demo1:改变含有属性title的<div>元素的背景色

demo2:改变属性title值等于"test"的<div>元素的背景色

demo3:改变属性值不等于”test“的<div>元素的背景色

demo4:改变属性值以”te“开始的<div>元素的背景色

demo5:改变属性值title以”est“结束的<div>元素的背景色

demo6:改变属性title含有"es"的<div>元素的背景色

dmeo7:改变含有属性id,并且属性title含有”es“的<div>元素的背景色

测试画面

demo8:改变属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素的背景色

demo9:改变属性title用空格分隔的值包含字符uk的元素的背景色

5)子元素过滤选择器

:nth-child　　　　　　:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)有index从1开始，而eq(index)是从0开始的

　　　　　　:nth-child(even)能选取每个父元素下的索引值是偶数的元素

　　　　　　:nth-child(odd)能选取每个父元素下的索引值是奇数的元素

　　　　　　:nth-child(2)能选取每个父元素下的索引值等于2的元素

　　　　　　:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素（n从1开始）

　　　　　　:nth-child(3n+1))能选取每个父元素下的索引值是3n+1的元素（n从1开始）

:first-child　　　　　　:first只返回单个元素，而first-child选择符将为每一个父元素匹配第一个子元素，例如$("ul li:first-child");选取每个<ul>中第一个<li>元素

:last-child　　　　　　 :同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素，例如$("ul li:last-child")选取每个<ul>中最后一个<li>元素

:only-child　　　　　　$("ul li:only-child")在<ul>中选取是惟一子元素的<li>元素

demo1: 改变每个class为one的<div>的父元素下的第2个子元素的背景色

demo2：改变每个class为one的<div>父元素下的第1个子元素的背景色

demo3：改变每个class为one的<div>父元素下的最后一个子元素的背景色

demo4：如果class为one的<div>父元素下只有一个子元素，那么则改变这个子元素的背景色

6）表单对象属性过滤选择器

:enabled　　　　　　　　　　　　$("#form1 :enabled")选取id为"form1"的表单内的所有元素可用的元素

:disabled　　　　　　　　　　　  $("#form2 :disabled")选取id为“form2”的表单内的所有不可用元素

:checked　　　　　　　　　　　　$("input :checked")选取所有被选中的<input>元素(单选框，复选框)

:selected　　　　　　　　　　　　$("select option :selected")选取所有被选中的选项元素（下拉列表）

测试画面

demo1：改变表单内可用<input>元素的值

demo2：改变表单内不可用<input>元素的值

demo3：获取多选框选中的个数

$("input :checked").length

demo4：获取下拉框选中的内容

$("select :selected").text();

四、表单选择器

:input　　　　　　　　　　  $(":input")选取所有<input>、<textarea>、<select>、<button>

:text　　　　　　　　　　    $(":text")选取所有的单行文本框

:password　　　　　　　    $(":password")选取所有的密码框

:radio　　　　　　　　　    $(":radio")选取所有的单选框

:checkbox　　　　　　　   $(":checkbox")选取所有的复选框

:submit　　　　　　　　　 $(":submit")选取所有提交的按钮

:image　　　　　　　　　  $(":image")选取所有的图像按钮

:reset　　　　　　　　　　 $(":reset")选取所有的重置按钮

:button　　　　　　　　    $("button")选取所有的按钮

:file　　　　　　　　　　　 $(":file")选取所有的上传域

:hidden　　　　　　　　　 $(":hidden")选取所有不可见元素

有点晚，后面的例子就不写啦！！！

锋利的Jquery解惑系列（三）------ 各路选择器大聚会的更多相关文章

  1. 锋利的Jquery解惑系列（二）------插件开发大总结

    申明:插件开发是实际项目就经常用到的,不过也是挺吃力的.笔者自己做项目时,看着我们老大写的jQuery一头桨糊,那叫个痛苦.后面果断买了本参考书以及浏览别人的博客,现在也算慢慢入门了.现在总结自己的一 ...

  2. 锋利的Jquery解惑系列（一）------基本概念大锅炖

    声明:虽然是基本概念但也是笔者经过一番学习才总结的这些文章,所以他不包括Jquery优缺点.特点.语法的介绍. 概念一:jQuery对像与DOM对象 DOM(Document Object Model ...

  3. [jQuery学习系列三 ]3-JQuery学习二-字典操作

    前言:如果看过了第一篇和第二篇, 相信大家会对jQuery有个初步的认识了, 对于jQuery的选择器和数组的操作都已经很熟悉了, 这一篇就单独罗列jQuery中字典的操作相关的内容. 1. 数组中添 ...

  4. 锋利的jQuery读书笔记---选择器

    前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...

  5. jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）

    jQuery下拉框操作系列$("option:selected",this)  &&(锋利的jQuery) <!DOCTYPE html> <ht ...

  6. Jquery全选系列操作（锋利的jQuery）

    Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  7. 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器

    <锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...

  8. 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器

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

  9. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

随机推荐

  1. 嵌套在母版页中的repeater自动生成控件ID

    注:如果直接在后台通过e.Item.FindControl()方法直接找控件,然后再通过对其ID赋值,在编译之后会出现“母版页名称_ID“类似的很长的ID值(详情点击) 解决方法:<asp:Co ...

  2. Log Parser 微软强大的日志分析工具

    Log Parser(微软网站下载)是微软公司出品的日志分析工具,它功能强大,使用简单,可以分析基于文本的日志文件.XML 文件.CSV(逗号分隔符)文件,以及操作系统的事件日志.注册表.文件系统.A ...

  3. android onTouch()与onTouchEvent()的区别

    1.onTouch方法: onTouch方法是View的 OnTouchListener借口中定义的方法.当一个View绑定了OnTouchLister后,当有touch事件触发时,就会调用onTou ...

  4. 什么是JSON？如何使用？它比BSON更好吗？

    本文由码农网 – 小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 长话短说:如果你想知道JSON——它是什么,如何使用它以及它和BSON哪个更好,那么你来对地方了.在本文中,我们 ...

  5. 有关window.location 对象

    之前在有关location的使用就一种方式给他的href赋值使页面跳转.今天看项目中的代码看到了一个不一样的用法 window.location.href = 'http://' + document ...

  6. 检查REDO日志相关信息并生成HTML文件的脚本

    生成HTML格式的文件 内容有: 检查数据库版本.REDO日志组情况, 最近20次日志切换频率检查--日志间的归档时间间隔, 这对查看数据库的IO繁忙时段 统计指定日期当天每小时的归档日志产生量--日 ...

  7. javascript中使用md5函数

    javascript中使用md5函数 这对于js来讲本来是没有的,现在可以自己定义一个md5的函数,达到加密效果. var hexcase = 0; function hex_md5(a) { if ...

  8. oracle 表空管理方式（LMT)、ASSM段管理方式、一级位图块、二级位图块、三级位图块。

    今天是2013-12-16,今天和明天是我学习oracle生涯中一个特殊的日子.今天晚上进行了一下表空间管理方式的学习,在此记录一下笔记. 对于oracle数据库最小i/0单位是数据块,最想分配空间单 ...

  9. Kinect开发学习笔记之（一）Kinect介绍和应用

    Kinect开发学习笔记之(一)Kinect介绍和应用 zouxy09@qq.com http://blog.csdn.net/zouxy09 一.Kinect简单介绍 Kinectfor Xbox ...

  10. [React Native] Error Handling and ActivityIndicatorIOS

    With React Native you use ActivityIndicatorIOS to show or hide a spinner. In this lesson we combine ...