jQuery笔记jQuery选择器

Posted iwsx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery笔记jQuery选择器相关的知识，希望对你有一定的参考价值。

一、前言

编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含test的<a>元素", 完成这些工作只需要编写一个jQuery选择器字符串. 学习jQuery选择器是学习jQuery最重要的一步. 

二、Dom对象与jQuery对象的转换

(1) Dom转jQuery包装集 （$(Dom)）

如果要使用jQuery提供的函数,  就要首先构造jQuery包装集.  我们可以使用本文即将介绍的jQuery选择器直接构造jQuery包装集,比如:

  1. $("#testDiv");

    上面语句构造的包装集只含有一个id是testDiv的元素. 

    或者我们已经获取了一个Dom元素,比如:

  2. var div = document.getElementById("testDiv");

    上面的代码中div是一个Dom元素, 我们可以将Dom元素转换成jQuery包装集【重要】:

  3. var domToJQueryObject = $(div);

    小窍门:因为有了智能感知, 所以我们可以通过智能感知的方法列表来判断一个对象啊是Dom对象还是jQuery包装集.

     

    (2) jQuery包装集转Dom对象（索引或遍历）

    jQuery包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素:

  4. var domObject = $("#testDiv")[0];

    注意, 通过索引器返回的不再是jQuery包装集, 而是一个Dom对象!

    jQuery包装集的某些遍历方法,比如each()中, 可以传递遍历函数, 在遍历函数中的this也是Dom元素,比如:

  5. $("#testDiv").each(function() { alert(this) })

    如果我们要使用jQuery的方法操作Dom对象,怎么办? 用上面介绍过的转换方法即可:

  6. $("#testDiv").each(function() { $(this).html("修改内容") })

    小结: 先让大家明确Dom对象和jQuery包装集的概念, 将极大的加快我们的学习速度. 我在学习jQuery的过程中就花了很长时间没有领悟到两者的具体差异, 因为书上并没有专门讲解两者的区别, 所以经常被"this指针为何不能调用jQuery方法"等问题迷惑.  直到某一天豁然开朗, 发现只要能够区分这两者, 就能够在写程序时变得清清楚楚. 

     

    三、jQuery选择器中各类选择器

    　　jQuery的选择器大体分为四大类：基本选择器、层次选择器、过滤选择器、表单选择器。作为初学者而言，恐怕一时难以掌握如此之多的选择器，个人认为，掌握基本选择器以及会一些过滤选择器即可胜任大部分我们需要的操作。何况很多选择器与CSS如此相像！下面就分别来介绍这四大类选择器，其中过滤选择器还细分了6类，都用了表格的方式，这样即使到了以后项目中需要的时候也可以直接查阅这些表格。

    1.基本选择器（可以完成绝大多数的工作）

    　　具体介绍及用法见表1。

                                                 　表1                                           基本选择器　　

    选择器

    描述

    返回

    示例

    #id

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

      

    单个元素

    $("#test")选取id为test的元素

    .class　

    根据给定的类名匹配元素　

      

    集合元素　

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

    element

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

      

    集合元素

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

    *

    匹配所有元素

      

    集合元素

    $(*)选取所有元素

    selector1,selector2,

    ...,selectorN

    将每一个选择器匹配到的元素

    合并后一起返回

    集合元素　　

    $("div,span,p.myClass")选取所有<div>

    <span>和拥有myClass的<p>标签的一组

    元素

      

    2.层次选择器

    　　即通过DOM元素之间的层次关系来获取指定的元素，具体介绍及用法见表2

    　　　　　　　　　　　　表2                                                                 层次选择器

    选择器　

    描述　

    返回

    示例

    $("ancestor descendant")

    选取ancestor里的所有descendan

    元素

    集合元素

    $("div span\')选取<div>里的

    所有<span>元素

    $("parent>child")

    选取parent元素下的child元素　　

    集合元素　

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

    $("prev+next")

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

    单个元素

    $(".one+div")选取class为one的下个<div>同辈元素

    $("prev~siblings")

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

    集合元素

    $("#two~div")选取id为two的元素后面

    所有<div>同辈元素

     

    注意$("ancestor descendant")与$("parent>child")的区别：$("ancestor descendant")选取的是所有的后代元素，而$("parent>child")选取的只是其parent 元素下的子元素（child元素）。

     

    3.过滤选择器

    　　过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，选择器都以(:)开头。

    　　过滤选择器可以分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、和表单对象属性过滤选择器。

    3.1基本过滤选择器

    　　具体用法见表3

                                 　　 表3                   　　　　　　　　　　　　        基本过滤选择器

    选择器

    描述

    返回

    示例

    :first

    选取第一个元素

    单个元素

    $("div:first")选取所有<div>元素中的第一个<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的元素

    单个元素

    $("input:eq(0)")选取索引为0<input>元素

    :gt(indext)

    选取索引大于index的元素

    集合元素

    $("input:gt(1)")选取索引大于1的<input>元素

    :lt(index)

    选取索引小于index的元素

    集合元素

    $("input:lt(1)")选取索引小于1的<input>元素

    :header

    选取所有的标题元素

    集合元素

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

    :animated

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

    集合元素

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

    :focus

    选取当前获取焦点的元素

    集合元素

    $(":focus")选取当前获得焦点的元素

    3.2内容过滤选择器

     　　具体用法见表4

                                     表4                　　　　　　   　　　　        内容过滤选择器

    选择器

    描述　　

    返回

    示例

    :contains(text)

    选取文本内容为"text"的元素

    集合元素

    $("div:contains(\'我\')")选取含有文本"我"的<div>元素

    :empty

    选取不包含子元素或者文本的空元素

    集合元素

    $("div:empty")选取不包含子元素的<div>空元素

    :has(selector)

    选取含有选择器所匹配的元素的元素

    集合元素

    $("div:has(p)")选取含有<p>元素的<div>元素

    :parent

    选取含有子元素或者文本的元素

    集合元素

    $("div:parent")选取拥有子元素或者文本的<div>元素

    3.3可见性过滤选择器

    　　可见性过滤选择器是根据元素的可见和不可见的状态来选择相应的元素。具体见表5.

                     　                 表5             　　　　　　　　         可见性过滤选择器

    选择器

    描述

    返回

    示例

    :hidden

    选取所有不可见的元素

    集合元素

    $("input:hidden")选取所有不可见的<input>

    :visible

    选取所有可见的元素

    集合元素

    $("div:visible")选取所有可见的<div>元素

    3.4属性过滤选择器

    　　属性选择器的过滤规则是通过元素的属性来获取相应的元素，属性都用包含在[]中,并没有冒号。具体见表6.

                                       表6                     　　　　　　　　　　 属性过滤选择器

    选择器

    描述

    返回

    示例

    [attribute]

    选取拥有此属性的元素

    集合元素

    $("div[id]")选取拥有属性为id的<div>元素

    [attribute=value]

    选取属性值为value的元素

    集合元素

    $("div[title=test]")选取属性title为"test"的<div>元素

    [attribute!=value]

    选取属性值不为value的元素

    集合元素

    $("div[title!=test]")选取属性title不为"test"的<div>元素，没有属性titl

    e的<div>元素也为被选取

    [attribute^=value]

    选取属性的值以value开始的元素

    集合元素

    $("div[title^=test]")选取属性title以"test"开始的<div>元素

    [attribute$=value]

    选取属性的值以values结尾的元素

    集合元素

    $("div[title$=test]")选取属性title以"value"结束的<div>元素

    [attribute*=value]

    选取属性的值含有value的元素

    集合元素

    $("div[title*=test]")选取属性title中含有"title"的<div>元素

    [attribute|=value]

    (c)2006-2024 SYSTEM All Rights Reserved IT常识