jQuery教程 jQuery选择器学习总结-职坐标

jQuery教程 jQuery选择器学习总结

沉沙 2018-10-25 来源：阅读 1555 评论 0

摘要：本篇教程介绍了jQuery教程 jQuery选择器学习总结，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

本篇教程介绍了jQuery教程 jQuery选择器学习总结，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

在CSS中，选择器的作用是获取元素，而后为其添加CSS样式，美化其外观；jQuery选择器，不仅良好地继承了CSS选择器的语法，还集成了其获取页面元素便捷高效的特点，jQuery选择器与CSS选择器的不同之处就在于，jQuery选择器获取元素后，为该元素添加的是行为，使页面交互变得更加丰富。jQuery选择器浏览器兼容性更好。优势：①代码简洁；②处理机制完善；
　　1.基本选择器

名称

语法构成

描述

返回值

示例

标签选择器

element

匹配指定的标签名元素

元素集合

$(“h2”)选取所有h2元素

类选择器

.class

匹配指定的class元素

元素集合

$(“.tiltle”)选取所有以class为title的元素

Id选择器

#id

匹配指定的id元素

单个元素

$(“#title”)选取以id为title的元素

并集选择器

selector1,selector2,…,selecorN

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

元素集合

&(“div,p,.title”)选取所有div、p和class为title的元素

全局选择器

*

匹配所有元素

集合元素

$(“*”)选取所有元素
　　2.层次选择器

名称

语法构成

描述

返回值

示例

后代选择器

root offspring

选取root元素里的所有offspring(后代)元素

元素集合

$(“#menu span”)选取#menu下所有的<span>元素

子选择器

parent>child

选取parent元素下的child(子)元素

元素集合

$(“#menu>span”)选取#menu下的子元素<span>

相邻元素选择器

prev+next

选取紧邻prev元素之后的next元素

元素集合

$(“h2+dl”)选取紧邻<h2>元素之后的同辈元素<dl>

类似next()方法

同辈元素选择器

prev~siblings

选取prev元素之后的所有siblings（同辈）元素

元素集合

$(“h2~dl”)选取<h2>元素之后所有的同辈元素<dl>

类似nextAll()方法

注意：后代选择器选择范围：子、孙子、曾孙子……

            子选择器选择范围：子
　　3.属性选择器

　　从语法构成来看，它属于遵循CSS选择器；从类型来看，它属于jQuery中按条件过滤获取元素的选择器之一。

语法

描述

返回值

示例

[attribute]

选取包含指定属性的元素

元素集合

$(“[href]”)选取含有href属性的元素

[attribute=value]

选取等于指定属性是某个特定值的元素

元素集合

$(“[href=’#’]”)选取href属性值为’#’的元素

[attribute!=value]

选取不等于指定属性是某个值的元素

元素集合

$(“[href!=’#’]”)选取href属性值不为”#”的元素

[attribute^=value]

选取指定属性是以某些特定值开始的元素

元素集合

$(“[href^=’en’]”)选取href属性值以”en”开头的元素

[attribute$=value]

选取指定属性是以某些特定值结尾的元素

元素集合

$(“[href$=’.jpg’]”)选取href属性值以”.jpg”结尾的元素

[attribute*=value]

选取指定属性值包含某些值的元素

元素集合

$(“[href*=’txt’]”)选取href属性值中含有”txt”的元素
　　4.过滤选择器

　　过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中懂得伪类语法相同，即选择器都是以一个冒号（：）开头，冒号前是需要过滤的元素。例如，a:hover表示当鼠标指针移过<a>元素时，tr:visited表示当鼠标指针访问过<tr>元素后等。

　　按照不同的过滤条件，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。这里仅介绍分别介绍基本过滤选择器、可见性过滤选择器、表单属性过滤选择器，后续接触到其它再补充。
　　(1)基本过滤选择器

语法

描述

返回值

示例

:first

选取第一个元素

单个元素

$(“li:first”)选取所有<li>元素中的第一个<li>元素

:last

选取最后一个元素

单个元素

$(“li:last”)选取所有<li>元素中的最后一个<li>元素

:not(selector)

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

集合元素

$(“li:not(.three)”)选取class不是three的元素

:even

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

集合元素

$(“li:even”)选取索引是偶数的所有<li>元素

:odd

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

集合元素

$(“li:odd”)选取索引是奇数的所有<li>元素

:eq(index)

选取索引等于index的元素（index从0开始）

单个元素

$(“li:eq(1)”)选取索引等于1的<li>元素

:gt(index)

选取索引大于index的元素（index从0开始）

集合元素

$(“li:gt(1)”)选取索引大于1的<li>元素（注意：大于1，不包括1）

:lt(index)

选取索引小于index的元素（index从0开始）

集合元素

$(“li:lt(1)”)选取索引小于1的<li>元素（注意：小于1，不包括1）

:header

选取所有标题元素，如h1~h6

集合元素

$(“:header”)选取网页中的所有标题元素

:focus

选取当前获取焦点的元素

集合元素

$(“:focus”)选取当前获取焦点的元素

:animated

选择所有动画元素

集合元素

$(“:animated”)选取当前所有动画元素
　　(2)可见性过滤选择器

选择器

描述

返回值

示例

:visible

选取所有可见的元素

集合元素

$(“:visible”)选取所有可见的元素

:hidden

选取所有隐藏的元素

集合元素

$(“:hidden”)选取所有隐藏的元素

　　注意：选择器 :hidden获取的元素不仅包括样式属性display为 "none" 的元素，还包括文本隐藏域（<input type="hidden"/>和visibility :hidden之类的元素。）

　　　　　visibility:hidden----将元素隐藏但是在网页中该占的位置还是占着；

　　　　　display:none----将元素的显示设为无，即在网页中不占任何位置；
　　(3)表单属性过滤选择器

　　在介绍表单属性过滤选择器之前，先介绍jQuery表单选择器，为了方便表单验证，jQuery提供了专门针对表单的一类选择器，即表单选择器；
　　a、表单选择器

　　表单选择器就是用来选择文本输入框、按钮等表单元素的。

　　结合代码来介绍

　　示例1：

　　
复制代码

1    <--省略部分代码-->
2 <div class="main">
3         <form method="post" name="myform" id="myform">
4                     <h1 class="bold" colspan="2">注册休闲网</h1>
5
6                 <dl>
7                     <dt class="left">您的Email：</dt>
8                     <dd>
9                         <input type="hidden" name="userId" />
10                         <input id="email" type="text" class="inputs" /></dd>
11                 </dl>
12                 <dl>
13                     <dt class="left">输入密码：</dt>
14                     <dd>
15                         <input id="pwd" type="password" class="inputs" /></dd>
16                 </dl>
17                 <dl>
18                     <dt class="left">再输入一遍密码：</dt>
19                     <dd>
20                         <input id="repwd" type="password" class="inputs" /></dd>
21                 </dl>
22                 <dl>
23                     <dt class="left">您的姓名：</dt>
24                     <dd>
25                         <input id="user" type="text" class="inputs" /></dd>
26                 </dl>
27                 <dl>
28                     <dt class="left">性别：</dt>
29                     <dd>
30                         <input name="sex" type="radio" value="1" checked="checked" />
31                         男
32                         <input name="sex" type="radio" value="0" />
33                         女</dd>
34                 </dl>
35                 <dl>
36                     <dt class="left">出生日期：</dt>
37                     <dd>
38                         <select name="year">
39                             <option value="1998">1998</option>
40                         </select>年
41                          <select name="month">
42                              <option value="1">1</option>
43                          </select>月
44                        <select name="day">
45                            <option value="12">12</option>
46                        </select>日</dd>
47                 </dl>
48                 <dl>
49                     <dt class="left">爱好：</dt>
50                     <dd>
51                         <input type="checkbox" checked="checked" />编程
52                         <input type="checkbox" />读书
53                         <input type="checkbox" />运动
54                     </dd>
55                 </dl>
56                 <dl>
57                     <dt class="left">您的头像：</dt>
58                     <dd>
59                         <input id="fileImgHeader" type="file" />
60                         <img id="imgHeader" src="images/header1.jpg" />
61                         <input type="image" src="images/header2.jpg" /></dd>
62                 </dl>
63
64                 <dl>
65                     <dt> </dt>
66                     <dd>
67                         <input name="btn" type="submit" value="注册" class="rb1" />   
68                         <input name="btn" type="reset" value="重置" class="rb1" />
69                         <input type="button" style="display: none" />
70                         <button type="button" style="display: none"></button>
71                     </dd>
72                 </dl>
73         </form>
74     </div>
75 <--省略部分代码-->

复制代码

使用示例一的代码介绍表单选择器的语法如下表：

语法　

描述

示例

:input

匹配所有input、textarea、select和button元素

$(“#myform :input”)选取表单中所有的input、select和button元素

:text

匹配所有单行文本框，即type=”text”

$(“#myform :text”)选取Email和姓名两个input元素

:password

匹配所有密码框，即type=”password”

$(“#myform :password”)选取两个<input type=”password”/>元素

:radio

匹配所有单项按钮

$(“#myform :radio”)选取性别对应的两个<input type=”radio”/>元素

:checkbox

匹配所有复选框

$(“#myform :checkbox”)选取三个<input type=”checkbox”/>元素

:submit

匹配所有提交按钮

$(“#myform : submit”) 选取一个<input type=”submit”/>元素

:image

匹配所有图像域

$(“#myform : image”) 选取一个<input type=”image”/>元素

:reset

匹配所有重置按钮

$(“#myform : reset”) 选取一个<input type=” reset”/>元素

:button

匹配所有普通按钮

$(“#myform :button”)选取最后两个button元素

:file

匹配所有文件域

$(“#myform :file”) 选取一个<input type=” file”/>元素

:hidden

匹配所有不可见元素，

$(“#myform :hidden”)选取的元素包括三个option元素、一个<input type=”hiidden”/>元素、style=”display: none”的两个button元素
　　b、表单过滤选择器

　　示例2：
复制代码

<--省略部分代码-->
<div class="register">
        <form id="userform" name="userform">
            <p>
                编号：<input name="code" disabled="disabled"  value="10010"/>
            </p>
            <p>
                姓名：<input name="name" type="text"  value="张三"/>
            </p>
            <p>
                性别：<input name="sex" type="radio" value="1" checked="checked" /> 男
                      <input name="sex" type="radio" value="0" />女
            </p>
            <p>
                爱好：
                        <input type="checkbox" checked="checked"  />编程
                        <input type="checkbox" />读书
                        <input type="checkbox" />运动
            </p>
            <p>
                家乡：<select name="hometown">
                  <option value="1" selected="selected">北京</option>
                  <option value="2">上海</option>
                  <option value="3">天津</option>
              </select>
            </p>
        </form>
    </div>

<--省略部分代码-->

复制代码

使用示例2的代码介绍表单过滤选择器的语法如下表：

语法

描述

示例

:enabled

匹配所有可用元素

$(“#userform :enable”)匹配form内部除编号输入框外的所有元素

:disabled

匹配所有不可用元素

$(“#userform :disabled”)匹配编号输入框

:checked

匹配所有被选中元素（复选框、单项按钮、select中的option）

$(“#userform :checked”)匹配”性别”中的”男”选项和”爱好”中的”编程”选项

:selected

匹配所有选中的option元素

$(“#userform :selected”)匹配”家乡”中的”北京”选项
　　5.jQuery选择器的注意事项
　　　(1).选择器中含有特殊如号的注意事项

　　　　在W3C规范中，规定属性值中不能含有某些特殊字符，但难免会碰到表达式中有"#"和"."等特殊字的情况，若是按照一般情况来处理则会出错，这里就需要使用转义符转义。

　　例如：

1 <div id="id#a">aa</div>
2 <div id="id[2]">cc</div>

　　普通方式处理(错误)：　

1 $("#id#a");
2 $("#id[a]");

　　不能正确获取到元素，正确的写法需要在特殊符号前加"\\"如下：

$("#id\\#a");
$("#id\\[2\\]");

　　(2)选择器中含有空格的注意事项

　　选择器中空格也是不容忽视的，

　　例如：

　　

var $t_a = $(".test :hidden");   //带空格的jQuery选择器

　　以上代码选取的是class为 "test"的元素内部的隐藏元素

var $t_b = $(".test:hidden");   //不带空格的jQuery 选择器

　　以上代码选取的是隐藏的class为 "test"的元素