8.2jQuery选择器

8/31/2020 8:52:25 PM 人评论次浏览

8.2　jQuery选择器

学习目标

熟悉jQuery的各种选择器。

选择器是jQuery技术中非常重要的内容，贯穿整个jQuery应用自始至终。不过在一开始学习使用jQuery时，可以先学习一些基本的选择器的用法，然后就直接进入应用，做过一些应用后，再回过头来看jQuery选择器这块内容，肯定会有更深入的理解，慢慢地也就领会jQuery内部的应用原理了。

8.2.1　文档就绪函数

在jQuery应用中，所有jQuery应用代码通常都位于一个document ready函数中（通常把这个函数称为文档就绪函数），函数格式如下：

$(document).ready(function(){
//jQuery functions code go here
});

其中$(document)是一个jQuery对象，ready()是$(document)对象的行为方法，function()表示当document全部下载完毕时执行的匿名函数，也就是说，$(document)对象的ready()行为方法引发后就会执行function()匿名函数中的代码，当然这里的匿名函数也可以使用显式函数fun_name来完成，代码如下：

$(document).ready(fun_name);
function fun_name()
{
  //jQuery functions code go here
}

只是使用匿名函数，更符合jQuery编码风格，简洁明了，故而一般都提倡使用匿名函数编写完成。

使用该函数，是为了防止文档在完全加载（就绪）之前运行jQuery代码。如果在文档没有完全加载之前就运行函数，操作可能失败。故此，所有jQuery应用代码都写在这个文档就绪函数中。也可以把jQuery文档就绪函数理解为是使用jQuery的一种代码格式规范。

8.2.2　核心函数$()

在jQuery中，无论用哪种类型的选择符还是要完成哪种类型的jQuery操作，都要从一个美元符号和一对圆括号开始：$()。所有能在样式表中使用的选择符，都能放到这个圆括号中的引号内，随后就可以对匹配的元素集合应用jQuery方法。可以说jQuery的全部功能都是从$()函数展开的，$()函数返回的总是一个jQuery对象，方便使用其他jQuery成员以完成更加复杂的网页效果。

例如：当鼠标滑动到id为mydiv的元素上时，让该元素的背景色变成#cccccc，而当鼠标滑走离开该元素后，让该元素的背景色变成#ff0000，就可以使用如下代码完成。

$(document).ready(function(e) {
  $("#mydiv").mouseover(function(){
    $(this).css("background-color","#cccccc");
  });
  $("#mydiv").mouseout(function(){
    $(this).css("background-color","#ff0000");
  });
});
但是由于$()函数返回的总是一个jQuery对象，则上边的代码就可以简化为：
$(document).ready(function(e) {
  $("#mydiv").mouseover(function(){
    $(this).css("background-color","#cccccc");
  }).mouseout(function(){
    $(this).css("background-color","#ff0000");
  });
});

8.2.3　元素选择器

网页元素由许多不同的HTML标签元素组成，jQuery可以直接选择网页元素以获取一个jQuery对象，进而就可以使用jQuery提供的行为方法完成具体操作。

例如：$("p")就是选择整个网页中的所有标签，而$("p").css("color"，"#FF0000")的意思就是让网页中的全部标签中的文字颜色都显式为# FF0000颜色，标签可以如此操作，其他所有的HTML标签元素都可以如此选择操作。

8.2.4　样式选择器

网页的美化离不开样式定义，通常对于网页元素的样式定义一般有两种情形，分别是class和id。

比如要选择，就可以使用$(".title")，而$(".title")并非选择这一个元素而是选择整个网页中全部class=title的元素。

比如要选择，就可以使用$("#title")，而$("#title")的含义就是选择整个网页中全部id=title的元素中的第一个元素，而并非id=title的全部元素，由甴于网页中的id定义不建议重复，故此，使用$("#title")可以唯一选择网页中某个元素。

比如：

...
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(e) {
  $(".title").click(function(){
    alert("你单击了class=title所有元素都会显示的对话框");
  });
  $("#title").click(function(){
    alert("你单击了id=title的第一个元素会显示的对话框");
  });
});
</script>
<body>
<p>
1.1 Web程序设计语言产生背景<br />
  1.1.1 Web概述<br />
  1.1.2 Web应用程序工作原理<br />
</p>
<p class="title">
1.2 Visual Studio 2012开发环境<br />
  1.2.1 安装Visual Studio 2012<br />
  1.2.2 配置Visual Studio 2012开发环境<br />
</p>
<p class="title">
1.3 .Net Framework与C#<br />
  1.3.1 什么是.Net Framework?<br />
  1.3.2 关于C#开发语言<br />
</p>
<p id="title">
1.4 ASP.NET运行环境<br />
  1.4.1 使用IIS管理aspx页面<br />
  1.4.2 使用Visual Studio 2012管理aspx页面<br />
</p>
<p id="title">
1.5 使用ASP.NET缘由<br />
  1.5.1 C#面向对象编程语言<br />
  1.5.2 代码与网页分离<br />
</p>
</body>
...

8.2.5　属性选择器

在选择网页元素时，也可以使用元素属性做条件来选择网页元素，通常jQuery使用XPath表达式来选择带有给定属性的元素。

例如：

$("[href]") 选取所有带有href属性的元素。
$("[href='#']") 选取所有带有href值等于"#"的元素。
$("[href!='#']")选取所有带有href值不等于"#"的元素。
$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
$("[href^='http://']")选取所有href值以"http://"开始的元素。

8.2.6　更多选择器举例

表8-1列出了一些jQuery选择器。

表8-1　jQuery选择器

文章教程

8.2jQuery选择器