`
jaychang
  • 浏览: 734616 次
  • 性别: Icon_minigender_1
  • 来自: 嘉兴
社区版块
存档分类
最新评论

jquery选择器详解

 
阅读更多

 通配符:

  $("input[id^='code']");//id属性以code开始的所有input标签

  $("input[id$='code']");//id属性以code结束的所有input标签

  $("input[id*='code']");//id属性包含code的所有input标签

根据索引选择

  $("tbody tr:even"); //选择索引为偶数的所有tr标签

  $("tbody tr:odd"); //选择索引为奇数的所有tr标签

获得jqueryObj下一级节点的input个数

  jqueryObj.children("input").length;

获得class为main的标签的子节点下所有<a>标签

  $(".main > a");

选择紧邻标签

  jqueryObj.next("div");//获取jqueryObj标签的后面紧邻的一个div,nextAll获取所有

 

筛选器  

//not

  $("#code input:not([id^='code'])");//id为code标签内不包含id以code开始的所有input标签

jQuery 的选择器借鉴了大量 CSS1 ~ CSS3 标准的特点,并且整理成一个强大的对象选择工具集。但要注意的是如果你的对象名里包含 “#;&,.+*~’:”!^$[]()=>|/” 这些元字符时,你必须用 “\\” 进行转义。例如你要选择文档里包含 “name=”names[]“” 的 input 元素时,在编写过滤规则时你必须先对 “[]” 进行转义,所以我们应该这样定义选择器:“$(“input[name=names\\[\\]]”)”。 

泛选择器(*)

在 jQuery 选择器里,“*” 号是一个通配符,表示所有。例如:

1
$("*").css("border","3px solid red")

上面的一句表示遍历页面里的所有容器,并且全部赋予一个线宽为 3px 的红色实线边框。还有一种情况是我们只需要对某些容器里的内容进行操作,我们可以这样写:

1
$("#test").find("*").css("border","3px solid red")

上一句只对 ID 为 test 的容器里的子容器产生效果,为它们加上线宽为 3px 的红色实现边框。

:animated 选择器

:animated 选择器是用来选择当前执行 jQuery 动画的元素的,严格来说是一个特征过滤器。例如:在空 HTML 文档里建一些 Div ,其中一个 ID 为 mover ,然后编写以下的 jQuery 语句

1
2
$("#mover").slideToggle("slow", animateIt);
$("div:animated").toggleClass("colored");

上面的代码执行后将先找到 ID 为 mover 的元素,并不断地进行展开和收缩的动画。然后浏览器遍历页面里所有的 Div 标签,如果该 Div (在这个例子里也就是 ID 为 mover 的 Div 了)正在执行动画的话,jQuery 将为这个 Div 加上 class=”colored”。具体的 Demo 可以看这个页面

属性选择器

jQuery 的属性选择器是其所有选择器最强大的一个,也是最灵活复杂的,具体情况还可以继续进行细分。

属性字头选择器(Attribute Contains Prefix Selector)

jQuery 属性字头选择器的使用格式是 jQuery(‘[attribute|=value]‘) ,例如 jQuery(‘[herflang|=en]‘) 这句代码执行时将会选择文档中所有含有 herflang 属性,并且 herflang 的值以 “en” 开头的元素,即使 “en” 后面紧跟着连字符 “-” 也能进行选择。

属性开头选择器(Attribute Starts With Selector)

jQuery(‘[attribute^=value]‘) ,用于选择属性的值以某个字符串开头的元素,但和 jQuery(‘[attribute|=value]‘) 的区别是,如果 value 的后面是一个连字符的话,这个元素不会被选择。例如 jQuery(‘[rel^=no]‘) 将会选择所有 rel 的值以 “no” 开头的元素,但类似于 rel=”no-****” 的元素不会被选择。

属性包含选择器(Attribute Contains Selector)

基本使用方法为 jQuery(‘[attribute*=value]‘),例如 jQuery(‘[rel*=no]‘),表示所有带有 rel 属性,并且 rel 的值里包含子字符串 “no” 的元素(如 rel=”nofollow”,rel=”yesorno” 等等)都将会被选择。

属性单词选择器(Attribute Contains Word Selector)

jQuery(‘[attribute~=value]‘),这个选择器的特别之处在于 value 的值只能必须是一个独立的单词(或者是字符串),例如 jQuery(‘[rel~=no]‘) ,此句在执行的时候会选择带有 rel=”yes or no” 的元素,但不会选择带有 rel=”yesorno” 的元素。这个选择器可以看做属性包含选择器的补充品,用于需要进行严格匹配的时候。

属性结尾选择器(Attribute Ends With Selector)

jQuery(‘[attribute$=value]‘) ,用于选择特定属性的值以某个字符串结尾的元素,例如 jQuery(‘[rel$=no]‘) 将会选择 rel 属性的值以 “no” 结尾的元素。

属性均等选择器(Attribute Equals Selector)

jQuery(‘[attribute=value]‘) ,只选择属性的值完全相等的元素,如:jQuery(‘[rel=nofollow]‘),则只选择 rel=”nofollow” 的元素,差一点都不行!

属性非等选择器(Attribute Not Equal Selector)

jQuery(‘[attribute!=value]‘) ,和 :not([attr=value]) 的效果一样,用于选择属性不等于某个值的元素,例如jQuery(‘[rel!=nofollow]‘),所有 rel=”nofollow” 的元素都不会被选择。

按钮选择器(:button Selector)

jQuery(‘:button’) ,所有的 <input type=”button”> 和 <button> 元素都会被选择。

Checkbox 选择器(:checkbox Selector)

jQuery(‘:checkbox’) ,所有的 <input type=”checkbox”> 元素都会被选择。

Checked 选择器(:checked Selector)

jQuery(‘:checked’) ,可以看做是 Checkbox 选择器的补充,用于选择所有已经被勾选的 Checkbox 对象。

子元素选择器(Child Selector)

jQuery(‘parent > child’),只选择 parent 的子元素(下一级元素),不对子元素以下的元素进行选择。

复合属性选择器  [attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(“input[id][name$='man']“) ;
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.

通过属性过滤(Attribute Filters)的学习,可以看出来,jQuery的选择器用法是微妙的,得细致而为之.让我想起来了那个因为一个小数点导致什么宇宙飞船爆炸还是什么的事了.有点耸人听闻,但是等我们使用的非常非常多了以后,自然就很容易分开区别了.

分享到:
评论

相关推荐

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

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

    jQuery 选择器详解

    $()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是. ...jQuery选择器的分类  jQuery的选择器基本可以分为四大类:  基本选择器(basic)  层次选择器(level)  过滤选择器(filter)  

    jquery选择器入门详解小案例

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

    jQuery选择器学习笔记

    ### jQuery选择器学习笔记 #### 一、引言 jQuery 是一个快速、小巧且功能丰富的库,极大地简化了 JavaScript 编程。其中的核心之一就是它的选择器系统,它基于 CSS 选择器,并提供了更多的灵活性和功能。本篇笔记...

    jQuery选择器全解.

    #### 三、基础选择器详解 1. **#id**:基于元素ID进行选择,如`$("#divId")`将选取ID为`divId`的唯一元素。 2. **element**:按元素名称选择,例如`$("a")`将选取页面上所有的`&lt;a&gt;`标签。 3. **.class**:根据元素...

    jQuery的实例及必知重要的jQuery选择器详解

    ### jQuery的实例及必知重要的jQuery选择器详解 #### jQuery能做什么 jQuery是一个快速、小型且功能丰富的JavaScript库。它可以实现以下功能: 1. **访问和操作DOM元素**:通过jQuery,开发者能够轻松地选择页面...

    Jquery选择器

    ### jQuery选择器详解 #### 一、概述 在前端开发领域,jQuery因其简洁高效的特点而备受开发者喜爱。作为一款优秀的JavaScript库,jQuery极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等方面的操作。其中...

    jQuery选择器

    **jQuery选择器详解** jQuery库以其简洁易用的API闻名,其中最重要的部分之一就是选择器。选择器在jQuery中扮演着查找HTML元素的关键角色,使得开发者可以轻松地选取DOM中的特定元素进行操作。本文将深入探讨jQuery...

    JQuery各种选择器详解

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

    jQuery选择器全集详解

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

    Jquery 选择器

    **jQuery 选择器详解** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和Ajax交互。其中,选择器是 jQuery 的核心功能之一,允许开发者高效地选取页面上的元素,进而进行操作。...

    JQuery选择器

    **jQuery选择器详解** 在Web开发中,jQuery库极大地简化了JavaScript操作,特别是其强大的选择器功能。jQuery选择器是jQuery库的核心特性之一,它允许开发者高效地选取DOM(Document Object Model)中的元素,进行...

    jquery选择器

    ### jQuery选择器详解 在网页开发中,jQuery作为一款功能强大的JavaScript库,极大地简化了DOM操作、事件处理、动画效果及Ajax交互等任务。其中,jQuery选择器是其核心功能之一,它允许开发者以简洁的语法来定位和...

    jQuery选择器大全

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

    jQuery开发技术详解

    第6章 使用选择器获得要操作的元素 第7章 操作得到的元素 第8章 使用jQuery进行DOM操作 第9章 jQuery中的事件处理 第10章 jQuery中的动画与效果 第11章 jQuery与AJAX 第12章 回头重看jQuery——核心及工具 第13章 ...

    jQuery选择器基础知识

    **jQuery选择器基础知识** jQuery是JavaScript的一个库,它极大地简化了DOM操作、事件处理和动画效果。其中,选择器是jQuery的核心功能之一,用于高效地选取DOM元素,从而实现对网页内容的控制和操作。本篇文章将...

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

    《jQuery选择器详解:掌握网页元素操作的利器》 jQuery选择器是JavaScript库jQuery的核心功能之一,它使得在DOM(文档对象模型)中查找、选择和操作特定元素变得极其简单。本文将详细介绍jQuery中的基本选择器、...

    jQuery颜色选择器ColorPicker

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

Global site tag (gtag.js) - Google Analytics