`
WKsandy
  • 浏览: 149425 次
  • 性别: Icon_minigender_1
  • 来自: 常州
社区版块
存档分类
最新评论

锋利的jQuery笔记4.1——jQuery选择器

阅读更多

一、简介 

   jQuery的选择器语法主要是基于CSS语法(早期版本还支持一部分XPath语法,因为效率等原因后期去除,但可以通过插件来使用),另外W3C积极推进js原生的Selector API 规定了querySelector和querySelectorAll方法,目前大部分主流浏览器提供支持(IE需8以上),jQuery内部也有应用querySelectorAll

 

相关知识参考: 

http://www.w3.org/TR/css3-selectors/

http://www.w3.org/TR/xpath20/

http://www.w3.org/TR/selectors-api/

 

二、分类

   jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

   1.基本选择器:jQuery中最常用的选择器,也是最简单的选择器,它通过id、class、和标签名来查找DOM元素。在网页中,每个id名称只能使用一次,class允许重复使用。

jQuery的基本选择器

选择器

描述

返回

示例

#id

根据给定的id匹配一个元素

单个元素

$("#test")选取idtest的元素

.class

根据给定的类名匹配元素

集合元素

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

element

根据给定的元素名匹配元素

集合元素

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

*

匹配所有元素

集合元素

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

selector1,selector2,...,selectorN

将每一个选择器匹配到的元素合并后一起返回

集合元素

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

 

 

   2.层次选择器:如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和兄弟元素等,那么层次选择器是一个非常好的选择

 

jQuery的层次选择器

选择器

描述

返回

示例

$("ancestor descendant")

选取ancestor元素里的所有descendant(后代)元素

集合元素

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

$("parent>child")

选取parent元素下的child(子)元素,与$("ancestor descendant")有区别,$("ancestor descendant")选择的是后代元素

集合元素

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

$("prev+next")

选取紧接在prev元素后的next元素

集合元素

$(".one+div")选取classone的下一个<div>元素

$("prev~siblings")

选取prev元素之后的所有siblings元素

集合元素

$("#two~div")选取idtwo的元素后面的所有<div>兄弟元素

 

 

 

 

 

 

 

  

3.过滤选择器:主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

   1) 基本过滤 

 

jQuery的基本过滤选择器

选择器

描述

返回

示例

:first

选取第1个元素

单个元素

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

:last

选取最后一个元素

单个元素

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

:not(selector)

去除所有与给定选择器匹配的元素

集合元素

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

:even

选取索引是偶数的所有元素,索引从0开始

集合元素

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

:odd

选取索引是奇数的所有元素,索引从0开始

集合元素

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

:eq(index)

选取索引等于index的元素(index0开始)

单个元素

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

:gt(index)

选取索引大于index的元素(index0开始)

集合元素

$("input:gt(1)")选取索引大于1<input>元素(注:大于1,而不包括1

:lt(index)

选取索引小于index的元素(index0开始)

集合元素

$("input:lt(1)")选取索引小于1<input>元素(注:小于1,而不包括1

:header

选取所有的标题元素,例如h1,h2,h3等等

集合元素

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

:animated

选取当前正在执行动画的所有元素

集合元素

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

 
分享到:
评论

相关推荐

    Python 笔记源码——内含python后端&机器学习等.zip

    Python 笔记源码——内含python后端&机器学习等.zip Python 笔记源码——内含python后端&机器学习等.zip Python 笔记源码——内含python后端&机器学习等.zip Python 笔记源码——内含python后端&机器学习等.zip ...

    jQuery.flipster——简单好用的立体式banner切换插件.zip

    3. 在页面加载完成后,使用jQuery选择器找到该容器元素,并调用`.flipster()`方法来初始化插件。 例如: ```javascript $(document).ready(function() { $('.flipster').flipster({ // 这里可以设置插件的选项,...

    锋利jquery笔记

    《锋利jQuery笔记》是一本深入讲解jQuery库的书籍,旨在帮助读者掌握这一强大的JavaScript库,从而提升网页开发效率和用户体验。jQuery是一个轻量级、高性能的JavaScript框架,它简化了DOM操作、事件处理、动画设计...

    JAVA学习笔记————————

    在深入探讨JAVA学习笔记之前,我们首先理解一下JAVA这一编程语言的重要性。JAVA,由Sun Microsystems公司(现已被Oracle收购)于1995年推出,是一种面向对象的、跨平台的编程语言,以其“一次编写,到处运行”的特性...

    锋利的JQuery学习笔记.pdf

    锋利的JQuery学习笔记

    锋利的jquery笔记

    《锋利的jQuery笔记》是一份深入探讨jQuery库的宝贵资料,它主要针对JavaScript开发者,尤其是那些希望提升jQuery技能的人员。jQuery是一个轻量级、高性能的JavaScript库,它的核心功能在于简化HTML文档遍历、事件...

    狂神Java学习笔记————前端入门——html、css、JavaScript学习代码

    CSS选择器是其核心,例如类选择器(`.class`)、ID选择器(`#id`)和元素选择器(`element`),掌握这些选择器的用法能帮助我们更精准地定位并美化网页元素。 JavaScript是一种强大的客户端脚本语言,它使得网页...

    Java课程所有学习笔记4.1.md

    Java课程所有学习笔记4.1.md

    jquery笔记

    2. **多个选择器**:`$("选择器,选择器,选择器")` —— 同时选取多个不同类型的元素。 3. **所有后代**:`$("选择器所有后代")` —— 选取指定元素的所有后代。 4. **直接子元素**:`$("选择器&gt;儿子")` —— 仅选取...

    S7-200 Smart入门笔记1-8 程序合集

    S7-200 Smart入门笔记1——流水灯 按钮 S7-200 Smart入门笔记1——流水灯 定时器 S7-200 Smart入门笔记2——读时钟 S7-200 Smart入门笔记3——呼吸灯 S7-200 Smart入门笔记4——全局变量和局部变量 S7-200 Smart入门...

    锋利的jQuery学习笔记

    《锋利的jQuery学习笔记》是一份深入探讨jQuery框架的学习资料,主要针对想要掌握JavaScript库jQuery的开发者。jQuery是一款高效、简洁的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理...

    锋利的jquery(学习笔记)

    以上就是关于《锋利的jQuery》学习笔记中涉及的一些核心知识点,包括jQuery对象与DOM对象的转换、解决库冲突的方法以及jQuery对CSS选择器和选择器的扩展应用。理解并掌握这些内容,将有助于你更加高效地使用jQuery...

    论文笔记模板——自用xmind模板.zip

    标题中的“论文笔记模板——自用xmind模板.zip”表明这是一个使用XMind软件创建的个人使用的论文笔记模板,被压缩成ZIP格式以便于存储和分享。XMind是一款强大的思维导图和头脑风暴软件,它可以帮助用户整理思路,...

    jquery 学习笔记总结

    本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在实际项目中的应用。 ### 1. 选择器 选择器是 jQuery 的精髓,它们允许我们高效地选取页面上的 HTML 元素。jQuery 支持多种 CSS 选择器,如 ID ...

    jQuery笔记

    此外,jQuery还提供了许多其他选择器和方法,如属性选择器、内容过滤选择器、可见性过滤选择器等,以及各种DOM操作、事件处理和动画方法,如`.append()`、`.click()`、`.slideUp()`等,使得JavaScript编程更为便捷和...

    记忆笔记一——文化生活二 .pdf

    记忆笔记一——文化生活二 .pdf

    我的JQuery笔记.doc

    jQuery提供了丰富的选择器用于选取DOM元素,包括层次选择器: 1. ID选择器:$("#id"),选取具有特定ID的元素。 2. 标签选择器:$("标签名"),选取所有指定标签的元素。 3. 类选择器:$(".class"),选取具有特定类名...

    斯坦福机器学习ML公开课笔记1-15(完整版、带目录索引和NG原版讲义)

    公开课笔记10——VC维、模型选择、特征选择 公开课笔记11——贝叶斯正则化、在线学习、ML应用建议 公开课笔记12——K-Means、混合高斯分布、EM算法 公开课笔记13A——混合高斯模型、混合贝叶斯模型 公开课笔记13B-...

Global site tag (gtag.js) - Google Analytics