学习内容

  • jQuery层次选择器
  • jQuery属性选择器
  • jQuery表单选择器
  • jQuery过滤选择器

能力目标

  • 熟悉jQuery各种选择器的使用场合
  • 能熟练使用jQuery各种选择器

本章简介

上一章我初步接触了jQuery,并能够编写一些简单的jQuery代码,其中重点是jQuery基本选择器。jQuery的选择器非常强大,它是jQuery的根基,基本上任何操作都要依赖于选择器。本章重点学习jQuery选择器,包括层次选择器、属性选择器、表单选择器、内容选择器和过滤选择器等。

核心技能部分

4.1 jQuery选择器

jQuery选择器的主要功能是查找、匹配并获取页面元素,这是进行任何操作的前提。jQuery提供了众多功能强大且使用方便的选择器,完全能满足开发需求。

jQuery选择器使用起来非常简单,因为它完全继承了CSS选择器的风格,但是功能更强大,并且进行了跨浏览器处理。

jQuery选择器主要包括:基本选择器、层次选择器、属性选择器、表单选择器、内容选择器和过滤选择器。基本选择器在上一章已经做过介绍,此处不再多述,其他选择器会在下面逐一进行介绍。

4.1.1 层次选择器

层次选择器是通过DOM对象之间的层次关系来获取并匹配元素的,例如后代元素、子元素、相邻元素等,具体说明见表4-1-1所示。

表4-1-1 层次选择器

层次选择器

说明

$("ancestor  descendant")

匹配并获取ancestor元素里的所有后代descendant元素

$("parent > child")

匹配并获取parent元素里的子元素

$("prev + next")

匹配并获取紧挨着prev元素后的next元素

$("prev ~ siblings")

匹配并获取prev元素后的所有siblings元素

下面我们通过具体的示例来演示层次选择器的用法。

示例4.1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例4.1</title>
<script src="jquery-1.7.2.min.js"></script>
<style>
div{
width:120px;
}
.sec{
margin-left:15px;
}
.three{
margin-left:25px;
}
a:link,a:visited{
text-decoration:none;
color:black;
}
</style>
</head>
<body>
<div id="g1"><img src="img/jia.gif" /><a href="#" >国产</a>
  <div>
<div class="sec"><img src="img/jia.gif" /><a href="#" >北京奔驰</a></div>
<div class="sec">
                   <img src="img/jia.gif" /><a href="#" >北京现代</a>
<div>
<div class="three">
                   <img src="img/flag.gif"/><a href="#">悦翔</a>
                   </div>
<div class="three">
                   <img src="img/flag.gif"/><a href="#">索纳塔</a>
                   </div>
<div class="three">
                   <img src="img/flag.gif"/><a href="#">途胜</a>
                   </div>
<div class="three">
                   <img src="img/flag.gif"/><a href="#">伊兰特</a>
                   </div>
  </div>
    </div>
<div class="sec">
                 <img src="img/jia.gif" /><a href="#" >比亚迪</a>
         </div>
  </div>
</div>
</body>
</html>
<script>
alert($("#g1 div").html());
alert($("#g1 a").html());
alert($("#g1 .sec").size());
alert($("#g1 > .sec").size());
</script>

上述代码实现了一个如图4.1.1所示的树形层次结构,我们以此来演示jQuery层次选择器。

$("#g1  div")表示获取id是g1的元素里所有的后代div。

$("#g1  a")表示获取id是g1的元素的子元素a

$("#g1  .sec")两个选择器之间是空格,$("#g1 > .sec")两个选择器之间是>,具体差别可以通过最后两个弹出的对话框表现出来

$("#g1  .sec")表示获取id是g1的元素里所有的类名是.sec的元素,一共有3个。$("#g1 > .sec")也是获取id是g1的元素里类名是.sec的元素,但它只匹配g1里的子元素,即必须是g1的一级子节点,所以最终是0个。

示例4.1演示了表4-1-1中前两种层次选择器的用法,下面我们通过示例4.2演示后两种层次选择器的用法。

示例4.2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例4.2</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div>
<div id="g">测试</div>
<a href="#">悦翔</a><a href="#">索纳塔</a>
<div><a href="#">途胜</a></div>
<div><a href="#">悦动</a></div>
</div>
</body>
</html>
<script>
document.write("匹配#g+a<br/>");
$("#g+a").each(
function()
{
document.write($(this).html()+"<br/>");
}
);
document.write("匹配#g~a<br/>");
$("#g~a").each(
function()
{
document.write($(this).html()+"<br/>");
}
);
</script>

$("#g+a")表示获取id是g的元素后面的第一个超链接,所以第一个each只会循环输出一次,如图4.1.6所示。$("#g~a")表示获取id是g的元素后面的所有超链接,但必须是g的一级节点元素,所以第二个each会循环输出两次。

4.1.2 属性选择器

顾名思义,属性选择器是指通过元素某个属性及其值来匹配并获取相关元素的。具体说明见表4-1-2所示。

表4-1-2 属性选择器

属性选择器

说明

$(" selector [ attr ] ")

获取匹配selector选择器的并且拥有attr属性的元素

$(" selector [ attr =' val ' ] ")

获取匹配selector选择器的并且attr属性的值是val的元素

$(" selector [ attr !=' val ' ] ")

获取匹配selector选择器的并且attr属性的值不是val的元素

$(" selector [ attr ^=' val ' ] ")

获取匹配selector选择器的并且attr属性的值是以val开始的元素

$(" selector [ attr $=' val ' ] ")

获取匹配selector选择器的并且attr属性的值是以val结尾的元素

$(" selector [ attr *=' val ' ] ")

获取匹配selector选择器的并且attr属性的值包含val的元素

$(" selector [ ] [ ] [ ] ...")

属性选择器组合

下面通过一个示例来演示属性选择器的具体用法。该示例实现了一个注册表单,当用户单击【注册】按钮时对所有的文本框进行非空验证,如图4.1.7所示。

图4.1.7  注册页面

这里只给出脚本代码,如下所示。

示例4.3

<script>
$("#btn").click(      //单击事件
function()
{
$("input[type='text']").each(
function()
{
if($(this).val()=="")
{
alert("所有的文本框都必须填写!");
return false;
}
}
);
}
);
</script>

文本框元素的标签名是input,type属性的值是text,所以获取所有文本框的属性选择器就可以这样写:$("input[type='text']"),然后通过each( )逐个遍历,并通过val( )进行非空验证。

4.1.3 表单选择器

表单在Web前端开发中使用非常频繁,jQuery专门加入了表单选择器,这给开发人员操纵表单带来了极大的便利,详见表4-1-3所示。

表4-1-3  表单选择器

名称

说明

:input

匹配并获得表单中所有input, textarea, select和button元素

:text

匹配并获得所有的文本框

:password

匹配并获得所有密码框

:radio

匹配并获得所有单选按钮

:checkbox

匹配并获得所有复选框

:submit

匹配并获得所有提交按钮

:image

匹配并获得所有图片

:reset

匹配并获得所有重置按钮

:button

匹配并获得所有按钮

:file

匹配并获得所有文件域

:hidden

匹配并获得所有隐藏域

下面通过一个示例来演示表单选择器的具体用法

示例4.4

<script>

document.write("表单元素一共有:"+$(":input").size());

document.write("文本框一共有:"+$(":text").size());

document.write("复选框一共有:"+$(":checkbox").size());

document.write("单选按钮一共有:"+$(":radio").size());

</script>

通过查看图4.1.8,我们能判断出该表单中一共有10个元素,其中文本框1个,复选框3个,单选按钮2个

4.1.4 表单属性选择器

表单属性选择器是对表单选择器的有力补充,详见表4-1-4所示。

表4-1-4  表单属性选择器

名称

说明

:enabled

匹配并获得所有正常使用的元素

:disabled

匹配并获得所有禁用的元素

:checked

匹配并获得所有被选中的复选框

:selected

匹配并获得下拉列表框的选中项

示例4.5展示了表单属性选择器的具体用法,代码如下所示。

示例4.5

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例4.5</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<FORM>
  <TABLE width="50%" border="1">
    <TR>
      <TD>来自:</TD>
      <TD>
        <select name="select">
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="广州">广州</option>
        </select>      </TD>
    </TR>
    <TR>
      <TD>爱好:</TD>
      <TD>
        <input type="checkbox" value="篮球" name="hop">
        篮球
        <input type="checkbox" value="足球" name="hop">
        足球
        <input type="checkbox" value="排球" name="hop" checked="checked">
      排球</TD>
    </TR>
    <TR>
      <TD> </TD>
      <TD>
        <input type="button" id="btn" value="提交"/>
        <input type="reset" value="重置" disabled="disabled"></TD>
    </TR>
  </TABLE>
</FORM>
<p>
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
</body>
</html>
<script>
$("#btn").click(
function()
{
$("#content1").html("下拉列表框的选中项的值是:
"+$(":selected").val());
$("#content2").html("选中的复选框的值有:");
$("input:checked").each(
function()
{
$("#content2").html($("#content2").html()+$(this).val());
}
);
$("#content3").html("被禁用的元素的值是:
"+$("input:disabled").val());
}
)
</script>

上述代码使用表单属性选择器对下拉列表框好复选框进行了操作

4.1.5 内容选择器

内容选择器主要使用通过元素所包含的文本或子元素进行匹配或获取,详见表4-1-5所示。

表4-1-5  内容选择器

名称

说明

:contains ( txt )

匹配并获得包含有txt文本的元素

:empty

匹配并获得没有子元素或者文本的元素

:has ( selector )

匹配并获得包含有selector选择器的元素

示例4.6展示了内容选择器的具体用法,代码如下所示。

示例4.6

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例4.6</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div>I love jQuery</div>
<div>
<a href="www.baidu.com" id="a">百度</a>
<div></div>
</div>
<script>
document.write($("div:contains('jQuery')").html());
document.write($("div:empty").size());
document.write($("div:has('#a')").html());</script>
</body>
</html>

$("div:contains('jQuery')")表示获取包含jQuery文本的div;$("div:empty")表示获取不包含子元素或文本的元素;$("div:has('#a')")表示获取包含#a选择器的元素,运行效果如图4.1.11所示。

图4.1.11 运行效果

4.1.6 过滤选择器

过滤选择器是在获取到元素后通过索引进一步进行过滤或筛选,详见表4-1-6所示。

表4-1-6 过滤选择器

名称

说明

:first

获得匹配到的第一个元素

:last

获得匹配到的最后一个元素

:not ( selector )

获得除了匹配的元素之外的元素

:even

匹配所有索引值为偶数的元素,从0开始计数

:odd

匹配所有索引值为奇数的元素,从0开始计数

:eq ( index )

匹配一个给定索引值的元素,从0开始计数

:gt ( index )

匹配所有大于给定索引值的元素,从0开始计数

:lt ( index )

匹配所有小于给定索引值的元素,从0开始计数

示例4.7展示了过滤选择器的具体用法,代码如下所示。

示例4.7

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例4.7</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<table width="289" height="184" border="1">
  <tr>
    <td align="center">0</td>
    <td align="center">第0行</td>
  </tr>
  <tr>
    <td align="center">1</td>
    <td align="center">第1行</td>
  </tr>
  <tr>
    <td align="center">2</td>
    <td align="center">第2行</td>
  </tr>
  <tr>
    <td align="center">3</td>
    <td align="center">第3行</td>
  </tr>
  <tr>
    <td align="center">4</td>
    <td align="center">第4行</td>
  </tr>
  <tr>
    <td align="center">5</td>
    <td align="center">第5行</td>
  </tr>
  <tr>
    <td align="center">6</td>
    <td align="center">第6行</td>
  </tr>
  <tr>
    <td align="center">7</td>
    <td align="center">第7行</td>
  </tr>
  <tr>
    <td align="center">8</td>
    <td align="center">第8行</td>
  </tr>
</table>
<script>
document.write($("tr:first").html());
document.write($("tr:last").html());
$("tr:odd").each(
function()
{
document.write($(this).html());
}
);
$("tr:even").each(
function()
{
document.write($(this).html());
}
);
document.write($("tr:eq(5)").html());
$("tr:gt(6)").each(
function()
{
document.write($(this).html());
}
);
</script>
</body>
</html>

为了更清晰的演示过滤选择器的索引,我们在本示例中添加了一个9行2列的表格,然后使用各种过滤选择器获取表格中的行。

4.1.7 可见性选择器

可见性选择器比较简单,主要是通过显示/隐藏状态来获取和匹配元素的,详见表4-1-7。

表4-1-7  可见性选择器

名称

说明

:hidden

匹配所有的隐藏元素

:visible

匹配所有的可见元素

示例4.8展示了可见性选择器的具体用法,代码如下所示。

示例4.8

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例4.8</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<input  type="text" style="display:none" value="文本框1" />
<input type="text" style="display:block" value="文本框2"/>
<script>
alert($("input:hidden").val());
alert($("input:visible").val());
</script>
</body>
</html>

4.2 选择器注意事项

4.2.1 选择器中含有"."、"#"、"("、"]"特殊符号

根据W3C的规定,属性的值中是不能含有一些特殊字符的,例如"."、"#"、"("、"]"等。但在实际开发中可能会出现使用这些特殊字符的情况,例如下面的代码:

<div id="t#b">I Love jQuery</div>

<div id="t[1]"></div>

那么这时如果使用jQuery选择器来获取元素的话,代码如下所示:

$("#t#b").html();

$("#t[1]").html();

但是这样写是获取不到元素的,因为选择器包含有特殊字符,那么我们可以通过转义字符来解决这个问题。

$("#t\\#b").html();

$("#t\\[1\\]").html();

jQuery中使用\\来进行字符的转义。

4.2.2 选择器中的空格

选择器中有时需要出现空格,这需要大家特别注意,因为多一个空格和少一个空格会导致出现截然不同的效果,例如下面的代码。

示例4.9

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>示例4.9</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="test">
    	<div style="display:none">1</div>
        <div style="display:none">2</div>
        <div style="display:none">3</div>
        <div style="display:none">4</div>
    </div>
    <div class="test" style="display:none">5</div>
    <div class="test" style="display:none">6</div>
</body>
</html>
<script>
document.write($(".test :hidden").size());  //选择器中包含空格
document.write($(".test:hidden").size());  //选择器中没有空格
</script>

带有空格的$(".test :  hidden")表示后代选择器;而没有空格的$(".test:hidden")表示可见性选择器。

本章总结

选择器是jQuery的核心,基本上任何业务及功能的实现都需要选择器。jQuery提供了诸多功能强大的选择器,包括层次选择器、属性选择器、表单选择器、内容选择器等,内容比较多,大家在使用的时候要注意每种选择器的语法以及它们的适用场合。


任务实训部分

1:实现树形菜单

训练技能点

jQuery层次选择器

需求说明

在示例4.1的基础上使用jQuery层次选择器实现树形菜单的收缩/展开特效。单击一级、二级节点能够收缩和展开其下面的子节点。

2:实现表单验证

训练技能点

jQuery表单选择器

需求说明

按照图4.2.2所示的界面实现一个简单的表单,并使用jQuery表单选择器进行表单验证,要求:所有项都不能为空,密码长度必须大于等于8,单击“快速注册”图片时进行验证。

3:实现全选/全不选

训练技能点

Ø jQuery表单属性选择器

需求说明

按图使用jQuery表单选择器实现全选/全不选效果。

实现步骤

(1) 实现图4.2.3所示的界面,参考代码如下所示。

(2) 使用表单选择器实现全选/全不选效果,参考代码如下所示。

<script>

//#all表示全选复选框的id

function qx()

{

$(":checkbox").each(

function(){

$(this).get(0).checked=$("#all").get(0).checked;

}

)

}

</script>

4:表格隔行加背景色

训练技能点

Ø jQuery过滤选择器

需求说明

按照图界面,使用jQuery过滤选择器实现表格隔行背景变色的效果。

实现步骤

(1) 实现图4.2.4所示的界面

(2) 使用jQuery过滤选择器获取把表格中的奇数行(标题行除外)

(3) 把获取到得奇数行设置为灰色背景色,参考代码如下所示。

<script>

$("tr:gt(0):odd").each(

function()

{

$(this).get(0).style.backgroundColor="#CCCCCC";

}

)

</script>


巩固练习

一、选择题

1. 以下()不属于jQuery选择器。

A. 表单选择器

B. 子选择器

C. 层次选择器

D. 表单选择器

2. 以下关于jQuery层次选择器的说法正确的是()。

A. 层次选择器主要针对表单的使用

B. $("ancestor  descendant")和$("ancestor > descendant")所获取的元素一样

C. $("prev + next")和$("prev ~  next")所获取的元素一样

D. 通过层次选择器一次只能获得一个元素

3. 以下关于jQuery表单和表单属性选择器说法正确的是()。

A. 表单选择器只能用于表单

B. 表单属性选择器是表单选择器的附属,没有表单选择器就没有表单属性选择器

C. 表单选择器和表单属性选择器不能和其他选择器合用

D. :button选择器获得的按钮包括提交按钮和重置按钮

4. 下列关于jQuery选择器中特殊字符的说法错误的是()。

A. jQuery选择器中不能包含任何特殊字符

B. jQuery选择器可以包含空格

C. jQuery选择器支持转义字符

二、上机练习

数据库中的数据查询出来后,在前台用表格进行显示。但是由于部分数据不存在造成一些单元格是空的,现在要求使用jQuery选择器把空单元格中的空文本改为“暂无”。

WEB入门之十三 jQuery选择器的更多相关文章

  1. WEB入门之十二 jquery简介

    学习内容 jQuery简介 搭建jQuery开发环境 jQuery基本选择器 能力目标 熟悉jQuery开发环境 能编写简单的jQuery代码 本章简介 在前面两章,我们学习了JavaScript面向 ...

  2. JQuery选择器和DOM的操作-入门学习

    嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascr ...

  3. Web前端学习笔记之jQuery选择器

    JQuery过滤器 经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了.所有代码均经过测试.首先HTML代码 HTML Code <html><head ...

  4. jQuery入门、jQuery选择器、jQuery操作

    一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理 ...

  5. 精通jQuery选择器

    虽然jQuery上手简单,相比于其他库学习起来较为简单,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的方法和内部变化有上千种之多.初学者常常感到,入门很方便,提高很困难.本文的目标是 ...

  6. JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解

    JQuery选择器大全   jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素 ...

  7. Web入门

    目录 Web入门 学习web路线 前端基础 三剑客的作用 BS架构 数据格式 HTTP协议 四大特性 数据格式 HTTP 状态码分类 状态码列表 案例:简易的BS架构 Web入门 什么是前端? 任何与 ...

  8. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  9. jquery 选择器(name,属性,元素)大全

    jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...

随机推荐

  1. SpringCloud Eureka参数配置项详解(转)

    Eureka涉及到的参数配置项数量众多,它的很多功能都是通过参数配置来实现的,了解这些参数的含义有助于我们更好的应用Eureka的各种功能,下面对Eureka的配置项做具体介绍,供大家参考. Eure ...

  2. ML.NET 示例:多类分类之问题分类

    写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...

  3. webpack教程(一)——初体验

    首先全局安装webpack,再npm初始化一个项目,并局部安装webpack开发工具 $ npm install webpack -g npm init (项目名称) $ npm install we ...

  4. 分布式监控系统Zabbix-3.0.3-完整安装记录(0)

    一.Linux下开源监控系统简单介绍1)cacti:存储数据能力强,报警性能差2)nagios:报警性能差,存储数据仅有简单的一段可以判断是否在合理范围内的数据长度,储存在内存中.比如,连续采样数据存 ...

  5. Pupet自动化管理环境部署记录

    废话不多说了,下面记录下Puppet在Centos下的部署过程: puppet是什么puppet是一种基于ruby语言开发的Lnux.Unix.windows平台的集中配置管理系统.它使用自有的pup ...

  6. 5 questions

    1.软件开发中有哪几种过程模型? 2.详细设计有哪几种描述方法? 3.什么是需求分析? 4.软件设计的基本原理包括哪些内容? 5.简述文档在软件工程中的作用? 逸翔.

  7. 常见IP端口

    21端口:21端口主要用于FTP(File Transfer Protocol,文件传输协议)服务. 23端口:23端口主要用于Telnet(远程登录)服务,是Internet上普遍采用的登录和仿真程 ...

  8. 北京大学信息科学技术学院本科生课程体系课程大纲选登——计算机网络与WEB技术

  9. HDU 2081 手机短号

    Problem Description 大家都知道,手机号是一个11位长的数字串,同时,作为学生,还可以申请加入校园网,如果加入成功,你将另外拥有一个短号.假设所有的短号都是是 6+手机号的后5位,比 ...

  10. 服务器端发送邮件签名采用Data URI scheme包含图片

    要在服务器端基于HTML,拼接邮件内容,原来用户使用outlook采用了邮件签名,签名里含有公司Logo的图片,Outlook的msg文件里是专有的cid:xxxx,这里借用Data URI sche ...