JavaScript/jQuery选择器简介

时间：2022-05-24 20:25:55

DOM提供的选择器

选择器是帮助我们选择页面元素的工具，在网站制作中常常会涉及到某个元素的改变，通过选择器提取这些元素可以很轻易的实现（DOM术语把所说的“元素”称作是“节点”）。JavaScript的选择器主要是由DOM（文档对象模型，Document Object Model）提供的两种主要的方法实现的，即document.getElementById（）和document.getElementsByTagName（）。遗憾的是，这两个方法都没有提供做出更细致的选择所需的控制。

下面就这两种方式做一个简要的说明：

①     document.getElementById（）

即通过ID获取一个元素，这意味着找到一个节点，而这个节点使用了一个唯一的ID。例如，假设我们在网页中定义了这样的一个标题：

<h1 id=head>页面元素选择器</h1>

那么我们通过document.getElementById（）来抓取这个节点的方式就是

document.getElementById（’head’）

这行代码的含义是“查找页面上ID为’head’的一个标签”。通过这样一个选择，我们就可以在自己的JavaScript的代码中对这个标签进行改动了（由于document.getElementById（）语句过长，因此通常把这个语句赋给一个变量，然后对这个变量进行操作）

varlookFor=document.getElementById（’head’）

②     document.getElementsByTagName（）

即通过TagName抓取节点，这意味着我们要获取一个元素的列表。有时候我们想要更多的元素，而不是document.getElementById（）所提供的一个单个元素。例如，我们需要获取页面上所有指向站点外部的链接，迫使这些链接以新窗口的方式打开。那么，我们通过document.getElementsByTagName（’a’）这个方式一下子就可以抓取这些元素了。在这种情况下，document.getElementsByTagName（）是将页面上指定的标签以数组的方式列出来。

友情提示：document.getElementById（）与document.getElementsByTagName（）在写法上的不同。

选择临近的节点

DOM除了以上两种方式抓取节点以外还提供了另外的几种方法来访问附近的节点。DOM把标签包含其他标签看作是一种关系，但是DOM只提供对“直接亲属”的访问。也就是说，DOM可以访问一个节点的“父亲”节点、“孩子”节点和“兄弟”节点（此处的关系可以与数据结构中的树的关系比作）。

如右图所示，以strong为例

父亲节点：p

兄弟节点：some ，text

孩子节点：important

P的孩子节点为：some，strong，text

下面我们来说明DOM提供的几种方法：

.childNodes

抓取当前节点的直接孩子的所有节点列表

var headline = document.getElementById(‘p’);

varheadlineKids = headline.childNodes;

那么headlineKids所表示的就是some，strong和text。

.parentNode

抓取当前节点的直接父亲节点

var headline = document.getElementById(‘strong’);

varheadlineParent=headline.parentNode;

那么headlineParent所表示的就是p。

.nextSibling和.previousSibling

抓取当前节点之后的节点和抓取当前节点之前的节点

var headline=document.getElementById(‘strong’);

varheadlineNext=headline.nextSibling;

varheadlinePrevious=headline.previousSibling;

那么headlineNext就表示text；headlinePrevious就表示 some。

总的来说DOM所提供的（就是JavaScript可以直接引用的）页面元素选择的方法就是以上几个。如下：

jQuery提供的选择器

jQuery为我们提供了更加丰富的选择器，是我们可以更加灵活的选择页面元素。在这里会列举一些主要的选择器（想要查看jQuery所有的选择器列表，你可以访问jQuery网站说明：http://docs.jquery.com/Selectors）

选择器分类

选择器名称

基本选择器

ID选择器

元素选择器

类选择器

高级选择器

子孙选择器

孩子选择器

相邻兄弟选择器

属性选择器

属性选择器

指定特定属性元素

匹配一个属性拥有一个具体值

匹配一个属性以一个特定值开始的元素

匹配一个属性以一个特定值结束的元素

匹配一个属性中任意位置包含了一个特定值的元素

基本选择器

ID选择器

使用jQuery和一个CSS ID选择器来选择应用一个ID的任何页面元素。假设我们在一个页面中有如下的一行代码：

<p id=”headtext”>welcome  to  our  school</p>

DOM选择方法：

varheadtext = document.getElementById(‘headtext’);

jQuery选择方法：

varheadtext=$(‘#headtext’);

注：jQuery在单引号里面用  #+id   来引用。

元素选择器

jQuery直接把标签名字传递过来就可以抓取了。仍然以上面的例子来看

DOM选择方法：

varheadtext = document.getElementsByTagName(‘p’);

jQuery选择方法：

varheadtext=$(‘p’);

注：jQuery在单引号里面直接引用标签名。

类选择器

DOM没有任何内建的方法来找到具有一个特定CSS属性的元素。jQuery可以在页面中抓取具有同一个类属性的标签。假设我们在一个网页的页面中添加了一个表格CSS样式.td_top。在网页多个地方有类似以下的代码：

<td class=td_top> something </td>

如果我们要选择以上带有td_top样式的单元格，我们就可以采用以下的方式选择：

$(‘.td_top’)

注：采用CSS选择器方法，在单引号里面用  .+class  来引用。

高级选择器

子孙选择器

这个方法提供了一种方式来找到一个标签中的另一个标签。假设我们有以下的一段无序列表代码：

<ul id=”navBar”><a href=”#”>这是一个例子</ul>

<ul id=”navBar1”><a href=”#”>这是一个例子</ul>

<ul id=”navBar2”><a href=”#”>这是一个例子</ul>

<ul id=”navBar3”><a href=”#”>这是一个例子</ul>

<ul id=”navBar4”><a href=”#”>这是一个例子</ul>

如果我们要选取第二行代码中的<a>标签，我们就可以采用这种方法：

$(‘#navBar1  a’)

即在单引号里面用一个选择器+空格+另一个选择器来引用

孩子选择器

以右图为例，some，strong和text是p的孩子，而important不是p的孩子，同样，important是strong的孩子。于是如果我们要选择strong可以使用下面的方法：

$(‘p > strong’)

注：首先列出父亲元素，然后是一个>  ,然后是孩子元素。

相邻兄弟选择器

仍然以右图为例，我们要选择strong后面的text属性，我们可以采用下面的方法：

$(‘strong + text’)

注：即在两个选择器之间加上一个加号就行了。

属性选择器

匹配一个属性拥有一个具体值

假设我们要在页面中选择出带链接的<a>标签（以形式：<a href=””></a>出现），方法如下：

$(a[href])

在标签选择器的后面加上属性即可。

如需要匹配具体值的话，只要在后面的属性上加上 = 那个值就行了

$(‘a[href=http://www.baidu.com]’)

这样就会寻找那些链接到http://www.baidu.com上的<a>标签

匹配一个属性以一个特定值开始的元素                              

假设我们要找到页面上所有<a>标签，并且在href后面以http://开头的属性。方法是[attribute^=value],这样就可以找出attribute后面以value为开始值的属性，而那些href后面不是以value开头的就不会被抓取。

$(‘a[href^=http://]’)

这行代码表示抓取页面上所有<a>标签，并且在href后面以http://开头的属性。

匹配一个属性以一个特定值结束的元素

这里的抓取方式与上面一个类似，不同点在于把上面的^换成$。

$(‘a[href$=.pdf]’)

这行代码表示抓取href后面以.pdf结尾的标签（实际上就是找出所有页面上连接大pdf的链接）。

匹配一个属性中任意位置包含了一个特定值的元素

这个选择器与上面两个也是类似的，只是把^换成*就可以了。不过它所代表的意义是指属性中的任意位置包含了一个特定值。例如：

$(‘a[href*=baidu.com]’)

这个语句就表示找出所有href后面包含baidu.com的链接。因此，上面的语句可以再页面上找出指向http://www.baidu.com，http://baidu.com，http://zhidao.baidu.com等等链接。

以上就是个人总结并参考《JavaScript：The Missing Manual》中文版内容所得，错误之处，欢迎指正。lanlan723820@126.com

相关文章