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]


    选取属性等于给定字符串或以该字符为

    前缀(该字符串后跟一个连字符"-")的元素


    集合元素


    $("div[title|=‘en‘]")选取属性title为"en"或者以"en"开头字符串的<div>

    元素


    [attribute~=value]


    选取属性用空格分隔的值中包含一个给定值

    的元素


    集合元素


    $("div[title~=‘uk‘]")选取属性title用空格分隔值中包含"uk"的<div>

    元素


    [attribute1][attribute]

    ...[attributeN]


    一个复合属性选择器,没选择一次,缩小一

    次范围


    集合元素


    $("div[id][title$=test]")选取拥有属性id并且属性title以test结尾的

    <div>元素

    3.5 子元素过滤选择器

      在用子元素过滤选择器时要弄清父元素与子元素的关系。具体用法见表7

                                    表7                                   子元素过滤选择器


    选择器 


    描返


    返回 


    示例


    :nth-child

    (index/eve/

    odd/equation)


    选取每个父元素下的第index个

    子元素或者奇偶元素(index从1开始)


    集合元素


    :eq(index)只匹配一个元素,而:nth-child将为每一个

    父元素匹配子元素,并且:nth-child(index)的index是从1开始,

    而:eq(index)是从0开始。


    :first-child  


    选取每个父元素的第一个子元素


    集合元素


    :first只返回单个元素,而:first-child选择器将为每个父元素匹配

    第一个子元素。

    $("ul li:first-child")选取每一个ul中第一个<li>元素


    :last-child


    选取每个父元素的最后一个子元素


    集合元素


    $("ul li:last-chilid")选取每一个ul中的最后一个<li>元素


    :only-child


    如果某个元素是它父元素中的唯一一个

    子元素,那么它就会被匹配,如果父元

    素中含有其他元素,那么将不会匹配


    集合元素


    $("ul li:onyl-child")选取ul中是唯一子元素的<li>元素

    3.6 表单对象属性过滤选择器

      表单对象属性过滤选择器主要是针对表单元素中enabled、disabled、checked、selected等属性进行过滤。具体用法见表8

    表8                          表单对象属性过滤选择器


    选择器 


    描述


    返回


    示例


    :enabled


    选取所有可用元素


    集合元素


    $("#form1:enabled")选取id为"form1"的表单的所有可用元素


    :disabled


    选取所有不可用元素


    集合元素


    $("#form2:disabled")选取id为"form2"的表单中的所有不可用的元素


    :checked


    选取所有被选中的元素(单选框,复选框)


    集合元素


    $("input:checked")选取所有被选中的<input>元素


    :seleted


    选取所有被选中的选项元素(下拉列表)


    集合元素


    $("select option:selected")选取所有被选中的选项元素

    4.表单选择器

      专门用于开发者获取表单中的某个或者某种类型的元素。对于用户的交互性有着很重要的影响。具体用法见表9.

                 表9                         表单选择器


    选择器


    描述


    返回


    示例


    :input


    选取所有<input>、<textarea>、<select>

    和<button>元素


    集合元素


    $(":input")选取所有<input>、<textarea>、

    <select>和<button>元素


    :text


    选取所有的单行文本框


    集合元素


    $(":text")选取所有的单行文本框


    :password


    选取所有的密码框


    集合元素


    $(":password")选取所有的密码框


    :radio


    选取所有的单选框


    集合元素


    $(":radio")选取所有的单选框


    :checkbox


    选取所有的多选框


    集合元素


    $(":checkbox")选取所有的多选框


    :submit


    选取所有的提交按钮 


    集合元素


    $(":submit")选取所有的提交按钮


    :image


    选取所有的图相按钮


    集合元素


    $(":image")选取所有的图相按钮


    :reset


    选取所有的重置按妞


    集合元素


    $(":reset")选取所有的重置按钮


    :button


    选取所有的按钮


    集合元素


    $(":button")选取所有的按钮


    :file


    选取所有的上传域


    集合元素


    $(":file")选取所有的上传域


    :hidden


    选取所有的不可见元素


    集合元素


    $(":hidden")选取所有的不可见元素

    四、总结

    此次学习笔记主要写了关于jQuery选择器,jQuery选择器是jQuery的基础,只有将jQuery选择器熟练掌握,才能掌握jQuery中DOM操作、以及对表单、表格的操作、在Ajax的应用等等。

    五、参考资料:

    关于jQuery相关的文章:http://www.cnblogs.com/xia520pi/archive/2012/05/12/2497001.html

    jQuery学习笔记(一)jQuery选择器 :http://www.cnblogs.com/yanfengfree/p/3527608.html#t3

时间: 2024-10-25 17:12:54

jQuery笔记(一)jQuery选择器的相关文章

jquery笔记之属性选择器 查找以某种条件开头的页面元素

jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]")                查找所有含有 id 属性的div元素. $("div[id='ajaxa']")        查找 id 为 ajaxa 的 div 元素. $("div[id!='ajaxa']")       查找 id 不为 ajax

JQuery笔记:JQuery和JavaScript的联系与区别

来源:http://www.ido321.com/1019.html ps:LZ觉得这个标题有点大了,超出了能力范围,不喜勿碰.目前只记录LZ能力范围内的,日后持续补充. 一.JQuery对象和DOM对象的相互转化(<锋利的JQuery>) JQuery转化为DOM: 1.var jq = $('#selector');   var dom = jq[index]; 2.var jq1 = $('#selector1');  var dom1 = jq1.get(index) 或者 var d

【转】jquery笔记之属性选择器 查找以某种条件开头的页面元素

转自http://www.blogbus.com/public/tb.php/5734783/78340326/bb08a7032f23d19243c997a6192f9ba0 $("div[id]")                查找所有含有 id 属性的div元素. $("div[id='ajaxa']")        查找 id 为 ajaxa 的 div 元素. $("div[id!='ajaxa']")       查找 id 不为

jQuery:自学笔记(2)——jQuery选择器

jQuery:自学笔记(2)--jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font-size','18px') ID选择器 //使用id选择器改变背景颜色 $('#div1').css('background','red'); 说明:ID选择器中,ID前面必须加一个#,以表明这是一个jQuery的ID选择器. 类选择器 //使用类选择器设置字体样式 $('.spanclass')

锋利的jQuery学习笔记之jQuery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro

【学习笔记】锋利的jQuery(一)选择器

一.要点阐述 1,jQuery创建于2006年1月的一个开源项目,强调理念是“write less,do more”,压缩后大小30KB左右.. 2,jQuery里的方法都被设计程自动操作对象集合,而非单独的对象. 3,jq对象是jq对DOM对象进行包装后产生的对象,是一个类似数组的对象,可用[0]或get(0)方法转成DOM对象. 二.jQuery和其他js库的冲突解决 //jq库在其他库之前导入时需调用noConflict() 方式1(jQuery代替$): jQuery.noConflic

前端:jQuery笔记

前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收到服务器发送的AJAX请求,服务器端并不返回,而是将其Hold住,待到有东西要通知客户端时,才将这个请求返回. 客户端:请求异步Action,当接收到一个返回时,立即又再发送一个. 缺点:会长期占用一个Asp...阅读全文 posted @ 2015-02-10 12:01 逆心 阅读(1072)

第一百六十八节,jQuery,表单选择器

jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也可以使用 jQuery 为表单专门提供的选择器和过滤器来 准确的定位表单元素. 一.常规选择器 我们可以使用 id.类(class)和元素名来获取表单字段,如果是表单元素,都必须含有 name 属性,还可以结合属性选择器来精确定位. $('input').val(); //元素名定位,默认获取第一个

JQuery基本知识、选择器、事件、DOM操作、动画

1:基本选择器 <title></title> <script src="js/jquery-1.7.2.min.js"></script> </head> <body> <form id="form1" runat="server"> <div id="div1"> <a>aaaaa</a> <%--