`

jQuery选择器(一)

阅读更多
          通俗的讲, 选择器就是"一个表示特殊语意的字符串". 只要把选择器字符串传入方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回.

          jQuery选择器分类 
            1. 基础选择器 Basics
名称 说明 举例
#id           根据元素Id选择 $("divId") 选择ID为divId的元素
element       根据元素的名称选择, $("a") 选择所有<a>元素
.class        根据元素的css类选择 $(".bgRed") 选择所用CSS类为bgRed的元素
*             选择所有元素 $("*")选择页面所有元素
selector1,
selector2,
selectorN     可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $("#divId, a, .bgRed")
          2.层次选择器 Hierarchy
           ancestor descendant
           使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input. 例如:$(".bgRed div") 选择CSS类为bgRed的元素中的所有<div>元素.
           parent > child
           选择parent的直接子节点child.  child必须包含在parent中并且父类是parent元素.例如: $(".myList>li") 选择CSS类为myList元素中的直接子节点<li>对象.          
           prev + next prev和next
           是两个同级别的元素. 选中在prev元素后面的next元素. 例如:$("#hibiscus+img")选在id为hibiscus元素后面的img对象.
           prev ~ siblings  选择prev后面的根据siblings过滤的元素
注:siblings是过滤器 例如:$("#someDiv~[title]")选择id为someDiv的对象后面所有带有title属性的元素。
             3.基本过滤选择器
             :first
           匹配找到的第一个元素 ,例如:查找表格的第一行:$("tr:first")
           :last
           匹配找到的最后一个元素,例如: 查找表格的最后一行:$("tr:last")
           :not(selector)
           去除所有与给定选择器匹配的元素,例如: 查找所有未选中的 input 元素: $("input:not(:checked)")
           :even
           匹配所有索引值为偶数的元素,从 0 开始计数,例如:查找表格的1、3、5...行:$("tr:even") 。
            dd 匹配所有索引值为奇数的元素,从 0 开始计数 ,例如:查找表格的2、4、6行:$("tr:odd")
           :eq(index)
           匹配一个给定索引值的元素 注:index从 0 开始计数,例如:查找第二行:$("tr:eq(1)")
          :gt(index) 匹配所有大于给定索引值的元素 注:index从 0 开始计数,例如:查找第二第三行,即索引值是1和2,也就是比0大:$("tr:gt(0)")
          :lt(index)
          选择结果集中索引小于 N 的 elements
注:index从 0 开始计数 ,例如:查找第一第二行,即索引值是0和1,也就是比2小:$("tr:lt(2)")
          :header 选择所有h1,h2,h3一类的header标签,例如:给页面内所有标题加上背景色: $(":header").css("background", "#EEE");
          :animated 匹配所有正在执行动画效果的元素 ,例如:只有对不在执行动画效果的元素执行一个动画特效:
$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});









分享到:
评论

相关推荐

    jQuery选择器全解.

    本文将深入解析jQuery选择器的功能与使用方法,帮助读者掌握这一重要的前端技术。 #### 二、jQuery选择器概览 jQuery选择器主要分为两大类:“选择”和“过滤”。选择器用于指定目标元素,而过滤器则进一步细化...

    JQuery选择器测试 离线版

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

    jQuery选择器的一个Bug

    然而,即便如此成熟的库,也难免存在一些已知的问题和限制,其中之一就是我们今天要探讨的"jQuery选择器的一个Bug"。 首先,我们要理解jQuery选择器的基本原理。jQuery基于CSS选择器,它允许开发者通过类似CSS的...

    jQuery基础选择器练习题

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

    基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器

    在提供的压缩包文件"lay-picker-master"中,我们可以推测这是一个基于jQuery的移动端选择器库,名为"lay-picker"。这个库可能包含了实现上述功能的源代码、示例、文档和其他资源。使用这个库,开发者可以快速集成到...

    jquery选择器入门详解小案例

    本篇文章将深入探讨jQuery选择器的入门知识,并通过实际的小案例帮助你理解和应用这些选择器。 jQuery选择器是jQuery库的核心部分,它们是用于在HTML文档中查找元素的工具。jQuery支持多种CSS选择器,包括基本选择...

    jQuery颜色选择器ColorPicker

    **jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...

    jquery周历选择器

    本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...

    jQuery选择器.rar

    jQuery选择器是其核心功能之一,它们用于在HTML文档中找到特定的元素,以便进行进一步的操作。下面是对jQuery选择器的一些详细说明: 1. **基本选择器**:包括`$()`函数内的ID选择器(如`$("#myID")`)、类选择器...

    PPT和案例\jQuery选择器

    jQuery选择器是jQuery库的核心特性之一,它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格,并在此基础上提供了更强大和灵活的选择方式。以下是对jQuery选择器的详细说明: **1. 基本...

    jQuery时间选择器点击选择小时分钟代码

    在网页开发中,jQuery时间选择器是一个非常实用的工具,它允许用户通过点击来选取特定的小时和分钟,为表单输入提供了便利。这个“jQuery时间选择器点击选择小时分钟代码”很可能是一个实现这一功能的代码示例或者...

    一个简单的jQuery时间选择器

    【标题】"一个简单的jQuery时间选择器" 描述了如何使用jQuery库来创建一个用户友好的时间选择界面。在Web开发中,特别是涉及到用户输入时间的场景,如预订、会议安排等,拥有一个直观易用的时间选择器可以极大提升...

    jquery样式选择器插件源码demo

    对于初学者,这是一个极好的学习资源,通过研究这个插件,可以加深对jQuery选择器的理解,并掌握编写高效JavaScript代码的技巧。而对于经验丰富的开发者,它提供了一个有趣的挑战,去挖掘和分析代码中的创新之处。

    jquery 城市选择器

    jQuery城市选择器就是解决这一需求的有效工具,它利用JavaScript和jQuery库,提供了一种便捷、高效的交互方式。本文将深入探讨jQuery城市选择器的实现原理、使用方法及其优势。 一、jQuery库基础 jQuery是一个轻量...

    jQuery选择器总结

    jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。

    jquery选择器速查表

    jquery选择器功能无比强大,用好了可以起到事半功倍的效果,这个资源把选择器单独列出来,便于方便查找

    jquery日期选择器

    3. **初始化插件**:使用jQuery选择器选择该元素,然后调用日期选择器插件的初始化方法,例如`$(selector).dateInput(options);`,其中`options`是可选的配置对象。 4. **配置选项**:根据需求设置日期选择器的配置...

    Jquery实验室的选择器工具

    jQuery选择器返回的是jQuery对象,它封装了一组DOM元素。jQuery对象提供了丰富的API方法,如`.css()`, `.html()`, `.attr()`, `.on()`等,便于对选取的元素进行操作。 ### 8. 性能优化 虽然jQuery选择器非常强大,...

    Jquery颜色选择器

    使用这个插件,你需要在HTML文件中引用jQuery库、ColorPicker插件的JS和CSS文件,然后在适当的地方通过jQuery选择器调用插件,并根据需要配置选项。 例如: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery颜色选择器...

    jquery双向选择器代码

    首先,理解jQuery选择器的基本概念是关键。jQuery提供了多种内置的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(element)等,它们用于定位HTML文档中的特定元素。双向选择器则在此基础上增加了更...

Global site tag (gtag.js) - Google Analytics