使用jQuery简化Ajax开发(6)

来源:asp之家 时间:2010-04-11 21:09:00 

释放 jQuery 选择器的强大能量

我们经常会使用 ID 来选择元素,比如 #myid,或者通过类名,比如 div.myclass 来选择元素。然而,jQuery 提供了更为复杂和完整的选择器语法,允许我们在单个选择器中选择几乎所有的元素组合。

jQuery 的选择器语法主要是基于 CSS3 和 XPath 的。对 CSS3 和 XPath 了解的越多,使用 jQuery 时就越加得心应手。有关 jQuery 选择器的完整列表,包括 CSS 和 XPath,请参阅 参考资料 中的链接。

CSS3 包含一些并不是所有浏览器都支持的语法,因此我们很少使用它。然而,我们仍然可以在 jQuery 中使用 CSS3 选择元素,因为 jQuery 具备自己的自定义选择器引擎。比方说,要在表格中的每一个空列中都添加一个横杠,可以使用::empty 伪选择器(pseudo-selector):

$('td:empty').html('-');


如果需要找出所有不含特定类的元素呢? CSS3 同样提供了一个语法可以完成这个目的,使用 :not 伪选择器: 如下代码显示了如何隐藏所有不含 required 类的输入内容:

$('input:not(.required)').hide();


与在 CSS 中一样,可以使用逗号将多个选择器连接成一个。下面是一个同时隐藏页面上所有类型列表的简单示例:

$('ul, ol, dl').hide();


XPath 是一种功能强大的语法,用于在文档中搜寻元素。它与 CSS 稍有区别,不过它能实现的功能略多于 CSS。要在所有复选框的父元素中添加一个边框,可以使用 XPath 的 /.. 语法:

$("input:checkbox/..").css('border', '1px solid #777');


jQuery 中也加入了一些 CSS 和 XPath 中没有的选择器。比方说,要使一个表更具可读性,通常可以在表格的奇数行或偶数行中附加一个不同的类名 —— 也可以称作把表分段(striping)。使用 jQuery 不费吹灰之力就可以做到这点,这需要归功于 odd 伪选择器。下面这个例子使用 striped 类改变了表格中所有奇数行的背景颜色:

$('table.striped > tr:odd').css('background', '#999999');


我们可以看到强大的 jQuery 选择器是如何简化代码的。不论您想处理什么样的元素,不管这个元素是具体的还是模糊的,都有可能找到一种方法使用一个 jQuery选择器对它们进行定义。

标签:jQuery,Ajax,插件,开发
0
投稿

猜你喜欢

  • Python3 queue队列模块详细介绍

    2023-10-03 05:10:51
  • python+pytest接口自动化之日志管理模块loguru简介

    2021-10-25 14:41:34
  • 网页代码中键盘操作相关标签教程

    2010-03-18 15:56:00
  • 一些关于asp 购物车的想法

    2011-04-10 11:10:00
  • 全屏flash的尺寸分析

    2009-02-11 13:22:00
  • python对Excel的读取的示例代码

    2023-03-27 17:55:06
  • ASP调用系统ping命令代码

    2008-04-27 20:45:00
  • python微信好友数据分析详解

    2022-01-27 20:36:39
  • python-序列解包(对可迭代元素的快速取值方法)

    2023-12-28 23:23:57
  • Python Pycurl的属性与方法案例详解

    2022-09-27 04:57:23
  • 在asp中用集合成批操作数据库

    2008-03-10 17:22:00
  • Python下使用Trackbar实现绘图板

    2023-12-11 10:13:04
  • Python三目运算符(三元运算符)用法详解(含实例代码)

    2022-08-10 19:59:59
  • 使用Python画出小人发射爱心的代码

    2022-08-07 01:52:16
  • vue中v-show和v-if的异同及v-show用法

    2023-07-02 17:09:11
  • JavaScript异步编程之Promise的初步使用详解

    2024-04-30 08:53:58
  • javascript模拟php函数in_array

    2023-10-15 22:12:49
  • PHP中SimpleXML函数用法分析

    2023-06-23 11:52:09
  • IDA Pro 6.0使用Qt框架实现了跨平台的UI界面

    2022-12-05 05:07:55
  • eWebEditor不支持IE8/IE7的解决方法

    2010-02-28 10:27:00
  • asp之家 网络编程 m.aspxhome.com