结合firebug学习jQuery选择器

本文将带领您深入探讨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()结束脚本性能测试。

命令行有命令记忆功能,可通过上、下箭头键选择已经输入过的命令。

 

参考:http://api.jquery.com/category/selectors/


相关文章:

1、jQuery选checkbox中的值
http://www.onexin.net/jquery-value-in-checkbox/

2、使用jQuery提高网页JS开发效率
http://www.onexin.net/improve-page-using-jquery-js-development-efficiency/

3、取代jQuery使用JavaScript标准语法
http://www.onexin.net/replace-the-jquery-javascript-standard-syntax/

4、jQuery兼容DISCUZ!系列产品权威指南
http://www.onexin.net/jquery-compatible-discuz-series-the-definitive-guide/

5、jQuery表单插件jquery.form.js用法详解
http://www.onexin.net/jquery-the-form-plugin-jquery-form-js-usage-detailed/

文章可转载:http://www.onexin.net/learning-jquery-selector-rookie-success-diary-combined-with-firebug/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值