`
flj643213995
  • 浏览: 13213 次
  • 性别: Icon_minigender_2
  • 来自: 长沙
社区版块
存档分类
最新评论

jQuery选择器类型

阅读更多
    jQuery选择器应该是学习jQuery的最基本的知识了,下面介绍一下各个类型的选择器的怎么写。

    1、基本选择器:这是最常用的选择器
       #id:根基给定的id匹配一个元素
       .class:根据类名匹配元素
       element:直接写出标签名,根据给定的元素名匹配元素
       *:通配符
       selector1,selector2,...,selectorN:将每一个选择器匹配的元素合并后一起返回

    2、层次选择器:根据层次之间的特定关系来获取元素
       $("ancestor descendant"):选取ancestor元素里的所有descendant后代元素
       $("parent>child"):选取parent元素下的child(子)元素
       $("pre+next"):选取紧接在pre后的next(下一个)元素
       $("prev~siblings"):选取prev元素之后的所有siblings(同辈)元素

    3、过滤选择器:基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单对象属性过滤
       基本过滤选择器:
                  :first :选择第一元素
                  :last:最后一个元素
                  :not(selector):去除所有与给定选择器匹配的元素
                  :even:偶数
                  :odd:奇数
                  :eq(index):选取索引等于index的元素(index从0开始)
                  :gt(index):索引大于index
                  :lt(index):索引小于index
                  :hender:选取所有标题元素
                  :animated:选取当前正在执行动画的元素
                  :focus:选取当前获取焦点的元素
       内容过滤选择器:
                  :contains(text):选取含有文本内容为“text”的元素
                  :empty:选取不包含子元素或者文本的空元素
                  :has(selector):选取含有选择器所匹配的元素的元素
                  :parent:选取含有子元素或者文本的元素
       可见性过滤选择器:
                  :hidden:选取所有不可见的元素
                  :visible:选取所有可见的元素
       属性过滤选取器:
                  [attribute]:选取拥有此属性的元素
                  [attribute=value]:属性值为value的元素
                  [attribute!=value]:属性值不等于value的元素
                  [attribute^=value]:属性值以value开头的元素
                  [attribute$=value]:属性值以value结尾的元素
                  [attribute*=value]:属性值含有value的元素
                  [attribute|=value]:属性等于给定字符串或以该字符串为前缀的元素(如果为前缀的话,该字符串之后要有“-”连字符)
                  [attribute~=value]:属性用空格分隔的值中包含有一个给定值的元素
                  [attribute1][attribute2][attributeN]:几个条件同时符合的元素
       子元素过滤选择器:
                  :nth-child(index/even/odd/equation):选取每个父元素下的第index个子元素或者奇偶元素(index从1开始)
                  :first-child:父元素中第一个子元素
                  :last-child:父元素中最后一个子元素
                  :only-child:如果某个元素是它父元素的唯一子类将会匹配
       表单对象属性过滤器:
                  :enabled:选取所有可用元素
                  :disabled:选取所有不可用元素
                  :checked:选取所有被选中的元素(单选框、复选框)
                  :select:选取所有被选中的选项元素(下拉列表)
   
    4、表单选择器
       :input:选取所有<input><textarea><select><button>元素
       :text:所有单行文本框元素
       :password:所有密码框
       :radio:所有单选框
       :checkbox:所有多选框
       :submit:所有提交按钮
       :image:所有图像按钮
       :reset:所有重置按钮
       :button:所有的按钮
       :file:所有的上传域
       :hidden:所有不可见元素


    选择器中有好多前边都带有冒号,使用的时候千万注意是否要加空格,例如:
             $("div :input")   指的是在div下的所有<input><textatea><select><button>元素
             $("div:input")    指的是在div下的为input标签的元素


     在jQuery中还有一些特使的字符,如$、[、{ 等,如果在选择器中没法识别应该用转译字符“\\”将其转译再使用。


    选择器的灵活应用可以使代码干净整洁,掌握好选择器是一个开发人员的基本素质。大家一起努力啦!fighting!
    

分享到:
评论

相关推荐

    JQuery选择器测试 离线版

    这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用,由一位国外专家创建,并进行了轻微的修改。** 在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性...

    jQuery选择器基础知识

    本篇文章将深入探讨jQuery选择器的基础知识,包括其类型、用法和实际应用。 ### 1. 基本选择器 基本选择器包括ID选择器(#id)、类选择器(.class)和元素选择器(element)。例如: - `$("#myID")` 选择ID为...

    jQuery选择器大全

    ### jQuery选择器大全详解 #### 引言 在前端开发领域,jQuery因其强大的功能和简洁的语法而备受青睐。选择器作为jQuery的核心组件之一,扮演着桥梁的角色,连接DOM操作与CSS选择。本文旨在深入解析jQuery提供的48...

    jQuery基础选择器练习题

    在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。

    jQuery选择器大全(48个代码片段 21幅图演示)

    **jQuery选择器大全** jQuery库以其易用性和强大的选择器功能而闻名,使得JavaScript开发者能够更轻松地操作DOM(文档对象模型)。以下是一份详细的知识点概述,涵盖了jQuery中的主要选择器及其应用。 1. **基本...

    jQuery选择器速查表

    ### jQuery选择器速查表知识点 jQuery选择器是jQuery库中用于选取HTML元素的强大工具。通过不同的选择器,我们可以轻松地选中页面中的元素并进行操作。本速查表将介绍几种不同类型的选择器,以供查询和参考。 ####...

    Java模拟Jquery选择器

    可以创建一个方法,根据选择器类型进行处理,如: ```java private static NodeList selectById(Parser parser, String id) { NodeList nodes = new NodeList(); NodeFilter filter = new TagNameFilter("ID", ...

    jquery样式选择器插件源码demo

    通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...

    Jquery实验室的选择器工具

    **jQuery选择器工具详解** jQuery库是JavaScript中最广泛使用的库之一,它简化了DOM操作、事件处理、动画制作以及Ajax交互。在这个“jQuery实验室的选择器工具”中,我们将深入探讨jQuery选择器的强大功能,它是...

    jQuery选择器全集详解

    而jQuery选择器是jQuery的核心部分之一,用于选择页面元素,以便我们可以对它们进行操作。这些选择器可以分成多个类别,包括基本选择器、层次选择器、过滤选择器等,下面将详细介绍。 基本选择器包括id选择器、...

    jquery 动态选择器

    动态选择器通常涉及以下几种类型: 1. **类选择器**: 使用`.`符号来选取具有特定CSS类的元素。例如,`$(".myClass")`将选取所有类名为`myClass`的元素。 2. **ID选择器**: 使用`#`符号来选取具有特定ID的元素。...

    RIA应用开发:2-jquery选择器.ppt

    2. jQuery 选择器的类型 jQuery 选择器有多种类型,包括: * Id 选择器:通过元素的 Id 属性来选择元素,例如 $("#id")。 * 类选择器:通过元素的类名来选择元素,例如 $(".class")。 * 元素选择器:通过元素的...

    JQuery各种选择器详解

    JQuery选择器,xpath类型等的选择器

    jquery选择器应用实例

    在本实例中,我们将探讨如何利用jQuery选择器在Visual Studio 2010环境下进行高效而精确的网页元素选取。jQuery的选择器是其强大功能的核心,它们基于CSS选择器,但提供了更丰富的功能。 首先,让我们了解jQuery的...

    JQuery选择器详解JQuery选择器详解

    JQuery选择器是jQuery库中的核心功能之一,它极大地简化了JavaScript中对DOM元素的选取,使得开发者可以更高效地操作网页元素。本篇将详细阐述JQuery选择器的使用和原理。 一、基础选择器 JQuery的基础选择器包括ID...

    jQuery选择器大全PDF

    下面,我们将深入探讨jQuery选择器的各种类型及其应用,帮助你构建坚实的基础。 #### 基本选择器:构建DOM操作的基石 1. **ID选择器**:用于选取具有特定ID的单个元素。例如: ```javascript $('#one').css('...

    CSS选择器和jQuery选择器

    ### CSS选择器与jQuery选择器详解 #### 一、引言 在现代Web开发中,选择器扮演着至关重要的角色。无论是对HTML元素应用样式还是对其进行动态操作,选择器都是必不可少的工具。本文将深入探讨两种常用的选择器——...

    jQuery学习资料之万能的选择器

    jQuery选择器是其强大之处,它们基于CSS选择器,但扩展了更多功能,允许更复杂的选取方式。以下是一些常见选择器: - **基本选择器**:`#id`(ID选择器)、`.class`(类选择器)、`tag`(标签选择器)和`*`(通用...

    Jquery选择器教程

    **jQuery选择器教程** 在Web开发中,jQuery作为一个强大的JavaScript库,极大地简化了DOM操作、事件处理和动画制作。尤其在选择元素方面,jQuery提供了一系列高效且易用的选择器,使得开发者可以更方便地选取页面上...

Global site tag (gtag.js) - Google Analytics