摘自:http://www.cnblogs.com/webmoon/p/3169360.html

jQuery基础之选择器

选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器。因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。jQuery选择器完全继承了CSS的风格。利用jQuery选择器,可以非常便捷的找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器是否支持这一选择器。

jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面通过表格进行一一介绍。

1.基本选择器

选择器 描 述 返 回 示 例
#id 匹配给定的id 单个元素 $(“header”)
.class 匹配给定的类名 集合元素 $(“.test”)
E 匹配给定的标签名 集合元素 $(“div”)
* 匹配所有元素 集合元素 $(“*’)
E, .class, E… 匹配给定的集合 集合元素 $(“span, .tips”)

2.层次选择器

选择器 描 述 返 回 示 例
$(“ancestor descendant”) 匹配ancestor里的所有 descendant(后代)元素 集合元素 $(“body div”)
$(“parent>child”) 匹配parent下的所有 child(子)元素 集合元素 $(“div>span”)
$(“prev+next”) 匹配紧接在prev后的 next元素 集合元素 $(“.error+span”)
$(“prev~siblings”) 匹配prev后的所有 siblings元素 集合元素 $(“span~a”)

3.过滤选择器

3.1 基本过滤选择器

选择器 描 述 返 回 示 例
:first 匹配第一个元素 单个元素 $(“div:first”)
:last 匹配最后一个元素 单个元素 $(“span:last”)
:even 匹配索引是偶数的元素 索引从0开始 集合元素 $(“li:even”)
: odd 匹配索引是奇数的元素 索引从0开始 集合元素 $(“li:odd”)
:eq(index) 匹配索引等于index的元 素(索引从0开始) 单个元素 $(“input:eq(2)”)
:gt(index) 匹配索引大于index的元 素(索引从0开始) 集合元素 $(“input:gt(1)”)
:lt(index) 匹配索引小于index的元 素(索引从0开始) 集合元素 $(“input:lt(5)”)
:header 匹配所有h1,h2…等 标题元素 集合元素 $(“:header”)
:animated 匹配所有正在执行 动画的元素 集合元素 $(“div:animated”)

3.2 内容过滤选择器

选择器 描 述 返 回 示 例
:contains(text) 匹配含有文本内容text 的元素 集合元素 $(“p:contains(今天)”)
:empty 匹配不含子元素或 文本元素的空元素 集合元素 $(“p:empty”)
:has(selector) 匹配包含selector元素 的元素 集合元素 $(“div:has(span)”)
:parent 匹配含有子元素或文本 的元素 集合元素 $(“div:parent”)

3.3 可见性过滤选择器

选择器 描 述 返 回 示 例
:hidden 匹配所有不可见 的元素 集合元素 $(“:hidden”)
:visible 匹配所有可见元素 集合元素 $(“:visible”)

3.4 属性过滤选择器

选择器 描 述 返 回 示 例
[attr] 匹配拥有此属性 的元素 集合元素 $(“img[alt]“)
[attr=value] 匹配属性值为value 的元素 集合元素 $(“a[title=test]“)
[attr!=value] 匹配属性值不等于 value的元素 集合元素 $(“a[title!=test]“)
[attr^=value] 匹配属性值以value 开头的元素 集合元素 $(“img[alt^=welcome]“)
[attr$=value] 匹配属性值以value 结尾的元素 集合元素 $(“img[alt$=last]“)
[attr*=vlaue] 匹配属性值中含有 value的元素 集合元素 $(“div[title*=test]“)
[attr1][attr2]… 通过多个属性 进行匹配 集合元素 $(“div[id][title*=test]“)

3.5 子元素过滤选择器

选择器 描 述 返 回 示 例
:nth-child 匹配每个父元素下的 第index个子元素 索引从1开始 集合元素 $(“div:nth-child(2)”)
:first-child 匹配每个父元素的 第一个子元素 集合元素 $(“div:first-child”)
:last-child 匹配每个父元素的 最后一个子元素 集合元素 $(“div:last-child”)
: only-child 某元素是它父元素中 的唯一的子元素 则匹配它 集合元素 $(“div:only-child”)

3.6 表单对象属性过滤选择器

选择器 描 述 返 回 示 例
:enabled 匹配所有可用元素 集合元素 $(“form :enabled”)
:disabled 匹配所有不可用 的元素 集合元素 $(“form :disabled”)
:checked 匹配所有被选中的元素 (含单选框,复选框) 集合元素 $(“input:checked”)
:selected 匹配所有被选中的 选项元素 集合元素 $(“select :selected”)

4.表单选择器

选择器 描 述 返 回 示 例
:input 匹配所有input, textarea, select, button元素 集合元素 $(“input”)
:text 匹配所有文本框 集合元素 $(“:text”)
:password 匹配所有密码框 集合元素 $(“:password”)
:radio 匹配所有单选框 集合元素 $(“:radio”)
:checkbox 匹配所有所有多选框 集合元素 $(“:checkbox”)
:submit 匹配所有提交按钮 集合元素 $(“:submit”)
:image 匹配所有图像按钮 集合元素 $(“:image”)
:reset 匹配所有重置按钮 集合元素 $(“:reset”)
:button 匹配所有按钮 集合元素 $(“:button”)
:file 匹配所有上传域 集合元素 $(“:file”)
 
 
分类: jquery

jQuery基础之选择器的更多相关文章

  1. jQuery基础---常规选择器

    内容摘要: 1.简单选择器 2.进阶选择器 3.高级选择器 发文不易,转载请注明出处! jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名. ...

  2. jQuery基础知识--选择器与效果

    $(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...

  3. jQuery基础,选择器

    jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Less, ...

  4. webform(九)——JQuery基础(选择器、事件、DOM操作)

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  5. Webform——JQuery基础(选择器、事件、DOM操作)

    一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选择:用空格隔开 代码用法展示:   ...

  6. JQuery基础(选择器、事件、DOM操作)

    一.选择器 1.基本选择器 ①id选择器       ②class选择器       ③标签名选择 ④并列选择          ⑤后代选择 代码用法展示: <title></tit ...

  7. (转)jQuery基础之选择器

    原文地址: http://www.cnblogs.com/webmoon/p/3169360.html 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器 ...

  8. jQuery基础——选择器、效果

    一.使用JS的痛处 在学习和使用js的过程中发现了js的一些痛处: 1.书写繁琐,代码量大. 2.代码复杂. 3.动画效果很难实现.使用定时器,要小心各种定时器的清除.各种操作和处理事件不好实现. 4 ...

  9. jQuery基础(2)-- jQuery 选择器

    jQuery 选择器允许您对 HTML 元素组或单个元素进行操作.jQuery 选择器基于元素的 id.类.类型.属性.属性值等"查找"(或选择)HTML 元素. 它基于已经存在的 ...

随机推荐

  1. C++中关于文件的读写

    在C++的学习过程中,我们时常要用到对文件的操作,下面我们讲一下文件的读写. 首先,读.也就是把已有的文件读到控制台上,那么如何操作呢?首先要将文件操作的输入输出流包含进去. <fstream& ...

  2. selenium-pageobject设计模式

    from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom time import sleepfrom ...

  3. vi/vim使用进阶: vimrc初步

    本节所用命令的帮助入口: :help compatible :help mapleader :help map :help autocmd 当vim在启动时,如果没有找到vimrc或gvimrc,它缺 ...

  4. MySQL 分区表

    转载自MySQL 分区表 今天统计数据的时候发现一张表使用了表分区,借此机会记录一下. 1. 什么是表分区? 表分区,是指根据一定规则,将数据库中的一张表分解成多个更小的,容易管理的部分.从逻辑上看, ...

  5. Pointers and Dynamic Allocation of Memory

    METHOD 1: Consider the case where we do not know the number of elements in each row at compile time, ...

  6. JAVA里面的IO流(一)分类1(字节/字符和输入/输出)

      java.io包中定义了多个流类型(流或抽象类)来实现输入/输出功能:可以从不同的角度对其进行分类: 按数据流的方向不同可以分为输入流和输出流 从文件读数据为输入流:往文件写数据为输出流 按处理数 ...

  7. C#匿名函数的坑

    在for循环中catch索引 for (int i = 0; i < n; i++) { foo(() =>{ if (i == x) //这里的i始终都是最后一个... { //bala ...

  8. UVA 12299 RMQ with Shifts(线段树:单点更新)

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  9. Ubuntu下移植OpenCv

    通过近一周的时候终于成功交叉编译opencv成功了,真心不容易.有一句话乃真理也,凡事贵在坚持.过程总是痛苦的,因为不懂得很多问题但是又需要面对很多问题,最大的收获就是耐心解决所有问题后就懂得这些了. ...

  10. Core Audio(一)

    Core Audio APIs core audio apis是vista之后引入的,不使用与之前的windows版本:core audio apis提供访问endpoint devices,比如耳机 ...