JavaScript(jQuery)选择器简介

JavaScript jQuery 选择器简介选择器简介 原创原创 DOM 提供的选择器提供的选择器 选择器是帮助我们选择页面元素的工具 在网站制作中常常会涉及到某个元素的改变 通过选择器提取这些元素可以很轻易的实现 DOM 术语把所说的 元素 称作是 节点 JavaScript 的选择器主要是由 DOM 文档对象模型 Document Object Model 提供的两种 主要的方法实现的 即 document getElementById 和 document getElementsByTagName 遗憾的是 这两个方法都没有提供做出更细致的选 择所需的控制 下面就这两种方式做一个简要的说明 document getElementById 即通过 ID 获取一个元素 这意味着找到一个节点 而这个节点使用了一个唯一的 ID 例如 假设我们在网页中定义了这样的一个标题 页面元素选择器 那么我们通过 document getElementById 来抓取这个节点的方式就是 document getElementById head 这行代码的含义是 查找页面上 ID 为 head 的一个标签 通过这样一个选择 我们就 可以在自己的 JavaScript 的代码中对这个标签进行改动了 由于 document getElementById 语句过长 因此通常把这个语句赋给一个变量 然后对 这个变量进行操作 var lookFor 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 var headlineKids headline childNodes 那么 headlineKids 所表示的就是 some strong 和 text parentNode 抓取当前节点的直接父亲节点 var headline document getElementById strong var headlineParent headline parentNode 那么 headlineParent 所表示的就是 p nextSibling 和和 previousSibling 抓取当前节点之后的节点和抓取当前节点之前的节点 var headline document getElementById strong var headlineNext headline nextSibling var headlinePrevious headline previousSibling 那么 headlineNext 就表示 text headlinePrevious 就表示 some 总的来说 DOM 所提供的 就是 JavaScript 可以直接引用的 页面元素选择的方法就 是以上几个 如下 jQuery 提供的选择器提供的选择器 jQuery 为我们提供了更加丰富的选择器 是我们可以更加灵活的选择页面元素 在这 里会列举一些主要的选择器 想要查看 jQuery 所有的选择器列表 你可以访问 jQuery 网站 说明 选择器分类选择器名称 ID 选择器 元素选择器基本选择器 类选择器 子孙选择器 孩子选择器 相邻兄弟选择器 高级选择器 属性选择器 指定特定属性元素 匹配一个属性拥有一个具体值 匹配一个属性以一个特定值开始的元素 匹配一个属性以一个特定值结束的元素 属性选择器 匹配一个属性中任意位置包含了一个特定值的元素 基本选择器基本选择器 ID 选择器选择器 使用 jQuery 和一个 CSS ID 选择器来选择应用一个 ID 的任何页面元素 假设我们在一 个页面中有如下的一行代码 welcome to our school DOM 选择方法 var headtext document getElementById headtext jQuery 选择方法 var headtext headtext 注 jQuery 在单引号里面用 id 来引用 元素选择器元素选择器 jQuery 直接把标签名字传递过来就可以抓取了 仍然以上面的例子来看 DOM 选择方法 var headtext document getElementsByTagName p jQuery 选择方法 var headtext p 注 jQuery 在单引号里面直接引用标签名 类选择器类选择器 DOM 没有任何内建的方法来找到具有一个特定 CSS 属性的元素 jQuery 可以在页面中 抓取具有同一个类属性的标签 假设我们在一个网页的页面中添加了一个表格 CSS 样式 td top 在网页多个地方有类似以下的代码 something 如果我们要选择以上带有 td top 样式的单元格 我们就可以采用以下的方式选择 td top 注 采用 CSS 选择器方法 在单引号里面用 class 来引用 高级选择器高级选择器 子孙选择器子孙选择器 这个方法提供了一种方式来找到一个标签中的另一个标签 假设我们有以下的一段无 序列表代码 这是一个例子 这是一个例子 这是一个例子 这是一个例子 这是一个例子 如果我们要选取第二行代码中的标签 我们就可以采用这种方法 navBar1 a 即在单引号里面用 一个选择器 空格 另一个选择器 来引用 孩子选择器孩子选择器 以右图为例 some strong 和 text 是 p 的孩子 而 important 不是 p 的孩子 同样 important 是 strong 的孩子 于是如果我们要选择 strong 可以使用下面的方 法 p strong 注 首先列出父亲元素 然后是一个 然后是孩子 元素 相邻兄弟选择器相邻兄弟选择器 仍然以右图为例 我们要选择 strong 后面的 text 属性 我们可以采用下面的方法 strong text 注 即在两个选择器之间加上一个加号就行了 属性选择器属性选择器 匹配一个属性拥有一个具体值 假设我们要在页面中选择出带链接的标签 以形式 出现 方法 如下 a href 在标签选择器的后面加上属性即可 如需要匹配具体值的话 只要在后面的属性上加上 那个值就行了 a href 这样就会寻找那些链接到 上的标签 匹配一个属性以一个特定值开始的元素 假设我们要找到页面上所有标签 并且在 href 后面以 http 开头的属性 方法是 attribute value 这样就可以找出 attribute 后面以 value 为开始值的属性 而那些 href 后 面不是以 value 开头的就不会被抓取 a href http 这行代码表示抓取页面上所有标签 并且在 href 后面以 http 开头的属性 匹配一个属性以一个特定值结束的元素 这里的抓取方式与上面一个类似 不同点在于把上面的 换成 a href pdf 这行代码表示抓取 href 后面以 pdf 结尾的标签 实际上就是找出所有页面上连接大 pdf 的链接 匹配一个属性中任意位置包含了一个