结合firebug学习jQuery选择器

最新推荐文章于 2022-05-31 16:51:15 发布

可口可乐的围脖

最新推荐文章于 2022-05-31 16:51:15 发布

阅读量620

点赞数

分类专栏： Selenium2.0&WebDriver JQuery

Selenium2.0&WebDriver 同时被 2 个专栏收录

155 篇文章

订阅专栏

JQuery

6 篇文章

订阅专栏

本文将带领您深入探讨jQuery中强大的选择器机制，包括如何选择DOM元素及其属性，以及如何通过过滤器筛选特定元素。通过实践操作，您将学会如何在网页中高效地选择和操作指定的对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery中的一切都围绕着它那强大到令人难以置信的选择器。当您看完本文后，您一定会为此而乐此不彼。

准备工作：

1、在firefox中安装firebug

2、新建一测试文件jq.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="test">
<p>This is test! <em>good!</em></p>
</div>
</body>
</html>

在firefox中打开测试页面，并在文字区使用firebug查看元素，并选择复制CSS路径，如下图：

进入firebug控制台，并在最下面>>>命令行执行以下代码：

$("html body div#test");

显示结果如下图：

到此，您以成功选择页面中指定的对像。

下面，我们更深入了解选择DOM元素：
一、选择器：
A、基本：使用标签类型、类名、ID或它们的任意组合进行元素选择；

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

B、层次：

$("html body div#test"); 选到body祖先元素后代元素test

C、属性：使用 XPath 表达式来选择带有给定属性的元素

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

二、过滤器：

以下参考：

jQuery 选择器

选择器	实例	选取
*	$(“*”)	所有元素
#id	$(“#lastname”)	id=”lastname” 的元素
.class	$(“.intro”)	所有的元素
element	$(“p”)	所有 <p> 元素
.class.class	$(“.intro.demo”)	所有且的元素

:first	$(“p:first”)	第一个 <p> 元素
:last	$(“p:last”)	最后一个 <p> 元素
:even	$(“tr:even”)	所有偶数 <tr> 元素
:odd	$(“tr:odd”)	所有奇数 <tr> 元素

:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列出 index 大于 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列出 index 小于 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不为空的 input 元素

:header	$(“:header”)	所有标题元素 <h1> – <h6>
:animated		所有动画元素

:contains(text)	$(“:contains(‘W3School’)”)	包含指定字符串的所有元素
:empty	$(“:empty”)	无子（元素）节点的所有元素
:hidden	$(“p:hidden”)	所有隐藏的 <p> 元素
:visible	$(“table:visible”)	所有可见的表格

s1,s2,s3	$(“th,td,.intro”)	所有带有匹配选择的元素

[attribute]	$(“[href]”)	所有带有 href 属性的元素
[attribute=value]	$(“[href=’#’]”)	所有 href 属性的值等于 “#” 的元素
[attribute!=value]	$(“[href!=’#’]”)	所有 href 属性的值不等于 “#” 的元素
[attribute$=value]	$(“[href$=’.jpg’]”)	所有 href 属性的值包含以 “.jpg” 结尾的元素

:input	$(“:input”)	所有 <input> 元素
:text	$(“:text”)	所有 type=”text” 的 <input> 元素
:password	$(“:password”)	所有 type=”password” 的 <input> 元素
:radio	$(“:radio”)	所有 type=”radio” 的 <input> 元素
:checkbox	$(“:checkbox”)	所有 type=”checkbox” 的 <input> 元素
:submit	$(“:submit”)	所有 type=”submit” 的 <input> 元素
:reset	$(“:reset”)	所有 type=”reset” 的 <input> 元素
:button	$(“:button”)	所有 type=”button” 的 <input> 元素
:image	$(“:image”)	所有 type=”image” 的 <input> 元素
:file	$(“:file”)	所有 type=”file” 的 <input> 元素

:enabled	$(“:enabled”)	所有激活的 input 元素
:disabled	$(“:disabled”)	所有禁用的 input 元素
:selected	$(“:selected”)	所有被选取的 input 元素
:checked	$(“:checked”)	所有被选中的 input 元素

firebug命令行的所有特殊函数请看下表：

命令	说明
$(id)	通过id返回Element。
$$(selector)	通过CSS选择器返回Element数组。
$x(xpath)	通过xpath表达式返回Element数组。
dir(object)	列出对象的所有属性，和在DOM标签页查看该对象的是一样的。
dirxml(node)	列出节点的HTML或XML的源代码树，和在HTML标签页查看改节点一样。
cd(window)	默认情况下，命令行相关的是顶层window对象，使用该命令可切换到frame里的window独享。
clear()	清空信息显示区，和单击按钮Clear功能一样。
inspect(object[, tabName])	监视一个对象。tabName表示在那个标签页对该对象进行监视，可选值为“html”、“css”、“script”和“dom”。
keys(object)	返回由对象的属性名组成的数组。
values(object)	返回由对象的属性值组成的数组。
debug(fn)	在函数的第一行增加一个断点。
undebug(fn)	移除在函数第一行的断点。
monitor(fn)	跟踪函数fn的调用。
unmonitor(fn)	不跟踪函数fn的调用。
monitorEvents(object[, types])	跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。
unmonitorEvents(object[, types])	不跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。
profile([title])	开始对脚本进行性能测试，可选参数title将作为测试结果的标题。
profileEnd()	结束脚本性能测试。